L
Lode Vandevenne
lodev.org · Personal blog · on HN since 2014
Lode Vandevenne writes graphics programming tutorials and personal projects, including raycasting, demoscene effects, LodePNG, and a logic simulator.
What HN saysCommenters call his old-school tutorials great, and HN links them for the raycasting and fire effect pages, which they find simple and rewarding to build.
36HN people shared it
26linked it in comments
14stories submitted
624story points
6 months agolast shared
2014people per year2026
Most-shared posts
- 1Raycasting19 people · 8 points · first shared 2014 · discussion on HN
- 2Lode's Computer Graphics Tutorial8 people · 11 points · first shared 2016 · discussion on HN
- 3The XOR Texture (2004)2 people · 227 points · first shared 2016 · 49 comments on HN
- 4LodePNG: All-in-one PNG image decoder and encoder for C and C++2 people · 56 points · first shared 2014 · 18 comments on HN
- 5Fire2 people · first shared 2018
- 6Show HN: LogicEmu – Online Logic Simulator1 people · 210 points · first shared 2018 · 20 comments on HN
- 7Jmat.js: A new mathematics library in JavaScript1 people · 84 points · first shared 2014 · 13 comments on HN
- 8Gammaplex Programming Language (2007)1 people · 24 points · first shared 2015 · discussion on HN
- 9Lode's Color Converter1 people · 3 points · first shared 2018 · discussion on HN
- 10Turing Tumble Emulator in JavaScript1 people · 1 points · first shared 2017 · discussion on HN
- 11Examples1 people · first shared 2024
- 12Floodfill1 people · first shared 2018
- 13Raycasting21 people · first shared 2024
- 14Index1 people · first shared 2019
- 15Raycasting31 people · first shared 2024
What HN people wrote when they linked it
Sharlin · 2024-03-24
The classic demoscene fire effect is surprisingly simple and at the same time surprisingly physically accurate, or at least physically inspired: https://lodev.org/cgtutor/fire.html
gh123man · 2023-02-27
Nice writeup! Building raycasting engines is fun and rewarding. You can get a lot of visual impact with very small and easy to understand code. I took a stab at it and ended up adding portals which I thought was really fun (https://github.com/gh123man/Portal-Raycaster).
I've been thinking about re-writing my raycasting engine in Rust but never really found the time - glad to see someone has done it and documented it so well!
If anyone else is interested in raycasting this page is also worth a read: https://lodev.org/cgtutor/raycasting.html
myth_drannon · 2020-04-15
lodev has great oldschool tutorials: https://lodev.org/cgtutor/
gadgetoid · 2019-12-03
As someone currently embroiled in a project to motivate people to explore classic videogame development techniques- this is super interesting.
I'm not sure how I feel about Pygame/Pygame Zero, though. It feels a little detached from classic C techniques and doesn't present the technical challenges of original hardware. On the up side, it's far more accessible to beginners.
I really enjoyed working through, for example, this Wolfenstein 3D-style raycasting tutorial- https://lodev.org/cgtutor/raycasting.html
simias · 2018-03-07
I wrote a similar code a few years ago, although it also supported textures (including ground and skybox, unlike the original Wolfenstein). I don't know if it'll be more to your taste but there are afew comments: https://bitbucket.org/simias/wolf/src/873cad46f3c8281e7d94293b21af3c72… the magic happens in wolf_horizontal_intersect. Note that I use fixed point which obfuscates the arithmetic a bit (I was targeting an embedded platform without hard float at the time).
It looks like this while running: https://svkt.org/~simias/misc/wolf-floor.png
That being said if you're interested in writing something like that I recommend that you use any basic tutorial on raycasting and try implementing it "from scratch" yourself, it's pretty simple and quite fun IMO. IIRC I used this one: http://lodev.org/cgtutor/raycasting.html
alxmdev · 2016-12-30
Excellent resource, I remember browsing it many years ago - glad to see it's still online!
Also check out this other nice raycasting tutorial: http://lodev.org/cgtutor/raycasting.html
bugmenot3 · 2016-08-04
I knew I'd seen this pattern before! The XOR texture [1] is very similar. Apparently it was overused in early 2D games to test texture mappers (or for "fancy floor tiles", lol)
Actually, looking at the XOR, AND, OR textures side by side, it's easy to gain more intuition for them.
I definitely recommend reading some of the articles at [2], they're pretty entertaining and straight-forward.
[1] http://lodev.org/cgtutor/xortexture.html
[2] http://lodev.org/cgtutor/
TheMozg · 2016-01-13
There is a great tutorial (it's actually a series of them) which I used: http://lodev.org/cgtutor/raycasting.html
It's old and C++ but explains raycasting very well.
And there is also a similar project in just 265 JS lines: http://www.playfuljs.com/a-first-person-engine-in-265-lines/
jiggy2011 · 2014-06-03
Pretty sure the author followed this tutorial.
http://lodev.org/cgtutor/raycasting.html
doubletwoyou · 2026-04-30
The raycasting code here looks pretty similar to that of https://lodev.org/cgtutor/raycasting.html
shric · 2024-12-21
Beautiful. Correct me if I'm wrong, but this looks like a bash version of https://lodev.org/cgtutor/raycasting.html
Edit: ah, just noticed this is in the readme :(
rpoisel · 2024-12-21
Thanks for the hint! That's exactly what I was looking for as I have never looked into raycasting but having an interest in it.
Direct Links:
- https://nthorn.com/articles/batch_raycaster/ (batch variant)
- https://lodev.org/cgtutor/raycasting.html (general intro)
svag · 2024-12-21
There are https://lodev.org/cgtutor/raycasting2.html and https://lodev.org/cgtutor/raycasting3.html just FYI
arcastroe · 2024-12-18
When I was in middle school, I had dabbled in coding but only knew how to make simple CLI applications that ran on the terminal. Then one day I stumbled on Lode's Computer Graphics Tutorial and I finally had easy to understand examples of how to open a window and draw some graphics on the screen. That led me to recreating a bunch of retro games (Pacman, Snake, Space Invaders, etc) that would not have been possible on the terminal.
I credit this site for really kickstarting my career in software development from a somewhat early age. Big shout out and thank you to Lode. Back then, I practically memorized all the pages and examples in https://lodev.org/cgtutor/, even if some of the math went right over my head at the time
andrelaszlo · 2024-12-18
https://lodev.org/cgtutor/examples.html#screen
They're set by screen, exactly!
smokel · 2023-09-27
PNG decoding is little more than an implementation of DEFLATE and handling of the delta encoding. For your own OS you most likely do not have to be feature complete. As an example, picoPNG [1] decodes most .png images, and is only ~500 lines of beautiful C++ code. For most practical purposes, you can probably get away with much less.
[1] https://lodev.org/lodepng/
Waterluvian · 2023-04-28
I used this one: https://lodev.org/cgtutor/raycasting.html (note this is just chapter 1 of 4 related chapters)
It's decent. In some cases it's a bit clumsy when they try to explain mathematics in natural language, but we can't always have pretty Latex-rendered math functions and graphics. =)
dahart · 2022-01-04
Doom’s predecessor Wolfenstein 3D was famous for using ray casting, and the Doom engine inherited ray casting and extended it to handle different floor heights. https://lodev.org/cgtutor/raycasting.html
kingcharles · 2021-11-03
That's incredible. Was this the earliest instance of raycasting in the wild?
Good intro to raycasting for those interested:
https://lodev.org/cgtutor/raycasting.html
krige · 2019-03-13
Also compare this: https://lodev.org/cgtutor/raycasting.html
It's a bit old but also explains a lot of the underlying logic.
And it's not written in javascript so it may be more readable to some.
robterrell · 2019-02-15
It's a neat trick of projection, and really easy to hack on and extend yourself once you know the trick. Using your map of the space, cast a ray from the camera position through every column of the display rectangle; using the distance the ray travelled before intersecting the wall, you can calculate the apparent height of the wall seen in that column of the display; so, in that column, draw the wall that high. You can get fancier with textures for the walls, varying the floor height, walls that can appear and disappear (i.e. "doors"), and so on.
Better than my 10-second explanation: https://lodev.org/cgtutor/raycasting.html
ASipos · 2018-12-29
Also see:
https://lodev.org/cgtutor/fire.html
which is part of:
https://lodev.org/cgtutor/
swyx · 2018-04-07
this is a pretty faithful reproduction. I like it! a lot of solid pointers to great algorithms in here.
- perlin noise: https://en.wikipedia.org/wiki/Perlin_noise for generating terrain bumps
- flood fill for painting terrain on top of noise : http://lodev.org/cgtutor/floodfill.html#Scanline_Floodfill_Algorithm_W…
- convolutions with webgl shaders https://github.com/phoboslab/WebGLImageFilter
- dilation filter
- "closing" in image processing https://en.wikipedia.org/wiki/Closing_(morphology)
- deciding in the hqx algorithm for anti aliasing https://en.wikipedia.org/wiki/Hqx
- texturing
- halton sequences for even distribution of worms https://en.wikipedia.org/wiki/Halton_sequence
- sine wave for water
all done in the browser.
github repo at https://github.com/juliango202/TerrainVer
mantenpanther · 2015-01-06
Really enjoyable content. I also like this tutorials on pseudo-3d raycasting: http://lodev.org/cgtutor/raycasting.html
A few years ago I used this tutorials to hack together a little raycaster is JS: http://jsfiddle.net/htyvrjaa/
genpfault · 2022-07-25
PyComfy · 2018-03-07