Javascript 在WebGL中渲染多个对象

我已经尝试按照作为答案给出的建议进行操作，但我仍然无法理解WebGL程序的“渲染流”是如何工作的。
我只是尝试在画布上绘制两个三角形，它以一种相当不确定的方式工作：有时渲染两个三角形，有时只渲染第二个三角形（第二个与最后一个绘制的三角形相同）

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

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
}

尽管我在尝试使用WebGLs时，将指令包装在对象方法中，使其更加面向对象，但在我看来，我完全遵守了上的指令（比较课程的源代码和我自己的代码），因此我无法找出我做错了什么。
我甚至尝试只为（画布中的形状）循环使用一个

，如下所示：

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
}

但它似乎没有任何效果。
有什么线索吗？
我猜问题在于默认情况下，WebGL画布在每次合成时都会被清除

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

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

我只是猜测你的应用程序是异步运行的，这意味着每个三角形都是为了响应某个事件而绘制的？所以，如果两个事件都来得足够快（在一个合成图之间），那么就得到两个三角形。如果它们来自不同的复合材料，那么你只能看到第二种

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

在您的特殊情况下，
angulargl canvas.js

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

试着把它改成

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

发布真实代码和提琴这可能会变得相当棘手，因为我正在开发一个AngularJS模块来处理WebGLs，而WebGLs又依赖于下划线、Node.js和。。。我可以做一个github回购，很难，我现在还不想透露，因为这是一个论文项目，在我在最后一篇论文中提出之前应该保密……这个伪代码无助于调试您的问题，所以您要么发布与绘图相关的代码，要么自行调试。而且，如果你需要55ms-120ms来渲染两个三角形，那么你的画图循环中还有一些严重的问题。好吧，这里是：。谢谢您的时间。是的，您的诊断是正确的：我有一些触发绘图的异步事件。有了您建议的选项，它确实有效。非常感谢！：）顺便说一句，我仍然无法让纹理按其应有的方式工作，即：如果我只画一个形状（在angular canvas.js:113中，我留下了
三角形[1]
），它会按我的预期工作；如果我画了两个三角形（在angular canvas.js:113中，我写了
triangle
），第二个三角形将以纯红绘制，尽管我在应用纹理时移除了它的颜色缓冲区（angular objects.js:22）；知道问题出在哪里吗？（到签出的分支是
master
）：-/