的想法: 創建一個本地幀緩衝WebGL的一個渲染紋理,以便能夠使用「WEBGL_draw_buffers」和輸出多個附件(COLOR_ATTACHMENT0_WEBGL,COLOR_ATTACHMENT1_WEBGL,COLOR_ATTACHMENT2_WEBGL,...)是否有可能更新與綁定到本機幀緩衝gl.Texture_2D THREE.Texture?
glFragData[0] = ...
glFragData[1] = ...
glFragData[2] = ...
glFragData[3] = ...
然後,嘗試用這些附加的原生WebGL texture2D綁定到framebuffer來更新一些THREE.DataTextures。
一切都很好,與我的本地framebuffer與WEBGL_draw_buffers擴展......但我沒有找到一種方法來更新threejs紋理。我通過查看Threejs如何處理WebGLRenderTarget來嘗試很多事情......但沒有任何工作......沒有辦法用本機WebGL Texture2D更新THREE.Texture。
我不想使用WebGLRenderTarget,因爲只有一個COLOR_ATTACHMENT,它不支持「WEBGL_draw_buffers」擴展名。 也許這將是很好的處理這個在未來;)
任何想法我可以做到這一點?
這裏是我的意思是在代碼方面:
var scene;
var camera;
var renderer;
var debugMaterial;
var posTextureOut;
function init()
{
// create a data texture + generate a gl.Texture2D for it
posTextureOut = new THREE.DataTexture(posTextureData, rttSize, rttSize, THREE.RGBAFormat, THREE.FloatType);
posTextureOut.__webglTexture = gl.createTexture();
posTextureOut.__webglInit = true;
posTextureOut.needsUpdate = true;
// create a framebuffer and bind posTextureOut.__webglTexture to it
rttFramebuffer = gl.createFramebuffer();
renderFrameBuffer = gl.createRenderbuffer();
gl.bindTexture(gl.TEXTURE_2D, posTextureOut.__webglTexture);
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttSize, rttSize, 0, gl.RGBA, gl.FLOAT, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, ext.COLOR_ATTACHMENT0_WEBGL, gl.TEXTURE_2D, posTextureOut.__webglTexture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, null);
// Bind RenderBuffer to FrameBuffer Depth and Stencil attachment
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
gl.bindRenderbuffer(gl.RENDERBUFFER, renderFrameBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, rttSize, rttSize);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, renderFrameBuffer);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// create material with classic vert/frag shaders + posTextureOut as mainTexture
debugMaterial = new THREE.ShaderMaterial({
uniforms:
{
texture: { type: "t", value: posTextureOut }
},
vertexShader: shaderLoader.GetData("simulVert"),
fragmentShader: shaderLoader.GetData("simulFrag"),
transparent: true,
needsUpdate: true
});
var geometry = new THREE.PlaneGeometry(128, 128, 8, 8);
plane = new THREE.Mesh(geometry, debugMaterial);
scene.add(plane);
}
function render()
{
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
// Draw some stuff width gl.drawArrays or gl.drawElements
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// ... find a way to update posTextureOut width the native texture2D from the framebuffer
renderer.resetGLState(); // errors in renderer if this is not called (??)
renderer.render(scene, camera);
}
如果我這樣做,我得到它的工作部分:
function render()
{
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
// Draw some stuff width gl.drawArrays or gl.drawElements
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
renderer.resetGLState();
gl.bindTexture(gl.TEXTURE_2D, posTextureOut.__webglTexture);
renderer.render(scene, camera);
gl.bindTexture(gl.TEXTURE_2D, null);
}
但它並不真正適合與ThreeJS渲染管道和我無法控制使用哪個activeTexture,無論gl.TEXTURE1 gl.TEXTURE1,gl.TEXTURE2在綁定之前傳遞了什麼gl.activeTexture(gl.TEXTURE0)。
我真的很想讓我的網格材料更新我的posTextureOut(THREE.DataTexture)與自定義幀緩衝區的內容。
這聽起來像THREE.Textures沒有考慮到__webglTexture的任何變化。
感謝
Q.