zenobiopereira/glsl-basics

How to Run

# Using Python
$> python3 -m http.server

# Using Node
$> npx http.server

Links

• Three.js multiple scenes.
• GLSL basics.
• Book of Shaders.

---

Types of Shaders

Vertex:

- Vertex shaders communicate to the GPU where the triangles should be positioned.
- Runs for each single vertex of a given triangle.

Fragment:

- Fragment shaders communicate to the GPU how to actually fill those triangles with color.
- Runs for every single pixel within the triangle.

Specificties:

Variables:

• attribute:
  • Data received from JS.
  • Vertex specific.
  • The Geometry generates it.
• uniform:
  • Value that is the same for all vertices.
  • Can be created on JS side.
  • Possible to use on Fragments. (material uniforms).
• normals:
  • Orientations (coordinates) of an object at certain point.
  • vec3
• UV:
  • Coordinates in 2D space to map textures onto objects.
  • vec2
• varying:
  • Send information from vextex shader to fragment shader.
  • vec3
• flat varying:
  • flat disables interpolation of values.

Variables created by environment (at least of Three.js).

• uniform mat4 viewMatrix:
  • Transform (position, scale, rotation) of the camera.
• uniform mat4 modelMatrix:
  • Transform (position, scale, rotation) of the model.
• uniform mat4 projectionMatrix:
  • Project the object onto the screen taking into account aspect ratio & perspective.
• MVP:
  • MVP - Model View Projection (Order matters)

  // 1. MVP
  // Order matters
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 )`;
  
  // 2. MVP
  vec4 modelViewPosition = modelViewMatrix * vec4( position, 1.0 );
  vec4 projectedPosition = projectionMatrix * modelViewPosition;
  gl_Position = projectedPosition;

Swizzling:

• Swizzling roughtly means; iterations within multiple entries in a vector at once.

// It does not need to be on the same order.
vec.xy = vec2(0.3, 0.5) // Implies in: x = 0.3, y = 0.5, z = 1.0
vec.zxy = vec3(0.3, 0.5, 0.1) // Implies in: x = 0.3, y = 0.1, z = 0.5
vec4(vec.xxx, 0.3) // Implies in: x = vec.x, y = vec.x, z = vec.x, w = 0.3

// It can be done with operations
// Works for all arithmetical operations.
vec3(1.0, 2.0, 4.0) *= vec(0.5) // Implies in: x = 0.5, y = 1.0, z = 2.0
vec3(1.0) -= vec2(1.0) // Implies in: x = .0, y = .0, z = 1.0
vec3(1.0) += vec2(0.2, 0.5) // Implies in: x = 1.2, y = 1.5, z = 1.0

Commonly Used Functions:

• equal:
  • Boolean vector in which each element i is computed as x[i] == y[i].
• min:
  • Return the lesser of two values.
• max:
  • Return the maximum of two values.
• abs:
  • Return the absolute of a given value.
• mod:
  • Compute value of one parameter modulo another
• sign:
  • Returns -1.0 if x is less than 0.0, 0.0 if x is equal to 0.0, and +1.0 if x is greater than 0.0.
• cos:
  • Cossign of a given parameter.
• atan:
  • Return the arc-tangent of the parameters.
• tan:
  • Return the tangent of the parameters.
• sqrt:
  • Return the square root of the parameter.
• dot:
  • Addition of the product of vectors coordinates. E.g; vec1.x * vec2.x + vec1.y * vec2.y.
• cross:
  • Calculate the cross product of two vectors.
• champ:
  • Constrain a value to lie between two further values.
• mix AKA lerp:
  • Constrain a value to lie between two further values.
• length:
  • Give back the calculated size of a vector.
• smoothstep:
  • Same as step but keeps values in-between given bounds.
• step:
  • Create a bridge between two values where any value bigger than a threshold turns into 1, otherwise 0.
• fract:
  • Give back the fractionary part of a number.