Question

应用程序： http://vipiao.pythonanywhere.com/procedural_generation/game/index.html

请参见屏幕底部的控件。帧速率全部显示在底部。在chrome中运行该应用程序时，该应用程序以每秒10-20帧的速度运行。三角形的数量大约为36000。在firefox上，帧速率很容易达到60 fps。这使我认为我犯了某种错误，由于某种原因不会影响Firefox，因为替代方法是在运行WebGL时Firefox会更好。使用chrome调试器，到目前为止，我看到应用程序的瓶颈是gpu的使用。当角色在应用程序中静止不动直到世界停止加载时（这在几秒钟后发生），进行渲染调用的唯一位置是：

procedural_generation / game / render_engine / render_engine.js第63行：

this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);

procedural_generation / game / render_engine / planet.js第1638行：

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);

procedural_generation / game / render_engine / planet.js第1827行及以后：

    this.shaderProgram.use();
    // // Data buffers.
    for (let i = 0; i < this.arrayBuffers.length; i++) {
        const a = this.arrayBuffers[i];
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, a.buffer);
        this.gl.vertexAttribPointer(a.location, a.size, a.type, false, a.stride, a.offset);
    }
    // Create transformation matrix.
    // // Rotation.
    let transMatr = orientation.toMatrix();
    // // Translation.
    transMatr = Mat4.multiplyMatrices(transMatr, Mat4.getTranslation(position));
    // // Send matrix.
    this.shaderProgram.setUniformMatrix('projection',projection);
    this.shaderProgram.setUniformMatrix('view',view);
    this.shaderProgram.setUniformMatrix('model',transMatr);
    // Send other uniforms.
    this.shaderProgram.setUniformVector('cameraWorldPosition',cameraPosition);
    this.shaderProgram.setUniformVector('lightDir',new Vec3(1,1,1));
    //this.shaderProgram.setUniformInteger('textureDim',this.textureDim);
    // Render.
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null); // Make it render to the canvas rather than to the frame buffer.
    this.gl.viewport(0.0, 0.0, this.canvas.width, this.canvas.height);
    this.gl.drawArrays(this.gl.TRIANGLES, 0, this.numberOfTrianglesToRender*3);

所有这些调用每帧仅进行一次，但循环内的缓冲区绑定除外，它们被调用3次。根据我的理解，这些调用的性能应该是相当纯真的，除了drawArrays调用。加载世界时，this.numberOfTrianglesToRender约为36000，每个三角形占用120个字节。顶点和片段着色器非常基础，可以在以下位置找到：
procedural_generation / game / render_engine / planet.js第835行getVertexShaderCode（）
和 procedural_generation / game / render_engine / planet.js第915行getFragmentShaderCode（）

我的问题是，我做错了什么，导致该引擎在chrome上性能如此差，但在Firefox上却表现不佳。另外，还有一点需要注意的是，在Firefox上，鼠标控件变得非常结结，无法弄清原因，但这不是主要问题。
procedural_generation / game / utilities / mouse_control.js

Webgl应用程序在Chrome上运行缓慢，但在Firefox上运行

0 个答案: