Три JS: Перемещение вершин через текстуры, ограниченные 256 значениями?

Question

Я рендеринг следующей текстуры на WebGLRenderTarget в ThreeJS с помощью Ashima's GLSL noise:

Я тогда чтение RGB каналов текстуры, чтобы смещать вершины несколько сеток в XYZ осей со следующим кодом GLSL :

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

Вы заинтересованы в типе собственности цели визуализации:

https://threejs.org/docs/?q=webgl#Reference/Constants/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, 
});