So, I figured out how to get "Depth of Field" to "work" in WebGL/Three.js

-=-=-

I asked ChatGPT and co to help me figure out an easy way to get it working.
They all seemed to agree on the methodology. Set up a Bloom Filter/Shader, and set it to be at the focal range you want, and .. Magico-bingo, everything not in the focal area becomes blurred out.


(Direct render from Pixelcubes!)

I mean. Sure, that looks kinda neat, but..
It's wrong..


Zoom and Enhance

See, the issue is, it's blurring the image, not how it renders the 3D data.
That is to say, the background behind (to the left of) the brick wall is going "Oh, I'd better blur", and it's taking blur data from the pixels around it, which ends up nabbing some of the pixels from the bricks that are in front of it.
The result is .. wrong..
It's not right.
It's very wrong.

And when you click the full image, you can see that all over the place. The blur around Platdude looks really frickin' weird.
So.. Um... I dunno what to do about that.

Which lead me to my craziest idea of them all.
Why not just open up Three.js and see if I can fix it myself?
I know it's to do with the Bokeh pass. And I know the Bokeh pass has access to Depth data, or it wouldn't work in the slightest..

Could I tweak it to work properly?


This version is a fair amount "better" in places, but also infinitely worse in others.
The "blur" around Platdude has now gone, but in other areas, there's some weird blurring issues.

Take the "splots" around the upper right hand side of the large batdude-signal.



You can very much tell those are square blocks.
They shouldn't look like that, by that point. They oughta be more blurred out.
I wonder why they aren't.
Hmmm..

It certainly isn't easy getting all of this to function correctly, that's for sure!!
Keep at it, Jay!
(Or maybe get back to the typing tutor, or get this week's ALChoon done.. either/or!)

A.I. Corner

> Reveal 🔎
: Download | Suno Link

Alternative version
: Download | Suno Link
Sung by Suno


"A cinematic photograph of Sheriff Cartoon Derek rustling up the colourful cubes into the ranch" by Replicate/Flux

> Reveal 🔎