Ball Pit

(codepen.io)

103 points by memalign3 hours ago

12 comments

  • verytrivial2 hours ago
    For some context, I think this is by mr.doob of three.js fame.
  • simlevesque3 hours ago
    Beware: this might totally freeze your computer like it did for me.
    • ivanjermakov2 hours ago
      WebGPU moment (have same issue on Firefox/Linux).
    • daemonologist1 hour ago
      Had to break out Chromium for this one - Firefox+Linux does <i>not</i> like webgpu (my whole DE started flickering).
      • mentalgear1 hour ago
        I was amazed that it run smoothly on Firefox mac without WebGPU.
    • amelius3 hours ago
      Works fine on my phone, Firefox+GrapheneOS.
    • ninju3 hours ago
      definitely needs a lot of computing power
  • rbosinger31 minutes ago
    I opened that on a Pixel 9a and was impressed on how well it worked. There&#x27;s something neat about this.
  • p1necone3 hours ago
    This runs pretty smoothly on my middling laptop CPU while looking like a typical raytracing demo. I assume there&#x27;s <i>some</i> smoke and mirrors involved?
    • h4ch12 hours ago
      No, it&#x27;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&#x27;d recommend checking it out if you&#x27;re interested.<p>There&#x27;s also a denoise node in three (not used in this example), but SSGI still looks kinda blurry.<p>Work though is still going on: <a href="https:&#x2F;&#x2F;github.com&#x2F;mrdoob&#x2F;three.js&#x2F;issues&#x2F;31892" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mrdoob&#x2F;three.js&#x2F;issues&#x2F;31892</a>
      • Sharlin2 hours ago
        Jesus Christ, trying to figure out what TRAA is (presumably an anti-aliasing algorithm) and how it works and it&#x27;s entirely impossible to google.
        • h4ch11 hour 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&#x27;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.<p>There&#x27;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&#x27;re interested: <a href="http:&#x2F;&#x2F;iryoku.com&#x2F;aacourse&#x2F;downloads&#x2F;13-Anti-Aliasing-Methods-in-CryENGINE-3.pdf" rel="nofollow">http:&#x2F;&#x2F;iryoku.com&#x2F;aacourse&#x2F;downloads&#x2F;13-Anti-Aliasing-Method...</a><p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;pmndrs&#x2F;postprocessing" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;pmndrs&#x2F;postprocessing</a><p>This paper also provides a decent overview of TRAA: <a href="https:&#x2F;&#x2F;fileadmin.cs.lth.se&#x2F;cs&#x2F;Education&#x2F;EDAN35&#x2F;projects&#x2F;17Christian_TRAA.pdf" rel="nofollow">https:&#x2F;&#x2F;fileadmin.cs.lth.se&#x2F;cs&#x2F;Education&#x2F;EDAN35&#x2F;projects&#x2F;17C...</a>
        • menno-dot-ai2 hours ago
          Temporal reprojection anti aliasing :)<p><a href="https:&#x2F;&#x2F;www.threejs-blocks.com&#x2F;docs&#x2F;traaHD" rel="nofollow">https:&#x2F;&#x2F;www.threejs-blocks.com&#x2F;docs&#x2F;traaHD</a>
          • Sharlin2 hours ago
            The only thing even remotely related to graphics I found was references to &quot;TrAA&quot; in forum posts from 2006 (yeah) where I believe they referred to NVIDIA &quot;Transparency AA&quot; or something like that. &quot;TRAA&quot;, &quot;TRAA meaning&quot;, &quot;TRAA graphics&quot;, &quot;TRAA 3D&quot; all gave fully irrelevant results :D
            • jldugger1 hour ago
              If you make the assumption that &quot;AA&quot; is some form of antialiasing, it&#x27;s not too bad: first scholar[1] hit expands the acronym to Temporal Reprojection Anti-Aliasing<p><pre><code> [1]: https:&#x2F;&#x2F;scholar.google.com&#x2F;scholar?hl=en&amp;as_sdt=0%2C5&amp;q=traa+anti+aliasing&amp;btnG=</code></pre>
  • RankingMember1 hour ago
    &gt; The babies look unhappy<p>&gt; Add more balls<p>Fun simulation. The novelty of stuff like this still hasn&#x27;t worn off for me in this era where we&#x27;ve got ray tracing in-browser.
  • CodeWriter232 hours ago
    I was able to get all the balls stuck on the &#x27;ceiling&#x27;. Bug or feature?
  • Rendello2 hours ago
    Beautiful, this must have been an excellent learning experience to make.<p>I&#x27;ve done some very basic rendering code in C from a rendering internals course, and at the same time I&#x27;m learning about perspective from the drawing&#x2F;art side. I wonder how much learning one would help the other, in a practical way.
    • akie2 hours ago
      The author is a world renowned expert in 3D graphics.
  • hermitcrab2 hours ago
    I&#x27;m a C++ programmer and only passingly familiar with web&#x2F;JS stuff. What libraries&#x2F;technologies is this using, apart from Javascript and three.js?
    • kurishutofu2 minutes ago
      it&#x27;s the three.js library using the webgpu browser api, you can open view and edit the source directly on the codepen page:)
  • TacticalCoder35 minutes ago
    I have fond memories of visiting a university in the early 90s on a demo day and there was a (physical) sphere in a Cornell box:<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Cornell_box" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Cornell_box</a><p>And next to it was a super beefy computer doing a 3D rendering of a similar scene.<p>35 years+ later I&#x27;ve got &quot;many spheres in a Cornell box&quot; rendering in my browser, love it : )
  • artursapek26 minutes ago
    that&#x27;s amazing. it runs so smoothly on my M4 Pro
  • newobj3 hours ago
    path tracer?
    • newobj3 hours ago
      nevermind i see the ssgi&#x2F;traa code. looks great!
  • jessepasley2 hours ago
    Is this marketing for the Shape Store? It&#x27;s cool but I still don&#x27;t know when my area is getting a Shape Store.
    • adzm2 hours ago
      I tried to be helpful and explain what the shape store was, but found myself with a lack of words. Instead here is the know your meme page: <a href="https:&#x2F;&#x2F;knowyourmeme.com&#x2F;memes&#x2F;the-shape-store-ai-video" rel="nofollow">https:&#x2F;&#x2F;knowyourmeme.com&#x2F;memes&#x2F;the-shape-store-ai-video</a><p>tldr it is an ai video, subtle analog horror &#x2F; backrooms style