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

Question

我使用WebGLRenderTarget将以下纹理渲染到ThreeJS中的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

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

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