Question

我试图在我的页面中实现一种运动效果，并且只需为主帧缓冲区指定一个混合函数

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);

并且不要在我的绘图程序中清除gl.COLOR_BUFFER_BIT

//gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(/*gl.COLOR_BUFFER_BIT |*/ gl.DEPTH_BUFFER_BIT);

我希望看到屏幕上充满了从未清理过的旧颜色值，但实际结果与我将color_buffer_bit清除为白色相同

这里是指向测试页面的链接，其中包含所有代码，它非常简单，因为它只是在屏幕上用彩色粒子绘制一个函数

http://deepdown.altervista.org/WebGl/test/sample.html

如果我没有指定，

是否已清除颜色缓冲区？需要做些什么才能保持每个缓冲区中的渲染颜色而不覆盖它们？

Answer 1

您可能会找到this answer useful。

短版本默认情况下WebGL会清除drawingBuffer。

关于alpha问题there's this answer。

规范完全清楚所有这些。这只是一个规范而且非常详细且难以理解，因为它超过300页，因为它不仅是WebGL规范，而且WebGL规范说它基于OpenGL ES 2.0规范和GLSL ES 1.0规范。

为什么要使用alpha缓冲区？因为它是HTML，所有其他元素都有alpha。您可以将文字或背景颜色设置为rgba(255,0,0,0.5)。您可以显示具有Alpha透明度的.PNG文件，2D画布具有alpha和透明度，因此WebGL也是默认值。

将alpha设置为false是对非基于HTML的应用程序（即端口）的让步。

因此，低端无法与页面的其余部分保持透明。 Not the best sample but here is one of the first examples of this。没有阿尔法你就不能那样做。

至于如何混合，默认情况下使用preulitplied alpha。与网页混合。

否则，如果你想要堆积东西，你可能需要混合添加剂混合

 gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

示例：

"use strict";
var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"), { preserveDrawingBuffer: true } );
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

function rand(min, max) {
  return Math.random() * (max - min) + min;
}

function render(time) {
  
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
  
  var matrix = m4.identity();
  m4.translate(matrix, [rand(-1, 1), rand(-1, 1), 0], matrix);
  m4.scale(matrix, [rand(0.1, 0.2), rand(0.1, 0.2), 1], matrix);
  
  var color = [Math.random(), Math.random(), Math.random(), 0.1];
  var preMultipliedColor = [color[0] * color[3], color[1] * color[3], color[2] * color[3], color[3]];
  
  var uniforms = {
    matrix: matrix,
    color: preMultipliedColor,
  };

  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, uniforms);
  twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

.msg {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 300px;
  height: 150px;
}
.msg>div {
  width: 200px;
}
canvas {
  position: absolute;
  left: 5px;
  top: 5px;
  border: 1px solid black;
}

<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
  <script id="vs" type="notjs">
attribute vec4 position;
uniform mat4 matrix;

void main() {
  gl_Position = matrix * position;
}
  </script>
  <script id="fs" type="notjs">
precision mediump float;

uniform vec4 color;

void main() {
  gl_FragColor = color;
}
  </script>
<div class="msg"><div>lets put some text under the canvas so we can see if things are blending and
  being composited </div></div>
<canvas id="c"></canvas>

WebGL - 未清除gl.COLOR_BUFFER_BIT时的意外行为

1 个答案: