Display population data, animate geometries, and more with the full course at https://chriscourses.com/threejs-bundle

Shaders are notoriously hard to deal with—there is little to no debug tools available, while support and learning material online is little-to-none. I created this tutorial as a method to alleviate the stress involved with learning 3D shaders with Three.js.

Every important piece of complex jargon will be explained in plainspeak within this tutorial, including: Vertex Shaders, Fragment Shaders, UVs, and Normals.

In the end, you'll have created a realistic globe using custom atmospheric-like shaders.

🔗Project Links
Finished Project Demo - https://chriscourses.com/demos/interm...
Course Snippets - https://chriscourses.com/courses/inte...
GLSL Notes File - https://chriscourses.com/courses/inte...
Comprehensive List of Three.js Geometry - https://threejs.org/docs/index.html?q...
Three.js Uniforms and Attributes - https://threejs.org/docs/index.html?q...
TailwindCSS CDN - https://tailwindcss.com/docs/installa...

🌠GLSL Documentation Links
Mat4 - https://thebookofshaders.com/glossary...
Texture2D - https://thebookofshaders.com/glossary...
Dot Operator - https://thebookofshaders.com/glossary...
Normalize - https://thebookofshaders.com/glossary...

📃Table of Contents
00:00 - Project overview
03:11 - Create a sphere
08:05 - Map a texture onto sphere
10:34 - Sharpen rendering
13:10 - Create a vertex shader
18:30 - Import shader with Vite Plugin String
24:08 - Create a fragment shader
27:41 - Modify vertex shader to accommodate three.js
35:05 - Add texture to fragment shader
39:36 - UV Coordinates Explained
43:18 - Add texture to fragment shader cont.
46:46 - Add shade of blue to earth texture
49:36 - Normals Explained
50:47 - Add shade of blue to earth texture cont.
55:02 - Add atmosphere
1:00:52 - Fix shader normal bug
1:02:52 - Add mouse movement interaction
1:09:17 - Add background stars
1:15:29 - Add HTML / CSS
1:33:35 - Outro