Three.js Tutorial on Shaders (beginners)

Follow me on:

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.

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

[dhruvalraval]

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

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

[covenantersoldier]

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

[KibukuluFabrice]

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

[sharketespark]

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

[Gigatless]

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

[EricMalek]

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

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

[BrettKromkamp]

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

[scottonanski]

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

[melkileo]

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

[frddyfrsh]

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

[ewwitsantonio]

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

[ZeeshanAli-kczc]

Really need a next tutorial on shaders!

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

[clearmindstudios]

Thanks dude your channel is fire look forward to learning more

[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?

[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?

[cybr_]

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!