Three.js Tutorial on Shaders (beginners)

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

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

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

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

How to make shader material can receive shadow?

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

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?

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

How to write the custom shader recive shadow?

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

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

youre a hero

Are you British? Why "colour"?

Amazing !!!

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.

please make a discord server

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

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

Really need a next tutorial on shaders!

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

thank you this is very helpful!!gdgkgldfkgdflkg

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.

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 !

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

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

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 ;-)

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?

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

This is amazing content! Contgrats an thanks!

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

Cool stuff 🙂

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.

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

nice content crabman, subscribed

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.

FANTASTIC, thank you

Thanks dude your channel is fire look forward to learning more

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.

Do you have patronite account ?

You have the best tutorials

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

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

Thanks, awesome

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

YES!

Thank you so much