Literate raytracer: a simple implementation of raytracing in Javascript

ggambetta 7 years ago |

On the opposite end of the spectrum, there's my very illiterate and very short JS raytracer (959 bytes): http://www.gabrielgambetta.com/tiny-raytracer.html

To atone for my sins, I also wrote a (free, online) 3D rendering textbook, half of it dedicated to raytracing: http://www.gabrielgambetta.com/computer-graphics-from-scratc...

krat0sprakhar 7 years ago | |

This is really awesome! Thanks for writing and sharing your book for free!

jsheard 7 years ago |

Peter Shirley's Raytracing in a Weekend minibooks are another good introduction that goes beyond rendering spheres, and they are now available for free:

https://twitter.com/Peter_shirley/status/1029342221139509249

thrower123 7 years ago | |

Jamis Buck (wrote Mazes for Programmers) also has a pretty good one in progress. It's very TDD driven, which is an interesting approach.

https://pragprog.com/book/jbtracer/the-ray-tracer-challenge

nlh 7 years ago | | |

Huge endorsement for this one - I’ve been working my way through it and I’ve found that this has helped me level up in my language skills in a way that no other method has so far.

setr 7 years ago | | |

How much of this has actually been written? Can't seem to find any information on current progress beyond the releases section (which notes 4 additional chapters in the last couple months, but little about existing chapters), and googling doesn't immediately turn up any kind progress-blog. I'm not assuming in-order writing, since I've seen other `beta` e-books not follow it (and it often makes sense not to)

thrower123 7 years ago | | |

So far the pace seems to be about two chapters a month, with the update today bringing the total up to 14. According to the TOC, that only leaves three more to go, plus revision and editing. It is being released in-order - following the author's twitter and screenshots posted there over the past two years, it looks like the content is complete.

AlexeyBrin 7 years ago | | |

I bought the book in beta, chapters 1 - 14 are complete, the last 3 chapters are in progress. More than enough material to keep you busy until the author finishes the last 3 chapters.

null0pointer 7 years ago | | |

TDD is a great approach for a raytracer. They can be absolute nightmares to debug when a minor error in some calculation causes subtle artifacts in your image.

triclops200 7 years ago |

There's a bug in the lambert code:

    var lightPoint = scene.lights[0];

this should be

    var lightPoint = scene.lights[i];

mtharrison 7 years ago |

Great tutorial! I took this work and expanded on it by building a Rust/Wasm version of this Raytracer. I wrote about it here: http://matt-harrison.com/raytracing-webassembly-vs-javascrip...

akdas 7 years ago |

I love the focus on implementation. That really connects the underlying ideas with working code.

For those interested in a gentle introduction to those underlying ideas, including a refresher on the required math, I taught a class on how to implement a ray tracer. All the materials are available: https://avik-das.github.io/build-your-own-raytracer/

JosephRedfern 7 years ago |

I've bodged together a slow python implementation here: https://gist.github.com/JosephRedfern/ea6a7e8f3f59a28296ac30...

I kept variable names roughly the same in order to make it easy to compare the JS version to the Python version. I also translated vector.js to python (for the same reasons), even though you could probably just use numpy directly.

IvanK_net 7 years ago |

It reminds me a photorealistic JS raytracer (SmallPT port) I made five years ago :) http://renderer.ivank.net/ .

Here are output images: http://renderer.ivank.net/balls.jpg http://renderer.ivank.net/cornell.jpg

I also made a version with triangle models: http://3dtool.ivank.net/ :)

zackmorris 7 years ago |

Just so people don't get too hung up on speed issues, please realize that the major advantage with raytracing over rasterization is that it's trivially parallelizable. Naive implementations of ray tracing and rasterization run at O(log n) and O(n) respectively, so at some point in the near future ray tracing (or its optimized version ray marching) will likely win out. See the "Calculation effort" graph mid-page:

https://www.pcper.com/reviews/Processors/Ray-Tracing-and-Gam...

And a bit more recent writeup:

https://pharr.org/matt/blog/2018/05/27/nvidia-bound.html

Many of the Demoscene demos today use ray marching. Here are some examples of ray marching in WebGL, to show what's possible (and probably inevitable) in the next 5-10 years:

http://raymarching.com/

acjohnson55 7 years ago |

I'm intrigued by the concept of literate programming and interested in exploring options for a Scala project I'm working on right now. It looks like this one was done using Docco [1]. Docco supports Scala, and it appears to be a pretty lightweight approach, largely using Markdown. I'm curious whether any literate programming veterans have tooling they prefer?

[1] http://ashkenas.com/docco/

henrikeh 7 years ago | |

It depends on what you are looking for. Docco and friends seem to only be capable of reversing the relationship between comments and code.

However, they don’t allow you to structure the program however you might like independently the need order and _nesting_ of code. In a lot of cases you can get around this through appropriate design patterns.

I’ve recently taken a quite deep dive into possible tools for literate programming. I work with signal processing so code documentation is extremely important but also frustratingly challenging.

There are a lot of “old” tools for literate programming (noweb, FunnelWeb), and they all lack in platform support, but are exceptionally stable and quite pleasant to work with. The more modern “true” literate programming tools are typically using a form of markdown (no links since my notes are not at hand). The last group are the “coffee script style” tools and they seem to be quite popular and active.

It seems to be a case of natural selection for tooling: true literate programming is serverely disadvantaged in terms of IDE/editor support and the programming philosophy is, unfortunate, too different from the norm. Docco styles seems highly pragmatic in contrast.

One option I haven’t tried yet is Emacs’ org-mode which includes true literate programming support. I haven’t found much with regards to real-world usage.

acjohnson55 7 years ago | | |

I think I gonna try https://github.com/driusan/lmt

I like that it is markdown and that it has a many-to-many mapping of input to output files.

acjohnson55 7 years ago | | |

Update: tried lmt and it works great!

jacquesm 7 years ago | |

The Leo editor is pretty good.

nielsbot 7 years ago |

I appreciate the concept of literate programming, however I think this example would be better presented in a 2-column format: All chunks of the program presented in 1 column with accompanying explanations in a second, parallel column. There would be breaks in either column to allow for either the chunk of code or prose to have different lengths.

Then, if desired, one could read the code and/or narrative straight through.

madrox 7 years ago |

When I was young, graphics programming is what got me to try coding in the first place. At the time, all books I picked up for intros to graphics programming were more about teaching DirectX, and DirectX in the late 90s before IntelliSense was no fun. I found it horribly arcane and ended up a backend/web engineer.

I think if I had better examples like this to follow I would've gotten a lot farther.

pjmlp 7 years ago | |

Visual Studio has IntelliSense since 1996, were you using DirectX 1.0?

Impossible 7 years ago |

Inigo Quilez (one of the Shadertoy creators) has a good list of ray-primitive intersections with GLSL source. http://www.iquilezles.org/www/articles/intersectors/intersec...

JazzXP 7 years ago |

I did similar a few years ago, but then after seeing how bad the performance was, I took the exact algorithm and redid it in Java (just for comparison) and the difference in performance astounded me.