Introduction to Phong Lighting

In this GLSL shader tutorial, we will go over the basics of Phong lighting. We start off by understanding the importance of lighting in computer graphics. Then we will look at the intuition behind the Phong lighting equation. Finally, we add ambient, diffuse, and specular lighting to our GLSL fragment shader.
📖 Code - github.com/SuboptimalEng/shad...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Inigo Quilez’s Articles - iquilezles.org/articles
The Book of Shaders - thebookofshaders.com
Simon Dev’s Shader Course - simondev.teachable.com
VS Code GLSL Shader Setup Guide - • How to Write GLSL Shad...
== [ Timestamps ] ==
00:00 Intro to GLSL Shaders
01:12 What is Phong Lighting?
01:45 Ambient vs Diffuse vs Specular
03:02 Ambient Lighting
04:16 Diffuse Lighting
05:57 Specular Lighting
08:26 Phong Lighting Demos
== [ Tags ] ==
#suboptimal #glsl #shaders

[@JackLeiLing]

Liked and subscribed! The most clearer explanation for this difficult topic. Super helpful. Many thanks

[@SuboptimalEng]

I made the video because I was learning phong lighting and struggled to understand it. Glad it helped!

[@Byynx]

It seems the best lightning tutorial so far.

[@ksalarang]

Exactly what I was looking for, thanks. Keep up the good work

[@justanotherhotguy]

Tomorrow exam in real time computer graphics, thank you very much!

[@SuboptimalEng]

Good luck!

[@OrgStinx]

Thanks, I appreciate this.

[@Iridium.]

You can use a halfway vector instead of reflect for better performance

[@calderarox]

this is a really good video! thanks

[@pingwinek_1337]

your voice is so soothing oh my gawddd

[@SuboptimalEng]

Guess I’ll have to start an ASMR channel now jk… unless 🤔😂

[@pingwinek_1337]

@@SuboptimalEng UNLESS

[@nexusplus4960]

Hi when I import model in three js. model load with light what should I do??

[@MrMariozzz78]

i use opegl in dev c++ gl library i guess it pre 2.0 so it dont use GLSL ...can i use phong light with 2.0 pre.version?

[@thesituation5315]

Hi. I've been trying to learn how lighting works, and I'm having a really hard time with this. I understand the base of the whole idea, but the part I'm having a hard time with is how to make it work in 2D. I was wondering if you know how to port it to two dimensions? I can't really find anything online specifically regarding 2D phong shading.

[@OrgStinx]

Do you mean lighting in 2D world (e.g. for 2d games) or how to cast 3D world to 2D screen?

[@nebuladevelopments]

awesome!

[@javifontalva7752]

Wonderful vid!! Can you make more vida on shaders?

[@SuboptimalEng]

That’s the plan!

[@diddy_dante]

If fragment shaders work on a pixel by pixel basis, does the rasterizer also give eye-direction vector values for each pixel? I can't understand how else you could pull off specular lighting.

[@SuboptimalEng]

I fake the eye direction in the code, setting it to -1 in the Z axis.

[@konigsberg72]

what's the song? 00:00

[@kevinto8955]

Yes more shaders! Curious, what was your roadmap for learning all this? I'm reading through the book of shaders, but once I'm off it, I feel totally lost :(

[@SuboptimalEng]

I started with the book of shaders and got stuck as well. Good to hear I’m not the only one who felt this way tbh.
SimonDev’s GLSL shader course helped me learn a lot more quickly! I’ve talked about this more extensively on Twitter.
And yep, I plan to make more videos on shaders 😊

[@janreinsch9725]

So, what I found confusing is that the vector is named lightSource... Isn't this actually the lightDirection and the lightSource is at a point infinitely far away, so that all light rays hit the scene at the same angle?

[@SuboptimalEng]

Yea that’s a good question. I think a better name for the variable would be direction to light source from origin.

[@janreinsch9725]

@@SuboptimalEng Thanks for your answer! I named it relativeLightPos in my exercises, because that gives me the intuition that the light is always coming from the same direction for all objects of the scene

[@SuboptimalEng]

@@janreinsch9725 That's great to hear! Happy to help a fellow graphics enthusiast.

[@janreinsch9725]

@@SuboptimalEng Thank you for these tutorials!

[@alberoDiSpazio]

There's a Monopoly Game app that has that duck, fully shaded.

[@AllianceHalifax]

where is the duck model in the code?

[@SuboptimalEng]

The duck model is included in the VS Code extension! I made a video explaining how to set it up 🙂

[@ku16610]

Yes but not explaining how to show the duck model ......
@@SuboptimalEng

[@ku16610]

Click on the glslCanvas left most icon at bottum to change object