fix index

html/lib/basic-plane.js

@@ -0,0 +1,62 @@
+export class BasicPlane {
+  constructor(gl, core) {
+    this.gl = gl;
+    this.core = core;
+
+    this.vertexPositions = new Float32Array([
+      -1.0, -1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0,
+    ]);
+    this.positionBuffer = this.initBuffer(this.vertexPositions);
+    this.textureBuffer = this.initBuffer(
+      new Float32Array([0, 0, 1, 0, 0, 1, 1, 1])
+    );
+  }
+
+  initBuffer(data, draw = this.gl.STATIC_DRAW) {
+    const buffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(data), draw);
+
+    return buffer;
+  }
+
+  attachShader(shader) {
+    this.shader = shader;
+    this.vertexPosition = shader.location("aVertexPosition");
+    this.textureCoord = shader.location("aTextureCoord");
+
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+    this.gl.vertexAttribPointer(
+      this.vertexPosition,
+      2,
+      this.gl.FLOAT,
+      false,
+      0,
+      0
+    );
+    this.gl.enableVertexAttribArray(this.vertexPosition);
+
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureBuffer);
+    this.gl.vertexAttribPointer(
+      this.textureCoord,
+      2,
+      this.gl.FLOAT,
+      false,
+      0,
+      0
+    );
+    this.gl.enableVertexAttribArray(this.textureCoord);
+
+    return this;
+  }
+
+  draw2D() {
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+    this.shader.activate(this.core.projectionMatrix, this.core.modelViewMatrix);
+    this.gl.drawArrays(
+      this.gl.TRIANGLE_STRIP,
+      0,
+      this.vertexPositions.length / 2
+    );
+  }
+}

html/lib/platform.js

@@ -0,0 +1,50 @@
+export const clear = (gl) => {};
+
+export const main = (next) => {
+  const canvas = document.querySelector("canvas");
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  // Initialize the GL context
+  const gl = canvas.getContext("webgl");
+
+  // Only continue if WebGL is available and working
+  if (gl === null) {
+    alert(
+      "Unable to initialize WebGL. Your browser or machine may not support it."
+    );
+    return;
+  }
+
+  const core = renderingCore(gl);
+  core.clear();
+
+  next(gl, core);
+};
+
+const renderingCore = (gl) => {
+  const fieldOfView = (10 * Math.PI) / 180; // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = glMatrix.mat4.create();
+  glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+
+  const modelViewMatrix = glMatrix.mat4.create();
+  glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
+
+  return {
+    projectionMatrix,
+    modelViewMatrix,
+    clear() {
+      gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+      gl.clearDepth(1.0); // Clear everything
+      gl.enable(gl.DEPTH_TEST); // Enable depth testing
+      gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    },
+  };
+};
+
+export const glMatrix = window.glMatrix;

html/lib/shader.js

@@ -0,0 +1,74 @@
+export class Shader {
+  constructor(gl) {
+    this.gl = gl;
+    this.program = gl.createProgram();
+    this.startTime = Date.now();
+  }
+
+  attach(type, source) {
+    console.log("attaching shader", { type, source });
+    const shader = this.gl.createShader(type);
+
+    this.gl.shaderSource(shader, source);
+    this.gl.compileShader(shader);
+
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      throw new Error(
+        "An error occurred compiling the shaders: " +
+          this.gl.getShaderInfoLog(shader)
+      );
+    }
+
+    this.gl.attachShader(this.program, shader);
+
+    return this;
+  }
+
+  link() {
+    this.gl.linkProgram(this.program);
+
+    if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+      throw new Error(
+        "Unable to initialize the shader program: " +
+          this.gl.getProgramInfoLog(this.program)
+      );
+    }
+
+    console.log("shader linked");
+
+    return this;
+  }
+
+  location(name) {
+    if (name[0] === "a") {
+      return this.gl.getAttribLocation(this.program, name);
+    } else if (name[0] === "u") {
+      return this.gl.getUniformLocation(this.program, name);
+    }
+  }
+
+  updateTime() {
+    const now = Date.now();
+    const time = now - this.startTime;
+    const sinTime = Math.sin(time);
+    const cosTime = Math.cos(time);
+    this.gl.uniform1f(this.location("uTime"), time);
+    this.gl.uniform1f(this.location("uSinTime"), sinTime);
+    this.gl.uniform1f(this.location("uCosTime"), cosTime);
+  }
+
+  activate(projectionMatrix, modelViewMatrix) {
+    this.gl.useProgram(this.program);
+    this.gl.uniformMatrix4fv(
+      this.location("uProjectionMatrix"),
+      false,
+      projectionMatrix
+    );
+    this.gl.uniformMatrix4fv(
+      this.location("uModelViewMatrix"),
+      false,
+      modelViewMatrix
+    );
+    this.updateTime();
+  }
+}