Intermediate Three.js Tutorial: Make a Globe with Custom Shaders
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
Watch video Intermediate Three.js Tutorial: Make a Globe with Custom Shaders online without registration, duration hours minute second in high quality. This video was added by user Chris Courses 09 May 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 135,332 once and liked it 3.8 thousand people.