在 ThreeJS DataTexture 中寻址 Texel

Question

我正在寻找在 Javascript 中计算 THREE.DataTexture 的 texel 引用，以便在片段着色器中使用。我已经成功地计算了点的屏幕空间坐标，并将它们以 x 和 y 值的统一浮点数组形式传递给着色器，然后通过着色器中的索引引用这些点。我现在想要渲染太多点以在统一浮点数组中传递坐标，所以我想使用 DataTexture 并在 RGBA 纹素的 RG 值中写入坐标。

var tDataWidth = points.length;

var tData = new Uint8Array( Math.pow(tDataWidth, 2) );

var texelSize = 1.0 / tDataWidth;

var texelOffset = new THREE.Vector2(0.5 * texelSize, 0.5 * texelSize);

for(var i = 0; i < points.length; i++){

    //convert data to 0-1, then to 0-255

    //inverse is to divide by 255 then multiply by width, height respectively

    tData[i * 4] = Math.round(255 * (points[i].x / window.innerWidth));

    tData[i * 4 + 1] = Math.round(255 * ((window.innerHeight - points[i].y) / window.innerHeight));

    tData[i * 4 + 2] = 0;

    tData[i * 4 + 3] = 0;

    //calculate UV texel coordinates here

    //Correct after edit

    var u = ((i % tDataWidth) / tDataWidth) + texelOffset;

    var v = (Math.floor(i / tDataWidth) + texelOffset);

    var vUV = new THREE.Vector2(u, v);

    //this function inserts the reference to the texel at the index into the shader

    //referenced in the frag shader:

    //cvec = texture2D(tData, index);

    shaderInsert += ShaderInsert(vUV, screenPos.x, window.innerHeight - screenPos.y);

}

var dTexture = new THREE.DataTexture( sdfUItData, tDataWidth, tDataWidth, THREE.RGBAFormat, THREE.UnsignedByteType );

//I think this is necessary

dTexture.magFilter = THREE.NearestFilter;

dTexture.needsUpdate = true;

//update uniforms of shader to get this DataTexture

renderer.getUniforms("circles")["tData"].value = dTexture;

//return string insert of circle

//I'm editing the shader through javascript then recompiling it

//There's more to it in the calling function, but this is the relevant part I think

    ...

对我出错的地方有什么帮助吗？现在输出都在左下角，所以 (0, window.innerHeight) 据我所知。谢谢！

Answer 1

所以答案其实很简单。在片段着色器中，rgba 值为 0.0 - 1.0，因此不需要像在片段着色器中那样除以 255。我还想说，我发现了 Spector.js Chrome 扩展程序，它允许查看所有 webgl 调用和缓冲区。很酷！如果有人想了解更多关于片段着色器中绘图函数是如何工作的，这一切都在我没有写的这个很棒的着色器中：https://www.shadertoy.com/view/4dfXDn<3