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

我正在做一个WebGL项目，需要混合100张图片。然而，在这个过程中会有大量的数据丢失

我的意思是，例如，我做了一个测试，画了100次相同的图片，每个图片的alpha值设置为1/100。原则上，我应该得到和它一样的图片，但我没有

我怀疑这与帧缓冲区有关，帧缓冲区只支持8位unsign int数组，因此每次绘制图片时，其alpha值都会被截断。我想知道是否可以使用浮点纹理和

OES纹理浮动

扩展并渲染到纹理来解决这个问题

首先，我设置了一个帧缓冲区来渲染我的100张图片（在启用“OES纹理浮动”扩展之后）。特别是，

texImage2D

采用参数

gl.FlOAT

，而不是

gl.UNSIGNED\u BYTE

。最后，我将

rttTexture

作为最终结果绘制到显示器上

问题是，当我使用

gl.UNSIGNED_BYTE

时，它会像我前面描述的那样输出一个折衷的结果。但是，当我使用

gl.FlOAT

时，它不输出任何内容。这是我解决这个问题的正确方法吗？问题出在哪里？（我确信扩展已启用）

---

是什么阻碍了你去试一试？设置帧缓冲区，启用扩展，将浮动纹理绑定为颜色目标，绘制X次，将blit结果显示到屏幕。我已更新问题检查您的fbo是否符合gl.checkFramebufferStatus（gl.framebuffer）的要求。还请注意，浮动纹理上的generateMipmap通常不可用。我对generateMipmap和gl.checkFramebufferStatus（gl.FRAMEBUFFER）进行了注释，它们确实返回了FRAMEBUFFER_COMPLETE，但当我在TexImage2中将gl.UNSIGNED_字节更改为gl.float时，屏幕上仍然没有显示任何内容。是什么阻碍了您进行拍摄？设置帧缓冲区，启用扩展，将浮动纹理绑定为颜色目标，绘制X次，将blit结果显示到屏幕。我已更新问题检查您的fbo是否符合gl.checkFramebufferStatus（gl.framebuffer）的要求。还请注意，浮动纹理上的generateMipmap通常不可用。我对generateMipmap和gl.checkFramebufferStatus（gl.FRAMEBUFFER）进行了注释，但将texImage2D中的gl.UNSIGNED_字节更改为gl.float时，返回的FRAMEBUFFER_已完成，但仍然没有显示任何内容

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();