Themes

Set your presentation theme: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized

Transformations

Jean Pierre Charalambos

Index

Intro

Active vs pasive transformations
Shaders

Linear transformations

Scaling, rotation & shearing

Affine transformations

Homogeneous space
Translation
Scaling, rotation & shearing revisited
Matrix operations: orthogonality, inversion & composition

Index (part 2)

Modelling and view Projections

Orthographic
Perspective

Intro: Active vs pasive transformations

Active Transformation (standard basis) vs Passive Transformation (change of basis)

Standard = Canonical

Intro: Shaders

Vertex shader

Fragment shader

Intro: Shaders

Vertex shader: pseudo code

for (int i = 0; i < vertexCount; i++) {
  output = vertexShader(vertex[i]);
}

function vertexShader(vertex) {
  projPos = projection * modelview * vertex.position;
  litColor = lightColor * dot(vertex.normal, lightDirection);
  return (projPos, litColor);
}

Intro: Shaders

Vertex shader

uniform mat4 transform;
attribute vec4 vertex;
attribute vec4 color;
varying vec4 vertColor;

void main() {
   gl_Position = transform * vertex;
   vertColor = color;
}

Intro: Shaders

Vertex shader: glsl code for active transform

uniform mat4 transform;
attribute vec4 vertex;
attribute vec4 color;
varying vec4 vertColor;

void main() {
   gl_Position = transform * vertex;
   vertColor = color;
}

transform = projection

Intro: Shaders

Vertex shader: glsl code for passive transform

uniform mat4 transform;
attribute vec4 vertex;
attribute vec4 color;
varying vec4 vertColor;

void main() {
   gl_Position = transform * vertex;
   vertColor = color;
}

transform = projection * modelview transform = projection * view * model

(goto matrix composition and then to eye transform)

Intro: Shaders

Fragment shader: pseudo code

for (int i = 0; i < fragmentCount; i++) {
  screenBuffer[fragment[i].xy] = fragmentShader(fragment[i]);
}

function fragmentShader(fragment) {
  return fragment.litColor;
}

Intro: Shaders

Fragment shader: glsl code

varying vec4 vertColor;

void main() {
  gl_FragColor = vertColor;
}

Intro: Shaders

GLSL variable types

uniform: variables that remain constant for each vertex in the scene. Example: uniform mat4 transform

attribute: variables that change from vertex to vertex. Examples: attribute vec4 vertex, attribute vec4 color

varying: variables that are exchanged between the vertex and the fragment shaders. Example: varying vec4 vertColor

Intro: Shaders

Common GLSL uniform variables emitted by P5

Name Alias Type transform transformMatrix mat4 modelview modelviewMatrix mat4 projection projectionMatrix mat4 texture texMap sampler2D

Intro: Shaders

Common GLSL attribute variables emitted by P5

Name Type position (or, vertex) vec4 color vec4 normal vec3

Intro: Shaders

Processing shader API: PShader

Class that encapsulates a GLSL shader program, including a vertex and a fragment shader

Intro: Shaders

Processing shader API: loadShader()

Loads a shader into the PShader object

Method signatures

  loadShader(fragFilename)
  loadShader(fragFilename, vertFilename)

Example

  PShader unalShader;
  void setup() {
    ...
    //when no path is specified it looks in the sketch 'data' folder
    unalShader = loadShader("unal_frag.glsl", "unal_vert.glsl");
  }

Intro: Shaders

Processing shader API: shader()

Applies the specified shader

Method signature

  shader(shader)

Example

  PShader simpleShader, unalShader;
  void draw() {
    ...
    shader(simpleShader);
    simpleGeometry();
    shader(unalShader);
    unalGeometry();
  }

Intro: Shaders

Processing shader API: resetShader()

Restores the default shaders

Method signatures

  resetShader()

Example

    PShader simpleShader;
  void draw() {
    ...
    shader(simpleShader);
    simpleGeometry();
    resetshader();
    otherGeometry();
  }