Hacker News Reader

Comment by Shared404 | Hacker News Reader

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.

View on HN

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

Advanced. https://youtu.be/BFld4EBO2RE

Website. https://iquilezles.org/

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 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 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.)

great! Thanks for your course!

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

Raytracing in a weekend is also useful: https://raytracing.github.io/

I'd recommend starting with javascript:

https://thebookofshaders.com/

https://threejs.org/examples/#webgl_geometry_terrain_raycast

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!

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.

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

And finally 'Elevated' commented in Shadertoy with links to the techniques on his blog.

https://www.shadertoy.com/view/MdX3Rr

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.iqu...

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

Yes!

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

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

Reply on news.ycombinator.com