代码
const onSceneReady = (scene: Scene) => {(scene.activeCamera as ArcRotateCamera).beta = 1.185793134378305;const light = new HemisphericLight('light', Vector3.Down(), scene);light.intensity = 1;const plane = MeshBuilder.CreatePlane('ground', { width: 10, height: 10 }, scene);Effect.ShadersStore['planeMatVertexShader'] = `precision highp float;attribute vec3 position;attribute vec2 uv;attribute vec3 normal;uniform mat4 worldViewProjection;varying vec2 vUV;varying vec3 vPosition;void main(){vPosition = position;gl_Position = worldViewProjection * vec4(position, 1.0);vUV = uv; }`;Effect.ShadersStore['planeMatFragmentShader'] = `precision highp float;#define PI 3.141592653#define PI2 6.28318530718varying vec2 vUV;varying vec3 vPosition;uniform float u_time;uniform sampler2D u_texture;uniform float u_duration;void main(){vec2 p = -1.0 + 2.0 * vUV;float len = length(p);vec2 ripple = vUV + (p/len)*cos(len*12.0-u_time*4.0)*0.03;float delta = u_time / u_duration;vec2 uv = mix(ripple, vUV , 0.5);vec3 color = texture2D(u_texture,uv).rgb;gl_FragColor = vec4(color,1.0);}`;const shaderMat = new ShaderMaterial('mat', scene, 'planeMat', {attributes: ['position', 'uv', 'normal'],uniforms: ['worldViewProjection', 'u_time'],samplers: ['u_texture'],needAlphaBlending: true,needAlphaTesting: true});shaderMat.backFaceCulling = false;plane.material = shaderMat;let step = -5;let u_time = 0;const u_duration = 2.0;const texture = new Texture('textures/ripple.jpg');scene.onBeforeRenderObservable.add(() => {step += 0.1;u_time += scene.getEngine().getDeltaTime() / 1000;if (step > 5) {step = -5;}});shaderMat.onBindObservable.add(() => {shaderMat.getEffect().setFloat('step', step);shaderMat.getEffect().setFloat('u_time', u_time);shaderMat.getEffect().setTexture('u_texture', texture);shaderMat.getEffect().setFloat('u_duration', u_duration);});
};
贴图