Lighting

Three.js and WebGL 3D Programming Crash Course Three.js & WebGL 3D Programming
22 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€67.18
List Price:  €95.97
You save:  €28.79
£55.85
List Price:  £79.79
You save:  £23.94
CA$98.21
List Price:  CA$140.31
You save:  CA$42.09
A$107.62
List Price:  A$153.75
You save:  A$46.13
S$94.24
List Price:  S$134.64
You save:  S$40.39
HK$544.83
List Price:  HK$778.36
You save:  HK$233.53
CHF 62.54
List Price:  CHF 89.34
You save:  CHF 26.80
NOK kr774.97
List Price:  NOK kr1,107.14
You save:  NOK kr332.17
DKK kr501
List Price:  DKK kr715.75
You save:  DKK kr214.74
NZ$119.95
List Price:  NZ$171.37
You save:  NZ$51.41
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,361.58
List Price:  ৳11,945.63
You save:  ৳3,584.04
₹5,909.84
List Price:  ₹8,442.99
You save:  ₹2,533.15
RM312.71
List Price:  RM446.75
You save:  RM134.04
₦118,484.88
List Price:  ₦169,271.38
You save:  ₦50,786.49
₨19,443.22
List Price:  ₨27,777.22
You save:  ₨8,334
฿2,412.28
List Price:  ฿3,446.26
You save:  ฿1,033.98
₺2,418.32
List Price:  ₺3,454.90
You save:  ₺1,036.57
B$406.01
List Price:  B$580.04
You save:  B$174.03
R1,270.71
List Price:  R1,815.38
You save:  R544.66
Лв131.35
List Price:  Лв187.66
You save:  Лв56.30
₩98,301.65
List Price:  ₩140,436.95
You save:  ₩42,135.30
₪260.01
List Price:  ₪371.46
You save:  ₪111.45
₱4,125.14
List Price:  ₱5,893.31
You save:  ₱1,768.17
¥10,832.35
List Price:  ¥15,475.45
You save:  ¥4,643.10
MX$1,429.79
List Price:  MX$2,042.64
You save:  MX$612.85
QR255.18
List Price:  QR364.56
You save:  QR109.38
P956.90
List Price:  P1,367.06
You save:  P410.16
KSh9,061.51
List Price:  KSh12,945.58
You save:  KSh3,884.06
E£3,475.01
List Price:  E£4,964.52
You save:  E£1,489.50
ብር8,566
List Price:  ብር12,237.67
You save:  ብር3,671.66
Kz63,900.87
List Price:  Kz91,290.87
You save:  Kz27,390
CLP$68,444.99
List Price:  CLP$97,782.75
You save:  CLP$29,337.76
CN¥506.93
List Price:  CN¥724.22
You save:  CN¥217.29
RD$4,217.06
List Price:  RD$6,024.63
You save:  RD$1,807.57
DA9,397.90
List Price:  DA13,426.15
You save:  DA4,028.25
FJ$159.29
List Price:  FJ$227.57
You save:  FJ$68.27
Q540.13
List Price:  Q771.64
You save:  Q231.51
GY$14,638.82
List Price:  GY$20,913.50
You save:  GY$6,274.67
ISK kr9,773.54
List Price:  ISK kr13,962.80
You save:  ISK kr4,189.25
DH703.91
List Price:  DH1,005.63
You save:  DH301.72
L1,275.33
List Price:  L1,821.98
You save:  L546.64
ден4,132.76
List Price:  ден5,904.20
You save:  ден1,771.43
MOP$561.01
List Price:  MOP$801.48
You save:  MOP$240.46
N$1,268.91
List Price:  N$1,812.81
You save:  N$543.90
C$2,574.70
List Price:  C$3,678.31
You save:  C$1,103.60
रु9,449.77
List Price:  रु13,500.25
You save:  रु4,050.48
S/265.32
List Price:  S/379.05
You save:  S/113.72
K281.71
List Price:  K402.47
You save:  K120.75
SAR262.77
List Price:  SAR375.40
You save:  SAR112.63
ZK1,934.92
List Price:  ZK2,764.29
You save:  ZK829.37
L334.42
List Price:  L477.77
You save:  L143.34
Kč1,702.59
List Price:  Kč2,432.37
You save:  Kč729.78
Ft27,646.05
List Price:  Ft39,496.05
You save:  Ft11,850
SEK kr772.42
List Price:  SEK kr1,103.50
You save:  SEK kr331.08
ARS$70,251.41
List Price:  ARS$100,363.46
You save:  ARS$30,112.05
Bs483.50
List Price:  Bs690.75
You save:  Bs207.24
COP$307,238.59
List Price:  COP$438,931.09
You save:  COP$131,692.49
₡35,641.51
List Price:  ₡50,918.63
You save:  ₡15,277.11
L1,768.23
List Price:  L2,526.16
You save:  L757.92
₲546,248.87
List Price:  ₲780,388.98
You save:  ₲234,140.10
$U2,983.14
List Price:  $U4,261.82
You save:  $U1,278.67
zł291.40
List Price:  zł416.31
You save:  zł124.90
Already have an account? Log In

Transcript

Hello, in this free j s video, we're gonna look at lighting, we're gonna look at ambient light point lights, directional lights, and spotlights and how to use them and how they affect materials in your world. So let's just have a look at our world so far. At the moment, I actually have a look at this green face with the Coco's helper logo, no matter where we look at it from where we look at it, all the colors like uniform if they've been created uniform, in the original immigration, the green in this example has signed with the yellow, the purple, the gray, the white, etc. Obviously lighting allows you to create more of an illusion of depth, it allows you to create shadow shadow shadows, shadows, sorry, and so forth. So let's just show you an image we found right here. So here's a difference between some of the different light.

So you got an ambient Floyd which doesn't have a particular Origin it's a uniform lighting technique, which just applies light to all the objects with also where they are, they could be really far or they really need to camera. So if you were to apply a white light or a white ambient light wave, let's say an intensity of five, it would affect every single object by an intensity of five using white light. So this is a great general light to have in your scenes, it provides some illumination, directional light, as you can see by the diagram, it is light that emits from one particular direction, okay towards one particular way. So it has a direction points like it has an origin, they just mixed light in every single direction. This is just suggesting it's like only today but it's in preview as well. It's just because the images to be mixed in every single direction, spotlight as you can see, it is like a cone or If you think of like a stage production when they have Lights Camera action when they shine a light on the stage to showcase something, and everything else goes dark.

That's why spotlight is pretty much no seen or no game, and no 3d rendering will use one light only though use most like a mixture of all four lighting techniques. Because that way it provides you with, I can't give you example, you might use the ambient light to provide a bit of natural light. So let's say if there's, if it's not completely dark if the light coming in from outside, but you haven't got a light source at that. So it's just you would use an ambient light. For you the spotlight for something like a lamp, you could use a spotlight more for, let's say a bowl or something that makes light for one particular direction. directional light could be light from the sun, for example.

So for so forth, I think you get the picture. So let's actually start implementing it. We're going to start off with the simple light of ambient. So as we go here was going to play a common position, but you can put it really anywhere. And we'll do bar ambient light equals new three dot ambient light. And this takes two parameters.

First is a hex, aka, the lighting color. We're going to do zero x ff ff ff, which is white, and next takes a intensity value of 5.0. Save that, go back, refresh. Let's have a look at an object. You're thinking a coffee are different, you might keep looking at it and trying to think what's changed and you're right, nothing has changed. And the reason is, because of the material that we applied, we applied a mesh basic material, which isn't affected by lighting.

But on the bright side pointing, no pun intended. But on the bright side, you don't actually need lighting in your scene to view the material because otherwise it does no lighting in real world or even in the 3d I mean, in a digital world, you still need some sort of lighting to be able to see an object if there isn't you shouldn't see anything whereas we benchmade mesh basic material don't need lighting today, but likewise, it doesn't get affected by lighting. So you have to change the material to Eva Lambert or Phong material that's built in to free j s here the difference between some of the materials that we have found we got lumber lumber, the way I like to think of it is more of like a matte sort of finish form has a bit more of a shine to it. Same with blend.

So you can think of it like the former might be that sort of showing you get on a snooker ball, but most likely You should be able to see the different subjects you do the little shine there. And this is more of a uniform texture, a matte texture that looks more glossy and shiny. So if we go back, we can just rename these to the mesh Lambert show you the different mesh number two mesh phone, and I recommend that you just mess around with this changing to lumber to Fung and just see what the differences are especially with the different lighting techniques from Lambert saved up so if we go back to our scene, we fresh can't see anything. So let's have a look. The console You're on the right font. So let's just open up the console to some cases some arrows.

Oh, I spelled Lambert incorrectly there, but lamb bet. It's like we're betting on some lamb. Okay, still nothing. Let's go back. These are just general errors that would have appeared before. So if we refresh cube, ah, my bad I forgot to actually add the lighting.

See, I made a mistake, but it was a good mistake to actually illustrate what's happening. Now that we chained them to Lumberton form because there's no lighting in our scene. We can't view them. So if I were to, let's just say change just the one side, two basic mesh basic material refresh. That is weird so let's just change this back to basic. Wow oh there we go oh wasn't rotating there.

Here we go so we have our site so we can see search and size aka the two that we've enabled and basic and basic actually know what I'm gonna do only posts of the month basic leaves to us from 12 lumber, so be a great way to illustrate the difference. Now we're going to add our light. So what we are going to do is seem to add and be employed flight and now what I just remembered is Actually Now, remember that because we didn't add the light, he wouldn't want to affect it anything anyway, even with the basic but we know that the green side and the white side is used is added using the basic material. So we'll be able to have a look at them and see whether or not they're correctly loaded. So if we refresh as you can see the white side and the green side are not affected.

Whereas, look at the yellow side, this side and it's on our game so it they are heavily white, they've been affected immensely for what to tone down the intensity refresh. The intensity that's not very intense at all. So let's bump it up to like three refresh. As you can see, this still a high intensity we can see a bit more of our textures changes to to see A bit more of it, let's change some low 1.5. So we can actually see, we can see the background of each of our textures. Now, obviously, the white side, and the green side is not affected at all, because they're basic materials, they're not affected by night, which is what I've got.

In this text data, I created a floor ceiling left one white wall, just using basic geometry and basic texture loading. This will be a great way of seeing how light bounces around in our scene, so we're just gonna add this light. So I've already added these textures to our image folder. Again, this is stuff that we've already covered in this series. It will just help illustrate our lighting techniques. So if we go back refresh There we go.

We have our cube in the middle. And around it, we have some walls and we have a ceiling and we have a floor. But I want to go back, scroll up. Let me scroll down, just combinate this lighting, go back refresh. Nothing appears apart from these two surfaces. And again the reason for that is because we have no lighting.

So just to illustrate, I'm mentioning this several times, this is just going to help bring it home. And so you remember it. If you have no lighting, and your material is not a mesh basic material, you won't be able to see it. So simple as that mesh basic. You can see that lighting, but likewise, it's not affected by lighting as well. So just something to bear in mind.

What I'm going to do is let's say for to tone this down to 0.8. As you can see, everything just looks Dark Now, again, this is just ambient lighting. So even though this war, let's actually move a bit even though this war is pretty big effects this part the same way as it does this part and the same way as it does, let's say this part right here Yeah, it's all affected the same, including what is on the bottom that is just refresh this and I can easily change this to let's say a red color 0000 save that, go back refresh, we have a red light that doesn't look very nice. So let's switch back to white. So we've covered ambient lighting. Now let's look at point lights.

So what we're going to do remember, point lighting is a light in the scene that just emits light in every single direction. Point noise can have an origin Does by default have an origin, but we're not going to actually set a particular position ourselves. But you can easily do that using position or x position dot y position of Zed. You can do all of that good stuff to devolve light, one equals new free dot point, light. First value is the color which is a hex of zero x, zero x ff 0040. Just some random light values.

Next value is the intensity on before and the final value is the distance that you want the law to apply. So beyond this distance, no objects will get affected by this law. It's 50. And I'm going to put seen lawyer one. I'm gonna copy and paste this I'm gonna add total freedom Like to, to answer this columnar do 0040 s s changes to a three, four and for this color, I'm going to pull up at ff 80. Save that.

So let's go back refresh. There we go. We got a bunch of different lights. They quite bright at the moment. So what we're going to do is actually tone him down a bit. Let's turn tongues down to 1.5.

So we're just having the Obi Wan refresh. Let's tone him down even more. Tone this down to one. Now I'm telling it's down to like 1.2 1.1 and 1.05 save refresh. But what I'm gonna do because they're all in the same position is make them move around using the update method. So they're constantly moving around so you can actually see the act of lighting in real time.

So go within do var time equals date dot Now, again, the date times by 0.005. This is just some code that we're going to use to rotate it. This is a lot for code like one dot position, dot x equals math dot sine. And in here, we're gonna put time on boy 0.7 times 30. I'm gonna copy and paste this. I'm gonna change the X to a wall.

And a z. We're gonna change the sine, cos, So cosine, change this one to cosine as well change this to 0.5 0.3 and just multiply this by 40. I've already calculated all of this beforehand, so you don't need to worry about this. I'm just gonna change this to 222234 free. I forgot to modify this. Realize when the IntelliSense wasn't picking, lightest free up down here.

This is gonna be a cosine. This is gonna be sewing. This is gonna be sewing. Gonna be sine and now let's start updating the values. For 0.3 0.7 And down here, we're just gonna switch these around. And now we're actually ready to run.

So let's just run this a Marvel in what we have, as you can see certain aspects of the world, okay, certain parts, certain objects are changing lighting because we have lights that are moving around, but what I'm going to do is in, turn up the intensity again, because that will help illustrate that so far just turn up the intensity, four to four refresh. So as you can see, we've got some lighting up the top is quite intense and that doesn't go into the bottom part. As you see the lights are now changing. This isn't the end of this video, but as an extra task, what we want you to do that The moment you can see the effect of the light, but you don't know exactly where the light is, you want you to create like a normal number cube or a sphere using the geometry method in free j s, and just move them with the light.

So they'll be positioned where the light is. And they'll move with that particular why so basically you're attaching an object to a light. So it just looks like the light is coming from a particular object and you could even use a mesh basic material and assign the same color that you've used as the light color. That would be fantastic Rio Lacroix the lights are moving around and you'll be able to visually visualize them. So we've just covered some point lighting, let's cover some directional lighting. What does leave all this lighting in there but we will just comment it out.

Sorry, not that one was comment at all the lighting. And the directional lighting this comes from one direction. And I'm going to do var directional light equals new, three dots direct directional light. And for this, I'm going to put zero ff ff ff, so it's going to be a white light with the intensity of one. I'm going to put directional light dot position, dot set for this is another way to set the position of an objective position offset, and this takes the X y&z values on 01 and zero. So if we save that, go to the ad.

Directional light, go back, refresh fleet rotation We have a light source which is somewhere around the back. Yeah, the light is being emitted from here down there. So this face is visible, as is this as is this face that zoom in that face to face, but none of these are visible because the light isn't actually touching those particular faces. So that's directional lighting. This is common that out. And now final light is spotlight remember this is like having a cold.

Like if you're on a stage and they shine a particular light on stage everything else goes dark, very similar to that. So we're going to do is var spotlight equals new three dots spot light is in the film spotlight. Pretty soon it's okay could have been better but it's okay. For this talk about that direction. ff 45 is ultra values on point and you can do whatever you want. I'm gonna play intensity of 25 and very intense spotlight dot position dot set.

Zero phrase zero. finally seen doc spotlight, save, refresh, and that is very, very tense. If we go back, we set it to zero for zero, so the only value that isn't zero that has changed from the initial position is the y value. So it is somewhere like here, like so. And it's an emitting a cone downwards. So no like touching the bottom and no light is touching the top.

So that's it for lighting. Let's re enable all I would like to see what it looks like see how maybe how horrible it looks. So this is our lighting as a whole. Like I said, you want to use a mixture of lighting as an and as an extra to experiment with the lighting techniques, experiment with the materials and also try and attach some sort of physical object, some sort of cube For example, to each light layer moving on each light in general that has a good position aka everything bar the ambient trial so you can actually see where it's coming from. That would be fantastic for you have any questions feel free to post them on our education platform sonar learning Dakota UK for slash question dot php, or you can reach out to us in any other manner, social networking, direct message commenting, however you feel there'll be a link in the description.

To our GitHub page where you can get the source code from this video and every other video in this series. And as usual, thanks for watching, and I hope you have a great day coding

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.