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

Question

我正在使用Ashima's GLSL noise在ThreeJS中将以下纹理渲染为WebGLRenderTarget

​

​

然后我读取纹理的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,
});