来自uv偏移量的three.js – GLSL webgl lerp法线

前端之家收集整理的这篇文章主要介绍了来自uv偏移量的three.js – GLSL webgl lerp法线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在平面512px * 512px(100×100段)的平面上有一个位移图,因为位移图的图像向左滚动顶点到高度位置并不平滑,我一直在看混合()函数和平滑步()将时间变换为他们的位置,但我很难实施它.
  1. uniform sampler2D heightText; //texture greyscale 512x512
  2. uniform float displace;
  3. uniform float time;
  4. uniform float speed;
  5.  
  6. varying vec2 vUV;
  7. varying float scaleDisplace;
  8.  
  9. void main() {
  10. vUV = uv;
  11. vec2 uvOffset = vUV + vec2( 0.1,0.1)* time; // animates offset
  12. vec2 uvCo = vUV + vec2( 0.0,0.0);
  13. vec2 texSize = vec2(-0.8,0.8); // scales image larger
  14.  
  15. vec4 data = texture2D( heightText,uvOffset + fract(uvCo)*texSize.x);
  16. scaleDisplace = data.r;
  17.  
  18. //vec3 possy = normal * displace * scaleDisplace;
  19.  
  20. vec3 morPHPossy = mix( position,normal *displace,scaleDisplace)* time ;
  21.  
  22. gl_Position = projectionMatrix * modelViewMatrix * vec4(morPHPossy,1.0 );
  23.  
  24.  
  25. }

使用具有顶点和像素的Three.js 71:

插图目的:

任何帮助赞赏…

解决方法

由于您使用纹理作为高度图,您应该确保:
  1. heightText.magFilter = THREE.LinearFilter; // This is the default value.

以便您收到的值平滑到纹素.

猜你在找的JavaScript相关文章