フレームバッファでキューブマップテクスチャにレンダリング

Question

キューフレームにレンダリングするためにフレームバッファを使用しようとしていますが、 "FRAMEBUFFER_INCOMPLETE_ATTACHMENT"エラーが発生しています。タイプをFLOATまたはUNSIGNED_BYTEに設定して、2Dテクスチャでコードを使用できます。

this.inscatterTexture_ = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.inscatterTexture_); 

gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);  

for (let i = 0; i < 6; i++) { 
    // Create framebuffer 
    this.inscatterFrameBuffers_[i] = gl.createFramebuffer(); 
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.inscatterFrameBuffers_[i]); 

    // Create and attach depth buffer 
    this.inscatterDepthBuffers_[i] = gl.createRenderbuffer(); 
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.inscatterDepthBuffers_[i]); 
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, INSCATTER_RESOLUTION, INSCATTER_RESOLUTION); 
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.inscatterDepthBuffers_[i]); 
    gl.bindRenderbuffer(gl.RENDERBUFFER, null); 

    // Attach one face of cube map 
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, INSCATTER_RESOLUTION, INSCATTER_RESOLUTION, 0, gl.RGBA, gl.FLOAT, null); 
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, this.inscatterTexture_, 0); 

    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) { 
     let status_code = gl.checkFramebufferStatus(gl.FRAMEBUFFER); 
     console.log("Inscatter frame buffer, " + i + ", is not complete: " + FramebufferStatus[status_code]); 
    } 

    this.CreateInscatterTexture(gl, i); 
} 

Answer 1

どうやらあなたが最初のキューブマップのすべての面を作成する必要があります。私がテクスチャキューブパラメータをアップしたり、このコードでは、それに添付しました方法でいくつかのミスがあります。

"use strict"; 
 

 
function log() { 
 
    var pre = document.createElement("pre"); 
 
    pre.appendChild(document.createTextNode(Array.prototype.join.call(arguments, " "))); 
 
    document.body.appendChild(pre); 
 
} 
 

 
function glEnumToString(gl, value) { 
 
    for(var key in gl) { 
 
    if (gl[key] === value) { 
 
     return key; 
 
    } 
 
    } 
 
    return "0x" + value.toString(16); 
 
} 
 

 
var INSCATTER_RESOLUTION = 64; 
 

 
var gl = document.createElement("canvas").getContext("webgl"); 
 
var ext = gl.getExtension("OES_texture_float"); 
 
if (!ext) { log("need OES_texture_float"); } 
 
ext = gl.getExtension("OES_texture_float_linear"); 
 
if (!ext) { log("need OES_texture_float_linear"); } 
 
      
 
var o = {}; 
 
(function() { 
 
    this.inscatterFrameBuffers_ = []; 
 
    this.inscatterDepthBuffers_ = []; 
 
    this.inscatterTexture_ = gl.createTexture(); 
 
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.inscatterTexture_); 
 

 
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
 
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);  
 
    for (let i = 0; i < 6; i++) { 
 
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, INSCATTER_RESOLUTION, INSCATTER_RESOLUTION, 0, gl.RGBA, gl.FLOAT, null); 
 
    } 
 

 
    for (let i = 0; i < 6; i++) { 
 
    // Create framebuffer 
 
    this.inscatterFrameBuffers_[i] = gl.createFramebuffer(); 
 
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.inscatterFrameBuffers_[i]); 
 

 
    // Create and attach depth buffer 
 
    this.inscatterDepthBuffers_[i] = gl.createRenderbuffer(); 
 
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.inscatterDepthBuffers_[i]); 
 
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, INSCATTER_RESOLUTION, INSCATTER_RESOLUTION); 
 
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.inscatterDepthBuffers_[i]); 
 
    gl.bindRenderbuffer(gl.RENDERBUFFER, null); 
 

 
    // Attach one face of cube map 
 
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, this.inscatterTexture_, 0); 
 

 
    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) { 
 
     let status_code = gl.checkFramebufferStatus(gl.FRAMEBUFFER); 
 
     log("Inscatter frame buffer, " + i + ", is not complete: " + glEnumToString(gl, status_code)); 
 
    } else { 
 
     log("success"); 
 
    } 
 

 
    } 
 
}).call(o);

この種類のは、ドライバのバグのように思えます。私は、少なくともレンダリングのためにまだテクスチャを使用していなくても、レンダリング可能なテクスチャをFRAMEBUFFER_COMPLETEに与える必要があることを少なくとも過去には知っていました。たとえば、mipsを持たないテクスチャを作成し、そのフィルタリングを設定しないと失敗します。