Question

我一直在努力学习WebGL，所以我制作了一个简单的模型加载脚本。我认为它完全正常工作，直到我拉开Chrome的devtools时间轴，看到我在渲染100个模型时得到了~20 FPS。奇怪的是，每个帧的CPU大部分时间处于空闲状态。

我的第一个想法是我必须受GPU限制，这似乎不太可能，因为我的着色器很短而且不是很复杂。我测试了10个型号，只有一个，这确实提高了性能，但我仍然得到不到40 FPS。我拉起了chrome：// tracing，看到我的GPU对每一帧都没有做太多。 CrGpuMain中每个帧的大部分都填充了“Processing Swap”，而CrBrowserMain几乎一直用在glFinish上（由“CompositingIOSurfaceMac :: DrawIOSurface”调用）。

处理交换似乎是主要问题，而不是glFinish。

所以我的问题是，是什么导致浏览器花了这么多时间在glFinish上？关于如何解决这个问题的任何想法？

~~每个模型都有40608个元素和20805个顶点~~，

更新 - 更正了简化网格的数量：

3140个元素
6091顶点

模型是伪实例的，因此数据每帧仅传递给GPU一次。大量顶点是问题吗？

可以找到演示here。

渲染代码：

Thing.prototype.renderInstances = function(){
    if (this.loaded){
        var instance;
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexbuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, this.normalbuffer);
        gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, true, 0, 0);

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexbuffer);

        for(var i in this.instances){
            instance = this.instances[i];
            setMatrixUniforms(instance.matrix);
             gl.drawElements(gl.TRIANGLES, this.numItems, gl.UNSIGNED_SHORT,0);

        }
    }

};

顶点着色器代码：

attribute vec3 aVertexPosition;

    attribute vec3 aVertexNormal;
    uniform mat4 uMMatrix;


    uniform mat4 uVMatrix;
    uniform mat4 uPMatrix;

    uniform vec3 uLightDirection;
    varying float vLight;

    void main(void) {

        mat4 MVMatrix = uVMatrix*uMMatrix;
       //Toji's manual transpose
        mat3 normalMatrix = mat3(MVMatrix[0][0], MVMatrix[1][0], MVMatrix[2][0], MVMatrix[0][1], MVMatrix[1][1], MVMatrix[2][1], MVMatrix[0][2], MVMatrix[1][2], MVMatrix[2][2]); 

        gl_Position = uPMatrix*uVMatrix*uMMatrix*vec4(aVertexPosition, 1.0);

        vec3 lightDirection = uLightDirection*normalMatrix; 
        vec3 normal = normalize(aVertexNormal*normalMatrix);
        vLight = max(dot(aVertexNormal,uLightDirection),0.0);
    }

WebGL奇怪的性能下降Chrome

0 个答案: