Intermediate Three.js Tutorial - Create a Globe with Custom Shaders
Offered By: Chris Courses via YouTube
Course Description
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
Taught by
Chris Courses
Related Courses
工程圖學 3D CAD 專題National Taiwan University via Coursera 3D Modeling and Animation Course with Maya: Tradition Meets Technology
California College of the Arts via Kadenze Motion Design: Time and Technology
Ringling College of Art + Design via Kadenze . ANIMATIONs
Banaras Hindu University via Swayam Fundamentals of 3D Visualization
Indian Institute of Technology Bombay via edX