主页 / 问题 / 1532724
Accepted
dikiy_opezdal
Asked:2023-07-27 17:21:00 +0000 UTC2023-07-27 17:21:00 +0000 UTC

如何测量webgl图像渲染时间？

  • 772

我需要测量一些WebGL图像的渲染时间，但调用gl.drawArrays()似乎是异步的，或者没有考虑GPU计算，我得到的渲染时间为0ms。对于测量，我使用了以下设计：

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

console.log(end - start);

如果它派上用场，这是我的代码：

索引.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>

程序.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

1 个回答

  1. Best Answer

    正确指出的是，对 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;
    • 3

相关问题