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
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.
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)?
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.
I am facing a scenario relevant to this where I have loaded all the models in the app start up; main thread uses around 2.5 gig memory (not increased after loading) and while viewing the model I see a GPU thread which takes around 1GB and keeps increased while viewing next model (1.5 gig …). And this GPU thread is not freeing up the memory, not sure how to clear the memory which GPU thread is used.
But yoou can’t rely on the stats I think bc the browser will get around to clearing some of it when it needs it.
The most brute force way to force it would to cause a contextLoss
which you can do for experimentation purposes…