Smooth LOD transition using beyer matrix dithering in three.js

beautiful work!

Thanks! It’s not that fancy but I had never tried it, made sense for a thing I’m working on

im always too adhd to bother with LODs but this looks significantly better than how most engines seem to handle it

I’m automating the fuck out of it because I’m trying to render 144 ish unique models on a page so every ms I can save is welcome, probably will need to come up with more clever ideas to make it viable

i know, so many tasks im soooooooo grateful for AI because holy shit is it depressing how much work goes into a lot of this stuff, I basically want to automate all asset prep and optimization if possible lol

I’m doing some very weird automation with this, will post if it’s good

shout-out DialKit; wanted to try it and it's great!

the idea is that pixels from 2 LODs never share a screen pixel, so they use complementary bayer matrices as masks. Kinda neat that it "looks" purple but it's actually just a function of the dithering

I might not be too familiar with this subject, but doesn't blending between two LODs mean that you're essentially still loading both models at the same time? Isn't that a potentially bad thing?

It is, yeah. The idea is that you only use it if does give a benefit

What's going on here? Instead of snaping between LODs you render both during a short transition and blend between them?

Correct, and the dithering makes each exclusive on screen

Excellent work! 💫

🔥🔥

Added this Bayer 2x2 and Bayer 4x4 to my UE5 fork as well.

dithering for ever <3

Very nice. Is it more expensive using the finer grid?

Cool

bro,, how?

I’ll publish the whole pipeline and code etc tomorrow or Monday for sure, it’s a pet project just to get my head out of ‘work’ mode and into fun