4 ms·

How would one even learn how to do something like this? I feel like I have a high level understanding of most parts of the stack, but graphics programming has

How would one even learn how to do something like this? I feel like I have a high level understanding of most parts of the stack, but graphics programming has eluded me thus far. Would writing a ray tracer be a good starter project? I know I've seen it recommended by several people before.

temp13 4y ago
I'd recommend starting with javascript: https://thebookofshaders.com/ https://thebookofshaders.com/ https://threejs.org/examples/#webgl_geometry_terrain_raycast https://threejs.org/examples/#webgl_geometry_terrain_raycast
- Shared404 4y ago
  I appreciate the recommendation to start with JS, I'm actually trying to avoid targeting the browser as much as possible with my projects, with the exception of things actually returning hypertext or that I get for free via wasm or something else. The Book of Shaders looks quite interesting however, thank you for the link!
  - duskwuff 4y ago
    I'd encourage you to reconsider that. Using WebGL lets you skip over a lot of tedious initialization. Or, even better, using a platform like shadertoy.net lets you skip all the JS as well and just write shaders. Using these tools doesn't mean your final project has to be JS-based as well. It just happens to be a convenient way to focus on specific aspects of the project.
djmips 4y ago
I fell the synth is overlooked. There's a lot going on there in a tiny amount of code.
- Shared404 4y ago
  Definitely true! I've played around with audio a little bit before, and am a little more comfortable there (though by no means proficient).
djmips 4y ago
Thankfully for the graphics the very person who did the graphics in this Elevated demo is very generous with their time. Inigo Quilez has many instructional videos on his channel in how to code procedural graphics from the very beginner to the advanced. I link a couple of examples. You can watch the more advanced video even as a beginner but trying yourself is easier at the beginner level. Beginner. https://youtu.be/0ifChJ0nJfM https://youtu.be/0ifChJ0nJfM Advanced. https://youtu.be/BFld4EBO2RE https://youtu.be/BFld4EBO2RE Website. https://iquilezles.org/ https://iquilezles.org/
- jwatzman 4y ago
  Indeed his videos are amazing. My recommendation though would be to start with the "beginner" video -- which is completely 2D but at least gets some ideas across. Then watch https://www.youtube.com/watch?v=PGtv-dBi2wE https://www.youtube.com/watch?v=PGtv-dBi2wE which isn't his but introduces how you get 3D out of fragment shaders. Finally just drink from the firehose -- https://www.youtube.com/watch?v=Cfe5UQ-1L9Q https://www.youtube.com/watch?v=Cfe5UQ-1L9Q is fantastic, yes it's five hours but worth it. (Definitely come into that familiar with the idea of raymarching though... the first few minutes start off super basic but it goes to eleven real quick.)
  - djmips 4y ago
    great! Thanks for your course!
erwincoumans 4y ago
For basic 3d graphics rasterization concepts and implementation check out 500 lines C++ TinyRenderer and its wiki here: https://github.com/ssloy/tinyrenderer https://github.com/ssloy/tinyrenderer and the 100 lines Python version (only numpy dependency) here: https://github.com/rougier/tiny-renderer https://github.com/rougier/tiny-renderer Raytracing in a weekend is also useful: https://raytracing.github.io/ https://raytracing.github.io/
skrebbel 4y ago
> Would writing a ray tracer be a good starter project? Yes!
greenhorn123 4y ago
A good starterpoint would be any old 8 bit machine with bitmapped memory and a copy of Newman and Sproull.
djmips 4y ago
Specific to this demo, Inigo Quilez did a breakdown back in 2009 called 'behind elevated' for Function 2009 but I can't find it on his site today. Maybe it's there. But here's the archive link to the pdf. https://web.archive.org/web/20120119015415if_/http://www.iquilezles.org/www/material/function2009/function2009.pdf https://web.archive.org/web/20120119015415if_/http://www.iqu...
djmips 4y ago
And finally 'Elevated' commented in Shadertoy with links to the techniques on his blog. https://www.shadertoy.com/view/MdX3Rr https://www.shadertoy.com/view/MdX3Rr

temp13 4y ago

I'd recommend starting with javascript: https://thebookofshaders.com/ https://thebookofshaders.com/ https://threejs.org/examples/#webgl_geometry_terrain_raycast https://threejs.org/examples/#webgl_geometry_terrain_raycast

Shared404 4y ago
I appreciate the recommendation to start with JS, I'm actually trying to avoid targeting the browser as much as possible with my projects, with the exception of things actually returning hypertext or that I get for free via wasm or something else. The Book of Shaders looks quite interesting however, thank you for the link!
- duskwuff 4y ago
  I'd encourage you to reconsider that. Using WebGL lets you skip over a lot of tedious initialization. Or, even better, using a platform like shadertoy.net lets you skip all the JS as well and just write shaders. Using these tools doesn't mean your final project has to be JS-based as well. It just happens to be a convenient way to focus on specific aspects of the project.

djmips 4y ago

I fell the synth is overlooked. There's a lot going on there in a tiny amount of code.

Shared404 4y ago
Definitely true! I've played around with audio a little bit before, and am a little more comfortable there (though by no means proficient).

djmips 4y ago

Thankfully for the graphics the very person who did the graphics in this Elevated demo is very generous with their time. Inigo Quilez has many instructional videos on his channel in how to code procedural graphics from the very beginner to the advanced. I link a couple of examples. You can watch the more advanced video even as a beginner but trying yourself is easier at the beginner level. Beginner. https://youtu.be/0ifChJ0nJfM https://youtu.be/0ifChJ0nJfM Advanced. https://youtu.be/BFld4EBO2RE https://youtu.be/BFld4EBO2RE Website. https://iquilezles.org/ https://iquilezles.org/

jwatzman 4y ago
Indeed his videos are amazing. My recommendation though would be to start with the "beginner" video -- which is completely 2D but at least gets some ideas across. Then watch https://www.youtube.com/watch?v=PGtv-dBi2wE https://www.youtube.com/watch?v=PGtv-dBi2wE which isn't his but introduces how you get 3D out of fragment shaders. Finally just drink from the firehose -- https://www.youtube.com/watch?v=Cfe5UQ-1L9Q https://www.youtube.com/watch?v=Cfe5UQ-1L9Q is fantastic, yes it's five hours but worth it. (Definitely come into that familiar with the idea of raymarching though... the first few minutes start off super basic but it goes to eleven real quick.)
- djmips 4y ago
  great! Thanks for your course!

erwincoumans 4y ago

For basic 3d graphics rasterization concepts and implementation check out 500 lines C++ TinyRenderer and its wiki here: https://github.com/ssloy/tinyrenderer https://github.com/ssloy/tinyrenderer and the 100 lines Python version (only numpy dependency) here: https://github.com/rougier/tiny-renderer https://github.com/rougier/tiny-renderer Raytracing in a weekend is also useful: https://raytracing.github.io/ https://raytracing.github.io/

skrebbel 4y ago

> Would writing a ray tracer be a good starter project? Yes!

greenhorn123 4y ago

A good starterpoint would be any old 8 bit machine with bitmapped memory and a copy of Newman and Sproull.

djmips 4y ago

Specific to this demo, Inigo Quilez did a breakdown back in 2009 called 'behind elevated' for Function 2009 but I can't find it on his site today. Maybe it's there. But here's the archive link to the pdf. https://web.archive.org/web/20120119015415if_/http://www.iquilezles.org/www/material/function2009/function2009.pdf https://web.archive.org/web/20120119015415if_/http://www.iqu...

djmips 4y ago

And finally 'Elevated' commented in Shadertoy with links to the techniques on his blog. https://www.shadertoy.com/view/MdX3Rr https://www.shadertoy.com/view/MdX3Rr