Intermediate Three.js Tutorial - Create a Globe with Custom Shaders

Overview

Dive into an intermediate-level Three.js tutorial that guides you through creating a visually stunning globe with custom shaders. Learn to display population data and animate geometries while mastering complex concepts like Vertex Shaders, Fragment Shaders, UVs, and Normals, explained in easy-to-understand language. Follow along as you build a realistic globe using atmospheric-like shaders, and gain valuable insights into debugging 3D shaders. Explore essential topics such as creating and texturing spheres, implementing vertex and fragment shaders, working with UV coordinates and normals, adding atmospheric effects, and incorporating interactive mouse movements. By the end of this comprehensive 1 hour and 34 minute video tutorial, you'll have developed a polished globe visualization complete with background stars and HTML/CSS enhancements, while significantly advancing your Three.js and shader programming skills.

Syllabus

- Project overview
- Create a sphere
- Map a texture onto sphere
- Sharpen rendering
- Create a vertex shader
- Import shader with Vite Plugin String
- Create a fragment shader
- Modify vertex shader to accommodate three.js
- Add texture to fragment shader
- UV Coordinates Explained
- Add texture to fragment shader cont.
- Add shade of blue to earth texture
- Normals Explained
- Add shade of blue to earth texture cont.
- Add atmosphere
- Fix shader normal bug
- Add mouse movement interaction
- Add background stars
- Add HTML / CSS
- Outro