html河流效果,HTML5/Three.js水面波纹着色器动画

HTML

导入代码模板：

uniform float delta;

varying vec4 vPos;

void main () {

vec2 center = vec2(0.5, 0.5);

float x = position.x;

float y = position.y;

float z = position.z;

vec4 newPosition = vec4(x, y, z, 1.0);

vec4 modelViewPosition = modelViewMatrix * newPosition;

vPos = modelViewPosition;

gl_Position = projectionMatrix * modelViewPosition;

}

uniform float delta;

varying vec4 vPos;

void main() {

float r = 0.25;

float g = 0.25;

float b = 0.25;

g = vPos.x + sin(cos(vPos.y) * 5.0 + cos(vPos.x) * 2.5 + delta / 500.0) * 5.0;

b = cos(g + vPos.x + vPos.y + delta / 1000.0) * 5.0;

gl_FragColor = vec4(r, g, b, 1.0);

}