三个JS：通过纹理的顶点位移是否限制为256个值？

Question

我正在将以下纹理渲染到 WebGLRenderTarget in ThreeJS using Ashima's GLSL noise:

然后我正在读取纹理的 RGB 通道以使用以下 GLSL 代码在 XYZ 轴上置换几个网格的顶点：

vec4 fluctuation = texture2D(fluxTexture, uv);
curPos.y += (fluctuation.r - 0.5) * 40.0;
curPos.x += (fluctuation.g - 0.5) * 20.0;
curPos.z += (fluctuation.b - 0.5) * 20.0;

但是，由于移动非常细微，我注意到当 RGB 值发生变化时，顶点每一步都会跳动几个像素。我将此伪像归因于每种颜色对 256 个值的限制。有什么方法可以将纹理的位深度更改为 16 位或 32 位，以便我可以从 RGB 通道中获得更高的精度？

Answer 1

您对渲染目标的类型属性感兴趣：

Textures

你可以试试THREE.FloatType。

// Test for iOS devices, because they don't support THREE.FloatType
var dataType = (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) ? THREE.HalfFloatType : THREE.FloatType;

this.renderTarget = new THREE.WebGLRenderTarget(50, 50, {
    format: THREE.RGBAFormat,
    type: dataType,
});

三个JS：通过纹理的顶点位移是否限制为256个值？

Three JS: Is vertex displacement via textures limited to 256 values?

three.js

glsl

vertex-shader