How to implement a simple GLSL Shader in Three.js?

Hey everyone?

In this video, I show you how to implement a simple GLSL shader in Three.js. We use a ShaderMaterial instead of a MeshBasicMaterial to render a cube in Three.js. Shaders lets you customize the look of your 3D objects by altering the geometry using Vertex shaders, showing gradients on your mesh using Fragment Shaders and much more.

? This video is NOT an introduction to shaders.

? Please let me know if you need a more detailed and theoretical understanding of shaders. It is a difficult topic to get a grip on but I will try my best to explain it well.

⌚ Important Timestamps
00:00 - Overview
00:06 - Channel Trailer
00:12 - Before watching the full video
00:27 - Three.js Basic Scene
00:50 - Create a new folder called "shaders"
1:35 - Create a custom ShaderMaterial
2:40 - Vertex Shader code
4:21 - Fragment Shader code
7:30 - ShaderMaterial Documentation
8:41 - Make sure there are no syntax errors when writing GLSL code
10:14 - Conclusion

ℹ Helpful links
✅ ShaderMaterial - https://threejs.org/docs/#api/en/materials/ShaderMaterial
✅ WebGLProgram - https://threejs.org/docs/?q=web#api/en/renderers/webgl/WebGLProgram
✅ WebGLShader - https://threejs.org/docs/?q=web#api/en/renderers/webgl/WebGLShader

? Some of my other videos on THREE.js
✅ How to use Three.js and React Native to render 3D Graphics in a Mobile App?
https://youtu.be/trCpbpA_8gk

✅ How To Export Three.js Scene into GLB Format from scratch
https://www.youtube.com/watch?v=tD0NYabdf5Q

✅ How to deploy a Three.js project on GitHub? (Not using Webpack)
https://www.youtube.com/watch?v=gpTjJk-pt6s

✅ How to download lightweight 3D models for Three.js?
https://www.youtube.com/watch?v=KDz7CwmNsIA

✅ How to Load a 3D model in Three.js | GLTF/GLB Model | GLTFLoader
https://www.youtube.com/watch?v=yPA2z7fl4J8

✅ I took the Three.js course by Bruno Simon and it is awesome!
https://www.youtube.com/watch?v=UBPXLwRT-Io

Twitter - https://twitter.com/knightcube

Buy me a coffee - https://www.buymeacoffee.com/knightcube
Book a one-to-one mentorship with me - https://mentorcruise.com/mentor/RajatGupta/

Equipment I use
1. Fingers Webcam - https://amzn.to/2QQYq7U
2. Maono AU-A03 Condenser Microphone Kit Podcast Mic with Boom Arm Microphone Stand - https://amzn.to/32JngcA
3. Boya Mic - https://amzn.to/3dJmW3M
4. Zebronics Zeb-Transformer-M Optical USB Gaming Mouse with LED Effect(Black) - https://amzn.to/3tRj5ay
5. Writing Tablet - https://amzn.to/32Ip3OX
6. Filmora Video Editor - https://filmora.wondershare.com/invite-new-user.html?invite_code=eyJ1aWQiOjI0MDA0ODUzNywibmlja25hbWUiOiJrbmlnaHRjdWJlIn0=

Canva - https://www.canva.com/join/pane-arles-spire

Disclosure: Some links are affiliate links to products. I may receive a small commission for purchases made through these links.


#Shaders #Three.js #GLSL