Three.js tasks execution thread in browser

Discussion
,
1

The Canvas API is a performant and easy-to-use API for drawing 2D graphics in a Web browser, but it has caveats. It is currently not possible to guarantee getting a hardware accelerated canvas when the user’s hardware supports it. This could lead to performance issues if the browser’s heuristics change in the future. Web developers need to be aware of this, and should consider using WebGL instead.

Also i know that browsers split tasks into to threads first one is called Main Thread which executes the tasks with CPU and second is called Compositor Thread which executes tasks with GPU. And JS tasks also executes in Main Thread so in (CPU)

I want to discuss about that situation how browser understand that Three.js tasks should be executed on GPU or may be because it is calls WebGl API for rendering geometries and that tasks also runs on GPU ?

This are links from where i read about browser task handling logic

2

The HTMLCanvas 2D API is not generally relevant to three.js, but the WebGL API is. WebGL allows the heaviest parts of 3D rendering — per-vertex and per-pixel operations — to be moved to the GPU in most cases. There is still some CPU overhead each time an instruction is sent to the GPU (“draw calls”) and so rendering in fewer instructions (fewer objects and materials) helps to reduce overhead on the CPU and let the GPU do its thing.

For work that can’t be done on the GPU, you also have the option of using Web Workers to move CPU tasks off the main thread.

3

So if I have more materials and objects thats gain work for CPU and can affect in GPU work? Also is right that rendering of objects are handles by WebGL (GPU)?

4

I’m not sure if I quite understood your question, but:

Every {geometry, material} pair usually costs 1 draw call. A good rule of thumb is trying to have <100 draw calls in your scene at any given time. CPU overhead becomes a problem as you increase draw calls.

Vertex and fragment shaders (see https://thebookofshaders.com/) run instructions on the GPU. The reason people use WebGL is, really, that these shaders can do many instructions in parallel very quickly. three.js uses shaders for many tasks.