16 ms·

Physically based rendering from first principles

290 points by imadr 1y ago

amelius 1y ago
Webpage doesn't work in Firefox/Android.
- all2 1y ago
  Chrome seems to function, at first glance.
  - godelski 1y ago
    Seems fine on Firefox on Mac
- imadr 1y ago
  I developed this article on firefox desktop and tested it on safari ios, and here I was thinking my testing was exhaustive! I just hope it’s not some obscure webgl bug on android Anyways thanks for the feedback I’ll look into it
  - danielbln 1y ago
    Can confirm, latest Firefox on S24 doesn't render the interactive elements. Chrome does, however, and it's a beautiful article.
    - codethief 1y ago
      Weird, for me neither Firefox nor Chromium show any animations on Android. (Android 16, Chromium/Vanadium 140, Firefox 142)
- sabellito 1y ago
  Works on mine. FF: 142.0.1 OS: Android 15
kanakenfresse 1y ago
[flagged]
dabla 1y ago
Love the attention to details,the read is seamless
godelski 1y ago
I'm not a fan of how people talk about "first principles" as I think it just leads to lots of confusion. It's a phrase common in computer science that makes many other scientific communities cringe. First principles are things that cannot be reduced and you have to have very good justifications for these axioms. The reason the other scientific communities cringe is because either (most likely case) it's being used improperly and someone is about to demonstrate their nativity, or they know they're about to dive into a pedantic nightmare of nuances and they might never escape the rabbit holes that are about to follow. In fact, I'd like to argue that you shouldn't learn things from first principles, at least in the beginning. Despite the article not being from first principles, it does illustrate some of the problems of first principles: they are pedantic. Everything stems from first principles so they have to be overly pedantic and precise. Errors compound so a small error in one's first principles becomes enormous by the time you look at what you're actually interested in. Worst of all, it is usually subtle, making it difficult to find and catch. This makes them a terrible place to begin, even when one already has expertise and is discussing with another expert. But it definitely should not be the starting place for an expert to teach a non-expert. What makes it clear that the author isn't a physicist is that they don't appear to understand the underlying emergent phenomena[0]. It's probably a big part of why this post feels so disordered. All the phenomena they discussed are the same, but you need to keep digging deeper to find that (there's points where even physicists know they are the same but not how or why). It just feels like they are showing off their physics knowledge, but it is well below that which is found in an undergraduate physics degree[1]. This is why you shouldn't start at first principles, its simplicity is too complex. You'd need to start with subjects more complicated than QED. The rest derive out of whatever a grand unified theory is. But as someone who's done a fair amount of physical based rendering, I'm just uncertain what this post has to do with it. I would highly recommend the book "Physically Based Rendering: From Theory To Implementation" by Pharr, Jakob, and Humphreys that the author says the post is based on. It does a much better job at introducing the goals and focusing on getting the reader up to speed. In particular, they define how the goal of PBR is to make things indistinguishable from a real photograph, which is a subtle but important distinction from generating a real photograph. That said, I still think there's nice things about this post and the author shouldn't feel ashamed. It looks like they put a lot of hard work in and there are some really nice animations. It's clear they learned a lot and many of the animations there are not as easy as they might appear. I'm being critical but I want them to know to keep it up, but that I think it needs refinement. Finding the voice of a series of posts can be quite hard and don't let stumbles in the beginning prevent you from continuing. [0] Well that and a lack of discussion of higher order interference patterns because physicists love to show off {Hermite,Laguerre}-Gaussian mode simulations https://en.wikipedia.org/wiki/Gaussian_beam#Higher-order_modes https://en.wikipedia.org/wiki/Gaussian_beam#Higher-order_mod... [1] In a degree you end up "learning physics" multiple times. Each time a bit deeper. By the end of an undergraduate degree every physicist should end up feeling like they know nothing about physics.
smusamashah 1y ago
Love the detailed interactive visual explanations, https://samwho.dev/ https://samwho.dev/ is another one like Ciechanow.ski
prathje 1y ago
I really like the interactive elements and animations. Small nit on the wording: "This continuous cycle enables self-sustaining, self-propagating electromagnetic waves" The term “self-propagating” makes it sound like the fields are somehow pushing each other forward, but really they’re just coupled solutions of Maxwell’s equations.
jupitr 1y ago
How was the interactivity achieved? Could you maybe link to the source so I can learn? I have been trying to get something like this working with quarto, but it is getting way too complicated.
- imadr 1y ago
  I wrote everything from scratch in javascript and webgl. You can check the entire source code of the article here: https://imadr.me/pbr/main.js https://imadr.me/pbr/main.js Beaware though, it's a 8000+ lines of code js file that is very badly organized, it's by no mean a reference for good quality code. However I find writing everything by hand easier in the long term than using already existing libraries for example. The code includes all the math functions, mesh primitive generation, shaders and even a sketchy text renderer using sdf fonts. If I had to make it again I would use typescript, type errors were the biggest source of bugs.
  - Cthulhu_ 1y ago
    How long did it take you to write that code / this article? I'm a big fan of zero-dependency code (or at the very least with any dependency vendored/hosted locally), it means this page will still work and look as it does today in 25 years time. I don't know if TS runs natively in browsers yet, but v8 / NodeJS does support it (just strips off Typescript specific tokens).
    - imadr 1y ago
      I took me about 3 months working on it on and off, it amounts to about 3 weeks of full time work. For my other projects I'm just writing everything to a single typescript file and compiling it with tsc, works like a charm and zero dependencies!
  - amitp 1y ago
    Love it! For typescript, esbuild has been my favorite tool for turning typescript into browser-readable js, and then I check type errors separately using the ide plugin.
Eduard 1y ago
Android Chrome on Pixel 7a. None of the interactive demos show up. Just blank white.
kelseyfrog 1y ago
Are there any data driven approaches to physically based rendering? Can't we measure micro-facet depth and angle distribution of real world materials using laser speckle and use it to inform the normal distribution function? Deriving ideals from first principles is great and all, but verifying them against real world measurements seems like the bare minimum.
- imadr 1y ago
  If i’m not mistaken that’s in part how they came up with micro facet models, or at least to verify their accuracy. Take this paper for example https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf Real life measures are also useful for inverse rendering.
  - kelseyfrog 1y ago
    Interesting link, thank you! It looks like a good model for lower incident angles but begins to diverse at higher angles. There's also one huge caveat - it relates the GGX model to real world ground glass. Obviously it's important to compare like to like. However, very few materials in the real world are ground glass. Looking around my surroundings, I see painted drywall, wood, paper, plastics, and textiles. It would seemingly be a mistake to assume each of these materials behaved optically like ground glass. I hope that similar measurements are carried out on other materials.
    - tzumaoli 1y ago
      The same Cornell group has done more research in this area. Here is one for capturing the microgeometry of metals https://www.cs.cornell.edu/Projects/metalappearance/ https://www.cs.cornell.edu/Projects/metalappearance/ Here's another paper from a different group on capturing the microgeometry using a lot of LED lights https://svbrdf.github.io/publications/MicroLightStage/Microscale_SVBRDF_SIGGRAPHAsia2016.pdf https://svbrdf.github.io/publications/MicroLightStage/Micros... But I agree there should be a lot more work in this area!!
- 1y ago
sidcool 1y ago
This is beautifully done. Thanks.
avereveard 1y ago
Related: creating a virtual camera and using blender path tracing to simulate light capture from a camera in virtual space https://youtu.be/YE9rEQAGpLw?si=2YArt9l95c7VUCqa https://youtu.be/YE9rEQAGpLw?si=2YArt9l95c7VUCqa
enugu 1y ago
For someone new, this was a really interesting read. Thanks for the effort. The picture of how the sky looks from underwater was so surprising to learn. Regarding the 'first-principles' discussion, it is a relative term in usage despite the name. Explaining from a layer of abstraction below normal explanations. Someone explaining how a computer works starting with machine instructions is doing first-priniciples, even if they wont explain details of atoms. The literal meaning would be almost impossible to implement, for instance none of Newton's work would be first principles given today's knowledge. Similarly, current physics can be subsumed in future principles.
snarfy 1y ago
You should add a section on polarization.
cubefox 1y ago
The discussion of the difference between metal and non-metal is a bit unclear. When he says that metal has no "diffuse reflection" but non-metals do, I think what he might mean is that metals have no subsurface scattering. Rough (not mirror-like) reflections do certainly also look "diffuse".
- imadr 1y ago
  Yes, in rendering when we talk about “diffuse” reflection we implicitly mean fuzzy reflections due to light penetrating the material and exiting a small distance away from the entry point (less than a pixel far) The term subsurface scattering is used for light that exits further away (more than a pixel) like in simulations of human skin However that part of the article isn’t clear enough and warrants a rewrite
ingen0s 1y ago
Fantastic

290 points by imadr 1y ago

amelius 1y ago

Webpage doesn't work in Firefox/Android.

all2 1y ago
Chrome seems to function, at first glance.
- godelski 1y ago
  Seems fine on Firefox on Mac
imadr 1y ago
I developed this article on firefox desktop and tested it on safari ios, and here I was thinking my testing was exhaustive! I just hope it’s not some obscure webgl bug on android Anyways thanks for the feedback I’ll look into it
- danielbln 1y ago
  Can confirm, latest Firefox on S24 doesn't render the interactive elements. Chrome does, however, and it's a beautiful article.
  - codethief 1y ago
    Weird, for me neither Firefox nor Chromium show any animations on Android. (Android 16, Chromium/Vanadium 140, Firefox 142)
sabellito 1y ago
Works on mine. FF: 142.0.1 OS: Android 15

kanakenfresse 1y ago

[flagged]

dabla 1y ago

Love the attention to details,the read is seamless

godelski 1y ago

I'm not a fan of how people talk about "first principles" as I think it just leads to lots of confusion. It's a phrase common in computer science that makes many other scientific communities cringe. First principles are things that cannot be reduced and you have to have very good justifications for these axioms. The reason the other scientific communities cringe is because either (most likely case) it's being used improperly and someone is about to demonstrate their nativity, or they know they're about to dive into a pedantic nightmare of nuances and they might never escape the rabbit holes that are about to follow. In fact, I'd like to argue that you shouldn't learn things from first principles, at least in the beginning. Despite the article not being from first principles, it does illustrate some of the problems of first principles: they are pedantic. Everything stems from first principles so they have to be overly pedantic and precise. Errors compound so a small error in one's first principles becomes enormous by the time you look at what you're actually interested in. Worst of all, it is usually subtle, making it difficult to find and catch. This makes them a terrible place to begin, even when one already has expertise and is discussing with another expert. But it definitely should not be the starting place for an expert to teach a non-expert. What makes it clear that the author isn't a physicist is that they don't appear to understand the underlying emergent phenomena[0]. It's probably a big part of why this post feels so disordered. All the phenomena they discussed are the same, but you need to keep digging deeper to find that (there's points where even physicists know they are the same but not how or why). It just feels like they are showing off their physics knowledge, but it is well below that which is found in an undergraduate physics degree[1]. This is why you shouldn't start at first principles, its simplicity is too complex. You'd need to start with subjects more complicated than QED. The rest derive out of whatever a grand unified theory is. But as someone who's done a fair amount of physical based rendering, I'm just uncertain what this post has to do with it. I would highly recommend the book "Physically Based Rendering: From Theory To Implementation" by Pharr, Jakob, and Humphreys that the author says the post is based on. It does a much better job at introducing the goals and focusing on getting the reader up to speed. In particular, they define how the goal of PBR is to make things indistinguishable from a real photograph, which is a subtle but important distinction from generating a real photograph. That said, I still think there's nice things about this post and the author shouldn't feel ashamed. It looks like they put a lot of hard work in and there are some really nice animations. It's clear they learned a lot and many of the animations there are not as easy as they might appear. I'm being critical but I want them to know to keep it up, but that I think it needs refinement. Finding the voice of a series of posts can be quite hard and don't let stumbles in the beginning prevent you from continuing. [0] Well that and a lack of discussion of higher order interference patterns because physicists love to show off {Hermite,Laguerre}-Gaussian mode simulations https://en.wikipedia.org/wiki/Gaussian_beam#Higher-order_modes https://en.wikipedia.org/wiki/Gaussian_beam#Higher-order_mod... [1] In a degree you end up "learning physics" multiple times. Each time a bit deeper. By the end of an undergraduate degree every physicist should end up feeling like they know nothing about physics.

smusamashah 1y ago

Love the detailed interactive visual explanations, https://samwho.dev/ https://samwho.dev/ is another one like Ciechanow.ski

prathje 1y ago

I really like the interactive elements and animations. Small nit on the wording: "This continuous cycle enables self-sustaining, self-propagating electromagnetic waves" The term “self-propagating” makes it sound like the fields are somehow pushing each other forward, but really they’re just coupled solutions of Maxwell’s equations.

jupitr 1y ago

How was the interactivity achieved? Could you maybe link to the source so I can learn? I have been trying to get something like this working with quarto, but it is getting way too complicated.

imadr 1y ago
I wrote everything from scratch in javascript and webgl. You can check the entire source code of the article here: https://imadr.me/pbr/main.js https://imadr.me/pbr/main.js Beaware though, it's a 8000+ lines of code js file that is very badly organized, it's by no mean a reference for good quality code. However I find writing everything by hand easier in the long term than using already existing libraries for example. The code includes all the math functions, mesh primitive generation, shaders and even a sketchy text renderer using sdf fonts. If I had to make it again I would use typescript, type errors were the biggest source of bugs.
- Cthulhu_ 1y ago
  How long did it take you to write that code / this article? I'm a big fan of zero-dependency code (or at the very least with any dependency vendored/hosted locally), it means this page will still work and look as it does today in 25 years time. I don't know if TS runs natively in browsers yet, but v8 / NodeJS does support it (just strips off Typescript specific tokens).
  - imadr 1y ago
    I took me about 3 months working on it on and off, it amounts to about 3 weeks of full time work. For my other projects I'm just writing everything to a single typescript file and compiling it with tsc, works like a charm and zero dependencies!
- amitp 1y ago
  Love it! For typescript, esbuild has been my favorite tool for turning typescript into browser-readable js, and then I check type errors separately using the ide plugin.

Eduard 1y ago

Android Chrome on Pixel 7a. None of the interactive demos show up. Just blank white.

kelseyfrog 1y ago

Are there any data driven approaches to physically based rendering? Can't we measure micro-facet depth and angle distribution of real world materials using laser speckle and use it to inform the normal distribution function? Deriving ideals from first principles is great and all, but verifying them against real world measurements seems like the bare minimum.

imadr 1y ago
If i’m not mistaken that’s in part how they came up with micro facet models, or at least to verify their accuracy. Take this paper for example https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf Real life measures are also useful for inverse rendering.
- kelseyfrog 1y ago
  Interesting link, thank you! It looks like a good model for lower incident angles but begins to diverse at higher angles. There's also one huge caveat - it relates the GGX model to real world ground glass. Obviously it's important to compare like to like. However, very few materials in the real world are ground glass. Looking around my surroundings, I see painted drywall, wood, paper, plastics, and textiles. It would seemingly be a mistake to assume each of these materials behaved optically like ground glass. I hope that similar measurements are carried out on other materials.
  - tzumaoli 1y ago
    The same Cornell group has done more research in this area. Here is one for capturing the microgeometry of metals https://www.cs.cornell.edu/Projects/metalappearance/ https://www.cs.cornell.edu/Projects/metalappearance/ Here's another paper from a different group on capturing the microgeometry using a lot of LED lights https://svbrdf.github.io/publications/MicroLightStage/Microscale_SVBRDF_SIGGRAPHAsia2016.pdf https://svbrdf.github.io/publications/MicroLightStage/Micros... But I agree there should be a lot more work in this area!!
1y ago

sidcool 1y ago

This is beautifully done. Thanks.

avereveard 1y ago

Related: creating a virtual camera and using blender path tracing to simulate light capture from a camera in virtual space https://youtu.be/YE9rEQAGpLw?si=2YArt9l95c7VUCqa https://youtu.be/YE9rEQAGpLw?si=2YArt9l95c7VUCqa

enugu 1y ago

For someone new, this was a really interesting read. Thanks for the effort. The picture of how the sky looks from underwater was so surprising to learn. Regarding the 'first-principles' discussion, it is a relative term in usage despite the name. Explaining from a layer of abstraction below normal explanations. Someone explaining how a computer works starting with machine instructions is doing first-priniciples, even if they wont explain details of atoms. The literal meaning would be almost impossible to implement, for instance none of Newton's work would be first principles given today's knowledge. Similarly, current physics can be subsumed in future principles.

snarfy 1y ago

You should add a section on polarization.

cubefox 1y ago

The discussion of the difference between metal and non-metal is a bit unclear. When he says that metal has no "diffuse reflection" but non-metals do, I think what he might mean is that metals have no subsurface scattering. Rough (not mirror-like) reflections do certainly also look "diffuse".

imadr 1y ago
Yes, in rendering when we talk about “diffuse” reflection we implicitly mean fuzzy reflections due to light penetrating the material and exiting a small distance away from the entry point (less than a pixel far) The term subsurface scattering is used for light that exits further away (more than a pixel) like in simulations of human skin However that part of the article isn’t clear enough and warrants a rewrite

ingen0s 1y ago

Fantastic