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

  • @zimbakin
    @zimbakin2 жыл бұрын

    Your videos are clear, concise and easy to follow. Added bonus, your voice is calming... great work, Thanks!

  • @kritikkaushal6305
    @kritikkaushal63053 жыл бұрын

    Binge watching your videos. SO GOOD!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Yay!

  • @khao9377
    @khao93773 жыл бұрын

    Great tutorials.

  • @sOuriukas
    @sOuriukas3 жыл бұрын

    I love how you balance technicality in your vids!

  • @simondev758

    @simondev758

    3 жыл бұрын

    ty, if you have other topics you wanna see, just let me know.

  • @sOuriukas

    @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

    @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!

  • 3 жыл бұрын

    Thank you so much for the great video

  • @simondev758

    @simondev758

    3 жыл бұрын

    Glad you enjoyed it!

  • @v8metal
    @v8metal3 жыл бұрын

    cool tutorial, perfect explanation

  • @simondev758

    @simondev758

    3 жыл бұрын

    ty!

  • @BrettKromkamp
    @BrettKromkamp3 жыл бұрын

    Great tutorials. I would actually say some of the best tutorials on three.js available on KZread.

  • @simondev758

    @simondev758

    3 жыл бұрын

    Wow, thanks!

  • @BrettKromkamp

    @BrettKromkamp

    3 жыл бұрын

    Subscribed, as well.

  • @simondev758

    @simondev758

    3 жыл бұрын

    Awesome, let me know if you have ideas for future vids too.

  • @BrettKromkamp

    @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

    @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.

  • @alexpineda3422
    @alexpineda34223 жыл бұрын

    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

    @simondev758

    3 жыл бұрын

    Ah yeah, I've done a few different approaches to decals for various games, I'll see what I can do.

  • @pist5343
    @pist53433 жыл бұрын

    Great tut! Gonna start recommending your stuff on 3js discord. As for me I'm still hoping for a foliage overview :D

  • @simondev758

    @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.

  • @animanoir
    @animanoir3 жыл бұрын

    thank you my bro

  • @simondev758

    @simondev758

    3 жыл бұрын

    No worries

  • @buzbuz33-99
    @buzbuz33-992 жыл бұрын

    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.

  • @sh_4016
    @sh_4016 Жыл бұрын

    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

  • @quekZo95
    @quekZo953 жыл бұрын

    Will you do something about shaders or postprocessing? Nice video btw

  • @simondev758

    @simondev758

    3 жыл бұрын

    Sure, I've actually got both those in my topic list :)

  • @trevorfranks69
    @trevorfranks69 Жыл бұрын

    what about shadow map width and shadow map height? how do i declare those?

  • @0845738495
    @08457384953 жыл бұрын

    thanks, I also noticed that the shadows are not projected on the MeshBasicMaterial, i change to the standard like ur example and works

  • @simondev758

    @simondev758

    3 жыл бұрын

    Nice job! Not all materials support lighting, and MeshBasicMaterial (threejs.org/docs/#api/en/materials/MeshBasicMaterial) only does simple flat shading.

  • @playbyan1453
    @playbyan14533 жыл бұрын

    Hi i hope you make explanation about light probe it's sounds interesting if you made one

  • @simondev758

    @simondev758

    3 жыл бұрын

    Just setting up light probes or the theory behind them, ie. spherical harmonics lighting?

  • @MummyIveWetMyself
    @MummyIveWetMyself3 жыл бұрын

    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

    @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

    @MummyIveWetMyself

    3 жыл бұрын

    @@simondev758 I’ll give it a go - thanks!

  • @simondev758

    @simondev758

    3 жыл бұрын

    @@MummyIveWetMyself Let me know when you've got something going, would love to see what you make.

  • @iercan1234
    @iercan12343 жыл бұрын

    epic

  • @simondev758

    @simondev758

    3 жыл бұрын

    ty

  • @kanpekiken2481
    @kanpekiken24813 жыл бұрын

    First lol. Love the tutorials.

  • @simondev758

    @simondev758

    3 жыл бұрын

    Glad you like them!

  • @koki10190
    @koki101902 жыл бұрын

    that doesnt work for me

  • @halilibrahimozturk2791
    @halilibrahimozturk27913 жыл бұрын

    0 dislike from: nobody

  • @shortanimations2798
    @shortanimations27983 жыл бұрын

    What happened to your voice are u ill😢?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Hah, yeah I've got a little something, hopefully should clear up soon.

  • @shortanimations2798

    @shortanimations2798

    3 жыл бұрын

    @@simondev758 i wish u well too☺️

  • @shortanimations2798

    @shortanimations2798

    3 жыл бұрын

    Btw can u pt me apps for animation making which are free&also used for androids.

  • @simondev758

    @simondev758

    3 жыл бұрын

    What kind of animation are you talking about?

Келесі