I skimmed the source code (base.js, light.js) to see what he was using.
It appears to be entirely custom, with no graphics libraries like Three.js.
He even implements his own low-level math functions from scratch.
It's impressive to see that kind of discipline.
Honestly, if you’re wanting to produce something as good as this, Three.js or other such things just aren’t particularly helpful. It is easier to just ignore all the libraries and do it all from scratch. Popular libraries are good at producing finished products in a particular shape. When you’re wanting to demonstrate the implementation steps and allow intricate fiddling and have everything polished like you want it, they’re generally somewhere between painful and hopeless.
You could still keep Three.js for bits like vector calculations, but it just doesn’t feel worth it, it’s easy enough to implement yourself—or copy and paste from some such library and modify as needed—and will be much lighter. And you build up the bits and pieces you need over time.
I know a good number of photographers can struggle with it when they're getting into flash/strobe photography (even though may be good with f-stops generally, the moving of the flash stand appropriately takes some mental 'accounting').
In your first link the narrator says he "doesn’t understand the physics of it" but there's really no physics involved (ignoring scatter). It’s just a consequence of the math. It’s relatively easy to understand if you think of it in terms of the surface of a sphere. There is a fixed amount of light coming from a point source, and as the light travels outward you can think of it as being spread over the surface of a sphere. Since the surface area of a sphere is 4pir^2, if you double the radius the area quadruples, and therefore the light intensity at any point on the sphere drops by a factor of four.
edit: And now after rtfm I see there's a nice demo of this!
15 years ago I thought this type of thing would be the future of education. Is the educational system anything like this nowadays or are kids still more or less still stuck with static textbooks?
This is edutainment. Kind of like YouTube channels like 3Blue1Brown, Veritasium or MinutePhysics. All good, it helps build intuition, and to better understand the world, but it is a bit lacking for actually using that knowledge.
Notice how few equations there are in this page, it is a common feature of edutainment, they won't give you equations unless they can't get away without. No linear algebra here, just a cosine (actually a dot product in disguise) and the inverse square law (1/r²), two equations he considered too fundamental to skip. Also notable is the lack of exercises.
But now that you have read this page, and played with the interactive elements, you probably have a good understanding of how lights and shadows work, but can you write a 3D engine or even just calculate exposure time without your camera helping you? Without prior knowledge, probably not. For that, you actually need to do the maths, with exercises and all that. And by the way, look at the source code (it is not obfuscated), all the linear algebra that is not present in the article is there!
That, I think, explain the discrepancy between edutainment and textbooks. Textbooks are for you to do actual work, do the maths, solve problems, etc... not just give you an overview. That's also why is takes way longer and requires a lot more effort on the student part.
Interactive content like this one is good, and maybe it should be given a bit more consideration by the traditional educational system. But I don't think it can replace textbooks, at least not for the "hard part".
Comparing this site to Veritasium seems unfair to me. I don't see any evidence that this site generates direct revenue. I also think it's an excellent exercise in pedagogy. The best professors and brightest colleagues I remember from college - or, since you said "maths" I guess I should say "university" ;) - demonstrated extreme facility with the physical concepts and regarded their mathematical representations only as a useful tool to characterize them and communicate about them, not an end to themselves.
Maybe this is just personal preference. I knew capable students who were wrote and prescriptive in their approach to the courses, but I was closer to those who played in the conceptual end of the pool.
I once made a resource like this site for my own educational benefit when I was grappling with MR physics. You're right - I had to do the math(s)! - and came away with a much clearer understanding of the subject. Still, I received lots of correspondence from students and professors who found the visual aid helpful on their journey.
School incentives are not really aligned around maximizing learning rate for every student. (E.g. that is why there is/was debate around teaching phonetics)
> With a small light source even a small change in position on the surface has big effects on the light’s visibility – it quickly becomes fully visible or fully occluded. On the other hand, with a big light source that transition is much smoother – the distance on the floor surface between a completely exposed and completely invisible light source is much larger.
This part of the demo illustrates the point vs area light issue really well. In designing practical 3d scenes and selecting tools, we would often prefer to use 2d area or 3d volumetric lights over point lights. Difficult problems like hard shadows and hotspots in reflection probes are magically resolved if we can afford to use these options. Unfortunately, in many realtime scenarios you cannot get access to high quality area or volumetric lighting without resorting to baking lightmaps (static objects only; lots of iteration delay) or nasty things like temporal antialiasing.
There is a solution called Radiance Cascades [1] which doesn't require a denoiser for rendering real-time shadows for volumetric lights. Unfortunately the approach is relatively slow, so solutions based on denoising are still more efficient (though also expensive) in terms of the quality/performance tradeoff.
One issue with modern ReSTIR path tracing is that currently the algorithm relies on white (random) noise, which contains low-frequency (large-scale) noise, which produces blotchy boiling artifacts at low sample counts. Optimally an algorithm should use some form of spatio-temporal blue noise with exponential decay to only get evenly distributed high frequency samples. But that's still an open research problem.
I find it refreshing that a webpage can give such joy, to the point of having people talk about it in the same way you talk about books and movies. You know, being able to enjoy it for the first time and so and so.
Every time I see this site posted, I can't help but think this is what Wikipedia and other online sources could be. I loved Encarta for all the interactive things I could play with. Instead, for most things, we are stuck with Markdown and minimal formatting that is frustratingly neutered, even clickable image maps have become a rarity; can't remember when I last saw one in the wild. Really sad.
I skimmed the source code (base.js, light.js) to see what he was using. It appears to be entirely custom, with no graphics libraries like Three.js. He even implements his own low-level math functions from scratch. It's impressive to see that kind of discipline.
The best programmers are cautious about dependencies. Taking something is easy. But you don't learn. And you give up control.
Honestly, if you’re wanting to produce something as good as this, Three.js or other such things just aren’t particularly helpful. It is easier to just ignore all the libraries and do it all from scratch. Popular libraries are good at producing finished products in a particular shape. When you’re wanting to demonstrate the implementation steps and allow intricate fiddling and have everything polished like you want it, they’re generally somewhere between painful and hopeless.
You could still keep Three.js for bits like vector calculations, but it just doesn’t feel worth it, it’s easy enough to implement yourself—or copy and paste from some such library and modify as needed—and will be much lighter. And you build up the bits and pieces you need over time.
What are some good sources to learn this kind of graphics programming work?
The inverse-square law can be non-intuitive:
* https://en.wikipedia.org/wiki/Inverse-square_law
I know a good number of photographers can struggle with it when they're getting into flash/strobe photography (even though may be good with f-stops generally, the moving of the flash stand appropriately takes some mental 'accounting').
* https://www.youtube.com/watch?v=hySbIWzJAkM
* https://www.youtube.com/watch?v=xO-J42VM448
In your first link the narrator says he "doesn’t understand the physics of it" but there's really no physics involved (ignoring scatter). It’s just a consequence of the math. It’s relatively easy to understand if you think of it in terms of the surface of a sphere. There is a fixed amount of light coming from a point source, and as the light travels outward you can think of it as being spread over the surface of a sphere. Since the surface area of a sphere is 4pir^2, if you double the radius the area quadruples, and therefore the light intensity at any point on the sphere drops by a factor of four.
edit: And now after rtfm I see there's a nice demo of this!
I love that the car animation has reversing lights on when reversing. The details are so good.
15 years ago I thought this type of thing would be the future of education. Is the educational system anything like this nowadays or are kids still more or less still stuck with static textbooks?
This is edutainment. Kind of like YouTube channels like 3Blue1Brown, Veritasium or MinutePhysics. All good, it helps build intuition, and to better understand the world, but it is a bit lacking for actually using that knowledge.
Notice how few equations there are in this page, it is a common feature of edutainment, they won't give you equations unless they can't get away without. No linear algebra here, just a cosine (actually a dot product in disguise) and the inverse square law (1/r²), two equations he considered too fundamental to skip. Also notable is the lack of exercises.
But now that you have read this page, and played with the interactive elements, you probably have a good understanding of how lights and shadows work, but can you write a 3D engine or even just calculate exposure time without your camera helping you? Without prior knowledge, probably not. For that, you actually need to do the maths, with exercises and all that. And by the way, look at the source code (it is not obfuscated), all the linear algebra that is not present in the article is there!
That, I think, explain the discrepancy between edutainment and textbooks. Textbooks are for you to do actual work, do the maths, solve problems, etc... not just give you an overview. That's also why is takes way longer and requires a lot more effort on the student part.
Interactive content like this one is good, and maybe it should be given a bit more consideration by the traditional educational system. But I don't think it can replace textbooks, at least not for the "hard part".
Comparing this site to Veritasium seems unfair to me. I don't see any evidence that this site generates direct revenue. I also think it's an excellent exercise in pedagogy. The best professors and brightest colleagues I remember from college - or, since you said "maths" I guess I should say "university" ;) - demonstrated extreme facility with the physical concepts and regarded their mathematical representations only as a useful tool to characterize them and communicate about them, not an end to themselves.
Maybe this is just personal preference. I knew capable students who were wrote and prescriptive in their approach to the courses, but I was closer to those who played in the conceptual end of the pool.
I once made a resource like this site for my own educational benefit when I was grappling with MR physics. You're right - I had to do the math(s)! - and came away with a much clearer understanding of the subject. Still, I received lots of correspondence from students and professors who found the visual aid helpful on their journey.
> Comparing this site to Veritasium seems unfair to me. I don't see any evidence that this site generates direct revenue.
He has a Patreon page, if you want to support https://www.patreon.com/ciechanowski
All combined, he may get a few thousand dollars per article, which I admit is not much for what we get, and certainly not enough to make a living.
What you said makes sense. Thanks for your perspective.
It seems most digital attempts aren't done properly, thus it tends to end back to books.
A recent example,
https://www.france24.com/en/tv-shows/focus/20260106-back-to-...
There is the “tools for thought” space I came across where some work felt compelling for computer enabled teaching and learning.
Bret Victor [0], Andy Matuschak [1], and Seymour Papert [2] to point to a few names.
[0]https://www.youtube.com/watch?v=oUaOucZRlmE
[1]https://quantum.country/
[2]https://www.google.com/books/edition/Mindstorms/nDjRDwAAQBAJ...
School incentives are not really aligned around maximizing learning rate for every student. (E.g. that is why there is/was debate around teaching phonetics)
Maybe someone with first-hand experience can weight in, but isn't this what alternative education platforms like "Brilliant" look like?
Should add (2020) to the title.
Yeah I got real excited a new one dropped
ciechanow.ski has frequent submissions on HN, and is one of my favorite pages on the internet. Have a look through some other great submissions:
https://news.ycombinator.com/from?site=ciechanow.ski
https://ciechanow.ski/archives/
> With a small light source even a small change in position on the surface has big effects on the light’s visibility – it quickly becomes fully visible or fully occluded. On the other hand, with a big light source that transition is much smoother – the distance on the floor surface between a completely exposed and completely invisible light source is much larger.
This part of the demo illustrates the point vs area light issue really well. In designing practical 3d scenes and selecting tools, we would often prefer to use 2d area or 3d volumetric lights over point lights. Difficult problems like hard shadows and hotspots in reflection probes are magically resolved if we can afford to use these options. Unfortunately, in many realtime scenarios you cannot get access to high quality area or volumetric lighting without resorting to baking lightmaps (static objects only; lots of iteration delay) or nasty things like temporal antialiasing.
There is a solution called Radiance Cascades [1] which doesn't require a denoiser for rendering real-time shadows for volumetric lights. Unfortunately the approach is relatively slow, so solutions based on denoising are still more efficient (though also expensive) in terms of the quality/performance tradeoff.
One issue with modern ReSTIR path tracing is that currently the algorithm relies on white (random) noise, which contains low-frequency (large-scale) noise, which produces blotchy boiling artifacts at low sample counts. Optimally an algorithm should use some form of spatio-temporal blue noise with exponential decay to only get evenly distributed high frequency samples. But that's still an open research problem.
1: https://youtube.com/watch?v=rG2aok2SdbU
damn, i was really excited to have a new article by this guy. Makes some of the best articles out there for sure
bb wake up, new chichanow.ski just dropped
oh wait, (2020) :(
thankfully i don't remember much from this one, so was able to extract some dopamine from it still
I find it refreshing that a webpage can give such joy, to the point of having people talk about it in the same way you talk about books and movies. You know, being able to enjoy it for the first time and so and so.
Absolutely agree, it's one of the modern internet's gems.
I can't wait until one of my kids, who seems very interested in physics-adjacent topics, is old enough to go through these pages with me.
I love these interactive "text books". Usually I find out about them here on HN.
Is there a collection of these somewhere?
https://samwho.dev/ (e.g. Reservoir sampling, Load balancing)
https://imadr.me/pbr/ (physically based rendering)
One term for them is “explorable explanations”
https://en.wikipedia.org/wiki/Explorable_explanation
https://explorabl.es/
You can start by looking at all his other entries: https://news.ycombinator.com/from?site=ciechanow.ski
Every time I see this site posted, I can't help but think this is what Wikipedia and other online sources could be. I loved Encarta for all the interactive things I could play with. Instead, for most things, we are stuck with Markdown and minimal formatting that is frustratingly neutered, even clickable image maps have become a rarity; can't remember when I last saw one in the wild. Really sad.