Blinn Phong Shading: Theory and Implementation [Shaders Monthly #4]

In Episode #4 of Shaders Monthly, we implement the Phong and Blinn-Phong shading models in GLSL. Both models are reflection models. This means they describe mathematically how light is reflected at an opaque surface.
From today's point of view, the models are quite simple. Consequently, we will not only talk about the Phong and Blinn-Phong models. Instead these models are presented in a general theoretical framework that can be easily extended to more complex reflection models. In particular, we will introduce the "rendering equation" and the "bidirectional reflectance distribution function" (BRDF).
The implementation is based on the following example from episode #3:
www.gsn-lib.org/index.html#pr...
1) Irradiance
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
2) Phong BRDF
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
3) Modified Phong BRDF
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
4) Blinn-Phong BRDF
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
5) Phong BRDF World Space
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
Documentation for the shader plugin node of the GSN Composer:
www.gsn-lib.org/docs/nodes/Sh...
Additional lecture slides:
www.uni-marburg.de/en/fb12/re...
00:00 Introduction
01:44 What is Light?
03:41 Light Transport
04:57 Color Perception
06:09 RGB Color Space
07:20 CIE RGB
09:48 sRGB
12:28 Rendering Equation Introduction
13:06 Solid Angle
15:37 Flux, Intensity, Irradiance, Radiance
22:25 Rendering Equation and BRDF
27:45 Phong BRDF
47:50 Modified Phong BRDF
52:45 Blinn-Phong BRDF
56:06 Shading in World Space
10:33 Torus Knot
Music: Left U Into - Otis McDonald (KZbin Audio Library)

[@4AneR]

Many times before I got stuck with radiance and BRDF math, but this video finally allowed me to understand it. This is the best video on lighting computations on KZbin. Big thank you!

Hi professor! Thank you so much for making this very high quality resources publicly available. I'm studying PBR rendering at the moment and found your videos through a KZbin search. Yours is the best resource I was able to find that involves both math/theory and code/implementation. ^_^ I got confused by the meaning of theta, and definitions of and relations between irradiance and radiance. AFAIU, on slide 14 when you explain irradiance, around t=18:55, theta is the angle between the incoming light direction and the surface normal. Again in slide 14, when you explain radiance, around t=20:30, theta is the angle between the outgoing/reflected light direction (view direction) and the surface normal. you say that's why we multiple dA with cos(theta), to get the projected area. Again in slide 14, when you explain the relationship from incoming radiance to irradiance, around t=22:18, theta again becomes the angle of incidence. oh! I think I got it now! In the third case we are talking about the incoming radiance, but in the second case we were talking about outgoing radiance. We always use theta, but meaning of theta changes depending on whether the radiance we are interested in is incoming or outgoing wrt surface. Lol, it took me a few days to finally grasp this and that happened while I was writing this question. :-) I'm glad I posed the question. Still gonna leave my comment here in case anyone else got confused about the same concepts. One tiny bit confusing aspect that was left in my mind is that, the outgoing radiance, the essential quantity that we are calculating in our shaders, by definition has a cos(theta_prime) in it. (called it prime to distinguish it from angle of incidence). However, AFAIU, by definition, BRDF handles the "projected area" for that case... I mean, the integral to calculate L_o(v) is kind of a transformation of irradiance from l-space to v-space via the BRDF kernel, and by definition, the direction v is into our eye/camera. so, theta_prime is always 90. At least, this is how I'm going to sooth my mind. :-)

[@gsn-composer]

It is normal to be a little confused. This is a difficult topic and the video would need to be even longer to fully explain everything. You can watch this video kzbin.info/www/bejne/i6u0iYucfpV1otEsi=ctmtY_JDbwqOaiJx&t=1299 Matthias Teschner (University of Freiburg) goes into more detail and may answer your remaining questions about radiance starting at 21:39 min:sec.

[@wkxvii]

You deserve more views and likes friend! Awesome content!!! Thank you very much!

[@unveil7762]

Thanks!! I am trying to make all lession you do here in Touchdesigner!! Your composer is the best web madness i ever saw. Thanks for what you share. You made me a better artist . ❤

[@gsn-composer]

Thanks! I have never used Touchdesigner, but judging from the documentation at derivative.ca/UserGuide/Write_a_GLSL_Material it seems possible to reproduce most of the examples. I am very interested, so please share your project if it works. 👍

[@MichaelHickman3D]

Wonderful video, I found it very insightful and I enjoy you sharing knowledge like this. I'm 13 years old and for the longest time have been studying computer graphics beyond the artistic 3D interfaces. Learning the different types of shading: Blinn, Phong, Blinn-Phong, PhongE, and Anisotropic has been so mind opening. The things someone sees in blender and Octane, and then the deep history behind it allows you to fully appreciate the time and effort the goes into making that concept and proofing it. That's why I love your channel ;), you're too underrated and more people need to look into stuff like this.

[@gsn-composer]

Thanks for your comment. I am very impressed that you are interested in the theory of shading at such a young age. Keep it up!

[@13xbmspec]

While I don't write code for shaders, I do spend quite a bit of time rendering. It really puts into perspective what high end 3d packages do behind the scenes. Thank you!

[@konstantinbondarenko5235]

Thank you, wonderful video.

[@user-sk3ml8si2b]

Wonderfull videos, thank you

[@teamur1422]

Thank you

[@yuliana4924]

Such a great video! Anyway, could you provide the literature references (i.e. book or journal article) that explain the Phong model equation in this video? Because I saw in several paper the equation slightly different. Thank you!

[@gsn-composer]

Yes, there is a slight difference between "Phong shading" (from Phong's original paper) and the "(modified) Phong BRDF". The difference is that the cos(theta) term from the rendering equation is also used for the specular term (e.g., compare the first two rows of the table "The Normalization Zoo" on this website: www.thetenthplanet.de/archives/255 ). The video uses the (modified) Phong BRDF. Here is a technical report: Lafortune and Willems, "Using the modified Phong reflectance model for physically based rendering", www.cs.princeton.edu/courses/archive/fall03/cs526/papers/lafortune94.pdf

[@yuliana4924]

@@gsn-composer noted thank you! I'll deep dive to these source

[@camerbot]

This is an awesome video series thank you so much at 7:05 you said that use of three primary colors has something to do with the fact that we have 3 cones where can we get more info on this topic? i though that we use RGB model mostly for technical reasons (im guessing its easier/better to produce red green and blue diode screens than lets say cymk) is there really a link of some kind between how our cones work and how rgb models are defined?

[@gsn-composer]

Yes, the RGB color model is certainly motivated by the fact that humans are trichromats. Have you seen the section about the CIE RGB color space from 1931 at 7:20 min:sec? You cannot cover the entire space of perceivable colors with three primary colors, but you can cover a large area: en.wikipedia.org/wiki/CIE_1931_color_space . Unlike the additive RGB model, CYMK is a subtractive color model typically used by printers: en.wikipedia.org/wiki/CMYK_color_model

[@LeYang-uj6jo]

Hi, very nice video! I just have a simple question, the output value of the fragment shader is RGB color or linear radiance？Because I saw that the `outColor` ball light was called `rgb2lin`, but when coloring the object, `lin2rgb` was also called, so I was confused？

[@gsn-composer]

Inputs and outputs of the presented shaders are in the sRGB color space. The inputs are converted from sRGB to linear with the function "rgb2lin()" (gamma expansion). Then the shading is calculated in linear space. Finally, the result is converted from linear to sRGB with the "lin2rgb()" function (gamma compression).

[@LeYang-uj6jo]

Thanks!

I've a second question, thanks for calculating these radiation quantities for point light! Are you going to do the same for directional lights, later in the course? Because I'm having difficulty in wrapping my head around visualizing radiant intensity of a directional light (i.e. a light model that does not have position, and it's direction is constant through space, a good approximation of sunlight on earth's surface) because I can't surround its source via spherical shell.

[@gsn-composer]

Good point. Point lights could be controlled in a user interface with the parameter "radiance flux" (in watts). For an idealized directional light, such a parameter makes no sense because the directional light covers an infinitely large area, which would require an infinite radiance flux. Instead, for a directional light, the user should be allowed to directly specify the perpendicular irradiance (in watts per meter).