在 WebGL 中渲染多个对象

Question

我已尝试遵循作为对this questions 的回答给出的建议，但我仍然无法弄清楚 WebGL 程序的“渲染流程”是如何工作的。
我只是想在画布上绘制两个三角形，它以一种相当不确定的方式工作：有时两个三角形都被渲染，有时只渲染第二个（second 就像 the last一个绘制的）被渲染。

（它似乎取决于渲染时间：奇怪的是，越长渲染两个三角形的几率就越大）。 编辑：不正确，一遍又一遍地尝试刷新，两个三角形有时会出现在非常快速的渲染上（~55ms），有时会出现在运行时间较长的渲染上（~120ms）。 确实 似乎是一个反复出现的模式是，在第一次呈现页面时，两个三角形会显示，而在随后的重复刷新中，红色的一个要么显示良好，要么显示很短的时间时间，然后一闪而逝。
显然我在这里遗漏了一些东西，让我用伪代码解释我的程序流程（如果需要可以包含真实代码），看看我是否做错了什么：

var canvas = new Canvas(/*...*/);
var redTriangle = new Shape(/* vertex positions & colors */);
var blueTriangle = new Shape(/* vertex positions & colors */);
canvas.add(redTriangle, blueTriangle);

canvas.init(); //compiles and links shaders, calls gl.enableVertexAttribArray()
               //for vertex attributes "position" and "color"

for(shape in canvas) {
    for(bufferType in [PositionBuffer, ColorBuffer]) {
        shape.bindBuffer(bufferType); //calls gl.bindBuffer() and gl.bufferData()
                                      //This is equivalent to the initBuffers()
                                      //function in the tutorial
    }
}

for(shape in canvas) {
    shape.draw();
    //calls:
    //-gl.bindBuffer() and gl.vertexAttribPointer() for each buffer (position & color),
    //-setMatrixUniforms()
    //-drawArrays()
    //This is equivalent to the drawScene() function in the tutorial
}

尽管我已经将指令封装在对象方法中以尝试使 WebGL 的使用更加面向对象，但在我看来，我完全遵守了 this lesson 上的指令（比较课程的来源和我的自己的代码），因此我无法弄清楚我做错了什么。
我什至尝试只使用一个for(shape in canvas) 循环，如下所示：

for(shape in canvas) {
    for(bufferType in [PositionBuffer, ColorBuffer]) {
        shape.bindBuffer(bufferType); //calls gl.bindBuffer() and gl.bufferData()
                                      //This is equivalent to the initBuffers()
                                      //function in the tutorial
    }
    shape.draw();
    //calls:
    //-gl.bindBuffer() and gl.vertexAttribPointer() for each buffer (position & color),
    //-setMatrixUniforms()
    //-drawArrays()
    //This is equivalent to the drawScene() function in the tutorial
}

但它似乎没有任何效果。 有什么线索吗？

Answer 1

我猜问题是默认情况下，WebGL 画布在每次合成时都会被清除

尝试将您的 WebGL 上下文创建更改为

var gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

我只是猜测您的应用程序正在异步执行操作，这意味着每个三角形都是为了响应某个事件而绘制的？因此，如果两个事件发生得足够快（在单个复合材料之间），那么您会得到两个三角形。如果它们出现在不同的复合材料上，那么您只会看到第二个。

preserveDrawingBuffer: true 说“每次合成后不要清除”。清除是默认设置，因为它允许对某些设备进行某些优化，特别是 iOS，并且大多数 WebGL 应用程序在每次绘制操作开始时都会清除。那些几个不清楚的app可以设置preserveDrawingBuffer: true

在您的特定情况下，angulargl-canvas.js 的第 21 行

options = {alpha: false, premultipliedAlpha: false};

试试改成

options = {alpha: false, premultipliedAlpha: false, preserveDrawingBuffer: true};