andras/sdf-2d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make noise 2D

Browse source
This commit is contained in:
schmelczerandras 2020-10-13 23:00:00 +02:00
parent 98f0b381b8
commit 0cca5d9800
3 changed files with 50 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/graphics/rendering/renderer/noise-renderer.ts
View file

@ -8,13 +8,13 @@ import randomVertex100 from '../shaders/random-vs-100.glsl';
import randomVertex from '../shaders/random-vs.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 * then destroy the used resources, while returning the generated texture
* in the form of a canvas. * in the form of a canvas.
* *
* @param textureSize The resolution of the end result. * @param textureSize The resolution of the end result.
* @param scale A starting value can be 60 * @param scale A starting value can be 15
* @param amplitude A starting value can be 0.125 * @param amplitude A starting value can be 1
* @param ignoreWebGL2 Ignore WebGL2, even when its available. * @param ignoreWebGL2 Ignore WebGL2, even when its available.
*/ */
export const renderNoise = async ( export const renderNoise = async (

39
src/graphics/rendering/shaders/random-fs-100.glsl
View file

@ -7,26 +7,35 @@ varying vec2 uvCoordinates;
uniform float scale; uniform float scale;
uniform float amplitude; uniform float amplitude;
float noise(float x){ // source: https://www.shadertoy.com/view/XdXGW8
return fract(sin(x) * 43758.5453123) / 100.0; 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 noise(vec2 st) {
float result = 0.0; vec2 i = floor(st);
vec2 f = fract(st);
float frequency = 0.01; vec2 u = f * f * (3.0 - 2.0 * f);
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;
}
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() { 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);
} }

38
src/graphics/rendering/shaders/random-fs.glsl
View file

@ -7,28 +7,36 @@ in vec2 uvCoordinates;
uniform float scale; uniform float scale;
uniform float amplitude; uniform float amplitude;
float noise(float x){ // source: https://www.shadertoy.com/view/XdXGW8
return fract(sin(x) * 43758.5453123) / 100.0; 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 noise(vec2 st) {
float result = 0.0; vec2 i = floor(st);
vec2 f = fract(st);
float frequency = 0.01; vec2 u = f * f * (3.0 - 2.0 * f);
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;
}
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; out vec4 fragmentColor;
void main() { 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);
} }