From the beginning we suffer a lot from poor cpu perf on web, and strictly limited by the single-threaded js engine compared to desktop engines.
But recently I saw a lot about deferred shading and I’d like to say with it we can not only get advanced light effects, but also opens a gate to true multithreaded rendering.
As all known webgpu removed multithreaded stuff, but there is still a way to pass texture across threads while keeping its data on gpu.
To begin with, OffscreenCanvas enables rendering on worker threads, and transferToImageBitmap() is defined to perform a bit-exact copy of the canvas, and on chrome, it’s a texture underlying. (But sadly not the same for firefox)
ImageBitmap, as a transferable object, can be transfered, not copied, from worker thread to main thread, this enables us to pass texture across threads while keeping its data on gpu.
Now the things are simple, render objects on diff workers, use multi render targets like PrePassRenderer to gether all info needed for shading, like color, depth, position, normal and material props, render textures to OffscreenCanvas, transferToImageBitmap, postMessage to main thread, compose and do deferred shading on main thread, and it’s done.
But there are still things to do, blend rendering will not write depth by default, but considering the amount of meshes needs to blend, maybe it’s ok to leave it on main thread and hope it does not block too much. Also, creating and transfering that many textures can introduce some overhead and the final result might not be as good as theory.
3 Likes