2016-02-13 87 views
0

的想法: 創建一個本地幀緩衝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.

回答

1

好吧,我想我發現我爲什麼不能更新的Texture2D參考THREE.Texture。

要設置一個gl.createTexture()一THREE.Texture,我發現這個通過谷歌搜索:

posTextureOut = new THREE.DataTexture(posTextureData, rttSize, rttSize, THREE.RGBAFormat, THREE.FloatType); 
posTextureOut.__webglTexture = gl.createTexture(); 
posTextureOut.__webglInit = true; 
posTextureOut.needsUpdate = true; 

然後,如果你要綁定這個紋理本地幀緩衝,並做一些本地WebGL的東西就可以了,你可以做這樣的:

gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer); 
... 
ext.drawBuffersWEBGL([ext.COLOR_ATTACHMENT0_WEBGL, ext.COLOR_ATTACHMENT1_WEBGL]); 

gl.activeTexture(gl.TEXTURE0); 
gl.bindTexture(gl.TEXTURE_2D, posTextureOut.__webglTexture); 
... 
... 
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 

gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

,以獲得THREE.Texture這一修正posTextureOut .__ webglTexture

使用needsUpdate = TRUE d更新什麼問題oes沒有幫助我,並且由於與THREE.WebGLRenderer的紋理綁定不良而導致很多錯誤。

通過查看源代碼,我發現了這個問題。 在THREE.WebGLRenderer中,這個。的SetTexture方法看起來像這樣:

this.setTexture = function (texture, slot) { 

    var textureProperties = properties.get(texture); 

    if (texture.version > 0 && textureProperties.__version !== texture.version) { 

     var image = texture.image; 

     if (image === undefined) { 

      console.warn('THREE.WebGLRenderer: Texture marked for update but image is undefined', texture); 
      return; 

     } 

     if (image.complete === false) { 

      console.warn('THREE.WebGLRenderer: Texture marked for update but image is incomplete', texture); 
      return; 

     } 

     uploadTexture(textureProperties, texture, slot); 

     return; 
    } 

    state.activeTexture(_gl.TEXTURE0 + slot); 
    state.bindTexture(_gl.TEXTURE_2D, textureProperties.__webglTexture); 

}; 

而且this.uploadTexture方法是這樣做的:

function uploadTexture(textureProperties, texture, slot) { 

    if (textureProperties.__webglInit === undefined) { 

     textureProperties.__webglInit = true; 

     texture.addEventListener('dispose', onTextureDispose); 

     textureProperties.__webglTexture = _gl.createTexture(); 

     _infoMemory.textures ++; 

    } 

在這一點上,textureProperties .__ webglInit永遠是不確定的,即使它之前被迫的。相同的紋理屬性.__ webglTexture ...始終未定義。

我解決了這個問題,通過強制this.setTexture來查看紋理,看看這個比例是否有任何變化......否則,渲染器不考慮它。

這裏有2行我說:

this.setTexture = function (texture, slot) { 

    var textureProperties = properties.get(texture); 

    if (texture.__webglInit != undefined) textureProperties.__webglInit = texture.__webglInit; 
    if (texture.__webglTexture != undefined) textureProperties.__webglTexture = texture.__webglTexture; 

    if (texture.version > 0 && textureProperties.__version !== texture.version) { 

     var image = texture.image; 

     .... 

'現在一切都工作正常,我還可以在原生的WebGL處理THREE.Texture __webglTexture :)

相關問題