WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js着色器——UV动画

UV动画的实现方式,一种是通过Texture偏移属性offset实现UV动画,另一种方式是通过着色器代码的方式实现UV动画。

Texture偏移属性offset实现UV动画

.wrapS定义了纹理如何水平包裹,并对应于UV映射中的U.

.wrapT这定义了纹理垂直包裹的方式,与UV映射中的V相对应.

var texture = textureLoader.load('./大气.png');
// 设置重复的作用是:能够让一个效果循环
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

渲染函数周期性执行的过程中,Three.js纹理对象Texture的偏移属性offset两个分量x和y递增或递减。

// 渲染函数
function render() {
  // 每次渲染对纹理对象进行偏移,不停的偏移纹理,就产生了动画的效果
  texture.offset.x -= 0.001;
  texture.offset.y += 0.001;
  group.rotateY(-0.005)
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

着色器中uniform变量更新

通过自定着色器代码的方式实现UV动画,基本思路就是在片元着色器中声明一个时间变量time,然后在JavaScript代码中更新着色器中的时间变量time。时间变量time变化后,通过vec2 newT= vUv + vec2( -0.02, 0.02 ) * time;改变插值后的纹理坐标vUV,纹理坐标变化了,渲染的时候,纹理采样的结果肯定发生了变化。

片元着色器中声明的一个时间变量time

// 声明一个时间变量用来控制UV动画
uniform float time;
// 声明一个纹理对象变量
uniform sampler2D texture;
// 顶点片元化后有多少个片元就有多少个纹理坐标数据vUv
varying vec2 vUv;
void main() {
  vec2 newT= vUv + vec2( -0.02, 0.02 ) * time;
  //通过偏移后的纹理坐标newT采样像素
  gl_FragColor = texture2D( texture, newT );
  // 大气层整体透明度增加
  gl_FragColor.a *=0.6;
}

通过自定义着色器ShaderMaterial的属性.uniforms设置传递给片元着色器中的变量time的值

uniforms: {
  // 对应片元着色器中的时间变量time
  time: {
    value: 0.0
  },
},

在渲染函数中不停地更新ShaderMaterial对象uniforms属性的时间变量time的值,每次执行新的渲染,Threejs系统会自动更新片元着色器中的时间变量time的值。

// 创建一个时钟对象T
var T = new THREE.Clock();
// 渲染函数
function render() {
  // 获得两次渲染的时间间隔deltaTime
  var deltaTime = T.getDelta();

  // 更新uniforms中时间,这样就可以更新着色器中time变量的值
  material.uniforms.time.value += deltaTime;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com