Three.js Shaders Tutorial (part 1/2) | Intro to GLSL Vertex and Fragment Shaders
Ғылым және технология
In this coding tutorial, we go over the basics of Three.js GLSL shaders. We start off by learning about the WebGL graphics pipeline. Then we go over what vertex + fragment shaders are and how they work. Finally, look at the minimal amount of code required to create a Three.js shader material.
📖 Code - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Three.js Examples - threejs.org/examples
Discover Three.js - discoverthreejs.com
== [ Timestamps ] ==
00:00 Intro to Three.js Shaders
00:58 WebGL Graphics Pipeline
02:26 Vertex + Fragment Explained
03:09 Three.js Setup Guide
03:50 Shader Material
05:19 Coding Simple GLSL Shaders
== [ Tags ] ==
#suboptimal #threejs #shaders
Пікірлер: 16
This is awesome, thanks!
Superb Tuorial
Nice tutorial. Expecting part 2 on shaders
@SuboptimalEng
2 жыл бұрын
Should be up in the next few days 😎
Phew! Thank you for that easy to understand intro to shaders! It seemed so complicated at first, but you made it really easy to understand. On a side note, those highschool trig classes really come in handy eh! 😅
@SuboptimalEng
Жыл бұрын
For sure. I honestly never thought I'd need Trigonometry again, but it's been fun brushing up on those skills.
very well explained, tyvm! 👍
@SuboptimalEng
Жыл бұрын
Glad to help!
0:26 do you mean different shader instead of no shader?
cool
Hey, do you have the file you use in the video?
@SuboptimalEng
Жыл бұрын
The code is on GitHub.
This was a great tutorial. When I used "git clone" etc., it copied "all" the files over to my computer without a problem. However, when I open up the HTML file and run code, nothing shows up (no box). ??? What do you suppose I'm doing wrong? I see the code in the file ending in "jsx" (not an extension I'm familiar with). ??
@gabrieljreed
10 ай бұрын
This is a React app, so you'll have to run it using that. I believe the first or second video in this series goes over how to set up the React project!
Your definition of shaders was a bit iffy right off the bat but your example shows you dont get it. You don’t need a more powerful computer to run shaders - all you need is a GPU. A shader has nothing to do with lighting per se, it’s ultimately just a program which runs on the GPU with massive parallelism.
yiuyiouo