Question

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

Lucky run

Out of luck

~~（它似乎取决于渲染时间：奇怪的是，更长所需的时间越多，最终渲染两个三角形的几率越大）~~。编辑：不是真的，一遍又一遍地尝试刷新，这两个三角形有时会出现在非常快速的渲染（~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稍微使用OO，但在我看来，我完全遵守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说＆＃34;在每个复合词之后都不清楚＆＃34;。清除是默认设置，因为它允许某些设备（特别是iOS）的某些优化，并且大多数WebGL应用程序在每次绘制操作开始时都会清除。那些不清楚的应用可以设置preserveDrawingBuffer: true

在angulargl-canvas.js

的特定情况下第21行

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

尝试将其更改为

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

在WebGL中渲染多个对象

1 个答案: