I am rendering a plane made of many triangles in WebGL 2 using Three.js, and I want to offset the vertices in the plane according to a Perlin noise function. However, my noise function seems to work in the fragment shader, but not in the vertex shader.
vertex shader:
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
// supplied by three
in vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPosition;
// supplied by me
uniform float spacing;
uniform vec2 offset;
uniform vec2 size;
out vec3 offsetPosition;
void main() {
// vec3 offsetPosition = position;
offsetPosition = position + vec3(offset.x, 0, offset.y);
offsetPosition.z = floor((cameraPosition.z + offsetPosition.z) / spacing) * spacing;
offsetPosition.y = perlin_noise(offsetPosition.xz / 10.) * 10.;
gl_Position = projectionMatrix * modelViewMatrix * vec4(offsetPosition, 1.0);
}
fragment shader:
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
in vec3 offsetPosition;
out highp vec4 fragColor;
void main() {
float value = perlin_noise(offsetPosition.xz / 10.) * .5 + .5;
fragColor = vec4(value, offsetPosition.y, 0., 1.);
}
result:
The plane is completely flat (there are lots of triangles in that image, I swear), and appears red instead of yellow/green, which suggests that offsetPosition.y
is being set to zero, which means that my Perlin noise function, which is identical in the vertex shader and the fragment shader, is returning 0 in the vertex shader only. Why is this happening?