a rotating cube (#3)

core/gl/index.ts

@@ -0,0 +1,156 @@
+import { mat4 } from "gl-matrix";
+import { cubeVertices } from "./vertices";
+
+type AttributeDataTypes = Float32Array | Int32Array;
+
+export interface Attribute<T> {
+  name: string;
+  data: T;
+}
+
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+export interface ProgramData<T extends Attribute<AttributeDataTypes>> {
+  vertexShaderSource: string;
+  fragmentShaderSource: string;
+  attributes: T[];
+}
+
+async function fetchShader(path: string) {
+  const response = await fetch(path);
+  return response.text();
+}
+
+async function createShader(
+  gl: WebGL2RenderingContext,
+  type: number,
+  sourceFile: string
+) {
+  const source = await fetchShader(sourceFile);
+
+  var shader = gl.createShader(type);
+  if (!shader) return;
+
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (!success) {
+    console.error(gl.getShaderInfoLog(shader)); // eslint-disable-line
+    gl.deleteShader(shader);
+  }
+
+  return shader;
+}
+
+async function setupProgram<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  programData: ProgramData<T>
+) {
+  var program = gl.createProgram();
+  if (!program) return;
+
+  var vertexShader = await createShader(
+    gl,
+    gl.VERTEX_SHADER,
+    programData.vertexShaderSource
+  );
+  if (!vertexShader) return;
+
+  var fragmentShader = await createShader(
+    gl,
+    gl.FRAGMENT_SHADER,
+    programData.fragmentShaderSource
+  );
+  if (!fragmentShader) return;
+
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+
+  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (!success) {
+    console.error(gl.getProgramInfoLog(program));
+    gl.deleteProgram(program);
+  }
+
+  return program;
+}
+
+function setupAttribute<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  program: WebGLProgram,
+  attribute: T
+) {
+  const location = gl.getAttribLocation(program, attribute.name);
+  if (location === -1) return;
+
+  // setup a buffer for the attribute data
+  const buffer = gl.createBuffer();
+  if (!buffer) return;
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, attribute.data, gl.STATIC_DRAW);
+
+  const vao = gl.createVertexArray();
+  if (!vao) return;
+
+  gl.bindVertexArray(vao);
+
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 5 * 4, 0);
+}
+
+export async function draw<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  programData: ProgramData<T>
+) {
+  gl.enable(gl.DEPTH_TEST);
+
+  const program = await setupProgram(gl, programData);
+  if (!program) {
+    console.error("failed to setup program");
+    return;
+  }
+
+  gl.useProgram(program);
+
+  for (const attribute of programData.attributes) {
+    setupAttribute(gl, program, attribute);
+  }
+
+  let view = mat4.create();
+  view = mat4.translate(view, view, [0, 0, -5]);
+
+  let model = mat4.create();
+  const angle = Date.now() * 0.001;
+  model = mat4.rotate(model, model, angle, [0.5, 1, 0]);
+
+  const projection = mat4.create();
+  mat4.perspective(
+    projection,
+    45,
+    gl.canvas.width / gl.canvas.height,
+    0.1,
+    100.0
+  );
+
+  const viewLoc = gl.getUniformLocation(program, "view");
+  const modelLoc = gl.getUniformLocation(program, "model");
+  const projectionLoc = gl.getUniformLocation(program, "projection");
+
+  gl.uniformMatrix4fv(viewLoc, false, view);
+  gl.uniformMatrix4fv(modelLoc, false, model);
+  gl.uniformMatrix4fv(projectionLoc, false, projection);
+
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  gl.drawArrays(gl.TRIANGLES, 0, 36);
+
+  requestAnimationFrame(() => draw(gl, programData));
+}

core/gl/vertices.ts

@@ -0,0 +1,22 @@
+export const cubeVertices = [
+  -0.5, -0.5, -0.5, 0.0, 0.0, 0.5, -0.5, -0.5, 1.0, 0.0, 0.5, 0.5, -0.5, 1.0,
+  1.0, 0.5, 0.5, -0.5, 1.0, 1.0, -0.5, 0.5, -0.5, 0.0, 1.0, -0.5, -0.5, -0.5,
+  0.0, 0.0,
+
+  -0.5, -0.5, 0.5, 0.0, 0.0, 0.5, -0.5, 0.5, 1.0, 0.0, 0.5, 0.5, 0.5, 1.0, 1.0,
+  0.5, 0.5, 0.5, 1.0, 1.0, -0.5, 0.5, 0.5, 0.0, 1.0, -0.5, -0.5, 0.5, 0.0, 0.0,
+
+  -0.5, 0.5, 0.5, 1.0, 0.0, -0.5, 0.5, -0.5, 1.0, 1.0, -0.5, -0.5, -0.5, 0.0,
+  1.0, -0.5, -0.5, -0.5, 0.0, 1.0, -0.5, -0.5, 0.5, 0.0, 0.0, -0.5, 0.5, 0.5,
+  1.0, 0.0,
+
+  0.5, 0.5, 0.5, 1.0, 0.0, 0.5, 0.5, -0.5, 1.0, 1.0, 0.5, -0.5, -0.5, 0.0, 1.0,
+  0.5, -0.5, -0.5, 0.0, 1.0, 0.5, -0.5, 0.5, 0.0, 0.0, 0.5, 0.5, 0.5, 1.0, 0.0,
+
+  -0.5, -0.5, -0.5, 0.0, 1.0, 0.5, -0.5, -0.5, 1.0, 1.0, 0.5, -0.5, 0.5, 1.0,
+  0.0, 0.5, -0.5, 0.5, 1.0, 0.0, -0.5, -0.5, 0.5, 0.0, 0.0, -0.5, -0.5, -0.5,
+  0.0, 1.0,
+
+  -0.5, 0.5, -0.5, 0.0, 1.0, 0.5, 0.5, -0.5, 1.0, 1.0, 0.5, 0.5, 0.5, 1.0, 0.0,
+  0.5, 0.5, 0.5, 1.0, 0.0, -0.5, 0.5, 0.5, 0.0, 0.0, -0.5, 0.5, -0.5, 0.0, 1.0,
+];