我正在尋找在 Javascript 中計(jì)算 THREE.DataTexture 的 texel 引用,以便在片段著色器中使用。我已經(jīng)成功地計(jì)算了點(diǎn)的屏幕空間坐標(biāo),并將它們以 x 和 y 值的統(tǒng)一浮點(diǎn)數(shù)組形式傳遞給著色器,然后通過(guò)著色器中的索引引用這些點(diǎn)。我現(xiàn)在想要渲染太多點(diǎn)以在統(tǒng)一浮點(diǎn)數(shù)組中傳遞坐標(biāo),所以我想使用 DataTexture 并在 RGBA 紋素的 RG 值中寫入坐標(biāo)。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 necessarydTexture.magFilter = THREE.NearestFilter;dTexture.needsUpdate = true;//update uniforms of shader to get this DataTexturerenderer.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 ...對(duì)我出錯(cuò)的地方有什么幫助嗎?現(xiàn)在輸出都在左下角,所以 (0, window.innerHeight) 據(jù)我所知。謝謝!
在 ThreeJS DataTexture 中尋址 Texel
紅糖糍粑
2021-11-04 16:40:44