Three.js Shadows Explained | Tutorial for Beginners! (JavaScript)
Ғылым және технология
Follow me on:
Patreon: / simondevyt
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
Three JS shadows are really easy to use and enable. In this project we'll explore the different shadow types available in three js, which lights support shadowmapping, and we'll step through the code in JavaScript to add them to a scene. We'll walk through setup at the WebGLRenderer level, choosing the type of shadowing that three js will use, before looking at individual lights, and other options like setting individual mesh instances to cast or receive shadows optionally.
This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js shadow capabilities.
The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.
In the video, we cover:
* What is shadow mapping, how does it work from a conceptual point of view.
* What lights in three js support shadows and which don't.
* Mesh shadow configuration.
* Breakdown of the shadow types, including BasicShadowMap, PCFShadowMap, PCFSoftShadowMap, and VSMShadowMap
* Using castShadow and shadow camera on DirectionalLight, PointLight, SpotLight
* How to instantiate and use each in JavaScript.
PCF: developer.nvidia.com/gpugems/...
VSM: www.punkuser.net/vsm/
Пікірлер: 48
Your videos are clear, concise and easy to follow. Added bonus, your voice is calming... great work, Thanks!
Binge watching your videos. SO GOOD!
@simondev758
3 жыл бұрын
Yay!
Great tutorials.
I love how you balance technicality in your vids!
@simondev758
3 жыл бұрын
ty, if you have other topics you wanna see, just let me know.
@sOuriukas
3 жыл бұрын
@@simondev758 I know you've already covered topic about neural networks with Flappy Bird example but it would be great if you could make something like evolution simulation where, let's say, fittest ones would be ones that were able to survive the longest time. Every creature could have a specific trait which would be linked to neural network. A KZreadr named "Primer" did something similar I'm talking about, his video is called "Simulating Natural Selection". I would be awesome to see yours approach and maybe you could add some more interesting mechanics :). Thank you for the effort you put into your videos!
@simondev758
3 жыл бұрын
@@sOuriukas Ooh yeah, I've been kicking around an idea in my head in that space. I've been super interested in evolutionary algorithms, was kind of thinking of bolting one into one of these demos eventually with some fighting mechanics and stuff. I'll write this down for when I'm done with these beginner tutorials, not totally sure what I'm going to do after those. Great suggestion!
Thank you so much for the great video
@simondev758
3 жыл бұрын
Glad you enjoyed it!
cool tutorial, perfect explanation
@simondev758
3 жыл бұрын
ty!
Great tutorials. I would actually say some of the best tutorials on three.js available on KZread.
@simondev758
3 жыл бұрын
Wow, thanks!
@BrettKromkamp
3 жыл бұрын
Subscribed, as well.
@simondev758
3 жыл бұрын
Awesome, let me know if you have ideas for future vids too.
@BrettKromkamp
3 жыл бұрын
@@simondev758 I haven’t checked out all your videos so not sure if you have covered these already: materials, WebXR and optimization...
@simondev758
3 жыл бұрын
Haven't covered webxr. Have kinda wanted to do some optimization ones, might just need to pick something to optimize and do a walkthrough or something.
Thanks for another vid. I will be needing to implement pools of blood, and additionally blood splatter (which maybe I can use your particle series for), I would love if you could do a video on that.
@simondev758
3 жыл бұрын
Ah yeah, I've done a few different approaches to decals for various games, I'll see what I can do.
Great tut! Gonna start recommending your stuff on 3js discord. As for me I'm still hoping for a foliage overview :D
@simondev758
3 жыл бұрын
Awesome, would be much obliged if you spread the word :) I'm still hoping to get to that, so many ideas, so little time.
thank you my bro
@simondev758
3 жыл бұрын
No worries
This was very helpful in my finally getting shadows to work. One problem I had was that my shadow.camera.far was not as far out as the position of the light source. In my case, the light source was10,000 units out and and my shadow.camera.far was only 1,000 units. Also, it appears that the quality of the shadows improves as you move the light source closer. So, my light source is now 1,000 units out and shadow.camera.far is greater than 1,000 units.
Just use a VSM shadow map, make a bigger image for the shadows and then clamp the values to some threshold, to upscale the shadow map
Will you do something about shaders or postprocessing? Nice video btw
@simondev758
3 жыл бұрын
Sure, I've actually got both those in my topic list :)
what about shadow map width and shadow map height? how do i declare those?
thanks, I also noticed that the shadows are not projected on the MeshBasicMaterial, i change to the standard like ur example and works
@simondev758
3 жыл бұрын
Nice job! Not all materials support lighting, and MeshBasicMaterial (threejs.org/docs/#api/en/materials/MeshBasicMaterial) only does simple flat shading.
Hi i hope you make explanation about light probe it's sounds interesting if you made one
@simondev758
3 жыл бұрын
Just setting up light probes or the theory behind them, ie. spherical harmonics lighting?
Thanks for another great tutorial. I’ve been wrestling with the problem you describe at the end when generating infinite terrain. At the moment I generate a shadow map for the chunks around the player position but when they move out of that area there are obviously no shadows as in your example. I haven’t found a performant way of fixing this. Would cascaded shadow maps solve this problem? The issue is generating shadows based on player position and I’m unsure if cascaded shadow maps will help.
@simondev758
3 жыл бұрын
I used cascaded shadow maps successfully for an xbox/playstation open world sandbox style game, should do the trick for infinite terrain.
@MummyIveWetMyself
3 жыл бұрын
@@simondev758 I’ll give it a go - thanks!
@simondev758
3 жыл бұрын
@@MummyIveWetMyself Let me know when you've got something going, would love to see what you make.
epic
@simondev758
3 жыл бұрын
ty
First lol. Love the tutorials.
@simondev758
3 жыл бұрын
Glad you like them!
that doesnt work for me
0 dislike from: nobody
What happened to your voice are u ill😢?
@simondev758
3 жыл бұрын
Hah, yeah I've got a little something, hopefully should clear up soon.
@shortanimations2798
3 жыл бұрын
@@simondev758 i wish u well too☺️
@shortanimations2798
3 жыл бұрын
Btw can u pt me apps for animation making which are free&also used for androids.
@simondev758
3 жыл бұрын
What kind of animation are you talking about?