Question

我正在开发一个需要混合100张图片的WebGL项目。但是，此过程中存在大量数据丢失。

我的意思是，例如，我做了一个测试，绘制相同的图片100次，每个设置alpha值1/100。原则上我应该有自己的相同图片，但我没有。

我怀疑这与framebuffer有关，它只支持8位unsign int数组，因此每次绘制图片时，其alpha值都会被截断。我想知道我是否可以使用带有OES-texture-float扩展名的浮点纹理并渲染纹理来解决问题。

首先我设置一个帧缓冲区来渲染我的100张图片（在启用＆＃34; OES-texture-float＆＃34;扩展名后）。特别是，texImage2D采用参数gl.FlOAT而不是gl.UNSIGNED_BYTE。最后，我将rttTexture作为最终结果绘制到显示器上。

问题在于，当我使用gl.UNSIGNED_BYTE时，它会输出我之前描述的受损结果。但是，当我使用gl.FlOAT时，它什么也没输出。这是我解决这个问题的正确过程吗？问题可能在哪里？（我确信扩展已启用）

rttFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);    
rttFramebuffer.width = 512;
rttFramebuffer.height = 512;

rttTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, rttTexture);

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

gl.generateMipmap(gl.TEXTURE_2D);
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width rttFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.FLOAT, null);

var renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer.width, rttFramebuffer.height);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);

gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
drawScene();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

drawFinalScene();

如何减少WebGL中混合中的数据丢失

0 个答案: