Three.js Lighting Tutorial (JavaScript) | Light Types Explained!

hey today we're going to be looking at lighting in 3.js exploring the different light types and how to add lighting to your scenes in javascript getting the lighting right in any 3d scene is really challenging and so having a lot of options of lighting types can come in really handy what we'll cover today is the different light types that 3.js offers and we'll go over them one by one and explore how they work how to use 3js lights in code and finally how they're typically used in major games before we start like always make sure you're subscribed hit that subscribe button and the like button really helps me out also follow me on twitter since it's an easy way to get in contact with me and see what i'm working on next anyway let's go over the different light types we're just using the same setup that we used for the basic 3d world so check that out if you don't already know how to set this all up we'll start with the soft lights that sort of mimic indirect lighting kind of a poor men's global illumination first up the ambient light this is a super simple and easy to use and understand light all it does is equally brighten everything in the scene there's not much to go over here it's basically just adding a constant brightness and color to everything in code this is just a simple instantiation of an ambient light with the color and intensity as parameters then we need to add it to the scene you can see it here on the sphere it just adds constant color to the scene and if we change the color of the ambient light everything changes normally you'd use these to just add a tiny bit of light for shadowed areas so if i had a bright sunlight casting a shadow you can add an ambient light to get that kind of bounce light hemisphere lighting is kind of interesting it's specified using two different colors one for above and one from below then you interpolate between them based on the normal's direction without using the sky color and down using the ground color the code's pretty simple you just instantiate an instance of a hemisphere light set the two colors in this case we're going to use a yellowish color for the sky and bluish color for the ground when we load this up and observe this on the sphere you can see the top and bottom are lit differently so what's this typically used for in my experience i've seen this used in a place of ambient lighting for outdoor scenes since in shattered areas you'd still get a bit of detail from lighting now the wrecked area light is really interesting this is a soft rectangular light that can be used to fill scenes with diffuse semi-directional light under the hood this is actually really complicated and there's a whole sig graph paper on the technique used in code this is slightly more complicated you need to instantiate an instance of erect area light with the color and intensity as always but you also need to supply a width and a height so in this case we've supplied widths of 2.0 and length of 20.0 so when we load this up you'll see a long strip of light and you could imagine this being very useful in situations where you've got indoor scenes and you want some sort of soft ambient lighting in rooms an easy example is a bright tv screen directional lights are kind of a simplification of sunlight you can imagine an object in the world and sunlight all the rays are basically parallel the sun is almost like a source of light that's infinitely far away so that all the light reaching you is basically all going in the exact same direction directional light calculation is pretty straightforward just a simple n-dot l for diffuse lighting interestingly enough this is the first type of light that we've talked about that supports shadows the others are softer less directional approximations of light so calculating the shadow contribution isn't straightforward but for a directional light from the point of view of the sun it's just this area behind an object so it's easy in code they're easy to instantiate and manipulate create an instance of a directional light with color and intensity parameters and then you can just position it make sure when you add it to the scene to also add the light's target you can see here that we've got a sphere and if we set the directional light it lights up from one direction now if we were to change the scene slightly say have multiple spheres notice how they're all lit from the same angle and direction in games outdoor scenes the major light source being the sun will usually be a directional light with shadow maps point lights are just lights that have a specific position and emit light in every direction instead of directional lights which sort of are treated as being infinitely far away point lights have a very real defined location when calculating them in shader code they're almost identical to directional lights except that you're calculating the direction yourself and you may be applying some dimming the further from the light you are in code you instantiate a point light with color and intensity and then assign it a position that's all there's a decay parameter too if you want to play with the falloff but leaving at the defaults is fine for now now once we load the scene up you can see that this sphere and the ground are getting light from the point light if we go and change the scene to have multiple spheres they're getting lit from the light between them now in games point lights are pretty versatile a torch an explosion they're kind of a jack of all trades light finally spotlights while point lights have a specific position they don't have any direction they just emit light everywhere spotlights have a specific position and a direction like a flashlight if you're implementing a spotlight yourself they're pretty simple very similar to point lights in fact but you're going to decay both with the distance from the spotlight and with the angle between the point and the light and the light's direction in code you instantiate a spotlight with color and intensity but there's a few more parameters to play with here you need to supply the distance or range of the light and then there's the angle of dispersion and the penumbra you can think of them as how wide the spotlight is and how sharp it is there's also a decay parameter that affects how fast the light dims with distance and the default is usually fine let's look at some examples so if i load this up to start we see it shining down let's go and narrow the angle of dispersion so we'll just divide this by two now when we load this up voila much narrower let's put that back the way it was but we'll increase the penumbra value a bit so the light falls off near the edges the valid range is zero to one so we'll just jack it up to one and you can see that the light falls off towards the edges and of course in game flashlight being the most obvious use for a spotlight anyway that should cover the basics of what 3gs has to offer in terms of lights hope you enjoyed this if you haven't already subscribe both here and on twitter you'll get notifications for when new videos drop and previews on what's coming up next make sure to like the video and leave a comment about what you want to see covered in a future tutorial the code is all up on github so knock yourself out do whatever you want with it doesn't matter it's free to use if you don't understand anything just ask me cheers

Channel: SimonDev

Views: 58,033

Keywords: simondev, game development, programming tutorial

Id: T6PhV4Hz0u4

Length: 6min 48sec (408 seconds)

Published: Mon Oct 26 2020