我需要测量一些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();
