separated webgl tools into a reusable framework.

Author: d0x2f

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+ "env": {
+ "browser": true,
+ "es6": true
+ },
+ "extends": "eslint:recommended",
+ "parserOptions": {
+ "ecmaVersion": 2018,
+ "sourceType": "module"
+ }
+}

js/gl.js js/lib/gl.jsjs/gl.js renamed to js/lib/gl.js

@@ -1,4 +1,4 @@
-"use strict";
+"use strict"
 
 import { FragmentShader, VertexShader, ShaderProgram } from './shader.js';
 import { QuadPrimitive } from './quad-primitive.js';
@@ -21,120 +21,14 @@ export class GL {
  this.gl = canvas.getContext("webgl2");
  this.gl.get_super = () => this;
 
+ this.render_hooks = [];
+
  this.objects = [];
 
  this.projection_matrix = Matrix.identity();
  this.view_matrix = Matrix.identity();
 
  this.camera_position = new Vector(0, 0, 0, 1);
- this.mouse_position = new Vector(0, 0, 0, 1);
-
- this.zoom_target = new Vector(0, 0, 0, 1);
- this.zoom_speed = 0;
- this.zoom_level = 1;
-
- this.desired_julia = 0;
- this.current_julia = -1;
-
- this.color_cycle = 0;
-
- this.extreme_mode = false;
-
- this.drag_active = false;
- this.drag_point = new Vector(0, 0, 0, 1);
-
- // Add resize listener
- window.addEventListener('resize', () => {
- this.resize();
- });
-
- // Add keyboard event listener
- window.addEventListener('keypress', (event) => {
- switch (event.key) {
- case 'z':
- this.desired_julia = (this.desired_julia + 1) % 10;
- event.preventDefault();
- break;
- case 'x':
- this.extreme_mode = !this.extreme_mode;
- event.preventDefault();
- break;
- case 'c':
- this.zoom_target = this.mouse_position;
- if (this.zoom_speed > 0) {
- this.zoom_speed += 1;
- } else {
- this.zoom_speed = 1;
- }
- event.preventDefault();
- break;
- case 'v':
- this.zoom_target = this.mouse_position;
- if (this.zoom_speed > 0) {
- this.zoom_speed = -1;
- } else {
- this.zoom_speed -= 1;
- }
- event.preventDefault();
- default:
- break;
- }
- });
-
- // Add click listeners
- canvas.addEventListener('mousedown', (event) => {
- this.drag_active = true;
-
- this.drag_point = this.view_matrix.inverse().multiply_vector(
- this.unproject(
- event.layerX,
- this.canvas.clientHeight - event.layerY,
- 0
- )
- );
- });
- canvas.addEventListener('mouseup', (event) => {
- this.drag_active = false;
- });
- canvas.addEventListener('mousemove', (event) => {
- // Unproject mouse coords into scene coords.
- this.mouse_position = this.view_matrix.inverse().multiply_vector(
- this.unproject(event.layerX, this.canvas.clientHeight - event.layerY, 0.5)
- );
-
- // Only move if the mouse is down.
- if (!this.drag_active) {
- return;
- }
-
- // Stop any zooming going on.
- this.zoom_speed = 0;
-
- // Set the camera position to: current pos - mouse pos + initial click pos
- this.set_camera_position(
- this.camera_position.x - this.mouse_position.x + this.drag_point.x,
- this.camera_position.y - this.mouse_position.y + this.drag_point.y,
- this.camera_position.z
- );
- });
-
- // Add mouse wheel listener
- canvas.addEventListener('wheel', (event) => {
- this.zoom_target = this.mouse_position;
- if (event.deltaY > 0) {
- if (this.zoom_speed > 0) {
- this.zoom_speed += 1;
- } else {
- this.zoom_speed = 1;
- }
- } else {
- if (this.zoom_speed > 0) {
- this.zoom_speed = -1;
- } else {
- this.zoom_speed -= 1;
- }
- }
- });
  }
 
  /**
@@ -144,6 +38,14 @@ export class GL {
  return this.gl;
  }
 
+ /**
+ * Add a callable hook to be run on each render pass.
+ *
+ * @param {callable} hook
+ */
+ add_render_hook(hook) {
+ this.render_hooks.push(hook);
+ }
 
  /**
  * Create a vertex shader from the given source.
@@ -247,14 +149,31 @@ export class GL {
  * @param {float} z
  */
  set_camera_position(x, y, z) {
- // Stay within the bounds of the quad.
- if (x < -2 || x > 1 || y < -1 || y > 1) {
- return;
- }
  this.camera_position = new Vector(x, y, z);
  this.view_matrix = Matrix.identity().translate(-x, -y, -z);
  }
 
+ /**
+ * Translates the position of the camera.
+ *
+ * @param {float} x
+ * @param {float} y
+ * @param {float} z
+ */
+ translate_camera_position(x, y, z) {
+ this.camera_position = new Vector(
+ this.camera_position.x + x,
+ this.camera_position.y + y,
+ this.camera_position.z + z,
+ 0
+ );
+ this.view_matrix = Matrix.identity().translate(
+ -this.camera_position.x,
+ -this.camera_position.y,
+ -this.camera_position.z
+ );
+ }
+
  /**
  * Computes world coordinates from given screen coordinates.
  *
@@ -352,125 +271,6 @@ export class GL {
 
  this.objects.forEach((object) => object.render(Matrix.identity()));
  }
-
- /**
- * Perform zoom calculations.
- *
- * @param {integer} frame_delta
- */
- zoom(frame_delta) {
- if (this.zoom_speed === 0) {
- return false;
- }
-
- // Find the vector from the current camera position to the zoom target.
- // Scale by the frame_delta so that the movement would occur in 1 / zoom_speed seconds.
- const movement_vector = new Vector(
- this.zoom_target.x - this.camera_position.x,
- this.zoom_target.y - this.camera_position.y,
- this.zoom_target.z - this.camera_position.z,
- -this.camera_position.w,
- ).multiply(frame_delta * Math.abs(this.zoom_speed) / 1000);
-
- // Update the camera position along the movement vector.
- this.set_camera_position(
- this.camera_position.x + movement_vector.x,
- this.camera_position.y + movement_vector.y,
- this.camera_position.z + movement_vector.z,
- );
-
- // Scale the projection matrix for the zoom effect.
- if ((this.zoom_level < 30000 && this.zoom_speed < 0)
- || (this.zoom_level > 1 && this.zoom_speed > 0)) {
- const scale_factor = 1 + (frame_delta * -this.zoom_speed / 1000);
- this.projection_matrix = this.projection_matrix.scale(
- scale_factor,
- scale_factor,
- 1
- );
-
- this.zoom_level *= scale_factor;
- }
-
- // Reduce the zoom speed over time.
- this.zoom_speed *= 1 - (frame_delta / 1000);
- if (Math.abs(this.zoom_speed) < 0.005) {
- this.zoom_speed = 0;
- }
-
- return true;
- }
-
- /**
- * Cycle the color rotation float.
- *
- * @param {integer} frame_delta
- */
- cycle(frame_delta) {
- let speed = 200;
- if (this.extreme_mode) {
- speed = 10;
- }
- this.color_cycle = (this.color_cycle + frame_delta / speed) % 1024.0;
-
- this.get_shader_program().set_uniform_float(
- 'continuous_cycle',
- this.color_cycle
- );
-
- return true;
- }
-
- /**
- * Switch the rendered set.
- */
- switch() {
- if (this.current_julia === this.desired_julia) {
- return false;
- }
-
- this.current_julia = this.desired_julia;
-
- let c;
- switch (this.current_julia) {
- case 0:
- c = new Vector(0, 0, 0, 0);
- break;
- case 1:
- c = new Vector(-0.4, 0.6, 0, 0);
- break;
- case 2:
- c = new Vector(0.285, 0, 0, 0);
- break;
- case 3:
- c = new Vector(0.285, 0.01, 0, 0);
- break;
- case 4:
- c = new Vector(0.45, 0.1428, 0, 0);
- break;
- case 5:
- c = new Vector(-0.70176, -0.3842, 0, 0);
- break;
- case 6:
- c = new Vector(-0.835, -0.2321, 0, 0);
- break;
- case 7:
- c = new Vector(-0.8, 0.156, 0, 0);
- break;
- case 8:
- c = new Vector(-0.7269, 0.1889, 0, 0);
- break;
- case 9:
- default:
- c = new Vector(0, -0.8, 0, 0);
- break;
- }
-
- this.get_shader_program().set_uniform_vec2('julia_constant', c);
-
- return true;
- }
-
  /**
  * The event loop executed for each tick.
  */
@@ -487,9 +287,10 @@ export class GL {
  let scene_dirty = false;
 
  scene_dirty |= this.resize();
- scene_dirty |= this.zoom(frame_delta);
- scene_dirty |= this.cycle(frame_delta);
- scene_dirty |= this.switch();
+
+ this.render_hooks.forEach((hook) => {
+ scene_dirty |= hook(frame_delta);
+ });
 
  if (scene_dirty) {
  this.render();

js/matrix.js js/lib/matrix.jsjs/matrix.js renamed to js/lib/matrix.js

@@ -277,17 +277,6 @@ export class Matrix {
  ])
  }
 
- /**
- * Prints the matrix to the debug console.
- */
- debug() {
- console.log(this.r1);
- console.log(this.r2);
- console.log(this.r3);
- console.log(this.r4);
- console.log('---------------');
- }
-
  /**
  * Return the identity matrix.
  *

js/mesh.js js/lib/mesh.jsjs/mesh.js renamed to js/lib/mesh.js

@@ -1,7 +1,6 @@
 "use strict";
 
 import { Object } from './object.js';
-import { Matrix } from './matrix.js';
 
 /**
  * Represents a renderable quad.

js/object.js js/lib/object.jsjs/object.js renamed to js/lib/object.js

@@ -1,31 +1,5 @@
 "use strict";
 
-import { GL } from './gl.js';
+import { Mandelbrot } from './mandelbrot.js';
 
-/**
- * Main entrypoint function that creates resources and performs a render onto the given canvas.
- */
-async function mandelbrot(canvas) {
- const gl = new GL(canvas);
-
- const vertex_shader_source = await fetch('shaders/vertex.glsl').then((res) => res.text());
- const fragment_shader_source = await fetch('shaders/fragment.glsl').then((res) => res.text());
-
- const fragment_shader = gl.create_fragment_shader(fragment_shader_source);
- const vertex_shader = gl.create_vertex_shader(vertex_shader_source);
- const shader_program = gl.create_shader_program(vertex_shader, fragment_shader);
-
- gl.set_shader_program(shader_program);
-
- const quad = gl.create_quad(-5, -3, 10, 6);
- const mesh = gl.create_mesh([quad]);
- gl.add_object_to_scene(mesh);
-
- gl.set_camera_position(-0.5, 0, 0);
-
- gl.event_loop();
-}
-
-// Start main entrypoint.
-const canvas = document.getElementById("c");
-mandelbrot(canvas);
+new Mandelbrot(document.getElementById("c"));