V
V
vitaliy22017-08-23 07:04:17
OpenGL
vitaliy2, 2017-08-23 07:04:17

Why is WebGL so slow (with empty shader)?

The vertex and fragment shaders are empty:

attribute vec3 a_position;

void main() {
  gl_Position = vec4(a_position, 1.0);
}

void main() {
  gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
}

At a resolution of 3840x2160, it gives out only 20 FPS on an Intel graphics card.
Things are better on Nvidia - it gives out 60 FPS, but loads the video card by 40%.
When the shader becomes more complex, the GPU load does not increase and the FPS remains the same - it turns out that the shaders themselves are executed quickly, but their calls are very expensive. Only now they are so expensive that I can’t even display a 60 FPS image. What is the reason for such low performance?
By the way, it is also slow on shadertoy , but 20% faster than mine (with the same viewport size). Why so - I do not know. (To keep the viewport size the same, I set the shadertoy to 50% scale, otherwise it only draws 1 pixel by 4.)
I also tried using WebGL 2 and #version 300 es, but that doesn't change anything.
PS. The render outputs one rectangle (2 triangles) for the entire size of the viewport:
const triangle_strip = new Float32Array([
  -1.0, 1.0, 0.0,
   1.0, 1.0, 0.0,
  -1.0,-1.0, 0.0,
   1.0,-1.0, 0.0,
]);

const buf_triangle_strip = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf_triangle_strip);
gl.bufferData(gl.ARRAY_BUFFER, triangle_strip, gl.STATIC_DRAW);
gl.vertexAttribPointer(loc_a_position, 3, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(loc_a_position);

render();

function render() {
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  
  requestAnimationFrame(render, canvas);
}

Answer the question

In order to leave comments, you need to log in

3 answer(s)
S
Stanislav Makarov, 2017-08-23
@Nipheris

(although it is also copied to the GPU, but again, 60 times).

That is the problem. Throwing vertices on the map on each frame is nonsense in any case (even if now this is not the main reason for the brakes). That's what vertex buffers are for, to throw them in once.
This is how you can't do it. The creation and use of the buffer are not separated in order to complicate your life. Try to get rid of it and do it right.

Q
Q001, 2017-08-23
@Q001

Would you like to see the source code for the webgl Quake project?
https://habrahabr.ru/post/177159/

A
asd111, 2017-08-23
@asd111

Windows limits fps to 60 for webgl, and in general for opengl and direct3d.
I did not deal with webgl, but most likely you can find out in the old fashioned way how many milliseconds it takes to draw one frame and so find out the approximate fps using the formula

1000/количество_миллисекунд_на_отрисовку_одного_кадра

Look at https://www.shadertoy.com/view/Ms2SD1 if it shows less than 40 fps in the window, then the problem is in the OS-browser-video card driver connection.
If the example shows 60 fps, then you need to find other webgl tutorials.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question