6 ms·

Rendering Worlds with Two Triangles on the GPU [pdf]

109 points by muyyatin 12y ago

sp332 12y ago
You can download it from here http://www.pouet.net/prod.php?which=51074 http://www.pouet.net/prod.php?which=51074 It's been updated to run more reliably (edit: on Vista) but I can't find a version that will run on Win7. Edit: I found a similar one on Shadertoy https://www.shadertoy.com/view/lsf3zr https://www.shadertoy.com/view/lsf3zr
- foxhill 12y ago
  i just ran it on my mac successfully with wine..!
algorias 12y ago
Ah, the classic presentation that got me started in the demoscene a couple of years back. The Google cache version of the pdf doesn't include any images, so I put up a copy over here: https://dl.dropboxusercontent.com/u/2173295/rwwtt.pdf https://dl.dropboxusercontent.com/u/2173295/rwwtt.pdf
- vanderZwan 12y ago
  Thanks for the mirror. Know of any novel techniques/rehashing of old techniques that have been developed since?
  - algorias 12y ago
    Well, for very small intros (4k/8k) distance fields are still hard to beat due to their compactness. A couple of examples not based on distfields, off the top of my head: http://www.pouet.net/prod.php?which=62027 http://www.pouet.net/prod.php?which=62027 (No idea what this is, but it's great) http://www.pouet.net/prod.php?which=62974 http://www.pouet.net/prod.php?which=62974 (reverse fluid simulation) http://www.pouet.net/prod.php?which=59613 http://www.pouet.net/prod.php?which=59613 (particles) For 64k intros and size unlimited demos the possibilities are too many to list. Procedural mesh generation is a classic approach which has found great modern use recently: http://www.pouet.net/prod.php?which=61204 http://www.pouet.net/prod.php?which=61204 (if you follow 1 link in this comment make it this one)
    - vanderZwan 12y ago
      Awesome, thanks! What kind of mathemagical trickery is that reverse fluid simulation?!
      - algorias 12y ago
        Seven held a short seminar about it, it's the first one in this video: http://www.youtube.com/watch?v=DQ8eB_FORLo http://www.youtube.com/watch?v=DQ8eB_FORLo
rogerallen 12y ago
And if you want to try things out yourself, iq has created a playground for you here: https://www.shadertoy.com/ https://www.shadertoy.com/
- z303 12y ago
  and one similar to Elevated https://www.shadertoy.com/view/4slGD4 https://www.shadertoy.com/view/4slGD4
  - sitkack 12y ago
    It is disingenuous for the author to not cite Elevated.
DanAndersen 12y ago
This is a really impressive presentation -- after looking on from afar at the seemingly magical works of the demoscene, this finally helped me understand a little bit of how the magic happens. I've only got a bit of GLSL experience so far but now I want to learn a lot more.
thisjepisje 12y ago
Could someone explain to me what the "two triangles that cover the entire screen area" have to do with anything?
- bratsche 12y ago
  It basically means everything is happening in the shaders, not in geometry. There has to be some vertexes though, and the minimum you can have to cover the screen is two triangles.
  - musawirali 12y ago
    That is incorrect. You can cover the screen with a single triangle ... just make it big enough. The corners get clipped and the middle region of the big triangle will cover the screen.
    - lotsofmangos 12y ago
      You can get around the clipping problem by displaying it on an old Interocitor.
    - dualogy 12y ago
      True, both approaches are equally valid and being used. Every once in a while some gfx haxors also spend baffling amounts of effort on humorously "benchmarking" both approaches against each other.. ;)
- falsedan 12y ago
  Two triangles make a flat screen (a 'quad'), which is sized to fill your actual screen. When you run a pixel shader over the quad, it ends up running for every pixel on your screen. The result is you have the visual effect of the pixel shader giving a very detailed-looking scene, when the actual geometry is as simple as it gets. Here's an old experiment I did where the pixel shader is running on the faces of a cube http://dgholz.github.io/GLSLSphere/ http://dgholz.github.io/GLSLSphere/ The cube edges are highlighted in red so you can see them. I like green.
- 12y ago
DanBC 12y ago
I love these. People might enjoy noodling around the Geisswerks pages which have many code snippets around ray tracing; graphic demos; and so on. http://www.geisswerks.com/ http://www.geisswerks.com/
hughes 12y ago
I was working with distance fields back in 2008, and the idea of inverting the process blew my mind. I had no idea Iñigo Quilez's image was produced this way and I'm so glad I had the chance to see how it was made. Thanks for posting!!
userbinator 12y ago
I think the most elegant thing about this method is that it describes a scene in terms of its basic mathematical 3D objects and transformations on them (list here: http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm http://www.iquilezles.org/www/articles/distfunctions/distfun... ) and then exploits the massive parallelism of the GPU for rendering all the pixels. Here's a demo of someone playing around with it, complete with a Slisesix-inspired scene: http://www.rpenalva.com/blog/?p=254 http://www.rpenalva.com/blog/?p=254 This set of slides is also related: http://www.iquilezles.org/www/material/function2009/function2009.pdf http://www.iquilezles.org/www/material/function2009/function...
yzzxy 12y ago
Is the demoscene a good place to get into graphics programming? The prevalence of older methods leads me to believe one could learn in a similar progression to the graphics gurus of today, moving from simpler old methods with performance and size optimization to modern techniques?

109 points by muyyatin 12y ago

sp332 12y ago

You can download it from here http://www.pouet.net/prod.php?which=51074 http://www.pouet.net/prod.php?which=51074 It's been updated to run more reliably (edit: on Vista) but I can't find a version that will run on Win7. Edit: I found a similar one on Shadertoy https://www.shadertoy.com/view/lsf3zr https://www.shadertoy.com/view/lsf3zr

foxhill 12y ago
i just ran it on my mac successfully with wine..!

algorias 12y ago

Ah, the classic presentation that got me started in the demoscene a couple of years back. The Google cache version of the pdf doesn't include any images, so I put up a copy over here: https://dl.dropboxusercontent.com/u/2173295/rwwtt.pdf https://dl.dropboxusercontent.com/u/2173295/rwwtt.pdf

vanderZwan 12y ago
Thanks for the mirror. Know of any novel techniques/rehashing of old techniques that have been developed since?
- algorias 12y ago
  Well, for very small intros (4k/8k) distance fields are still hard to beat due to their compactness. A couple of examples not based on distfields, off the top of my head: http://www.pouet.net/prod.php?which=62027 http://www.pouet.net/prod.php?which=62027 (No idea what this is, but it's great) http://www.pouet.net/prod.php?which=62974 http://www.pouet.net/prod.php?which=62974 (reverse fluid simulation) http://www.pouet.net/prod.php?which=59613 http://www.pouet.net/prod.php?which=59613 (particles) For 64k intros and size unlimited demos the possibilities are too many to list. Procedural mesh generation is a classic approach which has found great modern use recently: http://www.pouet.net/prod.php?which=61204 http://www.pouet.net/prod.php?which=61204 (if you follow 1 link in this comment make it this one)
  - vanderZwan 12y ago
    Awesome, thanks! What kind of mathemagical trickery is that reverse fluid simulation?!
    - algorias 12y ago
      Seven held a short seminar about it, it's the first one in this video: http://www.youtube.com/watch?v=DQ8eB_FORLo http://www.youtube.com/watch?v=DQ8eB_FORLo

rogerallen 12y ago

And if you want to try things out yourself, iq has created a playground for you here: https://www.shadertoy.com/ https://www.shadertoy.com/

z303 12y ago
and one similar to Elevated https://www.shadertoy.com/view/4slGD4 https://www.shadertoy.com/view/4slGD4
- sitkack 12y ago
  It is disingenuous for the author to not cite Elevated.

DanAndersen 12y ago

This is a really impressive presentation -- after looking on from afar at the seemingly magical works of the demoscene, this finally helped me understand a little bit of how the magic happens. I've only got a bit of GLSL experience so far but now I want to learn a lot more.

thisjepisje 12y ago

Could someone explain to me what the "two triangles that cover the entire screen area" have to do with anything?

bratsche 12y ago
It basically means everything is happening in the shaders, not in geometry. There has to be some vertexes though, and the minimum you can have to cover the screen is two triangles.
- musawirali 12y ago
  That is incorrect. You can cover the screen with a single triangle ... just make it big enough. The corners get clipped and the middle region of the big triangle will cover the screen.
  - lotsofmangos 12y ago
    You can get around the clipping problem by displaying it on an old Interocitor.
  - dualogy 12y ago
    True, both approaches are equally valid and being used. Every once in a while some gfx haxors also spend baffling amounts of effort on humorously "benchmarking" both approaches against each other.. ;)
falsedan 12y ago
Two triangles make a flat screen (a 'quad'), which is sized to fill your actual screen. When you run a pixel shader over the quad, it ends up running for every pixel on your screen. The result is you have the visual effect of the pixel shader giving a very detailed-looking scene, when the actual geometry is as simple as it gets. Here's an old experiment I did where the pixel shader is running on the faces of a cube http://dgholz.github.io/GLSLSphere/ http://dgholz.github.io/GLSLSphere/ The cube edges are highlighted in red so you can see them. I like green.
12y ago

DanBC 12y ago

I love these. People might enjoy noodling around the Geisswerks pages which have many code snippets around ray tracing; graphic demos; and so on. http://www.geisswerks.com/ http://www.geisswerks.com/

hughes 12y ago

I was working with distance fields back in 2008, and the idea of inverting the process blew my mind. I had no idea Iñigo Quilez's image was produced this way and I'm so glad I had the chance to see how it was made. Thanks for posting!!

userbinator 12y ago

I think the most elegant thing about this method is that it describes a scene in terms of its basic mathematical 3D objects and transformations on them (list here: http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm http://www.iquilezles.org/www/articles/distfunctions/distfun... ) and then exploits the massive parallelism of the GPU for rendering all the pixels. Here's a demo of someone playing around with it, complete with a Slisesix-inspired scene: http://www.rpenalva.com/blog/?p=254 http://www.rpenalva.com/blog/?p=254 This set of slides is also related: http://www.iquilezles.org/www/material/function2009/function2009.pdf http://www.iquilezles.org/www/material/function2009/function...

yzzxy 12y ago

Is the demoscene a good place to get into graphics programming? The prevalence of older methods leads me to believe one could learn in a similar progression to the graphics gurus of today, moving from simpler old methods with performance and size optimization to modern techniques?