3. Transparency Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution. 5/9 - ThreadSky

About ThreadSky

martin-laxenaire.fr • 78 days ago

3. Transparency

Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.

5/9

1 / 2

Comments

martin-laxenaire.fr•78 days ago

The idea is to render the whole scene except the particles in a render target, then draw the whole scene again. In the particles fragment shader we then use the RT depth and opacity to adjust the particles alpha, as seen in this codepen: https://codepen.io/martinlaxenaire/pen/rNXQeKd

6/9

martin-laxenaire.fr•78 days ago

4. Performance

To get the best performances across all devices, I had once again to come up with creative ideas.
I wrote a helper that constantly watches the FPS over a given period of time and use it to set the quality of the scene, from 1 (poor) to 10 (excellent).

7/9

martin-laxenaire.fr•78 days ago

Based on the current quality, we can enable or disable features, increase the DPR and render targets resolutions, camera far value and so on.

8/9

martin-laxenaire.fr•78 days ago

That's it!
I hope you liked this little technical breakdown. Let me know if you have any questions.
Also, I'm available for freelance work so hit me up if you've got any #webgl or front-end needs!

https://museedelaplaisance.com/

9/9

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply