Premium Features

Download Video

Intermediate Three.js Crash Course

Published a month ago

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

🌠 GLSL Documentation Links

shaders/vertex.glsl
varying vec2 vertexUV;
varying vec3 vertexNormal;

void main() {
  vertexUV = uv;
  vertexNormal = normalize(normalMatrix * normal);
  
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);
}
shaders/fragment.glsl
uniform sampler2D globeTexture;

varying vec2 vertexUV; // [0, 0.24]
varying vec3 vertexNormal;

void main() {
  float intensity = 1.05 - dot(vertexNormal, vec3(0.0, 0.0, 1.0 ));
  vec3 atmosphere = vec3(0.3, 0.6, 1.0) * pow(intensity, 1.5);
  
  gl_FragColor = vec4(atmosphere + texture2D(globeTexture, vertexUV).xyz, 1.0); 
}
shaders/atmosphereVertex.glsl
varying vec3 vertexNormal;

void main() {
  vertexNormal = normalize(normalMatrix * normal);
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 0.9 );
}
shaders/atmosphereFragment.glsl
varying vec3 vertexNormal; // (0, 0, 0)
void main() {
  float intensity = pow(0.75 - dot(vertexNormal, vec3(0, 0, 1.0)), 2.0);
  gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity;
}
Normalize Mouse Event Listener
const mouse = {
  x: undefined,
  y: undefined
}

addEventListener('mousemove', () => {
  mouse.x = (event.clientX / innerWidth) * 2 - 1
  mouse.y = -(event.clientY / innerHeight) * 2 + 1
})
notes.glsl
// what is a UV
  // a uv is an x and y coordinate
    // example: [0, 0]
  // uv mapping is the process of mapping a 2d image onto a 3d object
  // u and v represent the axes of the 2d texture because x y and z are taken
  // also called texture coordinates

// where tf is uv coming from here?
  // comes from three.js, it is an attribute

// an attribute is a variable you can access which gives extra information relating to a vertex such as space position, color, normal direction and texture coordinates

// a matrix is just an array of data where groupings represent certain things

// projectionMatrix: mat4 (4x4 matrix)
mat4 aMat4 = mat4(1.0, 0.0, 0.0, 0.0,  // 1. column
                  0.0, 1.0, 0.0, 0.0,  // 2. column
                  0.0, 0.0, 1.0, 0.0,  // 3. column
                  0.0, 0.0, 0.0, 1.0); // 4. column

// modelViewMatrix: mat4 (4x4 matrix)
mat4 aMat4 = mat4(1.0, 0.0, 0.0, 0.0,  // 1. column
                  0.0, 1.0, 0.0, 0.0,  // 2. column
                  0.0, 0.0, 1.0, 0.0,  // 3. column
                  0.0, 0.0, 0.0, 1.0); // 4. column

// position: vec3 (3 element array)
vec3 position = vec3(1, 0, 0)

// vec4(position, 1.0) === vec4(1, 0, 0, 1.0)

// position * vec3(2, 2, 1) === vec3(1, 0, 0) * vec3(2, 2, 1)
  // x = 1 * 2 = 2
  // y = 0 * 2
  // z = 0 * 1
  // position = vec3(2, 0, 0)

// texture2D returns pixel value for a texture at any given coordinate
// need a way to determine what coordinate you're on
// if sphere were laid out into 2 dimensions, there would be x / y coordinates associated with it

attribute vec2 uv === [0, 1]

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.