CS 4621: Lecture 2

• Create a canvas.
• From it, get a WebGL context.
• Setup a rendering loop with window.requestAnimationFrame.

• gl.getParameter
• gl.clear
• gl.clearColor
• gl.viewport

• Create a "program", which has
  • a vertex shader and
  • a fragment shader.
• Create a vertex buffer that contains your vertex attribute.
• Create an index buffer that contains vertex connectivity information.
• Use the program.
• Map the data in the vertex buffer to vertex attributes in the vertex shader.
• Use the index buffer.
• Render with gl.drawElements.
• Don't forget to clean up.
  • Unbind the buffers.
  • Unuse the program.

• WebGL 1 uses "The OpenGL ES Shading Language, Version 1.00".
• WebGL 2 is backward compatible. It also accepts "The OpenGL ES Shading Language, Version 3.00".

• No pointers. There are arrays, though.
• Has many data types that are convenient for graphics programming.
• Special declarations specific to the graphics pipeline.
  • Vertex attributes
  • Varying variables
  • Uniforms

• No OOP features.
• You write functions, not methods.
• Arguments are passed by values. There's no passing by reference.
  • Variables can only hold primitive types, basically

vec2 a;
a.x = 0.0;
a.y = 1.0; // a = (0.0, 1.0)

vec2 b;
b.s = 10.0;
b.t = 12.5; // b = (10, 12.5)

vec2 c;
c[0] = 9.0;
c[1] = 8.0; // c = (9.0, 8.0)

vec3 a;
a.x = 10.0; a.y = 20.0; a.z = 30.0; // a = (10.0, 20.0, 30.0)
a.r = 0.1;  a.g = 0.2;  a.b = 0.3;  // a = (0.1, 0.2, 0.3)
a.s = 1.0;  a.t = 2.0;  a.p = 3.0;  // a = (1.0, 2.0, 3.0)

vec3 b = vec3(4.0, 5.0, 6.0);

vec3 c = a + b;      // c = (5.0, 7.0, 9.0)
vec3 d = a - b;      // d = (-3.0, -3.0, -3.0)
vec3 e = a * b;      // e = (4.0, 10.0, 18.0)
vec3 f = a * 3.0;    // e = (3.0, 6.0, 9.0)
float g = dot(a, b); // g = 32.0
vec3 h = cross(a, b); // h = (-5.0, 6.0, -3.0)
float i = length(a); // i = 3.742

vec4 a;
a.x = 10.0; a.y = 20.0; a.z = 30.0; a.w = 40.0; // a = (10.0, 20.0, 30.0, 40.0)
a.r = 0.1;  a.g = 0.2;  a.b = 0.3;  a.a = 0.4;  // a = (0.1, 0.2, 0.3, 0.4)
a.s = 1.0;  a.t = 2.0;  a.p = 3.0;  a.q = 4.0;  // a = (1.0, 2.0, 3.0, 4.0)

vec4 b = vec4(5.0, 6.0, 7.0, 8.0);

vec4 c = a + b;      // c = (6.0, 8.0, 10.0, 12.0)
vec4 d = a - b;      // d = (-4.0, -4.0, -4.0, -4.0)
vec4 e = a * b;      // e = (5.0, 12.0, 21.0, 32.0)
vec4 f = a * 3.0;    // f = (3.0, 6.0, 9.0, 12.0)
float g = length(a); // g = 5.477

vec3 h = vec3(1.0, 2.0, 3.0);
vec4 i = vec4(1.0, h); // i = (1.0, 1.0, 2.0, 3.0)

mat2 A = mat2(1.0, 2.0, 3.0, 4.0); // in column-major order

vec2 x = vec2(1.0, 0.0);
vec2 y = vec2(0.0, 1.0);

vec2 a = A * x; // a = (1.0, 2.0)
vec2 b = A * y; // b = (3.0, 4.0)

mat3 A = mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0); // in column-major order

vec3 x = vec3(1.0, 0.0, 0.0);
vec3 y = vec3(0.0, 1.0, 0.0);
vec3 z = vec3(0.0, 0.0, 1.0);

vec3 a = A * x; // a = (1.0, 2.0, 3.0)
vec3 b = A * y; // b = (4.0, 5.0, 6.0)
vec3 c = A * z; // c = (6.0, 7.0, 8.0)

mat3 B = mat3(x, y, z); // B = 3x3 identity

mat4 A = mat4(
    1.0,  2.0,  3.0,  4.0,
    5.0,  6.0,  7.0,  8.0,
    9.0,  10.0, 11.0, 12.0,
    13.0, 14.0, 15.0, 16.0); // in column-major order
    // note that this formatting is misleading! The first column is (1.0, 2.0, 3.0, 4.0)

vec4 x = vec4(1.0, 0.0, 0.0, 0.0);
vec4 y = vec4(0.0, 1.0, 0.0, 0.0);
vec4 z = vec4(0.0, 0.0, 1.0, 0.0);
vec4 w = vec4(0.0, 0.0, 0.0, 1.0);

vec4 a = A * x; // a = (1.0, 2.0, 3.0, 4.0)
vec4 b = A * y; // b = (5.0, 6.0, 7.0, 8.0)
vec4 c = A * z; // c = (9.0, 10.0, 11.0, 12.0)
vec4 d = A * w; // d = (13.0, 14.0, 15.0, 16.0)

float d = A[1][2]; // d = 7.0
vec4 e = A[0]; // e = (1.0, 2.0, 3.0, 4.0)

float A[4];
A[0] = 5; A[3] = 10;

vec4 B[10];
B[3] = vec4(1.0, 2.0, 3.0, 4.0);
B[8].y = 10.0;

vec4 a = vec4(1.0, 2.0, 3.0, 4.0);

vec3 b = a.xyz;  // b = (1.0, 2.0, 3.0)
vec2 c = a.qp;   // c = (4.0, 3.0)
vec4 d = a.xxyy; // d = (1.0, 1.0, 2.0, 2.0)

float a = 1.0;
int b = int(a);