3D / WebGL memo

gistfile1.md

Because I keep forgetting that stuff...

Diffuse

light that will be reflected on different surfaces

Specular

"mirror-like" reflection of light

occlusion / culling

objects outside of viewport should not be rendered

ambiant occlusion

objects create shadows between themselves

Passing data from vertex to fragment shader

varying vec2 vUv;
varying vec2 vNormal;
void main() {
    vUv = uv;
    vNormal = normal;
    ...

Model View Projection matrix

• model: transformation of the vertex
• view: "eye" (alignment) of the camera
• projection: viewport + camera perspective (FOV, near, far)

Normals -> perpendicular to the face/vertex

use cases: distort a mesh in the "right" direction, calculate light position

Calculating simple light

dot(vNormal, lightPosition) * lightColor

UVs: position of the texture

fragCoord: position of the vertex

Circular mapping of the texture (so a texture/shader on a sphere will loop instead of having a "cut")

vUv.x = sin(PI * uv.x);

Using vertex position instead of uv to avoid "breaking the seams"

vec2 coords = position.xy;