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.
• Dont' 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,1)

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,8)

vec3 a;
a.x = 10.0; a.y = 20.0; a.z = 30.0; // a = (10,  20,  30)
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, 2, 3)

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

vec3 c = a + b;      // c = (5, 7, 9)
vec3 d = a - b;      // d = (-3, -3, -3)
vec3 e = a * b;      // e = (4, 10, 18)
vec3 f = a * 3;      // e = (3, 6, 9)
float g = dot(a, b); // g = 32
vec3 h = cross(a,b); // h = (-5,6,-3)
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, 20, 30, 40)
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, 2, 3, 4)

vec4 b = vec4(5, 6, 7, 8);

vec4 c = a + b;      // c = (6, 8, 10, 12)
vec4 d = a - b;      // d = (-4, -4, -4, -4)
vec4 e = a * b;      // e = (5, 12, 21, 32)
vec4 f = a * 3;      // f = (3, 6, 9, 12)
float g = length(a); // g = 5.477

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,2)
vec2 b = A * y; // b = (3,4)

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,2,3)
vec3 b = A * y; // b = (4,5,6)
vec3 c = A * z; // c = (6,7,8)

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

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,2,3,4)
vec4 b = A * y; // b = (5,6,7,8)
vec4 c = A * z; // c = (9,10,11,12)
vec4 d = A * w; // d = (13,14,15,16)

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

vec4 B[10];
B[3] = vec4(1,2,3,4);
B[8].y = 10.0;

vec4 a = vec4(1, 2, 3, 4);

vec3 b = a.xyz;  // b = (1,2,3)
vec2 c = a.qp;   // c = (4,3)
vec4 d = a.xxyy; // d = (1,1,2,2)

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