Top
Best
New

Posted by memalign 4 hours ago

Ball Pit(codepen.io)
127 points | 34 comments
verytrivial 4 hours ago|
For some context, I think this is by mr.doob of three.js fame.
chrysoprace 47 minutes ago||
What a time to be alive. It runs surprisingly smooth on Firefox/Linux and doesn't appear to put much strain on my 9070 XT.
simlevesque 4 hours ago||
Beware: this might totally freeze your computer like it did for me.
__turbobrew__ 31 minutes ago||
Runs fine on my iphone
amelius 4 hours ago|||
Works fine on my phone, Firefox+GrapheneOS.
ivanjermakov 3 hours ago|||
WebGPU moment (have same issue on Firefox/Linux).
daemonologist 3 hours ago|||
Had to break out Chromium for this one - Firefox+Linux does not like webgpu (my whole DE started flickering).
mentalgear 3 hours ago||
I was amazed that it run smoothly on Firefox mac without WebGPU.
extra88 29 minutes ago||
Yeah, it seems fine on my iPhone 13 running Safari 18. It's not warming up.

Some ball shadows look kind of grainy but moving my finger around moves the balls around.

ninju 4 hours ago||
definitely needs a lot of computing power
wildrhythms 1 hour ago|||
Runs smoothly and without crashes on my Pixel phone
p1necone 4 hours ago||
This runs pretty smoothly on my middling laptop CPU while looking like a typical raytracing demo. I assume there's some smoke and mirrors involved?
h4ch1 4 hours ago|
No, it's using the newish SSGI and TRAA webgpu nodes. The three team has been making great progress with SSGI and webgpu in general and i'd recommend checking it out if you're interested.

There's also a denoise node in three (not used in this example), but SSGI still looks kinda blurry.

Work though is still going on: https://github.com/mrdoob/three.js/issues/31892

Sharlin 3 hours ago||
Jesus Christ, trying to figure out what TRAA is (presumably an anti-aliasing algorithm) and how it works and it's entirely impossible to google.
h4ch1 2 hours ago|||
TRAA basically works by using a history buffer, for example using the last couple of frames, all jittered a little bit to compute the pixel. There's still ghosting and smearing that can happen though because of this technique, so you have methods to counteract like subpixel correction where u increase temporal alpha when velocity is subpixel, but that can introduce some artifacts as well.

There's also SMAA T2x which the pmndrs team is planning on integrating into their postprocessing package[0]. This cryengine3 slideshow gives a nice overview of antialiasing methods if you're interested: http://iryoku.com/aacourse/downloads/13-Anti-Aliasing-Method...

[0] https://github.com/pmndrs/postprocessing

This paper also provides a decent overview of TRAA: https://fileadmin.cs.lth.se/cs/Education/EDAN35/projects/17C...

nilkn 32 minutes ago||||
The free Google AI mode got it for me on the first try by just pasting in the comment and asking what TRAA was in that context.
menno-dot-ai 3 hours ago|||
Temporal reprojection anti aliasing :)

https://www.threejs-blocks.com/docs/traaHD

Sharlin 3 hours ago||
The only thing even remotely related to graphics I found was references to "TrAA" in forum posts from 2006 (yeah) where I believe they referred to NVIDIA "Transparency AA" or something like that. "TRAA", "TRAA meaning", "TRAA graphics", "TRAA 3D" all gave fully irrelevant results :D
jldugger 2 hours ago||
If you make the assumption that "AA" is some form of antialiasing, it's not too bad: first scholar[1] hit expands the acronym to Temporal Reprojection Anti-Aliasing

    [1]: https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=traa+anti+aliasing&btnG=
RankingMember 3 hours ago||
> The babies look unhappy

> Add more balls

Fun simulation. The novelty of stuff like this still hasn't worn off for me in this era where we've got ray tracing in-browser.

rbosinger 1 hour ago||
I opened that on a Pixel 9a and was impressed on how well it worked. There's something neat about this.
Rendello 4 hours ago||
Beautiful, this must have been an excellent learning experience to make.

I've done some very basic rendering code in C from a rendering internals course, and at the same time I'm learning about perspective from the drawing/art side. I wonder how much learning one would help the other, in a practical way.

akie 3 hours ago|
The author is a world renowned expert in 3D graphics.
petermcneeley 1 hour ago||
Nice! I raise https://www.shadertoy.com/view/3tcGD2
hermitcrab 3 hours ago||
I'm a C++ programmer and only passingly familiar with web/JS stuff. What libraries/technologies is this using, apart from Javascript and three.js?
kurishutofu 1 hour ago|
it's the three.js library using the webgpu browser api, you can open view and edit the source directly on the codepen page:)
hermitcrab 1 hour ago||
Thanks.
CodeWriter23 3 hours ago|
I was able to get all the balls stuck on the 'ceiling'. Bug or feature?
More comments...