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
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.
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.
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...
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?
@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?
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.
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.
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?
@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.
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!
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 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?
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.
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 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!
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 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..
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
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.
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.
Most needed. Please continue more on this series. Like integrating three.js functions and classes with shaders manipulations and more
Awesome, yeah I have more planned like integrating physics.
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 !
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
bruv, I LOVE YOU, loved everything in this and other playlists. keep it coming so that i can be atleast 1% of you :)
You have the best tutorial man, so rare to find something that good on shaders
Man, this is good stuff. Excellently explained like always.
Much appreciated!
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.
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...
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!
Your channel is fire, thank you for all your tutorials!
No worries, happy you're enjoying them!
Excellent demonstration!! Thank you so much for creating this tutorial. It's really helpful.
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 ;-)
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 :)
You have the best tutorials
Thx, lemme know if you got suggestions too!
Thanks dude your channel is fire look forward to learning more
Appreciate it!
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?
I'll add it to my ideas list.
FANTASTIC, thank you
np!
Really need a next tutorial on shaders!
@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?
I don't even use JS or anything. Your work just fascinates me xD
( I'm really dyslexic so I work with unreals blueprints)
I'm a big fan of visual coding too, really makes it accessible.
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.
You totally can, I just didn't, no good reason.
Excellent video!
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.
I might put something together for that, lemme throw it on my ideas list.
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?
@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.
Yes, any of those, it depends entirely what you're targeting.
youre a hero
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!
How to make shader material can receive shadow?
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...)
Yeah there's webgpu now, think it's available on canary?
How to write the custom shader recive shadow?
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?
Awesome content ! Could you do a video explaining how to add custom shader to an existing material? That would be awesome! Thanks !
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.
@@simondev758 That is great !! Top quality content :) thanks a lot :)
is there any way to me export the mesh's modification made on the shader to a real mesh? maybe using one exporter library?
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.
Not super sure what you mean by projected? Like a decal?
@@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!
I'm trying to add shaders to a Physicjs material and it does not work =(
nice content crabman, subscribed
Glad to have you around!
This is amazing content! Contgrats an thanks!
My pleasure!
Amazing, can you make a video about soft particles?
They are pretty important for making fog, fire, explosions etc.
Sure, easy enough! I'll add it to my TODO list.
@@simondev758 Thank you, looking forward to.
Soft particles work with the z buffer right?
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
I can add it to my ideas list.
What do you mean by separate normalMap channel?
@@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..
Cool stuff 🙂
ty!
Could you say which of your repositories are for this video? None of them have "shader" in their name.
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.
What was your favourite console game to develop back in the days?
YES!
Heh
Amazing !!!
Thank you so much
np!
Thanks, awesome
np!
Do you have patronite account ?
Nope
please make a discord server
Are you British? Why "colour"?
Because it is correct.