Three.js Tutorial on Shaders (beginners)

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/sim...
In this video I'll be taking a look at customizing shaders in Three.js and JavaScript. This tutorial is very beginner friendly, we'll be starting with what shaders are, before moving on to how to integrate and customize your own shaders in three.js and working through some easy examples. There's a few api points to cover in Three.js, including classes like ShaderMaterial and RawShaderMaterial, as well as going over vertex/fragment shader and uniform support.
This is yet another video in a series aimed at beginners and new users of Three.js, aimed at helping you get started. There's no requirement or background needed, beyond having watched other videos in the series. With each project, you should walk away with a solid understanding of both the concepts involved, such as what shaders are fundamentally, as well as working through concrete examples.
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:
WebGL Shaders, what they are, what vertex/fragment shaders are.
Shader bindings, the difference between attributes, varying, and uniform values, and how to think about them.
Three.js API's such as ShaderMaterial and RawShaderMaterial
How to instantiate and use your own shaders in Three.js/JavaScript

[@simondev758]

If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt

[@FelixG]

Your tutorials make learning JS and three.js even more fun than it already is :) All of your videos are so succinct and serve as optimal starting points for everything that you cover. They make it really easy, can't wait to see what you'll cover next.

[@simondev758]

Happy to hear that! It's hard to walk that line of under-explaining and over-explaining, glad to hear the current ratio is working out.

[@dhruvalraval8078]

Most needed. Please continue more on this series. Like integrating three.js functions and classes with shaders manipulations and more

[@simondev758]

Awesome, yeah I have more planned like integrating physics.

[@hakimrouatbi]

Didn't take much for me to subscribe, this channel is GOLD. I don't know why it took me so long to stumble upon it. Thanks for sharing you knowledge !

[@KibukuluFabrice]

Wow!!! I can't believe that I have a clear understanding of the basics of shaders after watching this video

[@covenantersoldier9165]

Simon, you're a legend. I truly enjoy learning from you. "tip of the hat to you good sir"

[@scottonanski4173]

Way beyond my level of understanding. Fun to watch, but I'll have to come back to this later.

[@Gigatless]

You have the best tutorial man, so rare to find something that good on shaders

[@arielklevecz]

very nice and concise explanation of shaders in three! I also somehow didn't know that three vectors had a lerp method built into them, so thank you for continuing to elucidate both low and high level tricks. I think your projects are quite elegant, so I'm not sure you want to go down this route, but if you use something like Webpack you could have glsl files bundled as assets and then import them as opposed to using strings. It is nice to have syntax highlighting and some added file organizing power, but it does include the overhead and idiosyncrasies that come with a more involved dev environment.

[@simondev758]

Thanks! Nope haven't considered packaging this all up nicer, right now I kinda like just going the dead-easy route of just write/refresh over and over. The syntax highlighting and all that does sound nice though...

[@sharketespark6495]

bruv, I LOVE YOU, loved everything in this and other playlists. keep it coming so that i can be atleast 1% of you :)

[@BrettKromkamp]

Man, this is good stuff. Excellently explained like always.

[@simondev758]

Much appreciated!

[@EricMalek]

Did I see Trogdor on the stickman diffuse texture shield? LOL Great stuff man!

[@fr3ddyfr3sh]

Thanks a lot. Perfect shader tutorial for me (very familiar with non 3D programming and lacking the 3D part). Till now I was lost between super basic tutorials and superbrain stuff like shadertoy. Shadertoy is really crazy, it’s like the demo scene, making realistic looking textures without texture images. They create textures in shaders (with black magic and perlin noise). Same accounts for geometry, no 3D models just functions and magic ;-)

[@simondev758]

It's not black magic, mostly stuff like sdf's, which I'll be covering on this channel. Hopefully I can get you to that same level :)

[@melkileo]

Your channel is fire, thank you for all your tutorials!

[@simondev758]

No worries, happy you're enjoying them!

[@ewwitsantonio]

Excellent demonstration!! Thank you so much for creating this tutorial. It's really helpful.

[@ZeeshanAli-kc3zc]

Really need a next tutorial on shaders!

[@dungeonHackMedia]

Great tutorial. The tip about outputting various things as color for debugging was extremely helpful. Any chance we could get a tutorial on how to implement lighting for shaders?

[@simondev758]

I'll add it to my ideas list.

[@clearmindstudios]

Thanks dude your channel is fire look forward to learning more

[@simondev758]

Appreciate it!

[@simoncalem]

You have the best tutorials

[@simondev758]

Thx, lemme know if you got suggestions too!

[@fteiyp]

youre a hero

[@GamesandBacon]

I don't even use JS or anything. Your work just fascinates me xD ( I'm really dyslexic so I work with unreals blueprints)

[@simondev758]

I'm a big fan of visual coding too, really makes it accessible.

[@kadekeqw23]

FANTASTIC, thank you

[@simondev758]

np!

[@patrickc.6183]

Hey Simon, great video! Would you consider making a series of videos on vanilla WebGL fundamentals? I have only been able to follow a few MDN examples to create a triangle, and a textured cube. There are hardly any materials that I have seen online that are clear enough to explain every part of graphics programming to someone who is unfamiliar with it. I am a web dev, with no background in graphics, however I am very interested in learning.

[@simondev758]

I might put something together for that, lemme throw it on my ideas list.

[@NaiyoGames]

Awesome content ! Could you do a video explaining how to add custom shader to an existing material? That would be awesome! Thanks !

[@simondev758]

I have a video queued up for tomorrow morning that does that exact thing as part of the project. The video isn't about that specific functionality, but I do cover it.

[@NaiyoGames]

@@simondev758 That is great !! Top quality content :) thanks a lot :)

[@GarronArgentina]

This is amazing content! Contgrats an thanks!

[@simondev758]

My pleasure!

[@froquede]

nice content crabman, subscribed

[@simondev758]

Glad to have you around!

[@BipinOli90]

Cool stuff 🙂

[@simondev758]

ty!

[@nomadshiba]

im wondering, why not use a separate file with shader extension for shaders and just import it in? if it doesn't work in three.js why not make a small script that's importing the shader code there while building.

[@simondev758]

You totally can, I just didn't, no good reason.

[@BlazPecnikCreations]

Thank you so much

[@simondev758]

np!

[@urajcic1]

Hey Simon, Thank you very much for sharing. Your tutorials are awesome :) Could you make one about multiple UVs in single mesh? For example how to merge(multiply/add) diffuse map with baked lightning? Or how to separate normalMap channel from other channels? Best regards

[@simondev758]

I can add it to my ideas list. What do you mean by separate normalMap channel?

[@urajcic1]

@@simondev758 Well if you repeat texture map, all the maps will be repeated with that value. I was looking for solution to have one repetition value of texture for diffuse, and other repetition value for normalMap.... Something like that..

[@anficyon]

Thanks, awesome

[@simondev758]

np!

[@overloader7900]

What about compute shaders? If web has them, it makes most of the performance concerns obsolete (anything that does not require computing literaly millions of things should be able to run perfectly fine on CPU, especially considering the JIT compiled nature of js...)

[@simondev758]

Yeah there's webgpu now, think it's available on canary?

[@mineHDtutorials]

YES!

[@simondev758]

Heh

[@sealuke2724]

Amazing !!!

[@maik6478]

Amazing, can you make a video about soft particles? They are pretty important for making fog, fire, explosions etc.

[@simondev758]

Sure, easy enough! I'll add it to my TODO list.

[@maik6478]

@@simondev758 Thank you, looking forward to. Soft particles work with the z buffer right?

[@cyb3r_81]

Hey Im trying to do a project in one of my college classes and its due at the end of the semester, Im trying to make a static backrooms-esque environment using Three.js and making 2 or 3 shaders with Shadertoy, is there any tips on where I should start? thanks!

[@fr3ddyfr3sh]

@simondev if you’re creating a lake/ocean with waves, do you create the wave geometry on the cpu and push that geometry to the gpu where it get‘s „just rendered as is“. Or would you just push a pure plain terrain to the GPU and create the waves by the geometry or vertex shader. I guess, when you need something realistically floating (a boat or the player) on the water, you would need that geometry on the cpu, wouldn’t you? I guess there are much more options like NVIDIA Physix and doing the wave physics in a compute shader.

[@simondev758]

Yes, any of those, it depends entirely what you're targeting.

[@crowbr]

I have some problemens to make hair in thress js, I exported from blender and my character get bald lol, with tranparency i make hair with plane, you have soluction in your course?

[@felipebrod]

I'm trying to add shaders to a Physicjs material and it does not work =(

[@danielb7023]

What was your favourite console game to develop back in the days?

[@magnusbrzenk447]

Question. I'm looking at the code at 10:03 and the resultant multi-colored sphere based on normal vectors. Is each segment on that sphere mesh the same color, or is there color interpolation going on within each segment?

[@ahmadsaerozi6688]

How to make shader material can receive shadow?

[@marcosvolpato8135]

is there any way to me export the mesh's modification made on the shader to a real mesh? maybe using one exporter library?

[@mrqreeny]

@8:46 This methods seems a bit hacky?? It broke the casted shadow. Anyone knows why? Could it be that he shadow in Three.js is calculated based on the geometry and now we are changing the geometry in the material section?

[@joshuadelorimier1619]

Any chance you could do a follow up video explaining how to get it to "stick" to the 3d model it looks like it's being projected and how to pass in lighting? Thanks so much though for this I got one of my shadertoy designs to be displayed over the model so progress.

[@simondev758]

Not super sure what you mean by projected? Like a decal?

[@joshuadelorimier1619]

@@simondev758 I meant UV mapping man I most of been off that day I figured out that part still working on passing lights but I'll figure it out thanks for your tutorial!

[@richardcook2651]

Could you say which of your repositories are for this video? None of them have "shader" in their name.

[@simondev758]

Looks like I forgot to upload it. Lemme root around and see if I even still have the source for this, I released this video a while ago.

[@johnliou4628]

How to write the custom shader recive shadow?

[@SonGohan182]

Do you have patronite account ?

[@simondev758]

Nope

[@swoorp]

please make a discord server

[@mfpears]

Are you British? Why "colour"?

[@NoobsDeSroobs]

Because it is correct.