Intermediate Three.js Tutorial - Create 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/intermediate-threejs Course Snippets - https://chriscourses.com/courses/intermediate-threejs/videos/crash-course GLSL Notes File - https://chriscourses.com/courses/intermediate-threejs/videos/crash-course Comprehensive List of Three.js Geometry - https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry Three.js Uniforms and Attributes - https://threejs.org/docs/index.html?q=web#api/en/renderers/webgl/WebGLProgram TailwindCSS CDN - https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

🌠GLSL Documentation Links Mat4 - https://thebookofshaders.com/glossary/?search=mat4 Texture2D - https://thebookofshaders.com/glossary/?search=texture2D Dot Operator - https://thebookofshaders.com/glossary/?search=dot Normalize - https://thebookofshaders.com/glossary/?search=normalize

📃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 ... https://www.youtube.com/watch?v=vM8M4QloVL0