Как замерять время рендера картинки WebGL?

Question

Как замерять время рендера картинки WebGL?

Рейтинг: 1Ответов: 1Опубликовано: 27.07.2023

Мне нужно замерять время рендера некоторого изображения на WebGL, но вызов gl.drawArrays() похоже асинхронный, или вычисления на GPU не учитываються, и я получаю время рендера в 0ms. Для замеров использовал вот такую конструкцию:

const start = performance.now();
gl.drawArrays(gl.TRIANGLES, 0, 6);
const end = performance.now();

console.log(end - start);

Если вдруг пригодится, вот код моей программы:

index.html

<!DOCTYPE html>
<html>
    <head >
        <meta charset="utf-8"/>
        <title>Mandelbrot Set</title>
    </head>
    <body style="overflow: hidden; margin: 0px">
        <canvas id="canvas">HTML5 Canvas is not supported by yout browser :(</canvas>

        <script src="program.js"></script>
    </body>
</html>

program.js

'use strict';

// ========== shaders ==========
const vsSource =
`#version 300 es

layout(location=0) in vec2 aPosition;
layout(location=1) in vec2 aOffset;
layout(location=2) in float aScale;
layout(location=3) in vec2 aResolution;
layout(location=4) in float aDepth;

out vec2 vOffset;
out float vScale;
out vec2 vResolution;
out float vDepth;

void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);

    vOffset = aOffset;
    vScale = aScale;
    vResolution = aResolution;
    vDepth = aDepth;
}`;

const fsSource =
`#version 300 es

precision highp float;

in vec2 vOffset;
in float vScale;
in vec2 vResolution;
in float vDepth;

out vec4 fragColor;

vec2 square(vec2 v) {
    return vec2((v.x * v.x) - (v.y * v.y), 2.0 * v.x * v.y);
}

float magnitude(vec2 v) {
    return v.x * v.x + v.y * v.y;
}

void main() {
    float depth = vDepth / vScale;
    float ratio = vResolution.x / vResolution.y;
    vec2 center = vOffset - vec2(0.5 * ratio, 0.5);
    vec2 res = vec2(vResolution.x / ratio, vResolution.y);
    vec2 pos = (gl_FragCoord.xy / res + center) * vScale;

    vec2 z = vec2(0.0);

    float i;
    for(i = 0.0; i < depth; i++) {
        z = square(z) + pos;

        if (magnitude(z) > 4.0) break;
    }

    float color = i / depth;

    fragColor = vec4(color, color, color, 1.0);
}`
// =========================

// ========== functions ==========
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
    console.log(type === gl.VERTEX_SHADER? 'VERTEX SHADER' : 'FRAGMENT SHADER', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

function createProgram(gl, vsSource, fsSource) {
    const program = gl.createProgram();
    gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vsSource));
    gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, fsSource));
    gl.linkProgram(program);
    if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
        gl.useProgram(program);
        return program
    };
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

function updateResolution() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.vertexAttrib2f(3, canvas.width, canvas.height);
}

function test() {
    gl.bindBuffer(gl.ARRAY_BUFFER, modelBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, modelData, gl.STATIC_DRAW);

    gl.enableVertexAttribArray(0);

    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    gl.vertexAttrib2fv(1, positionScaled);
    gl.vertexAttrib1f(2, scale);
    gl.vertexAttrib1f(4, depth);

    updateResolution();

    const start = performance.now();
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    const end = performance.now();

    console.log(end - start);
}
// =========================

// ========== GL init ==========
const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl2', { preserveDrawingBuffer: true }) || canvas.getContext('experimental-webgl2', { preserveDrawingBuffer: true });
if (!gl) alert('WebGL Context init failed');
const program = createProgram(gl, vsSource, fsSource);

const modelData = new Float32Array([
    -1,  1,
    -1, -1,
     1, -1,
    -1,  1,
     1,  1,
     1, -1,
]);

const modelBuffer = gl.createBuffer();
// =========================

let scale = 2;
let position = [0, 0];

let quality = 1; // doesnt work
let depth = 1000000;

test();

javascript webgl

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Правильно подмечено, что вызов gl.drawArrays() асинхронный и не учитывает время выполнения на GPU. Ближе к правде будет так:

// Создаем query object
const query = gl.createQuery();

// Начинаем измерение времени 
gl.beginQuery(gl.TIME_ELAPSED_EXT, query);

// Выполняем рендеринг
gl.drawArrays(...);

// Заканчиваем измерение
gl.endQuery(gl.TIME_ELAPSED_EXT); 

// Ждем завершения рендеринга и считываем результат
gl.finish(); 

// Получаем время в наносекундах    
const gpuTimeNs = gl.getQueryParameter(query, gl.QUERY_RESULT);

// Переводим в миллисекунды
const gpuTimeMs = gpuTimeNs / 1000000;

Как замерять время рендера картинки WebGL?

Ответы