Intermediate Three.js Tutorial: Make a Globe with Custom Shaders

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

🌠GLSL Documentation Links

📃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
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

[Brioshie]

One of the most complete tutorials I've ever found. Helped me more than I expected!

[RobertWildling]

Two years after the tutorial's initial release – and I feel so incredibly well informed now thanks to you, Chris! All these in-depth explanations and the careful step-by-step progressions make this tutorial invaluable (for me, at least)!
And the result? What was once a black box of unknown complexity that I was afraid of even trying to learn, now seems to be easily manageable. Thank you very much!

[christianlechner]

This is by far the best shader tutorial ou there. Period! Thank you very much for this!

[OneAndOnlyMe]

This is the best GL shader lesson! Thank you. I've been wanting to learn shader programming for some time but find the lack good documentation frustrating.

[mahmoudWalid]

I have no words to describe how amazing this video is. Really thank you⭐

[srikanthharmony]

Best tutorial by a country mile buddy.. thank you for your detailed explanation

[chaitanyajharbadem-]

I was trying to make a solar system using three js this going to help me a lot thanks man

[evaninadgn]

I don't have the words to describe how incredible your course is.
Thanks so

[animatedzombie]

your editing is dope and i can see orbit shots in the middle

[dr.adam.nielsen]

I would recommend to set x, y coordinats of mouse default to (0, 0) and not undefined, other wise you get the blue ball (as in 01:09:46) on start screen, instead of the globe

[megatronreaction]

Most devs bragging about how difficult css was, they're not yet come across GLSL coding. I really have no idea over what I'm looking at. Really admire thus who can code GLSL.

[jasonkarjadi]

Thanks for the three js tutorials, man
Been digging it

[leamon]

Thanks Chris. Best explanation of shaders ever.

[Lorth-zryt]

wow this is a reaaallyy good tutorial, it really enlighten me. I've been strugling to understand glsl and how it works but by the glimpse of it in this tutorial I started to understand bcs u are comparing it to how it's done if it were writen in JAVA. wow bravo you are really helping me thanks a lot dude!!

[fannanoking]

One of the best course in the youtube. We will be happy if you make the advance three js course further.

[jenshardervingaardlarsen]

I like the detail of the video, and I learned a lot, but... I think that if you want to share tutorials with the masses, you need standardtools. There is way to much time adjusting that Vite live server. Does Sublime not have an extension for a live server? I think you should use vs code for your videoes. Its what most people recognize.

Also dont use css libraries. Its a video on three js, not tailwinds. It might be your favourite choice, but it confuses, when the same result could be made with simple css in the same amount of time it took you to explain and install Tailwinds.

Tip: JS automatically creates variables for all id's from html, so you dont need the queryselector for the id you put on the canvas. Its already accesible.

I hope you like the criticism, allthough you might not agree 😁 keep up the good work.

[ugljesavojvodic]

Thanks a lot for lesson. This helps really a lot to understand shaders and how it all works. Really like all comments during the tutorial, all are helpful.

[madelinemapping]

Omg this is exactly what I need. Thank you!!

[techrurallivining]

Complete beginner and understood everything!! thnak you!!

[mitzurugiii]

Love the detailed tutorial. Thanks a lot for this, I was able to have a good start on familiarizing Three.js. Cheers!