Приложение Webgl работает медленно на Chrome, но не Firefox - PullRequest
Новая
       11

Приложение Webgl работает медленно на Chrome, но не Firefox

0 голосов
/ 24 января 2019

Приложение: http://vipiao.pythonanywhere.com/procedural_generation/game/index.html

См. Нижнюю часть экрана для элементов управления.Частота кадров отображается полностью внизу.При запуске приложения в Chrome приложение запускается со скоростью около 10-20 кадров в секунду.Количество треугольников около 36000. На Firefox частота кадров легко составляет 60 кадров в секунду.Это заставляет меня думать, что я совершил какую-то ошибку, которая по какой-то причине не влияет на Firefox, поскольку альтернативой будет Firefox, превосходящий по запуску webgl.Используя отладчик chrome, я вижу, что узким местом приложения является использование gpu.Пока персонаж стоит в приложении до тех пор, пока мир не перестанет загружаться, что происходит через несколько секунд, единственные места, где выполняются вызовы рендеринга, находятся по адресу:

procdural_generation / game / render_engine / render_engine.js строка 63: 

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

processdural_generation / game / render_engine / planet.js строка 1638: 

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

процедурный_генерирования / 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 байтов.Вершинные и фрагментные шейдеры очень просты и могут быть найдены по адресу:
procdural_generation / game / render_engine / planet.js строка 835 getVertexShaderCode ()
и procdural_generation / game / render_engine / planet.js строка 915 getFragmentShaderCode ()

Мой вопрос: что я делаю неправильно, из-за чего двигатель работает так плохо на chrome, а не на firefox.Кроме того, дополнительное примечание заключается в том, что в Firefox элементы управления мышью сильно заикаются, и не могут понять, почему это так, но это не главный вопрос.
procdural_generation / game / utilities / mouse_control.js

...