Organic Noise Terrain
Top-down view of generating terrain dynamically lit by the mouse.
60 FPS • WebGL Shader
GLSL Fragment Shader
#version 300 es
precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; out vec4 f;
float hash(vec2 p){return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453);}
float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}
float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p*=2.;a*=.5;}return v;}
void main(){
vec2 uv = gl_FragCoord.xy/u_resolution.y;
float h = fbm(uv*5.0 + u_time*0.2);
vec2 e = vec2(0.01,0);
vec3 n = normalize(vec3(fbm(uv*5.+e.xy)-h, fbm(uv*5.+e.yx)-h, 0.05));
vec3 l = normalize(vec3(u_mouse - gl_FragCoord.xy/u_resolution.xy, 0.5));
float diff = max(dot(n,l), 0.0);
f = vec4(vec3(0.2,0.6,0.3)*h + vec3(diff*0.5), 1.0);
} Properties
#glsl#terrain#noise
Author: Math Art Core Target: 60 FPS