babylonjs shader学习之shadertoy案例四

代码 

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.28318530718

    varying 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);
  });
};

贴图

原文地址：https://blog.csdn.net/weixin_41718879/article/details/143509237

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！