javascript - WebGL质量帧缓冲区多重采样不起作用

Question

我尝试在 webgl 中使用边缘检测。我得到了我想要的边缘效果，但是边缘锯齿很严重。查了以下资料，mass相关的framebuffer multisampling可以解决这个问题，但是我尝试将demo中的例子加到我的程序中，发现没有效果

var gl = canvas.getContext("webgl2", {
    antialias: false
});

framebuffer = gl.createFramebuffer();
// rgb texture
gl.bindTexture(state.gl.TEXTURE_2D, texture);
// ... texImage2D  texParameteri set up
// depth texture
gl.bindTexture(state.gl.TEXTURE_2D, depthTexture);
// ... texImage2D  texParameteri set up


// Create a with normals data FBO
normalFramebuffer = gl.createFramebuffer();
gl.bindTexture(gl.TEXTURE_2D, normalTexture);
// ... texImage2D  texParameteri set up



//Prepare for multisampling msFbo
var msFbo = gl.createFramebuffer();
var colorRenderbuffer = state.gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, 480, 480);

gl.bindFramebuffer(state.gl.FRAMEBUFFER, msFbo);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorRenderbuffer);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);




gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 obj.render('rgbaData shader');
gl.bindFramebuffer(gl.FRAMEBUFFER, normalFramebuffer);
 obj.render('normalsData shader');
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    
// bind msFbo
gl.bindFramebuffer(gl.FRAMEBUFFER, msFbo);

gl.useProgram('my edge detection shader');
gl.uniform1i(texture, 0);
gl.uniform1i(depthTexture, 1);
gl.uniform1i(normalTexture, 2);
gl.drawElements(state.gl.TRIANGLES, n, state.gl.UNSIGNED_BYTE, 0);


// use blitFramebuffer
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, msFbo);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
gl.blitFramebuffer(0, 0, 480, 480,
    0, 0, 480, 480, gl.COLOR_BUFFER_BIT, gl.NEAREST);

标签： javascriptwebglframebuffermultisampling