7 ms·

Lights and Shadows

386 points by robert-boehnke 6y ago

tbabb 6y ago
I think this is the most beautiful rendering explanation I've ever seen.
polymonster 6y ago
Looks really nice, the widgets are great and run well on my phone. Is it a real time ray tracer doing the rendering? Still amazes me these days what’s possible in browsers or on a phone.
- duopixel 6y ago
  > Still amazes me these days what’s possible in browsers or on a phone I'm more amazed at the author, it doesn't even kick in the fans on my old MBP 2013! And even then, this is the least praise-worthy feature of the explorable explanation! I find the whole thing quite mindblowing. Congrats to the author.
- pixelhorse 6y ago
  > Is it a real time ray tracer doing the rendering? With these shapes, this can be solved analytically with the equations shown. If this was raytracing, you'd need a lot of rays for such a clean image.
- maxekman 6y ago
  I have not checked the source, but I would guess that the lighting is pre-baked into textures, which are then simply blended with the sliders.
brandly 6y ago
So good!
alhirzel 6y ago
The amount of care put into preparing this is amazing. The back-up lights even illuminate on the car when moving the slider backwards.
- koffiezet 6y ago
  Yeah that also caught my eye, it was a very nice touch :)
playpause 6y ago
I love the format of interactive educational documents, especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject. Check out the archives [1] for more amazing interactive documents by this author. Can anyone share any more examples of this kind of thing? The OP's archives [1] are amazing. [1] https://ciechanow.ski/archives/ https://ciechanow.ski/archives/
- GuiA 6y ago
  https://distill.pub https://distill.pub is such a platform for articles about machine learning https://explorabl.es https://explorabl.es is a more general hub. > especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject. Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it. Some tools attempt to make them a little straightforward to program, but due to the nature of it you can't really have a one size fits all solution that isn't just a general programming language + rendering engine. And there is no "explorables industry" to fund the production of those (unlike say, textbooks), so it ends up being mostly side projects for otherwise gainfully employed developers. It would be amazing to have eg. attempts at building an entire K-12 curriculum around explorable explanations. It's also the kind of work that probably loses in clarity and value when done by a team/committee rather than a single person dedicated to their vision. [0] http://worrydream.com/ExplorableExplanations/ http://worrydream.com/ExplorableExplanations/
  - germinalphrase 6y ago
    I’m a high school English teacher. If I can be helpful in any way, get in touch.
  - thomasikzelf 6y ago
    > Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it. This is what I figured out as well. Often the people that have the knowledge are not the ones who know how to put this on to a webpage in a another form then text and images. Like mygo comments below most explanations are done in interactive news articles but this has to be done with a team of programmers and designers who are working together. I am currently building a tool trying to narrow this gap. The tool is at a very early stage, but I'm sharing early previews at [1]. The goal is to create a tool for interactive visualizations that people without much programming experience can use which outputs something that is more dynamic then just text. Such a tool could never do what could be done with a full blown programming language but I'm hoping to start at an easy to use tool and expand it outwards to more complex visualizations. [1] https://dribbble.com/shots/12517016-Essay-with-dynamic-background https://dribbble.com/shots/12517016-Essay-with-dynamic-backg...
zeveb 6y ago
Excellent example of where JavaScript really is useful!
DavidVoid 6y ago
Those are some well made demonstrations! Really intuitive and I think this would be a good theoretical starting point for anyone interested in computer graphics. I think it should be clarified that with a real monochromatic cyan light source the tiles in this example [1] would be different hues of cyan, and not different hues of green, blue, and cyan (which is due to the cyan light source being modeled as a combination of green and blue light in the example). [1] https://i.imgur.com/9685hzU.png https://i.imgur.com/9685hzU.png
pixelhorse 6y ago
Delightful!
alanbernstein 6y ago
My only complaint is that I hoped for a second half of the article with equally detailed visualizations, explaining the physically-based rendering algorithms used to create the visualizations in the first half. The last diagram showing multiple matte reflections is just a teaser.
chrisweekly 6y ago
Wow, yes, this, thank you, kudos, "please sir may I have another".... 10/10, A+, bookmarked, sharing, inspired...
dag11 6y ago
I love the touch of the car's reverse lights coming on when you're sliding it closer to you!
masona 6y ago
I sent this to several of my friends who are professional photographers and all they could say was ‘shhhh don’t give away our secrets.’ It’s all about the light. Really beautiful demonstrations.
greatwave1 6y ago
This reminded me of an article about James Turrell and his experimentation with light as "not a tool to enable vision but something to look at": https://www.archdaily.com/380911/light-matters-seeing-the-light-with-james-turrell https://www.archdaily.com/380911/light-matters-seeing-the-li...
mirimir 6y ago
It's cool, but I see that it requires WebGL. I wonder if it could be done without it.
streulpita 6y ago
Very cool. Was there a specific framework or library you used to make these demos besides just Three JS?
keane 6y ago
Great resource! (I love the amount of thought the author put into how learners might best grasp the concepts via examples that differ from the typical diagrams.) I only wish it had continued with more complex setups! As someone interested in how light works for its impact on photography and cinematography, I’d like to find expanded similar resources. The main one that comes to my mind is "Light: Science and Magic" (978-0415719407) which I own. Another possible learning tool (which I have not yet had a chance to use) is Cine Tracer: https://store.steampowered.com/app/904960/Cine_Tracer/ https://store.steampowered.com/app/904960/Cine_Tracer/ Any other books, sites, or software that might help one learn how to better understand or shape light?

I think this is the most beautiful rendering explanation I've ever seen.

Looks really nice, the widgets are great and run well on my phone. Is it a real time ray tracer doing the rendering? Still amazes me these days what’s possible in browsers or on a phone.

duopixel 6y ago
> Still amazes me these days what’s possible in browsers or on a phone I'm more amazed at the author, it doesn't even kick in the fans on my old MBP 2013! And even then, this is the least praise-worthy feature of the explorable explanation! I find the whole thing quite mindblowing. Congrats to the author.
pixelhorse 6y ago
> Is it a real time ray tracer doing the rendering? With these shapes, this can be solved analytically with the equations shown. If this was raytracing, you'd need a lot of rays for such a clean image.
maxekman 6y ago
I have not checked the source, but I would guess that the lighting is pre-baked into textures, which are then simply blended with the sliders.

brandly 6y ago

So good!

alhirzel 6y ago

The amount of care put into preparing this is amazing. The back-up lights even illuminate on the car when moving the slider backwards.

koffiezet 6y ago
Yeah that also caught my eye, it was a very nice touch :)

playpause 6y ago

I love the format of interactive educational documents, especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject. Check out the archives [1] for more amazing interactive documents by this author. Can anyone share any more examples of this kind of thing? The OP's archives [1] are amazing. [1] https://ciechanow.ski/archives/ https://ciechanow.ski/archives/

GuiA 6y ago
https://distill.pub https://distill.pub is such a platform for articles about machine learning https://explorabl.es https://explorabl.es is a more general hub. > especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject. Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it. Some tools attempt to make them a little straightforward to program, but due to the nature of it you can't really have a one size fits all solution that isn't just a general programming language + rendering engine. And there is no "explorables industry" to fund the production of those (unlike say, textbooks), so it ends up being mostly side projects for otherwise gainfully employed developers. It would be amazing to have eg. attempts at building an entire K-12 curriculum around explorable explanations. It's also the kind of work that probably loses in clarity and value when done by a team/committee rather than a single person dedicated to their vision. [0] http://worrydream.com/ExplorableExplanations/ http://worrydream.com/ExplorableExplanations/
- germinalphrase 6y ago
  I’m a high school English teacher. If I can be helpful in any way, get in touch.
- thomasikzelf 6y ago
  > Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it. This is what I figured out as well. Often the people that have the knowledge are not the ones who know how to put this on to a webpage in a another form then text and images. Like mygo comments below most explanations are done in interactive news articles but this has to be done with a team of programmers and designers who are working together. I am currently building a tool trying to narrow this gap. The tool is at a very early stage, but I'm sharing early previews at [1]. The goal is to create a tool for interactive visualizations that people without much programming experience can use which outputs something that is more dynamic then just text. Such a tool could never do what could be done with a full blown programming language but I'm hoping to start at an easy to use tool and expand it outwards to more complex visualizations. [1] https://dribbble.com/shots/12517016-Essay-with-dynamic-background https://dribbble.com/shots/12517016-Essay-with-dynamic-backg...

zeveb 6y ago

Excellent example of where JavaScript really is useful!

DavidVoid 6y ago

Those are some well made demonstrations! Really intuitive and I think this would be a good theoretical starting point for anyone interested in computer graphics. I think it should be clarified that with a real monochromatic cyan light source the tiles in this example [1] would be different hues of cyan, and not different hues of green, blue, and cyan (which is due to the cyan light source being modeled as a combination of green and blue light in the example). [1] https://i.imgur.com/9685hzU.png https://i.imgur.com/9685hzU.png

pixelhorse 6y ago

Delightful!

alanbernstein 6y ago

My only complaint is that I hoped for a second half of the article with equally detailed visualizations, explaining the physically-based rendering algorithms used to create the visualizations in the first half. The last diagram showing multiple matte reflections is just a teaser.

chrisweekly 6y ago

Wow, yes, this, thank you, kudos, "please sir may I have another".... 10/10, A+, bookmarked, sharing, inspired...

dag11 6y ago

I love the touch of the car's reverse lights coming on when you're sliding it closer to you!

masona 6y ago

I sent this to several of my friends who are professional photographers and all they could say was ‘shhhh don’t give away our secrets.’ It’s all about the light. Really beautiful demonstrations.

greatwave1 6y ago

This reminded me of an article about James Turrell and his experimentation with light as "not a tool to enable vision but something to look at": https://www.archdaily.com/380911/light-matters-seeing-the-light-with-james-turrell https://www.archdaily.com/380911/light-matters-seeing-the-li...

mirimir 6y ago

It's cool, but I see that it requires WebGL. I wonder if it could be done without it.

streulpita 6y ago

Very cool. Was there a specific framework or library you used to make these demos besides just Three JS?

keane 6y ago

Great resource! (I love the amount of thought the author put into how learners might best grasp the concepts via examples that differ from the typical diagrams.) I only wish it had continued with more complex setups! As someone interested in how light works for its impact on photography and cinematography, I’d like to find expanded similar resources. The main one that comes to my mind is "Light: Science and Magic" (978-0415719407) which I own. Another possible learning tool (which I have not yet had a chance to use) is Cine Tracer: https://store.steampowered.com/app/904960/Cine_Tracer/ https://store.steampowered.com/app/904960/Cine_Tracer/ Any other books, sites, or software that might help one learn how to better understand or shape light?