Three.js Shadows Explained | Tutorial for Beginners! (JavaScript)
ฝัง
- เผยแพร่เมื่อ 1 พ.ย. 2020
- 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/ - วิทยาศาสตร์และเทคโนโลยี
Your videos are clear, concise and easy to follow. Added bonus, your voice is calming... great work, Thanks!
Binge watching your videos. SO GOOD!
Yay!
Great tutorials.
I love how you balance technicality in your vids!
ty, if you have other topics you wanna see, just let me know.
@@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 TH-camr 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!
@@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
Glad you enjoyed it!
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.
Ah yeah, I've done a few different approaches to decals for various games, I'll see what I can do.
cool tutorial, perfect explanation
ty!
Great tutorials. I would actually say some of the best tutorials on three.js available on TH-cam.
Wow, thanks!
Subscribed, as well.
Awesome, let me know if you have ideas for future vids too.
@@simondev758 I haven’t checked out all your videos so not sure if you have covered these already: materials, WebXR and optimization...
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.
Great tut! Gonna start recommending your stuff on 3js discord.
As for me I'm still hoping for a foliage overview :D
Awesome, would be much obliged if you spread the word :)
I'm still hoping to get to that, so many ideas, so little time.
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.
thank you my bro
No worries
Will you do something about shaders or postprocessing? Nice video btw
Sure, I've actually got both those in my topic list :)
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
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.
I used cascaded shadow maps successfully for an xbox/playstation open world sandbox style game, should do the trick for infinite terrain.
@@simondev758 I’ll give it a go - thanks!
@@MummyIveWetMyself Let me know when you've got something going, would love to see what you make.
thanks, I also noticed that the shadows are not projected on the MeshBasicMaterial, i change to the standard like ur example and works
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
Just setting up light probes or the theory behind them, ie. spherical harmonics lighting?
what about shadow map width and shadow map height? how do i declare those?
epic
ty
First lol. Love the tutorials.
Glad you like them!
that doesnt work for me
0 dislike from: nobody
What happened to your voice are u ill😢?
Hah, yeah I've got a little something, hopefully should clear up soon.
@@simondev758 i wish u well too☺️
Btw can u pt me apps for animation making which are free&also used for androids.
What kind of animation are you talking about?