diff --git a/src/graphics/rendering/renderer/noise-renderer.ts b/src/graphics/rendering/renderer/noise-renderer.ts index 0449939..54e0332 100644 --- a/src/graphics/rendering/renderer/noise-renderer.ts +++ b/src/graphics/rendering/renderer/noise-renderer.ts @@ -8,13 +8,13 @@ import randomVertex100 from '../shaders/random-vs-100.glsl'; import randomVertex from '../shaders/random-vs.glsl'; /** - * Create a renderer, draw a (1D) noise texture with it, + * Create a renderer, draw a 2D noise texture with it, * then destroy the used resources, while returning the generated texture * in the form of a canvas. * * @param textureSize The resolution of the end result. - * @param scale A starting value can be 60 - * @param amplitude A starting value can be 0.125 + * @param scale A starting value can be 15 + * @param amplitude A starting value can be 1 * @param ignoreWebGL2 Ignore WebGL2, even when its available. */ export const renderNoise = async ( diff --git a/src/graphics/rendering/shaders/random-fs-100.glsl b/src/graphics/rendering/shaders/random-fs-100.glsl index 1021b2d..67fe805 100644 --- a/src/graphics/rendering/shaders/random-fs-100.glsl +++ b/src/graphics/rendering/shaders/random-fs-100.glsl @@ -7,26 +7,35 @@ varying vec2 uvCoordinates; uniform float scale; uniform float amplitude; -float noise(float x){ - return fract(sin(x) * 43758.5453123) / 100.0; +// source: https://www.shadertoy.com/view/XdXGW8 +vec2 random2(vec2 st){ + st = vec2( + dot(st, vec2(127.1,311.7)), + dot(st, vec2(269.5,183.3)) + ); + return -1.0 + 2.0 * fract(sin(st) * 43758.5453123); } -float terrain(float x) { - float result = 0.0; +float noise(vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); - float frequency = 0.01; - float amplitude = 1.0; - - const float pi = 3.141592654; - for (int i = 0; i < 8; i++) { - result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude; - frequency *= 1.5; - amplitude /= 1.2; - } + vec2 u = f * f * (3.0 - 2.0 * f); - return result; + return mix( + mix( + dot(random2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)), + dot(random2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x + ), + mix( + dot(random2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), + dot(random2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x + ), + u.y + ); } + void main() { - gl_FragColor = vec4(vec3(terrain(uvCoordinates.x * scale) * amplitude + 0.5), 1.0); + gl_FragColor = vec4(vec3(noise(uvCoordinates * scale) * 0.5 * amplitude + 0.5), 1.0); } diff --git a/src/graphics/rendering/shaders/random-fs.glsl b/src/graphics/rendering/shaders/random-fs.glsl index 0fb3054..48bfb4d 100644 --- a/src/graphics/rendering/shaders/random-fs.glsl +++ b/src/graphics/rendering/shaders/random-fs.glsl @@ -7,28 +7,36 @@ in vec2 uvCoordinates; uniform float scale; uniform float amplitude; -float noise(float x){ - return fract(sin(x) * 43758.5453123) / 100.0; +// source: https://www.shadertoy.com/view/XdXGW8 +vec2 random2(vec2 st){ + st = vec2( + dot(st, vec2(127.1,311.7)), + dot(st, vec2(269.5,183.3)) + ); + return -1.0 + 2.0 * fract(sin(st) * 43758.5453123); } -float terrain(float x) { - float result = 0.0; +float noise(vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); - float frequency = 0.01; - float amplitude = 1.0; - - const float pi = 3.141592654; - for (int i = 0; i < 8; i++) { - result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude; - frequency *= 1.5; - amplitude /= 1.2; - } + vec2 u = f * f * (3.0 - 2.0 * f); - return result; + return mix( + mix( + dot(random2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)), + dot(random2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x + ), + mix( + dot(random2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), + dot(random2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x + ), + u.y + ); } out vec4 fragmentColor; void main() { - fragmentColor = vec4(vec3(terrain(uvCoordinates.x * scale) * amplitude + 0.5), 1.0); + fragmentColor = vec4(vec3(noise(uvCoordinates * scale) * 0.5 * amplitude + 0.5), 1.0); }