From f49df5c4e7989c1b2fac1908745afe996a246956 Mon Sep 17 00:00:00 2001
From: Michael Ennen <mike.ennen@gmail.com>
Date: Tue, 2 Apr 2024 18:03:04 -0700
Subject: [PATCH] Split up the project into several different modules (will
 probably have a few more in the future).

---
 colormap.js    |   18 +
 delaunay.js    |  202 +++++++
 index.html     |    3 +-
 main.js        |  889 +++++++++++++++++++++++++++++
 math.js        |  380 +++++++++++++
 moody.js       | 1480 +-----------------------------------------------
 webgl-debug.js |  402 +++----------
 7 files changed, 1565 insertions(+), 1809 deletions(-)
 create mode 100644 colormap.js
 create mode 100644 delaunay.js
 create mode 100644 main.js
 create mode 100644 math.js

diff --git a/colormap.js b/colormap.js
new file mode 100644
index 0000000..d1ddad4
--- /dev/null
+++ b/colormap.js
@@ -0,0 +1,18 @@
+// Turbo Color Map by Google: https://blog.research.google/2019/08/turbo-improved-rainbow-colormap-for.html
+// Copyright 2019 Google LLC.
+// SPDX-License-Identifier: Apache-2.0
+// Author: Anton Mikhailov
+const turboColormapData = [[0.18995,0.07176,0.23217],[0.19483,0.08339,0.26149],[0.19956,0.09498,0.29024],[0.20415,0.10652,0.31844],[0.20860,0.11802,0.34607],[0.21291,0.12947,0.37314],[0.21708,0.14087,0.39964],[0.22111,0.15223,0.42558],[0.22500,0.16354,0.45096],[0.22875,0.17481,0.47578],[0.23236,0.18603,0.50004],[0.23582,0.19720,0.52373],[0.23915,0.20833,0.54686],[0.24234,0.21941,0.56942],[0.24539,0.23044,0.59142],[0.24830,0.24143,0.61286],[0.25107,0.25237,0.63374],[0.25369,0.26327,0.65406],[0.25618,0.27412,0.67381],[0.25853,0.28492,0.69300],[0.26074,0.29568,0.71162],[0.26280,0.30639,0.72968],[0.26473,0.31706,0.74718],[0.26652,0.32768,0.76412],[0.26816,0.33825,0.78050],[0.26967,0.34878,0.79631],[0.27103,0.35926,0.81156],[0.27226,0.36970,0.82624],[0.27334,0.38008,0.84037],[0.27429,0.39043,0.85393],[0.27509,0.40072,0.86692],[0.27576,0.41097,0.87936],[0.27628,0.42118,0.89123],[0.27667,0.43134,0.90254],[0.27691,0.44145,0.91328],[0.27701,0.45152,0.92347],[0.27698,0.46153,0.93309],[0.27680,0.47151,0.94214],[0.27648,0.48144,0.95064],[0.27603,0.49132,0.95857],[0.27543,0.50115,0.96594],[0.27469,0.51094,0.97275],[0.27381,0.52069,0.97899],[0.27273,0.53040,0.98461],[0.27106,0.54015,0.98930],[0.26878,0.54995,0.99303],[0.26592,0.55979,0.99583],[0.26252,0.56967,0.99773],[0.25862,0.57958,0.99876],[0.25425,0.58950,0.99896],[0.24946,0.59943,0.99835],[0.24427,0.60937,0.99697],[0.23874,0.61931,0.99485],[0.23288,0.62923,0.99202],[0.22676,0.63913,0.98851],[0.22039,0.64901,0.98436],[0.21382,0.65886,0.97959],[0.20708,0.66866,0.97423],[0.20021,0.67842,0.96833],[0.19326,0.68812,0.96190],[0.18625,0.69775,0.95498],[0.17923,0.70732,0.94761],[0.17223,0.71680,0.93981],[0.16529,0.72620,0.93161],[0.15844,0.73551,0.92305],[0.15173,0.74472,0.91416],[0.14519,0.75381,0.90496],[0.13886,0.76279,0.89550],[0.13278,0.77165,0.88580],[0.12698,0.78037,0.87590],[0.12151,0.78896,0.86581],[0.11639,0.79740,0.85559],[0.11167,0.80569,0.84525],[0.10738,0.81381,0.83484],[0.10357,0.82177,0.82437],[0.10026,0.82955,0.81389],[0.09750,0.83714,0.80342],[0.09532,0.84455,0.79299],[0.09377,0.85175,0.78264],[0.09287,0.85875,0.77240],[0.09267,0.86554,0.76230],[0.09320,0.87211,0.75237],[0.09451,0.87844,0.74265],[0.09662,0.88454,0.73316],[0.09958,0.89040,0.72393],[0.10342,0.89600,0.71500],[0.10815,0.90142,0.70599],[0.11374,0.90673,0.69651],[0.12014,0.91193,0.68660],[0.12733,0.91701,0.67627],[0.13526,0.92197,0.66556],[0.14391,0.92680,0.65448],[0.15323,0.93151,0.64308],[0.16319,0.93609,0.63137],[0.17377,0.94053,0.61938],[0.18491,0.94484,0.60713],[0.19659,0.94901,0.59466],[0.20877,0.95304,0.58199],[0.22142,0.95692,0.56914],[0.23449,0.96065,0.55614],[0.24797,0.96423,0.54303],[0.26180,0.96765,0.52981],[0.27597,0.97092,0.51653],[0.29042,0.97403,0.50321],[0.30513,0.97697,0.48987],[0.32006,0.97974,0.47654],[0.33517,0.98234,0.46325],[0.35043,0.98477,0.45002],[0.36581,0.98702,0.43688],[0.38127,0.98909,0.42386],[0.39678,0.99098,0.41098],[0.41229,0.99268,0.39826],[0.42778,0.99419,0.38575],[0.44321,0.99551,0.37345],[0.45854,0.99663,0.36140],[0.47375,0.99755,0.34963],[0.48879,0.99828,0.33816],[0.50362,0.99879,0.32701],[0.51822,0.99910,0.31622],[0.53255,0.99919,0.30581],[0.54658,0.99907,0.29581],[0.56026,0.99873,0.28623],[0.57357,0.99817,0.27712],[0.58646,0.99739,0.26849],[0.59891,0.99638,0.26038],[0.61088,0.99514,0.25280],[0.62233,0.99366,0.24579],[0.63323,0.99195,0.23937],[0.64362,0.98999,0.23356],[0.65394,0.98775,0.22835],[0.66428,0.98524,0.22370],[0.67462,0.98246,0.21960],[0.68494,0.97941,0.21602],[0.69525,0.97610,0.21294],[0.70553,0.97255,0.21032],[0.71577,0.96875,0.20815],[0.72596,0.96470,0.20640],[0.73610,0.96043,0.20504],[0.74617,0.95593,0.20406],[0.75617,0.95121,0.20343],[0.76608,0.94627,0.20311],[0.77591,0.94113,0.20310],[0.78563,0.93579,0.20336],[0.79524,0.93025,0.20386],[0.80473,0.92452,0.20459],[0.81410,0.91861,0.20552],[0.82333,0.91253,0.20663],[0.83241,0.90627,0.20788],[0.84133,0.89986,0.20926],[0.85010,0.89328,0.21074],[0.85868,0.88655,0.21230],[0.86709,0.87968,0.21391],[0.87530,0.87267,0.21555],[0.88331,0.86553,0.21719],[0.89112,0.85826,0.21880],[0.89870,0.85087,0.22038],[0.90605,0.84337,0.22188],[0.91317,0.83576,0.22328],[0.92004,0.82806,0.22456],[0.92666,0.82025,0.22570],[0.93301,0.81236,0.22667],[0.93909,0.80439,0.22744],[0.94489,0.79634,0.22800],[0.95039,0.78823,0.22831],[0.95560,0.78005,0.22836],[0.96049,0.77181,0.22811],[0.96507,0.76352,0.22754],[0.96931,0.75519,0.22663],[0.97323,0.74682,0.22536],[0.97679,0.73842,0.22369],[0.98000,0.73000,0.22161],[0.98289,0.72140,0.21918],[0.98549,0.71250,0.21650],[0.98781,0.70330,0.21358],[0.98986,0.69382,0.21043],[0.99163,0.68408,0.20706],[0.99314,0.67408,0.20348],[0.99438,0.66386,0.19971],[0.99535,0.65341,0.19577],[0.99607,0.64277,0.19165],[0.99654,0.63193,0.18738],[0.99675,0.62093,0.18297],[0.99672,0.60977,0.17842],[0.99644,0.59846,0.17376],[0.99593,0.58703,0.16899],[0.99517,0.57549,0.16412],[0.99419,0.56386,0.15918],[0.99297,0.55214,0.15417],[0.99153,0.54036,0.14910],[0.98987,0.52854,0.14398],[0.98799,0.51667,0.13883],[0.98590,0.50479,0.13367],[0.98360,0.49291,0.12849],[0.98108,0.48104,0.12332],[0.97837,0.46920,0.11817],[0.97545,0.45740,0.11305],[0.97234,0.44565,0.10797],[0.96904,0.43399,0.10294],[0.96555,0.42241,0.09798],[0.96187,0.41093,0.09310],[0.95801,0.39958,0.08831],[0.95398,0.38836,0.08362],[0.94977,0.37729,0.07905],[0.94538,0.36638,0.07461],[0.94084,0.35566,0.07031],[0.93612,0.34513,0.06616],[0.93125,0.33482,0.06218],[0.92623,0.32473,0.05837],[0.92105,0.31489,0.05475],[0.91572,0.30530,0.05134],[0.91024,0.29599,0.04814],[0.90463,0.28696,0.04516],[0.89888,0.27824,0.04243],[0.89298,0.26981,0.03993],[0.88691,0.26152,0.03753],[0.88066,0.25334,0.03521],[0.87422,0.24526,0.03297],[0.86760,0.23730,0.03082],[0.86079,0.22945,0.02875],[0.85380,0.22170,0.02677],[0.84662,0.21407,0.02487],[0.83926,0.20654,0.02305],[0.83172,0.19912,0.02131],[0.82399,0.19182,0.01966],[0.81608,0.18462,0.01809],[0.80799,0.17753,0.01660],[0.79971,0.17055,0.01520],[0.79125,0.16368,0.01387],[0.78260,0.15693,0.01264],[0.77377,0.15028,0.01148],[0.76476,0.14374,0.01041],[0.75556,0.13731,0.00942],[0.74617,0.13098,0.00851],[0.73661,0.12477,0.00769],[0.72686,0.11867,0.00695],[0.71692,0.11268,0.00629],[0.70680,0.10680,0.00571],[0.69650,0.10102,0.00522],[0.68602,0.09536,0.00481],[0.67535,0.08980,0.00449],[0.66449,0.08436,0.00424],[0.65345,0.07902,0.00408],[0.64223,0.07380,0.00401],[0.63082,0.06868,0.00401],[0.61923,0.06367,0.00410],[0.60746,0.05878,0.00427],[0.59550,0.05399,0.00453],[0.58336,0.04931,0.00486],[0.57103,0.04474,0.00529],[0.55852,0.04028,0.00579],[0.54583,0.03593,0.00638],[0.53295,0.03169,0.00705],[0.51989,0.02756,0.00780],[0.50664,0.02354,0.00863],[0.49321,0.01963,0.00955],[0.47960,0.01583,0.01055]]
+
+function interpolate(colormap, x) {
+    x = Math.max(0.0, Math.min(1.0, x))
+    const a = Math.trunc(x * 255.0)
+    const b = Math.min(255, a + 1)
+    const f = x * 255.0 - a
+    return [colormap[a][0] + (colormap[b][0] - colormap[a][0]) * f,
+            colormap[a][1] + (colormap[b][1] - colormap[a][1]) * f,
+            colormap[a][2] + (colormap[b][2] - colormap[a][2]) * f,
+            1.0]
+  }
+
+export { interpolate, turboColormapData }
diff --git a/delaunay.js b/delaunay.js
new file mode 100644
index 0000000..57a0842
--- /dev/null
+++ b/delaunay.js
@@ -0,0 +1,202 @@
+class Vector3 {
+    constructor(x, y, z) {
+      this.x = x
+      this.y = y
+      this.z = z
+    }
+  
+    cross(v) {
+      return new Vector3(
+        this.y * v.z - this.z * v.y,
+        this.z * v.x - this.x * v.z,
+        this.x * v.y - this.y * v.x)
+    }
+  
+    minus(v) {
+      return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z)
+    } 
+
+    dot(v) {
+      return this.x * v.x + this.y * v.y + this.z * v.z
+    }
+  
+    norm() {
+      const length = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z)
+      return new Vector3(this.x / length, this.y / length, this.z / length)
+    }
+}
+  
+// Delaunay Triangulation from: https://github.com/msavela/delaunay/
+class Vertex {
+    constructor(x, y, z) {
+      this.x = x
+      this.y = y
+      this.z = z
+    }
+  
+    equals(vertex) {
+      return this.x === vertex.x && this.y == vertex.y && this.z == vertex.z
+    }
+  }
+  
+  class Edge {
+    constructor(v0, v1) {
+      this.v0 = v0
+      this.v1 = v1
+    }
+  
+    equals(edge) {
+      return (this.v0.equals(edge.v0) && this.v1.equals(edge.v1)) ||
+        (this.v0.equals(edge.v1) && this.v1.equals(edge.v0))
+    }
+  }
+  
+  class Triangle {
+    constructor(v0, v1, v2) {
+      this.v0 = v0
+      this.v1 = v1
+      this.v2 = v2
+      this.edgeVec0 = new Vector3(v1.x - v0.x, v1.y - v0.y, v1.z - v0.z)
+      this.edgeVec1 = new Vector3(v2.x - v0.x, v2.y - v0.y, v2.z - v0.z)
+      this.calcCircumcircle()
+    }
+  
+    calcCircumcircle() {
+      // Reference: http://www.faqs.org/faqs/graphics/algorithms-faq/
+      // Subject 1.04: How do I generate a circle through three points?
+      const A = this.v1.x - this.v0.x
+      const B = this.v1.y - this.v0.y
+      const C = this.v2.x - this.v0.x
+      const D = this.v2.y - this.v0.y
+  
+      const E = A * (this.v0.x + this.v1.x) + B * (this.v0.y + this.v1.y)
+      const F = C * (this.v0.x + this.v2.x) + D * (this.v0.y + this.v2.y)
+  
+      const G = 2.0 * (A * (this.v2.y - this.v1.y) - B * (this.v2.x - this.v1.x))
+  
+      let dx, dy
+  
+      // Collinear points, get extremes and use midpoint as center
+      if (Math.round(Math.abs(G)) == 0) {
+        const minx = Math.min(this.v0.x, this.v1.x, this.v2.x)
+        const miny = Math.min(this.v0.y, this.v1.y, this.v2.y)
+        const maxx = Math.max(this.v0.x, this.v1.x, this.v2.x)
+        const maxy = Math.max(this.v0.y, this.v1.y, this.v2.y)
+  
+        this.center = new Vertex((minx + maxx) / 2, (miny + maxy) / 2, 0)
+  
+        dx = this.center.x - minx
+        dy = this.center.y - miny
+      } else {
+        const cx = (D * E - B * F) / G
+        const cy = (A * F - C * E) / G
+  
+        this.center = new Vertex(cx, cy, 0)
+  
+        dx = this.center.x - this.v0.x
+        dy = this.center.y - this.v0.y
+      }
+      this.radius = Math.sqrt(dx * dx + dy * dy)
+    }
+  
+    inCircumcircle(v) {
+      const dx = this.center.x - v.x
+      const dy = this.center.y - v.y
+      return Math.sqrt(dx * dx + dy * dy) <= this.radius
+    }
+  
+    surfaceNormal() {
+      return this.edgeVec1.cross(this.edgeVec0)
+    }
+  }
+  
+  function getSuperTriangle(vertices) {
+    let minx = Infinity
+    let miny = Infinity
+  
+    let maxx = -Infinity
+    let maxy = -Infinity
+    vertices.forEach(vertex => {
+      minx = Math.min(minx, vertex.x)
+      miny = Math.min(minx, vertex.y)
+      maxx = Math.max(maxx, vertex.x)
+      maxy = Math.max(maxx, vertex.y)
+    })
+  
+    const dx = (maxx - minx) * 10
+    const dy = (maxy - miny) * 10
+  
+    const v0 = new Vertex(minx - dx, miny - dy * 3, 0)
+    const v1 = new Vertex(minx - dx, maxy + dy, 0)
+    const v2 = new Vertex(maxx + dx * 3, maxy + dy, 0)
+  
+    return new Triangle(v0, v1, v2)
+  }
+  
+  function addVertex(vertex, triangles) {
+    let edges = []
+  
+    // Remove triangles with circumcircles containing the vertex.
+    triangles = triangles.filter(triangle => {
+      if (triangle.inCircumcircle(vertex)) {
+        edges.push(new Edge(triangle.v0, triangle.v1))
+        edges.push(new Edge(triangle.v1, triangle.v2))
+        edges.push(new Edge(triangle.v2, triangle.v0))
+        return false
+      }
+      return true
+    })
+  
+    // Get unique edges.
+    edges = uniqueEdges(edges)
+  
+    // Create new triangles from the unique edges and new vertex.
+    edges.forEach(edge => {
+      triangles.push(new Triangle(edge.v0, edge.v1, vertex))
+    })
+  
+    return triangles
+  }
+  
+  function uniqueEdges(edges) {
+    const uniqueEdges = []
+    for (let i = 0; i < edges.length; ++i) {
+      let isUnique = true
+  
+      // See if edge is unique.
+      for (let j = 0; j < edges.length; ++j) {
+        if (i != j && edges[i].equals(edges[j])) {
+          isUnique = false
+          break
+        }
+      }
+  
+      // Edge is unique, add to unique edges array.
+      isUnique && uniqueEdges.push(edges[i])
+    }
+  
+    return uniqueEdges
+  }
+  
+  function bowyerWatson(vertices) {
+    // Create bounding 'super' triangle.
+    let st = getSuperTriangle(vertices)
+    // Initialize triangles while adding bounding triangle.
+    let triangles = [st]
+  
+    // Triangulate each vertex.
+    vertices.forEach(vertex => {
+      triangles = addVertex(vertex, triangles)
+    })
+  
+    // Remove triangles that share edges with super triangle.
+    triangles = triangles.filter(triangle => {
+      return !(triangle.v0 == st.v0 || triangle.v0 == st.v1 || triangle.v0 == st.v2 ||
+        triangle.v1 == st.v0 || triangle.v1 == st.v1 || triangle.v1 == st.v2 ||
+        triangle.v2 == st.v0 || triangle.v2 == st.v1 || triangle.v2 == st.v2)
+    })
+  
+    return triangles
+  }
+
+export { bowyerWatson, Vector3, Vertex }
diff --git a/index.html b/index.html
index cf0f098..f5966ba 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>MoodyJS</title>
-  <script type="text/javascript" src="webgl-debug.js"></script>
-  <script type="text/javascript" src="moody.js"></script>
+  <script type="module" src="main.js"></script>
   <style>
     :root {
       --l1-color: #F44336;
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..fc78d4f
--- /dev/null
+++ b/main.js
@@ -0,0 +1,889 @@
+import { interpolate, turboColormapData } from "./colormap.js"
+import { bowyerWatson, Vector3, Vertex } from "./delaunay.js"
+import { Mat4 } from "./math.js"
+import { MoodyReport, SurfacePlate, roundTo } from "./moody.js"
+import WebGLDebugUtils from "./webgl-debug.js"
+
+// Moody's original paper states 48x78 which is a non-standard size. It is most likely a typo. Bruce Allen's corrections paper states:
+
+// Table 1 carries the title “Worksheets for Calibrating a 48 x 78-Inch Surface Plate”. The diagonal length of
+// such a plate would be slightly less than 92 inches. However the first and second worksheets indicate diagonal
+// stations beginning at 3 inches and ending at 83 inches. That is consistent with a 48 x 72 inch surface plate
+// (also a US standard size [13]) which has an 86.5-inch diagonal. The title of the Table 1 should be 
+// “Worksheets for Calibrating a 48 x 72-Inch Surface Plate”. 
+const moodySurfacePlateHeightInches = 48
+const moodySurfacePlateWidthInches = 72
+const moodyReflectorFootSpacingInches = 4
+// TODO: Use a unit pair to specify reflector foot spacing and surface plate width/height and remove naming *Inches
+const moodyData =  [
+  [6.5, 6.0, 5.0, 5.2, 5.5, 5.6, 5.5, 5.0, 5.5, 4.8, 5.0, 5.2, 5.3, 4.9, 4.6, 4.2, 5.3, 4.9, 4.5, 3.5], // topStartingDiagonal
+  [6.6, 5.4, 5.4, 5.2, 5.5, 5.7, 5.0, 5.0, 5.4, 4.5, 4.4, 4.5, 4.5, 4.8, 4.2, 4.2, 4.2, 4.8, 4.3, 3.2], // bottomStartingDiagonal
+  [20.5, 19.7, 20.5, 20.3, 20.2, 19.9, 19.0, 19.5, 18.8, 18.6, 18.7, 18.6, 18.4, 18.5, 19.0, 17.9],     // northPerimeter
+  [3.5, 2.1, 2.5, 2.8, 3.4, 3.2, 3.5, 4.0, 4.2, 3.5],                                                   // eastPerimeter
+  [16.4, 15, 15.6, 15.5, 15.1, 15.3, 15.1, 14.6, 14, 13.5, 13.5, 13.3, 13.3, 13.4, 14, 13.9],           // southPerimeter
+  [6, 4.6, 4.5, 4.7, 5.0, 4.5, 5.9, 6, 6, 4.9],                                                         // westPerimeter
+  [11.7, 12.4, 12.1, 12.5, 12.0, 11.5, 11.5, 11.3, 11.3, 10.3, 10.8, 10.3, 10, 10.7, 10.4, 10.4],       // horizontalCenter
+  [6.6, 6.4, 6.3, 6.5, 6.6, 6.9, 7.5, 7.4, 7.1, 7]]                                                     // verticalCenter
+
+const lines = [ "topStartingDiagonal", "bottomStartingDiagonal", "northPerimeter", "eastPerimeter", "southPerimeter",
+  "westPerimeter", "horizontalCenter", "verticalCenter"]
+window.addEventListener('DOMContentLoaded', () => {
+  // FIXME: This is just for testing - so we don't have to type in the values each time.
+  document.getElementById("plateHeight").value = moodySurfacePlateHeightInches
+  document.getElementById("plateWidth").value = moodySurfacePlateWidthInches
+  document.getElementById("reflectorFootSpacing").value = moodyReflectorFootSpacingInches
+
+  zMultiplier = document.querySelector("#zMultiplier").value
+  document.getElementById('fillTestData').addEventListener("click", () => {
+    lines.forEach((line, lineIndex) => {
+      moodyData[lineIndex].forEach((tableEntry, index) => {
+          document.getElementById(line + "Table" + (index + 1)).value = tableEntry
+      })
+    })
+    // Trigger table refresh.
+    document.getElementsByClassName("readingInput")[0].dispatchEvent(new Event('input', { bubbles: true }))
+  })
+
+  document.getElementById("createTables").addEventListener("click", () => {
+    createTables()
+  })
+
+})
+
+// Creates the tables for each line (along with its' own table graphic) and adds to the DOM.
+function createTables() {
+  const surfacePlate = new SurfacePlate(document.getElementById("plateHeight").value,
+    document.getElementById("plateWidth").value, document.getElementById("reflectorFootSpacing").value)
+  document.getElementById('plateDiagonal').value = surfacePlate.surfacePlateDiagonalInches
+  document.getElementById('diagonalInset').value = surfacePlate.suggestedDiagonalInset
+  document.getElementById('numHorizontalStations').value = surfacePlate.suggestedNumberOfHorizontalStations
+  document.getElementById('numVerticalStations').value = surfacePlate.suggestedNumberOfVerticalStations
+  document.getElementById('numDiagonalStations').value = surfacePlate.suggestedNumberOfDiagonalStations
+  const plateDiagonalFull = Math.sqrt(((surfacePlate.surfacePlateHeightInches * surfacePlate.surfacePlateHeightInches) +
+    (surfacePlate.surfacePlateWidthInches * surfacePlate.surfacePlateWidthInches)))
+  const gradeAAFlatnessReq = .04 * (plateDiagonalFull * plateDiagonalFull) + 40
+  document.getElementById('gradeAA').value = roundTo(gradeAAFlatnessReq, 2)
+  document.getElementById('gradeA').value = roundTo(gradeAAFlatnessReq * 2, 2)
+  document.getElementById('gradeB').value = roundTo(gradeAAFlatnessReq * 4, 2)
+  const plateDiagonalFullMicrometers = plateDiagonalFull * 25.4
+  const isoGrade0FlatnessReq = 0.003 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 2.5
+  document.getElementById('grade0').value = roundTo(isoGrade0FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
+  const isoGrade1FlatnessReq = 0.006 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 5
+  document.getElementById('grade1').value = roundTo(isoGrade1FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
+  const isoGrade2FlatnessReq = 0.012 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 10
+  document.getElementById('grade2').value = roundTo(isoGrade2FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
+  const isoGrade3FlatnessReq = 0.024 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 20
+  document.getElementById('grade3').value = roundTo(isoGrade3FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
+  const flatnessInputs = [document.getElementById('gradeAA'), document.getElementById('gradeA'), document.getElementById('gradeB'),
+    document.getElementById('grade0'), document.getElementById('grade1'), document.getElementById('grade2'), document.getElementById('grade3')]
+  document.getElementById("overallFlatness").addEventListener("input", event => {
+   for (const flatnessInput of flatnessInputs) {
+     if (Number(event.target.value) <= Number(flatnessInput.value)) {
+       flatnessInput.style.background = '#C6EFCE'
+     } else {
+       flatnessInput.style.background = '#FFC7CE'
+     }
+   }
+  })
+
+  createTableGraphic(surfacePlate)
+
+  lines.forEach(line => {
+    const linePropertyName = line[0].toUpperCase() + line.slice(1)
+    document.getElementById(line + "Table").createCaption().textContent =
+      surfacePlate[linePropertyName].name + " (" + surfacePlate[linePropertyName].displayName() + ")"
+    // Delete all non-header rows from table.
+    Array.from(document.getElementById(line + "Table").getElementsByTagName("tbody")[0].getElementsByTagName("tr")).forEach(tr => tr.remove())
+    // Delete all previously constructed SVG table graphics (for each line).
+    if (document.getElementById(line + "TableSvg") != null) {
+      document.getElementById(line + "TableSvg").remove()
+    }
+    const numberOfStations = getNumberOfStations(line, surfacePlate)
+
+    for (let i = 0; i <= numberOfStations; i++) {
+      // Create the table rows.
+      const row = document.getElementById(line + "Table").getElementsByTagName("tbody")[0].insertRow()
+      row.insertCell().textContent = i + 1
+      const readingInput = document.createElement("input")
+      readingInput.inputMode = "decimal"
+      readingInput.required = true
+      readingInput.pattern = "[0-9]*[.,]{0,1}[0-9]*"
+      readingInput.id = line + "Table" + i
+      readingInput.classList.add("readingInput", line + "ReadingInput")
+      readingInput.addEventListener("input", event => {
+        refreshTables(event, lines, surfacePlate)
+      })
+      row.insertCell().appendChild(readingInput)
+    }
+    document.getElementById(line + "Table").style.visibility = "visible"
+
+    // Create the table graphics for each line (with the others greyed out).
+    const tableGraphic = document.getElementById("tableGraphic")
+    const specificLineTableGraphic = tableGraphic.cloneNode(true)
+    specificLineTableGraphic.id = line + "TableSvg"
+    specificLineTableGraphic.setAttribute("width", "97%")
+    lines.filter(l => l !== line).forEach(otherLine => {
+      specificLineTableGraphic.getElementById(otherLine + "LineGroup").setAttribute("stroke", "#A0A0A0")
+      specificLineTableGraphic.getElementById(otherLine + "LineGroup").setAttribute("fill", "#A0A0A0")
+    })
+    document.getElementById(line + "TableSvgContainer").appendChild(specificLineTableGraphic)
+  })
+
+  // Now that the rows have been created, set the first input for autocollimator readings to 0 and readonly.
+  lines.forEach(line => {
+    document.getElementById(line + "Table0").value = "0"
+    document.getElementById(line + "Table0").readOnly = true
+  })
+}
+
+// Creates the main SVG table graphic (with multi-colored lines) and adds it to the DOM.
+function createTableGraphic(surfacePlate) {
+  const surfacePlateWidthInches = Number(document.getElementById("plateWidth").value)
+  const surfacePlateHeightInches = Number(document.getElementById("plateHeight").value)
+  document.getElementById('tableGraphic').style.visibility = "visible"
+  const surfacePlatePercentHeight = 100 * (surfacePlateHeightInches / (surfacePlateWidthInches + surfacePlateHeightInches))
+  const surfacePlatePercentWidth = 100 * (surfacePlateWidthInches / (surfacePlateWidthInches + surfacePlateHeightInches))
+  document.getElementById('tableGraphic').setAttribute("viewBox", "0 0 " + surfacePlatePercentWidth + " " + surfacePlatePercentHeight)
+  document.getElementById('tableGraphic').setAttribute("width", "30%")
+  document.getElementById('outsideRect').setAttribute("width", surfacePlatePercentWidth)
+  document.getElementById('outsideRect').setAttribute("height", surfacePlatePercentHeight)
+  const plateDiagonalAngle = Math.atan(surfacePlateWidthInches / surfacePlateHeightInches)
+  const xInset = surfacePlate.suggestedDiagonalInset * Math.sin(plateDiagonalAngle)
+  const yInset = surfacePlate.suggestedDiagonalInset * Math.cos(plateDiagonalAngle)
+  document.getElementById('insideRect').setAttribute("x", xInset)
+  document.getElementById('insideRect').setAttribute("y", yInset)
+  document.getElementById('insideRect').setAttribute("width", surfacePlatePercentWidth - (2 * xInset))
+  document.getElementById('insideRect').setAttribute("height", surfacePlatePercentHeight - (2 * yInset))
+
+  // Setup each path of the table SVG graphic (move to start position, draw to end position).
+  document.getElementById('topStartingDiagonalLine').setAttribute("d", `M ${xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset}`)
+  document.getElementById('bottomStartingDiagonalLine').setAttribute("d", `M ${xInset} ${surfacePlatePercentHeight - yInset} L ${surfacePlatePercentWidth - xInset} ${yInset}`)
+  document.getElementById('northPerimeterLine').setAttribute("d", `M ${xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${yInset}`)
+  document.getElementById('eastPerimeterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset}`)
+  document.getElementById('southPerimeterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset} L ${xInset} ${surfacePlatePercentHeight - yInset}`)
+  document.getElementById('westPerimeterLine').setAttribute("d", `M ${xInset} ${surfacePlatePercentHeight - yInset} L ${xInset} ${yInset}`)
+  document.getElementById('horizontalCenterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight / 2} L ${xInset} ${surfacePlatePercentHeight / 2}`)
+  document.getElementById('verticalCenterLine').setAttribute("d", `M ${surfacePlatePercentWidth / 2} ${yInset} L ${surfacePlatePercentWidth / 2} ${surfacePlatePercentHeight - yInset}`)
+}
+
+// Returns the number of stations for the given line.
+function getNumberOfStations(line, surfacePlate) {
+  if (line.endsWith('Diagonal')) {
+    return surfacePlate.suggestedNumberOfDiagonalStations
+  } else if (line.startsWith('north') || line.startsWith('south') || line.startsWith('horizontal')) {
+    return surfacePlate.suggestedNumberOfHorizontalStations
+  } else {
+    return surfacePlate.suggestedNumberOfVerticalStations
+  }
+}
+
+// Recalculates the values by creating a new MoodyReport and updates the table cell values accordingly.
+function refreshTables(event, lines, surfacePlate) {
+  // One of the autocollimator readings have changed - so recalculate everything (by making a new MoodyReport).
+  const readingInputs = document.getElementsByClassName("readingInput")
+  if (readingInputs.length > 0) {
+    if (Array.from(readingInputs).filter(readingInput => readingInput.value !== '').length == readingInputs.length) {
+      // All inputs for autocollimator readings are non-empty, so create new MoodyTable with the readings.
+      const moodyReport = new MoodyReport(surfacePlate,
+        Array.from(document.getElementsByClassName("topStartingDiagonalReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("bottomStartingDiagonalReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("northPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("eastPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("southPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("westPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("horizontalCenterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
+        Array.from(document.getElementsByClassName("verticalCenterReadingInput")).filter(input => input.readOnly == false).map(input => input.value))
+
+      const allZPositions = moodyReport.vertices().map(point => point[2])
+      const overallFlatness = (Math.max(...allZPositions) - Math.min(...allZPositions)) * 1000000 // Convert inches to microinches.
+      document.getElementById("overallFlatness").value = overallFlatness
+      document.getElementById("overallFlatness").dispatchEvent(new Event('input', { 'bubbles': true }))
+      /*
+      const allXPositions = moodyReport.vertices().map(point => point[0])
+      const allYPositions = moodyReport.vertices().map(point => point[1])
+
+      console.log(allXPositions)
+      console.log(allYPositions)
+      console.log("EXCEL CSV:\r\n")
+      for (let i = 0; i < allXPositions.length; i++) {
+        console.log(allXPositions[i] + ", " + allYPositions[i])
+      }
+      */
+      let tableModelMatrix = Mat4.create()
+      initialize3DTableGraphic(moodyReport, tableModelMatrix)
+
+      lines.forEach(l => {
+        Array.from(document.getElementById(l + "Table").getElementsByTagName("tbody")[0].rows).forEach((tableRow, index) => {
+          const column3Input = document.createElement("input")
+          column3Input.readOnly = true
+          column3Input.value = moodyReport[l + "Table"].angularDisplacements[index]
+          if (tableRow.cells.length > 2) {
+            tableRow.deleteCell(2)
+          }
+          tableRow.insertCell(2).appendChild(column3Input)
+
+          const column4Input = document.createElement("input")
+          column4Input.readOnly = true
+          column4Input.value = moodyReport[l + "Table"].sumOfDisplacements[index]
+          if (tableRow.cells.length > 3) {
+            tableRow.deleteCell(3)
+          }
+          tableRow.insertCell(3).appendChild(column4Input)
+
+          const column5Input = document.createElement("input")
+          column5Input.readOnly = true
+          column5Input.value = moodyReport[l + "Table"].cumulativeCorrectionFactors[index]
+          if (tableRow.cells.length > 4) {
+            tableRow.deleteCell(4)
+          }
+          tableRow.insertCell(4).appendChild(column5Input)
+
+          const column6Input = document.createElement("input")
+          column6Input.readOnly = true
+          column6Input.value = moodyReport[l + "Table"].displacementsFromDatumPlane[index]
+          if (tableRow.cells.length > 5) {
+            tableRow.deleteCell(5)
+          }
+          tableRow.insertCell(5).appendChild(column6Input)
+
+          const column7Input = document.createElement("input")
+          column7Input.readOnly = true
+          column7Input.value = moodyReport[l + "Table"].displacementsFromBaseLine[index]
+          if (tableRow.cells.length > 6) {
+            tableRow.deleteCell(6)
+          }
+          tableRow.insertCell(6).appendChild(column7Input)
+
+          const column8Input = document.createElement("input")
+          column8Input.readOnly = true
+          column8Input.value = (moodyReport[l + "Table"].displacementsFromBaseLineLinear[index] * 10000).toFixed(4)
+          if (tableRow.cells.length > 7) {
+            tableRow.deleteCell(7)
+          }
+          tableRow.insertCell(7).appendChild(column8Input)
+        })
+      })
+    }
+  }
+}
+
+const keyMap = []
+let lastMappedPosition = null
+let cumulativeZoomFactor = 1
+let zMultiplier = -1
+let buffers = null
+let showLines = true
+let showHeatmap = true
+let lightingOn = true
+
+function mapToSphere(dx, dy, canvas) {
+  const x = (2 * event.clientX - canvas.width) / canvas.width
+  const y = (canvas.height - 2 * event.clientY) / canvas.height
+  const z = 0.0
+  const length = Math.sqrt(dx * dx + dy * dy)
+  const d = length < 1.0 ? length : 1.0
+  return new Vector3(x, y, Math.sqrt(1.001 - d * d)).norm()
+}
+
+function initialize3DTableGraphic(moodyReport, tableModelMatrix) {
+  const canvas = document.getElementById("glcanvas")
+  // const gl = canvas.getContext("webgl2")
+  const gl = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl2"))
+  if (gl === null) {
+    console.log("Unable to initialize WebGL. Your browser or machine may not support it.")
+    const ctx = canvas.getContext("2d")
+
+    ctx.font = "30px Arial"
+    ctx.fillStyle = "red"
+    ctx.textAlign = "center"
+    ctx.fillText("Unable to initialize WebGL!", canvas.width / 2, canvas.height / 2)
+    return
+  }
+
+  document.querySelector("#zMultiplier").addEventListener("input", event => {
+    zMultiplier = event.target.value
+    buffers = getBuffers(gl, moodyReport, zMultiplier)
+  })
+
+  document.getElementById("showLines").addEventListener("change", event => showLines = event.target.checked)
+  document.getElementById("showHeatmap").addEventListener("change", event => showHeatmap = event.target.checked)
+  document.getElementById("lightingOn").addEventListener("change", event => lightingOn = event.target.checked)
+
+  canvas.onmousedown = event => {
+    lastMappedPosition = mapToSphere(event.clientX, event.clientY, canvas)
+  }
+
+  document.onmouseup = () => { lastMappedPosition = null }
+
+  document.onmousemove = () => {
+    if (lastMappedPosition) {
+      // With the current rotation behavior the original mouse point that started the rotation acts as the origin
+      // point, and so dragging away from it rotates the table according to the mouse direction and then going back
+      // to that point resets to the original rotation - but if you go past the origin point in the other direction
+      // it rotates slower...why is that?
+      // Map mouse displacement onto virtual sphere.
+      const mapped = mapToSphere(event.clientX, event.clientY, canvas)
+      const direction = new Vector3(mapped.x - lastMappedPosition.x, mapped.y - lastMappedPosition.y, 0)
+      const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y)
+      // Determine rotation axis.
+      const axis = lastMappedPosition.cross(mapped)
+
+      const newRotationMatrix = Mat4.create()
+      // TODO: Cache these vertices for a given zMultiplier (memoize).
+      const vertices = moodyReport.vertices(zMultiplier).map(vertex => new Vertex(vertex[0], vertex[1], vertex[2])).flat(1)
+      const minX = Math.min(...vertices.map(vertex => vertex.x))
+      const maxX = Math.max(...vertices.map(vertex => vertex.x))
+      const minY = Math.min(...vertices.map(vertex => vertex.y))
+      const maxY = Math.max(...vertices.map(vertex => vertex.y))
+      const minZ = Math.min(...vertices.map(vertex => vertex.z))
+      const maxZ = Math.max(...vertices.map(vertex => vertex.z))
+      // Axis is a unit vector from the origin (bottom-left corner of surface plate) in the direction the mouse travelled.
+      // We need it to be a unit vector from the center of the surface plate instead.
+      newRotationMatrix.translate([(maxX - minX) / 2, (maxY - minY) / 2, (maxZ - minZ) / 2])
+      newRotationMatrix.rotate(length, [axis.x, 0, axis.y])
+      newRotationMatrix.translate([-((maxX - minX) / 2), -((maxY - minY) / 2), -((maxZ - minZ) / 2)])
+      tableModelMatrix.multiply(newRotationMatrix)
+      lastMappedPosition = mapped
+    }
+  }
+
+  canvas.onwheel = event => {
+    event.preventDefault()
+    const direction = event.deltaY < 0 ? 1 : -1
+    const zoomFactor = 1 + direction * 0.1
+    if (cumulativeZoomFactor < 0.16 || cumulativeZoomFactor > 10) {
+      // Max zoom level reached, don't zoom anymore.
+      return
+    }
+    cumulativeZoomFactor *= zoomFactor
+    const scaleMatrix = Mat4.create()
+    scaleMatrix.scale([zoomFactor, zoomFactor, zoomFactor])
+    tableModelMatrix.multiply(scaleMatrix)
+  }
+
+  // Pretty weird hack that allows the canvas to be focused and thus receive keydown events.
+  canvas.tabIndex = 1
+
+  canvas.onkeyup = event => {
+    keyMap[event.key] = false
+  }
+
+  canvas.onkeydown = event => {
+    event.preventDefault()
+    keyMap[event.key] = true
+    const translateMatrix = Mat4.create()
+    if (keyMap['ArrowUp'] === true) {
+      translateMatrix.translate([0, -1.0, 0.0])
+    }
+    if (keyMap['ArrowDown'] === true) {
+      translateMatrix.translate([0, 1.0, 0.0])
+    }
+    if (keyMap['ArrowRight'] === true) {
+      translateMatrix.translate([-1.0, 0.0, 0.0])
+    }
+    if (keyMap['ArrowLeft'] === true) {
+      translateMatrix.translate([1.0, 0.0, 0.0])
+    }
+    if (keyMap['w'] === true) {
+      // translateMatrix.rotate(0.1, [0.0, 0.0, -1.0])
+      translateMatrix.translate([0.0, 0.0, -1.0])
+    }
+    if (keyMap['s'] === true) {
+      // translateMatrix.rotate(0.1, [0.0, 0.0, 1.0])
+      translateMatrix.translate([0.0, 0.0, 1.0])
+    }
+    tableModelMatrix.multiply(translateMatrix)
+  }
+
+  const texture = loadTexture(gl, "granite_2048x2048_compressed.png")
+  // Flip image pixels into the bottom-to-top order that WebGL expects.
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
+
+  gl.clearColor(0.0, 0.0, 0.0, 1.0)
+  gl.clear(gl.COLOR_BUFFER_BIT)
+
+  const shaderProgram = initShaderProgram(gl, vsSource, fsSource)
+  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, "vertexPosition"),
+      vertexNormal: gl.getAttribLocation(shaderProgram, "vertexNormal"),
+      vertexColor: gl.getAttribLocation(shaderProgram, "vertexColor"),
+      textureCoord: gl.getAttribLocation(shaderProgram, "vertexTextureCoord"),
+      vertexType: gl.getAttribLocation(shaderProgram, "vertexType"),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, "projectionMatrix"),
+      modelMatrix: gl.getUniformLocation(shaderProgram, "modelMatrix"),
+      viewMatrix: gl.getUniformLocation(shaderProgram, "viewMatrix"),
+      normalMatrix: gl.getUniformLocation(shaderProgram, "normalMatrix"),
+      lightPos: gl.getUniformLocation(shaderProgram, "lightPos"),
+      lightPower: gl.getUniformLocation(shaderProgram, "lightPower"),
+      sampler: gl.getUniformLocation(shaderProgram, "sampler"),
+      showLines: gl.getUniformLocation(shaderProgram, "showLines"),
+      showHeatmap: gl.getUniformLocation(shaderProgram, "showHeatmap"),
+      lightingOn: gl.getUniformLocation(shaderProgram, "lightingOn"),
+    },
+  }
+  buffers = getBuffers(gl, moodyReport, zMultiplier)
+
+  function render() {
+    drawTableSurface(moodyReport, gl, programInfo, buffers, tableModelMatrix, texture)
+    requestAnimationFrame(render)
+  }
+  requestAnimationFrame(render)
+}
+
+// Creates a 3D surface of the linear plate heights (calculated as Column #8 of the line tables).
+function drawTableSurface(moodyReport, gl, programInfo, buffers, tableModelMatrix, texture) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0)
+  gl.clearDepth(1.0)
+  gl.enable(gl.DEPTH_TEST)
+  gl.depthFunc(gl.LEQUAL)
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+
+  const fieldOfView = (45 * Math.PI) / 180 // radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
+  const zNear = 0.1
+  const zFar = 1000.0
+  const projectionMatrix = Mat4.create()
+
+  projectionMatrix.perspective(fieldOfView, aspect, zNear, zFar)
+
+  const modelMatrix = Mat4.create()
+  modelMatrix.multiply(tableModelMatrix)
+
+  const viewMatrix = Mat4.create()
+  // FIXME: Don't use magic numbers. Something like maxX - minX / 2 (for x and y) and maybe 8-10 times table z-height.
+  viewMatrix.translate([-35.0, -24.0, -70.0])
+
+  setPositionAttribute(gl, buffers, programInfo)
+  setNormalAttribute(gl, buffers, programInfo)
+  setColorAttribute(gl, buffers, programInfo)
+  setTextureAttribute(gl, buffers, programInfo)
+  setTypeAttribute(gl, buffers, programInfo)
+
+  gl.useProgram(programInfo.program)
+
+  const normalMatrix = Mat4.create()
+  Mat4.invert(normalMatrix, viewMatrix.multiply(tableModelMatrix))
+  Mat4.transpose(normalMatrix, normalMatrix)
+
+  let lightPos = [document.getElementById("lightPosX").value, document.getElementById("lightPosY").value, document.getElementById("lightPosZ").value]
+  let lightPower = document.getElementById("lightPower").value
+
+  gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix)
+  gl.uniformMatrix4fv(programInfo.uniformLocations.modelMatrix, false, modelMatrix)
+  gl.uniformMatrix4fv(programInfo.uniformLocations.viewMatrix, false, viewMatrix)
+  gl.uniformMatrix4fv(programInfo.uniformLocations.normalMatrix, false, normalMatrix)
+  gl.uniform3fv(programInfo.uniformLocations.lightPos, lightPos)
+  gl.uniform1f(programInfo.uniformLocations.lightPower, lightPower)
+  gl.activeTexture(gl.TEXTURE0)
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.uniform1i(programInfo.uniformLocations.sampler, 0)
+  gl.uniform1i(programInfo.uniformLocations.showLines, showLines)
+  gl.uniform1i(programInfo.uniformLocations.showHeatmap, showHeatmap)
+  gl.uniform1i(programInfo.uniformLocations.lightingOn, lightingOn)
+
+  {
+    let offset = 0
+    let vertexCount = moodyReport.topStartingDiagonalTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.bottomStartingDiagonalTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.northPerimeterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.eastPerimeterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.southPerimeterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.westPerimeterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.horizontalCenterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = moodyReport.verticalCenterTable.vertices().flat(1).length / 3
+    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
+
+    offset += vertexCount
+    vertexCount = buffers.triangleVertices.length
+    gl.drawArrays(gl.TRIANGLES, offset, vertexCount / 3)
+  }
+}
+
+const vsSource = `#version 300 es
+    in vec4 vertexPosition;
+    in vec3 vertexNormal;
+    in vec4 vertexColor;
+    in vec2 vertexTextureCoord;
+    in float vertexType;
+    uniform mat4 modelMatrix;
+    uniform mat4 viewMatrix;
+    uniform mat4 projectionMatrix;
+    uniform mat4 normalMatrix;
+    out lowp vec4 color;
+    out highp vec2 textureCoord;
+    out highp vec3 normalInterp;
+    out highp vec3 vertPos;
+    out highp float vVertexType;
+
+    void main() {
+      gl_Position = projectionMatrix * viewMatrix * modelMatrix * vertexPosition;
+      color = vertexColor;
+      textureCoord = vertexTextureCoord;
+      vVertexType = vertexType;
+
+      normalInterp = vec3(normalMatrix * vec4(vertexNormal, 0.0));
+      vec4 vertPos4 = viewMatrix * modelMatrix * vertexPosition;
+      vertPos = vec3(vertPos4) / vertPos4.w;
+    }
+`
+
+const fsSource = `#version 300 es
+    precision mediump float;
+    in lowp vec4 color;
+    in vec3 normalInterp;
+    in vec3 vertPos;
+    in highp vec2 textureCoord;
+    in highp float vVertexType;
+    const highp vec3 lightColor = vec3(1.0, 1.0, 1.0);
+    const highp vec3 ambientColor = vec3(0.4, 0.4, 0.4);
+    const highp vec3 diffuseColor = vec3(0.2, 0.2, 0.2);
+    const highp vec3 specColor = vec3(1.0, 1.0, 1.0);
+    const highp float shininess = 8.0;
+    const highp float screenGamma = 2.2; // Assume the monitor is calibrated to the sRGB color space
+    uniform vec3 lightPos;
+    uniform float lightPower;
+    uniform sampler2D sampler;
+    uniform bool showLines;
+    uniform bool showHeatmap;
+    uniform bool lightingOn;
+    out vec4 outputColor;
+
+    void main() {
+      if (vVertexType == 0.0) {
+        // This vertex belongs to one of the Union jack Moody lines.
+        if (showLines) {
+          outputColor = color;
+        } else {
+          discard;
+        }
+      } else {
+        // This vertex belongs to the table mesh.
+        vec3 normal = normalize(normalInterp);
+        vec3 lightDir = lightPos - vertPos;
+        float distance = length(lightDir);
+
+        distance = distance * distance;
+        lightDir = normalize(lightDir);
+
+        float lambertian = max(dot(lightDir, normal), 0.0);
+        float specular = 0.0;
+
+        if (lambertian > 0.0) {
+          vec3 viewDir = normalize(-vertPos);
+          vec3 halfDir = normalize(lightDir + viewDir);
+          float specAngle = max(dot(halfDir, normal), 0.0);
+          specular = pow(specAngle, shininess);
+        }
+
+        vec3 colorLinear = ambientColor +
+                           diffuseColor * lambertian * lightColor * lightPower / distance +
+                           specColor * specular * lightColor * lightPower / distance;
+        // apply gamma correction (assume ambientColor, diffuseColor and specColor
+        // have been linearized, i.e. have no gamma correction in them)
+        vec3 colorGammaCorrected = pow(colorLinear, vec3(1.0 / screenGamma));
+        if (!showHeatmap) {
+          if (lightingOn) {
+            outputColor = texture(sampler, textureCoord) * vec4(colorGammaCorrected, 1.0);
+          } else {
+            outputColor = texture(sampler, textureCoord);
+          }
+        } else {
+          if (lightingOn) {
+            // No heatmap - show the table with a granite texture.
+            outputColor = vec4(color.rgb * colorGammaCorrected, 1.0);
+          } else {
+            outputColor = color;
+          }
+        }
+      }
+    }
+`
+
+function getBuffers(gl, moodyReport, zMultiplier) {
+  const positionBuffer = getPositionBuffer(gl, moodyReport, zMultiplier)
+  const lineColorBuffer = getColorBuffer(gl, moodyReport, positionBuffer.triangleVertices)
+
+  return {
+    positionBuffer: positionBuffer.positionBuffer,
+    normalBuffer: positionBuffer.normalBuffer,
+    triangleVertices: positionBuffer.triangleVertices,
+    textureBuffer: positionBuffer.textureBuffer,
+    typeBuffer: positionBuffer.typeBuffer,
+    lineColors: lineColorBuffer,
+  }
+}
+
+function getPositionBuffer(gl, moodyReport, zMultiplier) {
+  const vertices = moodyReport.vertices(zMultiplier).map(vertex => new Vertex(vertex[0], vertex[1], vertex[2])).flat(1)
+
+  const triangulation = bowyerWatson(vertices)
+
+  const triangulatedVertices = triangulation.map(triangle => [
+    triangle.v0.x, triangle.v0.y, triangle.v0.z,
+    triangle.v1.x, triangle.v1.y, triangle.v1.z,
+    triangle.v2.x, triangle.v2.y, triangle.v2.z]).flat(1)
+
+  // FIXME: We want the line to always be on top of the surface but it can dip underneath it at extreme points.
+  const positions = new Float32Array(
+    moodyReport.vertices(zMultiplier).map(v => [v[0], v[1], v[2] + 0.1]).flat(1) // "Union jack" colored lines.
+    .concat(triangulatedVertices))
+
+  const positionBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
+
+  // Calculate and create normal buffer.
+  const lineNormals = moodyReport.vertices(zMultiplier).map(v => [0.0, 0.0, 0.0]).flat(1)
+  // Each triangle has 3 vertices with the same surface normal.
+  const triangleNormals = triangulation.map(triangle => {
+    const length = Math.sqrt(triangle.surfaceNormal().x * triangle.surfaceNormal().x +
+      triangle.surfaceNormal().y * triangle.surfaceNormal().y +
+      triangle.surfaceNormal().z * triangle.surfaceNormal().z)
+    return [
+    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length,
+    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length,
+    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length]
+    }).flat(1)
+  const normals = new Float32Array(lineNormals.concat(triangleNormals))
+  const normalBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW)
+
+  // Calculate and create texture buffer.
+  const lineTextureCoords = moodyReport.vertices(zMultiplier).map(v => [0.0, 1.0]).flat(1)
+
+  // TODO: Cache these vertices for a given zMultiplier.
+  const minX = Math.min(...vertices.map(vertex => vertex.x))
+  const maxX = Math.max(...vertices.map(vertex => vertex.x))
+  const minY = Math.min(...vertices.map(vertex => vertex.y))
+  const maxY = Math.max(...vertices.map(vertex => vertex.y))
+  const tableSurfaceRatio = (maxY - minY) / (maxX - minX)
+  const numRepeatsX = 1
+  const numRepeatsY = numRepeatsX * tableSurfaceRatio
+  //  Map [minX, maxX] => [0, 1] and [minY, maxY] => [0, 1]
+  // (val - A) * (b - a) / (B - A) + a
+  const triangleTextureCoords = triangulation.map((triangle, index) => [
+    ((triangle.v0.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v0.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),
+    ((triangle.v1.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v1.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),
+    ((triangle.v2.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v2.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),]
+  ).flat(1)
+
+  const textureCoordinates = new Float32Array(lineTextureCoords.concat(triangleTextureCoords))
+  const textureBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, textureCoordinates, gl.STATIC_DRAW)
+
+  const types = new Float32Array(
+    moodyReport.vertices(zMultiplier).map(v => [0.0]).flat(1) // "Union jack" colored lines have type "0.0"
+    .concat(triangulation.map(triangle => [1.0, 1.0, 1.0]).flat(1))) // Table vertices have type "1.0"
+  const typeBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, typeBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, types, gl.STATIC_DRAW)
+
+  return { positionBuffer: positionBuffer, normalBuffer: normalBuffer, textureBuffer: textureBuffer, typeBuffer: typeBuffer, triangleVertices: triangulatedVertices }
+}
+
+function getColorBuffer(gl, moodyReport, triangleVertices) {
+  const triangleZValues = triangleVertices.filter((v, i) => (i + 1) % 3 == 0)
+  const minZ = Math.min(...triangleZValues)
+  const maxZ = Math.max(...triangleZValues)
+  const normalizedTriangleZValues = triangleZValues.map(value => (value - minZ) / (maxZ - minZ))
+  const colorMappedZValues = normalizedTriangleZValues.map(value => interpolate(turboColormapData, value))
+  const colors = new Array(moodyReport.topStartingDiagonalTable.numStations).fill([0.9568627450980393, 0.2627450980392157, 0.21176470588235294, 1.0]).flat(1)
+    .concat(new Array(moodyReport.bottomStartingDiagonalTable.numStations).fill([1.0, 0.9254901960784314, 0.2313725490196078, 1.0]).flat(1))
+    .concat(new Array(moodyReport.northPerimeterTable.numStations).fill([0.2980392156862745, 0.6862745098039216, 0.3137254901960784, 1.0]).flat(1))
+    .concat(new Array(moodyReport.eastPerimeterTable.numStations).fill([1.0, 0.4980392156862745, 0.3137254901960784, 1.0]).flat(1))
+    .concat(new Array(moodyReport.southPerimeterTable.numStations).fill([0.12941176470588237, 0.5882352941176471, 0.9529411764705882, 1.0]).flat(1))
+    .concat(new Array(moodyReport.westPerimeterTable.numStations).fill([1.0, 0.5019607843137255, 0.6745098039215687, 1.0]).flat(1))
+    .concat(new Array(moodyReport.horizontalCenterTable.numStations).fill([0.0, 0.749019607843137, 0.8470588235294118, 1.0]).flat(1))
+    .concat(new Array(moodyReport.verticalCenterTable.numStations).fill([0.607843137254902, 0.1568627450980392, 0.6862745098039216, 1.0]).flat(1))
+    .concat(colorMappedZValues.flat(1)) // Add color mapped colors for the triangles z-value.
+
+  const colorBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW)
+
+  return colorBuffer
+}
+
+function setPositionAttribute(gl, buffers, programInfo) {
+  const numComponents = 3
+  const type = gl.FLOAT
+  const normalize = false
+  const stride = 0
+  const offset = 0
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer)
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexPosition,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset)
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition)
+}
+
+function setNormalAttribute(gl, buffers, programInfo) {
+  const numComponents = 3
+  const type = gl.FLOAT
+  const normalize = false
+  const stride = 0
+  const offset = 0
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normalBuffer)
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexNormal,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset,
+  )
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexNormal)
+}
+
+function setColorAttribute(gl, buffers, programInfo) {
+  const numComponents = 4
+  const type = gl.FLOAT
+  const normalize = false
+  const stride = 0
+  const offset = 0
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.lineColors)
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexColor,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset,
+  )
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor)
+}
+
+function setTextureAttribute(gl, buffers, programInfo) {
+  const num = 2
+  const type = gl.FLOAT
+  const normalize = false
+  const stride = 0
+  const offset = 0
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureBuffer)
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.textureCoord,
+    num,
+    type,
+    normalize,
+    stride,
+    offset,
+  )
+  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord)
+}
+
+function setTypeAttribute(gl, buffers, programInfo) {
+  const numComponents = 1
+  const type = gl.FLOAT
+  const normalize = false
+  const stride = 0
+  const offset = 0
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.typeBuffer)
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexType,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset)
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexType)
+}
+
+// Initialize texture and load its image.
+function loadTexture(gl, url) {
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  const level = 0
+  const internalFormat = gl.RGBA
+  const width = 1
+  const height = 1
+  const border = 0
+  const srcFormat = gl.RGBA
+  const srcType = gl.UNSIGNED_BYTE
+  const pixel = new Uint8Array([0, 0, 255, 255]) // opaque blue
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel)
+
+  const image = new Image()
+  image.onload = () => {
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image)
+
+    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
+      gl.generateMipmap(gl.TEXTURE_2D)
+    } else {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+    }
+  }
+  image.src = url
+
+  return texture
+}
+
+function isPowerOf2(value) {
+  return (value & (value - 1)) === 0
+}
+
+// Initialize a shader program.
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource)
+
+  const shaderProgram = gl.createProgram()
+  gl.attachShader(shaderProgram, vertexShader)
+  gl.attachShader(shaderProgram, fragmentShader)
+  gl.linkProgram(shaderProgram)
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    console.log(`Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgram)}`)
+    return null
+  }
+
+  return shaderProgram
+}
+
+// Creates a shader of the given type, uploads the source and compiles it.
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type)
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.log(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`)
+    gl.deleteShader(shader)
+    return null
+  }
+
+  return shader
+}
diff --git a/math.js b/math.js
new file mode 100644
index 0000000..6cdeecc
--- /dev/null
+++ b/math.js
@@ -0,0 +1,380 @@
+
+// From glMatrix v4.
+// https://github.com/toji/gl-matrix/tree/glmatrix-next
+// Copyright 2022 Brandon Jones, Colin MacKenzie IV
+const IDENTITY_4X4 = new Float32Array([
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1,
+  ])
+  const EPSILON = 0.000001
+  
+  class Mat4 extends Float32Array {
+    constructor(...values) {
+      switch (values.length) {
+        case 16:
+          super(values)
+          break
+        default:
+          super(IDENTITY_4X4)
+          break
+      }
+    }
+  
+    // Creates a new identity 4x4 Matrix.
+    static create() {
+      return new Mat4()
+    }
+  
+    scale(v) {
+      return Mat4.scale(this, this, v)
+    }
+  
+    static scale(out, a, v) {
+      const x = v[0]
+      const y = v[1]
+  
+      out[0] = x * a[0]
+      out[1] = x * a[1]
+      out[2] = x * a[2]
+  
+      out[3] = y * a[3]
+      out[4] = y * a[4]
+      out[5] = y * a[5]
+  
+      out[6] = a[6]
+      out[7] = a[7]
+      out[8] = a[8]
+      return out
+    }
+  
+    multiply(b) {
+      return Mat4.multiply(this, this, b)
+    }
+  
+    static multiply(out, a, b) {
+      const a00 = a[0]
+      const a01 = a[1]
+      const a02 = a[2]
+      const a03 = a[3]
+      const a10 = a[4]
+      const a11 = a[5]
+      const a12 = a[6]
+      const a13 = a[7]
+      const a20 = a[8]
+      const a21 = a[9]
+      const a22 = a[10]
+      const a23 = a[11]
+      const a30 = a[12]
+      const a31 = a[13]
+      const a32 = a[14]
+      const a33 = a[15]
+  
+      // Cache only the current line of the second matrix
+      let b0 = b[0]
+      let b1 = b[1]
+      let b2 = b[2]
+      let b3 = b[3]
+      out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
+      out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
+      out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
+      out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
+  
+      b0 = b[4]
+      b1 = b[5]
+      b2 = b[6]
+      b3 = b[7]
+      out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
+      out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
+      out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
+      out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
+  
+      b0 = b[8]
+      b1 = b[9]
+      b2 = b[10]
+      b3 = b[11]
+      out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
+      out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
+      out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
+      out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
+  
+      b0 = b[12]
+      b1 = b[13]
+      b2 = b[14]
+      b3 = b[15]
+      out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
+      out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
+      out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
+      out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
+      return out
+    }
+  
+    invert() {
+      return Mat4.invert(this, this)
+    }
+  
+    static invert(out, a) {
+      const a00 = a[0],
+        a01 = a[1],
+        a02 = a[2],
+        a03 = a[3]
+      const a10 = a[4],
+        a11 = a[5],
+        a12 = a[6],
+        a13 = a[7]
+      const a20 = a[8],
+        a21 = a[9],
+        a22 = a[10],
+        a23 = a[11]
+      const a30 = a[12],
+        a31 = a[13],
+        a32 = a[14],
+        a33 = a[15]
+  
+      const b00 = a00 * a11 - a01 * a10
+      const b01 = a00 * a12 - a02 * a10
+      const b02 = a00 * a13 - a03 * a10
+      const b03 = a01 * a12 - a02 * a11
+      const b04 = a01 * a13 - a03 * a11
+      const b05 = a02 * a13 - a03 * a12
+      const b06 = a20 * a31 - a21 * a30
+      const b07 = a20 * a32 - a22 * a30
+      const b08 = a20 * a33 - a23 * a30
+      const b09 = a21 * a32 - a22 * a31
+      const b10 = a21 * a33 - a23 * a31
+      const b11 = a22 * a33 - a23 * a32
+  
+      // Calculate the determinant
+      let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06
+  
+      if (!det) {
+        return null
+      }
+      det = 1.0 / det
+  
+      out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det
+      out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det
+      out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det
+      out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det
+      out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det
+      out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det
+      out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det
+      out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det
+      out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det
+      out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det
+      out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det
+      out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det
+      out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det
+      out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det
+      out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det
+      out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det
+  
+      return out
+    }
+  
+    transpose() {
+      return Mat4.transpose(this, this)
+    }
+  
+    static transpose(out, a) {
+      // If we are transposing ourselves we can skip a few steps but have to cache some values
+      if (out === a) {
+        const a01 = a[1],
+          a02 = a[2],
+          a03 = a[3]
+        const a12 = a[6],
+          a13 = a[7]
+        const a23 = a[11]
+  
+        out[1] = a[4]
+        out[2] = a[8]
+        out[3] = a[12]
+        out[4] = a01
+        out[6] = a[9]
+        out[7] = a[13]
+        out[8] = a02
+        out[9] = a12
+        out[11] = a[14]
+        out[12] = a03
+        out[13] = a13
+        out[14] = a23
+      } else {
+        out[0] = a[0]
+        out[1] = a[4]
+        out[2] = a[8]
+        out[3] = a[12]
+        out[4] = a[1]
+        out[5] = a[5]
+        out[6] = a[9]
+        out[7] = a[13]
+        out[8] = a[2]
+        out[9] = a[6]
+        out[10] = a[10]
+        out[11] = a[14]
+        out[12] = a[3]
+        out[13] = a[7]
+        out[14] = a[11]
+        out[15] = a[15]
+      }
+  
+      return out
+    }
+  
+    // WebGL/OpenGL compat (z range [-1, 1])
+    perspective(fovy, aspect, near, far) {
+      return Mat4.perspective(this, fovy, aspect, near, far)
+    }
+  
+    // WebGL/OpenGL compat (z range [-1, 1])
+    static perspective(out, fovy, aspect, near, far) {
+      const f = 1.0 / Math.tan(fovy / 2)
+      out[0] = f / aspect
+      out[1] = 0
+      out[2] = 0
+      out[3] = 0
+      out[4] = 0
+      out[5] = f
+      out[6] = 0
+      out[7] = 0
+      out[8] = 0
+      out[9] = 0
+      out[11] = -1
+      out[12] = 0
+      out[13] = 0
+      out[15] = 0
+      if (far != null && far !== Infinity) {
+        const nf = 1 / (near - far)
+        out[10] = (far + near) * nf
+        out[14] = 2 * far * near * nf
+      } else {
+        out[10] = -1
+        out[14] = -2 * near
+      }
+      return out
+    }
+  
+    rotate(rad, axis) {
+      return Mat4.rotate(this, this, rad, axis)
+    }
+  
+    static rotate(out, a, rad, axis) {
+      let x = axis[0]
+      let y = axis[1]
+      let z = axis[2]
+      let len = Math.sqrt(x * x + y * y + z * z)
+  
+      if (len < EPSILON) {
+        return null
+      }
+  
+      len = 1 / len
+      x *= len
+      y *= len
+      z *= len
+  
+      const s = Math.sin(rad)
+      const c = Math.cos(rad)
+      const t = 1 - c
+  
+      const a00 = a[0]
+      const a01 = a[1]
+      const a02 = a[2]
+      const a03 = a[3]
+      const a10 = a[4]
+      const a11 = a[5]
+      const a12 = a[6]
+      const a13 = a[7]
+      const a20 = a[8]
+      const a21 = a[9]
+      const a22 = a[10]
+      const a23 = a[11]
+  
+      // Construct the elements of the rotation matrix
+      const b00 = x * x * t + c
+      const b01 = y * x * t + z * s
+      const b02 = z * x * t - y * s
+      const b10 = x * y * t - z * s
+      const b11 = y * y * t + c
+      const b12 = z * y * t + x * s
+      const b20 = x * z * t + y * s
+      const b21 = y * z * t - x * s
+      const b22 = z * z * t + c
+  
+      // Perform rotation-specific matrix multiplication
+      out[0] = a00 * b00 + a10 * b01 + a20 * b02
+      out[1] = a01 * b00 + a11 * b01 + a21 * b02
+      out[2] = a02 * b00 + a12 * b01 + a22 * b02
+      out[3] = a03 * b00 + a13 * b01 + a23 * b02
+      out[4] = a00 * b10 + a10 * b11 + a20 * b12
+      out[5] = a01 * b10 + a11 * b11 + a21 * b12
+      out[6] = a02 * b10 + a12 * b11 + a22 * b12
+      out[7] = a03 * b10 + a13 * b11 + a23 * b12
+      out[8] = a00 * b20 + a10 * b21 + a20 * b22
+      out[9] = a01 * b20 + a11 * b21 + a21 * b22
+      out[10] = a02 * b20 + a12 * b21 + a22 * b22
+      out[11] = a03 * b20 + a13 * b21 + a23 * b22
+  
+      if (a !== out) {
+        // If the source and destination differ, copy the unchanged last row
+        out[12] = a[12]
+        out[13] = a[13]
+        out[14] = a[14]
+        out[15] = a[15]
+      }
+      return out
+    }
+  
+    translate(v) {
+      return Mat4.translate(this, this, v)
+    }
+  
+    static translate(out, a, v) {
+      const x = v[0]
+      const y = v[1]
+      const z = v[2]
+  
+      if (a === out) {
+        out[12] = a[0] * x + a[4] * y + a[8] * z + a[12]
+        out[13] = a[1] * x + a[5] * y + a[9] * z + a[13]
+        out[14] = a[2] * x + a[6] * y + a[10] * z + a[14]
+        out[15] = a[3] * x + a[7] * y + a[11] * z + a[15]
+      } else {
+        const a00 = a[0]
+        const a01 = a[1]
+        const a02 = a[2]
+        const a03 = a[3]
+        const a10 = a[4]
+        const a11 = a[5]
+        const a12 = a[6]
+        const a13 = a[7]
+        const a20 = a[8]
+        const a21 = a[9]
+        const a22 = a[10]
+        const a23 = a[11]
+  
+        out[0] = a00
+        out[1] = a01
+        out[2] = a02
+        out[3] = a03
+        out[4] = a10
+        out[5] = a11
+        out[6] = a12
+        out[7] = a13
+        out[8] = a20
+        out[9] = a21
+        out[10] = a22
+        out[11] = a23
+  
+        out[12] = a00 * x + a10 * y + a20 * z + a[12]
+        out[13] = a01 * x + a11 * y + a21 * z + a[13]
+        out[14] = a02 * x + a12 * y + a22 * z + a[14]
+        out[15] = a03 * x + a13 * y + a23 * z + a[15]
+      }
+  
+      return out
+    }
+  
+  }
+
+  export { Mat4 }
\ No newline at end of file
diff --git a/moody.js b/moody.js
index 362c2da..4d23900 100644
--- a/moody.js
+++ b/moody.js
@@ -1,4 +1,3 @@
-"use strict";
 const sineOfOneArcsecond = 0.00000484813
 
 function roundTo(n, numDecimalPlaces) {
@@ -481,1481 +480,4 @@ class MoodyReport {
   }
 }
 
-// Moody's original paper states 48x78 which is a non-standard size. It is most likely a typo. Bruce Allen's corrections paper states:
-
-// Table 1 carries the title “Worksheets for Calibrating a 48 x 78-Inch Surface Plate”. The diagonal length of
-// such a plate would be slightly less than 92 inches. However the first and second worksheets indicate diagonal
-// stations beginning at 3 inches and ending at 83 inches. That is consistent with a 48 x 72 inch surface plate
-// (also a US standard size [13]) which has an 86.5-inch diagonal. The title of the Table 1 should be 
-// “Worksheets for Calibrating a 48 x 72-Inch Surface Plate”. 
-const moodySurfacePlateHeightInches = 48
-const moodySurfacePlateWidthInches = 72
-const moodyReflectorFootSpacingInches = 4
-// TODO: Use a unit pair to specify reflector foot spacing and surface plate width/height and remove naming *Inches
-const moodyData =  [
-  [6.5, 6.0, 5.0, 5.2, 5.5, 5.6, 5.5, 5.0, 5.5, 4.8, 5.0, 5.2, 5.3, 4.9, 4.6, 4.2, 5.3, 4.9, 4.5, 3.5], // topStartingDiagonal
-  [6.6, 5.4, 5.4, 5.2, 5.5, 5.7, 5.0, 5.0, 5.4, 4.5, 4.4, 4.5, 4.5, 4.8, 4.2, 4.2, 4.2, 4.8, 4.3, 3.2], // bottomStartingDiagonal
-  [20.5, 19.7, 20.5, 20.3, 20.2, 19.9, 19.0, 19.5, 18.8, 18.6, 18.7, 18.6, 18.4, 18.5, 19.0, 17.9],     // northPerimeter
-  [3.5, 2.1, 2.5, 2.8, 3.4, 3.2, 3.5, 4.0, 4.2, 3.5],                                                   // eastPerimeter
-  [16.4, 15, 15.6, 15.5, 15.1, 15.3, 15.1, 14.6, 14, 13.5, 13.5, 13.3, 13.3, 13.4, 14, 13.9],           // southPerimeter
-  [6, 4.6, 4.5, 4.7, 5.0, 4.5, 5.9, 6, 6, 4.9],                                                         // westPerimeter
-  [11.7, 12.4, 12.1, 12.5, 12.0, 11.5, 11.5, 11.3, 11.3, 10.3, 10.8, 10.3, 10, 10.7, 10.4, 10.4],       // horizontalCenter
-  [6.6, 6.4, 6.3, 6.5, 6.6, 6.9, 7.5, 7.4, 7.1, 7]]                                                     // verticalCenter
-
-const lines = [ "topStartingDiagonal", "bottomStartingDiagonal", "northPerimeter", "eastPerimeter", "southPerimeter",
-  "westPerimeter", "horizontalCenter", "verticalCenter"]
-window.addEventListener('DOMContentLoaded', () => {
-  // FIXME: This is just for testing - so we don't have to type in the values each time.
-  document.getElementById("plateHeight").value = moodySurfacePlateHeightInches
-  document.getElementById("plateWidth").value = moodySurfacePlateWidthInches
-  document.getElementById("reflectorFootSpacing").value = moodyReflectorFootSpacingInches
-
-  zMultiplier = document.querySelector("#zMultiplier").value
-  document.getElementById('fillTestData').addEventListener("click", () => {
-    lines.forEach((line, lineIndex) => {
-      moodyData[lineIndex].forEach((tableEntry, index) => {
-          document.getElementById(line + "Table" + (index + 1)).value = tableEntry
-      })
-    })
-    // Trigger table refresh.
-    document.getElementsByClassName("readingInput")[0].dispatchEvent(new Event('input', { bubbles: true }))
-  })
-
-  document.getElementById("createTables").addEventListener("click", () => {
-    createTables()
-  })
-
-})
-
-// Creates the tables for each line (along with its' own table graphic) and adds to the DOM.
-function createTables() {
-  const surfacePlate = new SurfacePlate(document.getElementById("plateHeight").value,
-    document.getElementById("plateWidth").value, document.getElementById("reflectorFootSpacing").value)
-  document.getElementById('plateDiagonal').value = surfacePlate.surfacePlateDiagonalInches
-  document.getElementById('diagonalInset').value = surfacePlate.suggestedDiagonalInset
-  document.getElementById('numHorizontalStations').value = surfacePlate.suggestedNumberOfHorizontalStations
-  document.getElementById('numVerticalStations').value = surfacePlate.suggestedNumberOfVerticalStations
-  document.getElementById('numDiagonalStations').value = surfacePlate.suggestedNumberOfDiagonalStations
-  const plateDiagonalFull = Math.sqrt(((surfacePlate.surfacePlateHeightInches * surfacePlate.surfacePlateHeightInches) +
-    (surfacePlate.surfacePlateWidthInches * surfacePlate.surfacePlateWidthInches)))
-  const gradeAAFlatnessReq = .04 * (plateDiagonalFull * plateDiagonalFull) + 40
-  document.getElementById('gradeAA').value = roundTo(gradeAAFlatnessReq, 2)
-  document.getElementById('gradeA').value = roundTo(gradeAAFlatnessReq * 2, 2)
-  document.getElementById('gradeB').value = roundTo(gradeAAFlatnessReq * 4, 2)
-  const plateDiagonalFullMicrometers = plateDiagonalFull * 25.4
-  const isoGrade0FlatnessReq = 0.003 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 2.5
-  document.getElementById('grade0').value = roundTo(isoGrade0FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
-  const isoGrade1FlatnessReq = 0.006 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 5
-  document.getElementById('grade1').value = roundTo(isoGrade1FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
-  const isoGrade2FlatnessReq = 0.012 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 10
-  document.getElementById('grade2').value = roundTo(isoGrade2FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
-  const isoGrade3FlatnessReq = 0.024 * (Math.ceil(plateDiagonalFullMicrometers / 100) * 100) + 20
-  document.getElementById('grade3').value = roundTo(isoGrade3FlatnessReq * 39.37, 2) // Convert from micrometers to microinches
-  const flatnessInputs = [document.getElementById('gradeAA'), document.getElementById('gradeA'), document.getElementById('gradeB'),
-    document.getElementById('grade0'), document.getElementById('grade1'), document.getElementById('grade2'), document.getElementById('grade3')]
-  document.getElementById("overallFlatness").addEventListener("input", event => {
-   for (const flatnessInput of flatnessInputs) {
-     if (Number(event.target.value) <= Number(flatnessInput.value)) {
-       flatnessInput.style.background = '#C6EFCE'
-     } else {
-       flatnessInput.style.background = '#FFC7CE'
-     }
-   }
-  })
-
-  createTableGraphic(surfacePlate)
-
-  lines.forEach(line => {
-    const linePropertyName = line[0].toUpperCase() + line.slice(1)
-    document.getElementById(line + "Table").createCaption().textContent =
-      surfacePlate[linePropertyName].name + " (" + surfacePlate[linePropertyName].displayName() + ")"
-    // Delete all non-header rows from table.
-    Array.from(document.getElementById(line + "Table").getElementsByTagName("tbody")[0].getElementsByTagName("tr")).forEach(tr => tr.remove())
-    // Delete all previously constructed SVG table graphics (for each line).
-    if (document.getElementById(line + "TableSvg") != null) {
-      document.getElementById(line + "TableSvg").remove()
-    }
-    const numberOfStations = getNumberOfStations(line, surfacePlate)
-
-    for (let i = 0; i <= numberOfStations; i++) {
-      // Create the table rows.
-      const row = document.getElementById(line + "Table").getElementsByTagName("tbody")[0].insertRow()
-      row.insertCell().textContent = i + 1
-      const readingInput = document.createElement("input")
-      readingInput.inputMode = "decimal"
-      readingInput.required = true
-      readingInput.pattern = "[0-9]*[.,]{0,1}[0-9]*"
-      readingInput.id = line + "Table" + i
-      readingInput.classList.add("readingInput", line + "ReadingInput")
-      readingInput.addEventListener("input", event => {
-        refreshTables(event, lines, surfacePlate)
-      })
-      row.insertCell().appendChild(readingInput)
-    }
-    document.getElementById(line + "Table").style.visibility = "visible"
-
-    // Create the table graphics for each line (with the others greyed out).
-    const tableGraphic = document.getElementById("tableGraphic")
-    const specificLineTableGraphic = tableGraphic.cloneNode(true)
-    specificLineTableGraphic.id = line + "TableSvg"
-    specificLineTableGraphic.setAttribute("width", "97%")
-    lines.filter(l => l !== line).forEach(otherLine => {
-      specificLineTableGraphic.getElementById(otherLine + "LineGroup").setAttribute("stroke", "#A0A0A0")
-      specificLineTableGraphic.getElementById(otherLine + "LineGroup").setAttribute("fill", "#A0A0A0")
-    })
-    document.getElementById(line + "TableSvgContainer").appendChild(specificLineTableGraphic)
-  })
-
-  // Now that the rows have been created, set the first input for autocollimator readings to 0 and readonly.
-  lines.forEach(line => {
-    document.getElementById(line + "Table0").value = "0"
-    document.getElementById(line + "Table0").readOnly = true
-  })
-}
-
-// Creates the main (with multi-colored lines) SVG table graphic and adds it to the DOM.
-function createTableGraphic(surfacePlate) {
-  const surfacePlateWidthInches = Number(document.getElementById("plateWidth").value)
-  const surfacePlateHeightInches = Number(document.getElementById("plateHeight").value)
-  document.getElementById('tableGraphic').style.visibility = "visible"
-  const surfacePlatePercentHeight = 100 * (surfacePlateHeightInches / (surfacePlateWidthInches + surfacePlateHeightInches))
-  const surfacePlatePercentWidth = 100 * (surfacePlateWidthInches / (surfacePlateWidthInches + surfacePlateHeightInches))
-  document.getElementById('tableGraphic').setAttribute("viewBox", "0 0 " + surfacePlatePercentWidth + " " + surfacePlatePercentHeight)
-  document.getElementById('tableGraphic').setAttribute("width", "30%")
-  document.getElementById('outsideRect').setAttribute("width", surfacePlatePercentWidth)
-  document.getElementById('outsideRect').setAttribute("height", surfacePlatePercentHeight)
-  const plateDiagonalAngle = Math.atan(surfacePlateWidthInches / surfacePlateHeightInches)
-  const xInset = surfacePlate.suggestedDiagonalInset * Math.sin(plateDiagonalAngle)
-  const yInset = surfacePlate.suggestedDiagonalInset * Math.cos(plateDiagonalAngle)
-  document.getElementById('insideRect').setAttribute("x", xInset)
-  document.getElementById('insideRect').setAttribute("y", yInset)
-  document.getElementById('insideRect').setAttribute("width", surfacePlatePercentWidth - (2 * xInset))
-  document.getElementById('insideRect').setAttribute("height", surfacePlatePercentHeight - (2 * yInset))
-
-  // Setup each path of the table SVG graphic (move to start position, draw to end position).
-  document.getElementById('topStartingDiagonalLine').setAttribute("d", `M ${xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset}`)
-  document.getElementById('bottomStartingDiagonalLine').setAttribute("d", `M ${xInset} ${surfacePlatePercentHeight - yInset} L ${surfacePlatePercentWidth - xInset} ${yInset}`)
-  document.getElementById('northPerimeterLine').setAttribute("d", `M ${xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${yInset}`)
-  document.getElementById('eastPerimeterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${yInset} L ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset}`)
-  document.getElementById('southPerimeterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight - yInset} L ${xInset} ${surfacePlatePercentHeight - yInset}`)
-  document.getElementById('westPerimeterLine').setAttribute("d", `M ${xInset} ${surfacePlatePercentHeight - yInset} L ${xInset} ${yInset}`)
-  document.getElementById('horizontalCenterLine').setAttribute("d", `M ${surfacePlatePercentWidth - xInset} ${surfacePlatePercentHeight / 2} L ${xInset} ${surfacePlatePercentHeight / 2}`)
-  document.getElementById('verticalCenterLine').setAttribute("d", `M ${surfacePlatePercentWidth / 2} ${yInset} L ${surfacePlatePercentWidth / 2} ${surfacePlatePercentHeight - yInset}`)
-}
-
-// Returns the number of stations for the given line.
-function getNumberOfStations(line, surfacePlate) {
-  if (line.endsWith('Diagonal')) {
-    return surfacePlate.suggestedNumberOfDiagonalStations
-  } else if (line.startsWith('north') || line.startsWith('south') || line.startsWith('horizontal')) {
-    return surfacePlate.suggestedNumberOfHorizontalStations
-  } else {
-    return surfacePlate.suggestedNumberOfVerticalStations
-  }
-}
-
-// Recalculates the values by creating a new MoodyReport and updates the table cell values accordingly.
-function refreshTables(event, lines, surfacePlate) {
-  // One of the autocollimator readings have changed - so recalculate everything (by making a new MoodyReport).
-  const readingInputs = document.getElementsByClassName("readingInput")
-  if (readingInputs.length > 0) {
-    if (Array.from(readingInputs).filter(readingInput => readingInput.value !== '').length == readingInputs.length) {
-      // All inputs for autocollimator readings are non-empty, so create new MoodyTable with the readings.
-      const moodyReport = new MoodyReport(surfacePlate,
-        Array.from(document.getElementsByClassName("topStartingDiagonalReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("bottomStartingDiagonalReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("northPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("eastPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("southPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("westPerimeterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("horizontalCenterReadingInput")).filter(input => input.readOnly == false).map(input => input.value),
-        Array.from(document.getElementsByClassName("verticalCenterReadingInput")).filter(input => input.readOnly == false).map(input => input.value))
-
-      const allZPositions = moodyReport.vertices().map(point => point[2])
-      const overallFlatness = (Math.max(...allZPositions) - Math.min(...allZPositions)) * 1000000 // Convert inches to microinches.
-      document.getElementById("overallFlatness").value = overallFlatness
-      document.getElementById("overallFlatness").dispatchEvent(new Event('input', { 'bubbles': true }))
-      /*
-      const allXPositions = moodyReport.vertices().map(point => point[0])
-      const allYPositions = moodyReport.vertices().map(point => point[1])
-
-      console.log(allXPositions)
-      console.log(allYPositions)
-      console.log("EXCEL CSV:\r\n")
-      for (let i = 0; i < allXPositions.length; i++) {
-        console.log(allXPositions[i] + ", " + allYPositions[i])
-      }
-      */
-      let tableModelMatrix = Mat4.create()
-      initialize3DTableGraphic(moodyReport, tableModelMatrix)
-
-      lines.forEach(l => {
-        Array.from(document.getElementById(l + "Table").getElementsByTagName("tbody")[0].rows).forEach((tableRow, index) => {
-          const column3Input = document.createElement("input")
-          column3Input.readOnly = true
-          column3Input.value = moodyReport[l + "Table"].angularDisplacements[index]
-          if (tableRow.cells.length > 2) {
-            tableRow.deleteCell(2)
-          }
-          tableRow.insertCell(2).appendChild(column3Input)
-
-          const column4Input = document.createElement("input")
-          column4Input.readOnly = true
-          column4Input.value = moodyReport[l + "Table"].sumOfDisplacements[index]
-          if (tableRow.cells.length > 3) {
-            tableRow.deleteCell(3)
-          }
-          tableRow.insertCell(3).appendChild(column4Input)
-
-          const column5Input = document.createElement("input")
-          column5Input.readOnly = true
-          column5Input.value = moodyReport[l + "Table"].cumulativeCorrectionFactors[index]
-          if (tableRow.cells.length > 4) {
-            tableRow.deleteCell(4)
-          }
-          tableRow.insertCell(4).appendChild(column5Input)
-
-          const column6Input = document.createElement("input")
-          column6Input.readOnly = true
-          column6Input.value = moodyReport[l + "Table"].displacementsFromDatumPlane[index]
-          if (tableRow.cells.length > 5) {
-            tableRow.deleteCell(5)
-          }
-          tableRow.insertCell(5).appendChild(column6Input)
-
-          const column7Input = document.createElement("input")
-          column7Input.readOnly = true
-          column7Input.value = moodyReport[l + "Table"].displacementsFromBaseLine[index]
-          if (tableRow.cells.length > 6) {
-            tableRow.deleteCell(6)
-          }
-          tableRow.insertCell(6).appendChild(column7Input)
-
-          const column8Input = document.createElement("input")
-          column8Input.readOnly = true
-          column8Input.value = (moodyReport[l + "Table"].displacementsFromBaseLineLinear[index] * 10000).toFixed(4)
-          if (tableRow.cells.length > 7) {
-            tableRow.deleteCell(7)
-          }
-          tableRow.insertCell(7).appendChild(column8Input)
-        })
-      })
-    }
-  }
-}
-
-const keyMap = []
-let lastMappedPosition = null
-let cumulativeZoomFactor = 1
-let zMultiplier = -1
-let buffers = null
-let showLines = true
-let showHeatmap = true
-let lightingOn = true
-
-function mapToSphere(dx, dy, canvas) {
-  const x = (2 * event.clientX - canvas.width) / canvas.width
-  const y = (canvas.height - 2 * event.clientY) / canvas.height
-  const z = 0.0
-  const length = Math.sqrt(dx * dx + dy * dy)
-  const d = length < 1.0 ? length : 1.0
-  return new Vector3(x, y, Math.sqrt(1.001 - d * d)).norm()
-}
-
-function initialize3DTableGraphic(moodyReport, tableModelMatrix) {
-  const canvas = document.getElementById("glcanvas")
-  // const gl = canvas.getContext("webgl2")
-  const gl = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl2"))
-  if (gl === null) {
-    console.log("Unable to initialize WebGL. Your browser or machine may not support it.")
-    const ctx = canvas.getContext("2d")
-
-    ctx.font = "30px Arial"
-    ctx.fillStyle = "red"
-    ctx.textAlign = "center"
-    ctx.fillText("Unable to initialize WebGL!", canvas.width / 2, canvas.height / 2)
-    return
-  }
-
-  document.querySelector("#zMultiplier").addEventListener("input", event => {
-    zMultiplier = event.target.value
-    buffers = getBuffers(gl, moodyReport, zMultiplier)
-  })
-
-  document.getElementById("showLines").addEventListener("change", event => showLines = event.target.checked)
-  document.getElementById("showHeatmap").addEventListener("change", event => showHeatmap = event.target.checked)
-  document.getElementById("lightingOn").addEventListener("change", event => lightingOn = event.target.checked)
-
-  canvas.onmousedown = event => {
-    lastMappedPosition = mapToSphere(event.clientX, event.clientY, canvas)
-  }
-
-  document.onmouseup = () => { lastMappedPosition = null }
-
-  document.onmousemove = () => {
-    if (lastMappedPosition) {
-      // With the current rotation behavior the original mouse point that started the rotation acts as the origin
-      // point, and so dragging away from it rotates the table according to the mouse direction and then going back
-      // to that point resets to the original rotation - but if you go past the origin point in the other direction
-      // it rotates slower...why is that?
-      // Map mouse displacement onto virtual sphere.
-      const mapped = mapToSphere(event.clientX, event.clientY, canvas)
-      const direction = new Vector3(mapped.x - lastMappedPosition.x, mapped.y - lastMappedPosition.y, 0)
-      const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y)
-      // Determine rotation axis.
-      const axis = lastMappedPosition.cross(mapped)
-
-      const newRotationMatrix = Mat4.create()
-      // TODO: Cache these vertices for a given zMultiplier (memoize).
-      const vertices = moodyReport.vertices(zMultiplier).map(vertex => new Vertex(vertex[0], vertex[1], vertex[2])).flat(1)
-      const minX = Math.min(...vertices.map(vertex => vertex.x))
-      const maxX = Math.max(...vertices.map(vertex => vertex.x))
-      const minY = Math.min(...vertices.map(vertex => vertex.y))
-      const maxY = Math.max(...vertices.map(vertex => vertex.y))
-      const minZ = Math.min(...vertices.map(vertex => vertex.z))
-      const maxZ = Math.max(...vertices.map(vertex => vertex.z))
-      // Axis is a unit vector from the origin (bottom-left corner of surface plate) in the direction the mouse travelled.
-      // We need it to be a unit vector from the center of the surface plate instead.
-      newRotationMatrix.translate([(maxX - minX) / 2, (maxY - minY) / 2, (maxZ - minZ) / 2])
-      newRotationMatrix.rotate(length, [axis.x, 0, axis.y])
-      newRotationMatrix.translate([-((maxX - minX) / 2), -((maxY - minY) / 2), -((maxZ - minZ) / 2)])
-      tableModelMatrix.multiply(newRotationMatrix)
-      lastMappedPosition = mapped
-    }
-  }
-
-  canvas.onwheel = event => {
-    event.preventDefault()
-    const direction = event.deltaY < 0 ? 1 : -1
-    const zoomFactor = 1 + direction * 0.1
-    if (cumulativeZoomFactor < 0.16 || cumulativeZoomFactor > 10) {
-      // Max zoom level reached, don't zoom anymore.
-      return
-    }
-    cumulativeZoomFactor *= zoomFactor
-    const scaleMatrix = Mat4.create()
-    scaleMatrix.scale([zoomFactor, zoomFactor, zoomFactor])
-    tableModelMatrix.multiply(scaleMatrix)
-  }
-
-  // Pretty weird hack that allows the canvas to be focused and thus receive keydown events.
-  canvas.tabIndex = 1
-
-  canvas.onkeyup = event => {
-    keyMap[event.key] = false
-  }
-
-  canvas.onkeydown = event => {
-    event.preventDefault()
-    keyMap[event.key] = true
-    const translateMatrix = Mat4.create()
-    if (keyMap['ArrowUp'] === true) {
-      translateMatrix.translate([0, -1.0, 0.0])
-    }
-    if (keyMap['ArrowDown'] === true) {
-      translateMatrix.translate([0, 1.0, 0.0])
-    }
-    if (keyMap['ArrowRight'] === true) {
-      translateMatrix.translate([-1.0, 0.0, 0.0])
-    }
-    if (keyMap['ArrowLeft'] === true) {
-      translateMatrix.translate([1.0, 0.0, 0.0])
-    }
-    if (keyMap['w'] === true) {
-      // translateMatrix.rotate(0.1, [0.0, 0.0, -1.0])
-      translateMatrix.translate([0.0, 0.0, -1.0])
-    }
-    if (keyMap['s'] === true) {
-      // translateMatrix.rotate(0.1, [0.0, 0.0, 1.0])
-      translateMatrix.translate([0.0, 0.0, 1.0])
-    }
-    tableModelMatrix.multiply(translateMatrix)
-  }
-
-  const texture = loadTexture(gl, "granite_2048x2048_compressed.png")
-  // Flip image pixels into the bottom-to-top order that WebGL expects.
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
-
-  gl.clearColor(0.0, 0.0, 0.0, 1.0)
-  gl.clear(gl.COLOR_BUFFER_BIT)
-
-  const shaderProgram = initShaderProgram(gl, vsSource, fsSource)
-  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, "vertexPosition"),
-      vertexNormal: gl.getAttribLocation(shaderProgram, "vertexNormal"),
-      vertexColor: gl.getAttribLocation(shaderProgram, "vertexColor"),
-      textureCoord: gl.getAttribLocation(shaderProgram, "vertexTextureCoord"),
-      vertexType: gl.getAttribLocation(shaderProgram, "vertexType"),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(shaderProgram, "projectionMatrix"),
-      modelMatrix: gl.getUniformLocation(shaderProgram, "modelMatrix"),
-      viewMatrix: gl.getUniformLocation(shaderProgram, "viewMatrix"),
-      normalMatrix: gl.getUniformLocation(shaderProgram, "normalMatrix"),
-      lightPos: gl.getUniformLocation(shaderProgram, "lightPos"),
-      lightPower: gl.getUniformLocation(shaderProgram, "lightPower"),
-      sampler: gl.getUniformLocation(shaderProgram, "sampler"),
-      showLines: gl.getUniformLocation(shaderProgram, "showLines"),
-      showHeatmap: gl.getUniformLocation(shaderProgram, "showHeatmap"),
-      lightingOn: gl.getUniformLocation(shaderProgram, "lightingOn"),
-    },
-  }
-  buffers = getBuffers(gl, moodyReport, zMultiplier)
-
-  function render() {
-    drawTableSurface(moodyReport, gl, programInfo, buffers, tableModelMatrix, texture)
-    requestAnimationFrame(render)
-  }
-  requestAnimationFrame(render)
-}
-
-// Creates a 3D surface of the linear plate heights (calculated as Column #8 of the line tables).
-function drawTableSurface(moodyReport, gl, programInfo, buffers, tableModelMatrix, texture) {
-  gl.clearColor(0.0, 0.0, 0.0, 1.0)
-  gl.clearDepth(1.0)
-  gl.enable(gl.DEPTH_TEST)
-  gl.depthFunc(gl.LEQUAL)
-
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
-
-  const fieldOfView = (45 * Math.PI) / 180 // radians
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
-  const zNear = 0.1
-  const zFar = 1000.0
-  const projectionMatrix = Mat4.create()
-
-  projectionMatrix.perspective(fieldOfView, aspect, zNear, zFar)
-
-  const modelMatrix = Mat4.create()
-  modelMatrix.multiply(tableModelMatrix)
-
-  const viewMatrix = Mat4.create()
-  // FIXME: Don't use magic numbers. Something like maxX - minX / 2 (for x and y) and maybe 8-10 times table z-height.
-  viewMatrix.translate([-35.0, -24.0, -70.0])
-
-  setPositionAttribute(gl, buffers, programInfo)
-  setNormalAttribute(gl, buffers, programInfo)
-  setColorAttribute(gl, buffers, programInfo)
-  setTextureAttribute(gl, buffers, programInfo)
-  setTypeAttribute(gl, buffers, programInfo)
-
-  gl.useProgram(programInfo.program)
-
-  const normalMatrix = Mat4.create()
-  Mat4.invert(normalMatrix, viewMatrix.multiply(tableModelMatrix))
-  Mat4.transpose(normalMatrix, normalMatrix)
-
-  let lightPos = [document.getElementById("lightPosX").value, document.getElementById("lightPosY").value, document.getElementById("lightPosZ").value]
-  let lightPower = document.getElementById("lightPower").value
-
-  gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix)
-  gl.uniformMatrix4fv(programInfo.uniformLocations.modelMatrix, false, modelMatrix)
-  gl.uniformMatrix4fv(programInfo.uniformLocations.viewMatrix, false, viewMatrix)
-  gl.uniformMatrix4fv(programInfo.uniformLocations.normalMatrix, false, normalMatrix)
-  gl.uniform3fv(programInfo.uniformLocations.lightPos, lightPos)
-  gl.uniform1f(programInfo.uniformLocations.lightPower, lightPower)
-  gl.activeTexture(gl.TEXTURE0)
-  gl.bindTexture(gl.TEXTURE_2D, texture)
-  gl.uniform1i(programInfo.uniformLocations.sampler, 0)
-  gl.uniform1i(programInfo.uniformLocations.showLines, showLines)
-  gl.uniform1i(programInfo.uniformLocations.showHeatmap, showHeatmap)
-  gl.uniform1i(programInfo.uniformLocations.lightingOn, lightingOn)
-
-  {
-    let offset = 0
-    let vertexCount = moodyReport.topStartingDiagonalTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.bottomStartingDiagonalTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.northPerimeterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.eastPerimeterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.southPerimeterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.westPerimeterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.horizontalCenterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = moodyReport.verticalCenterTable.vertices().flat(1).length / 3
-    gl.drawArrays(gl.LINE_STRIP, offset, vertexCount)
-
-    offset += vertexCount
-    vertexCount = buffers.triangleVertices.length
-    gl.drawArrays(gl.TRIANGLES, offset, vertexCount / 3)
-  }
-}
-
-const vsSource = `#version 300 es
-    in vec4 vertexPosition;
-    in vec3 vertexNormal;
-    in vec4 vertexColor;
-    in vec2 vertexTextureCoord;
-    in float vertexType;
-    uniform mat4 modelMatrix;
-    uniform mat4 viewMatrix;
-    uniform mat4 projectionMatrix;
-    uniform mat4 normalMatrix;
-    out lowp vec4 color;
-    out highp vec2 textureCoord;
-    out highp vec3 normalInterp;
-    out highp vec3 vertPos;
-    out highp float vVertexType;
-
-    void main() {
-      gl_Position = projectionMatrix * viewMatrix * modelMatrix * vertexPosition;
-      color = vertexColor;
-      textureCoord = vertexTextureCoord;
-      vVertexType = vertexType;
-
-      normalInterp = vec3(normalMatrix * vec4(vertexNormal, 0.0));
-      vec4 vertPos4 = viewMatrix * modelMatrix * vertexPosition;
-      vertPos = vec3(vertPos4) / vertPos4.w;
-    }
-`
-
-const fsSource = `#version 300 es
-    precision mediump float;
-    in lowp vec4 color;
-    in vec3 normalInterp;
-    in vec3 vertPos;
-    in highp vec2 textureCoord;
-    in highp float vVertexType;
-    const highp vec3 lightColor = vec3(1.0, 1.0, 1.0);
-    const highp vec3 ambientColor = vec3(0.4, 0.4, 0.4);
-    const highp vec3 diffuseColor = vec3(0.2, 0.2, 0.2);
-    const highp vec3 specColor = vec3(1.0, 1.0, 1.0);
-    const highp float shininess = 8.0;
-    const highp float screenGamma = 2.2; // Assume the monitor is calibrated to the sRGB color space
-    uniform vec3 lightPos;
-    uniform float lightPower;
-    uniform sampler2D sampler;
-    uniform bool showLines;
-    uniform bool showHeatmap;
-    uniform bool lightingOn;
-    out vec4 outputColor;
-
-    void main() {
-      if (vVertexType == 0.0) {
-        // This vertex belongs to one of the Union jack Moody lines.
-        if (showLines) {
-          outputColor = color;
-        } else {
-          discard;
-        }
-      } else {
-        // This vertex belongs to the table mesh.
-        vec3 normal = normalize(normalInterp);
-        vec3 lightDir = lightPos - vertPos;
-        float distance = length(lightDir);
-
-        distance = distance * distance;
-        lightDir = normalize(lightDir);
-
-        float lambertian = max(dot(lightDir, normal), 0.0);
-        float specular = 0.0;
-
-        if (lambertian > 0.0) {
-          vec3 viewDir = normalize(-vertPos);
-          vec3 halfDir = normalize(lightDir + viewDir);
-          float specAngle = max(dot(halfDir, normal), 0.0);
-          specular = pow(specAngle, shininess);
-        }
-
-        vec3 colorLinear = ambientColor +
-                           diffuseColor * lambertian * lightColor * lightPower / distance +
-                           specColor * specular * lightColor * lightPower / distance;
-        // apply gamma correction (assume ambientColor, diffuseColor and specColor
-        // have been linearized, i.e. have no gamma correction in them)
-        vec3 colorGammaCorrected = pow(colorLinear, vec3(1.0 / screenGamma));
-        if (!showHeatmap) {
-          if (lightingOn) {
-            outputColor = texture(sampler, textureCoord) * vec4(colorGammaCorrected, 1.0);
-          } else {
-            outputColor = texture(sampler, textureCoord);
-          }
-        } else {
-          if (lightingOn) {
-            // No heatmap - show the table with a granite texture.
-            outputColor = vec4(color.rgb * colorGammaCorrected, 1.0);
-          } else {
-            outputColor = color;
-          }
-        }
-      }
-    }
-`
-
-function getBuffers(gl, moodyReport, zMultiplier) {
-  const positionBuffer = getPositionBuffer(gl, moodyReport, zMultiplier)
-  const lineColorBuffer = getColorBuffer(gl, moodyReport, positionBuffer.triangleVertices)
-
-  return {
-    positionBuffer: positionBuffer.positionBuffer,
-    normalBuffer: positionBuffer.normalBuffer,
-    triangleVertices: positionBuffer.triangleVertices,
-    textureBuffer: positionBuffer.textureBuffer,
-    typeBuffer: positionBuffer.typeBuffer,
-    lineColors: lineColorBuffer,
-  }
-}
-
-function getPositionBuffer(gl, moodyReport, zMultiplier) {
-  const vertices = moodyReport.vertices(zMultiplier).map(vertex => new Vertex(vertex[0], vertex[1], vertex[2])).flat(1)
-
-  const triangulation = bowyerWatson(vertices)
-
-  const triangulatedVertices = triangulation.map(triangle => [
-    triangle.v0.x, triangle.v0.y, triangle.v0.z,
-    triangle.v1.x, triangle.v1.y, triangle.v1.z,
-    triangle.v2.x, triangle.v2.y, triangle.v2.z]).flat(1)
-
-  // FIXME: We want the line to always be on top of the surface but it can dip underneath it at extreme points.
-  const positions = new Float32Array(
-    moodyReport.vertices(zMultiplier).map(v => [v[0], v[1], v[2] + 0.1]).flat(1) // "Union jack" colored lines.
-    .concat(triangulatedVertices))
-
-  const positionBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
-
-  // Calculate and create normal buffer.
-  const lineNormals = moodyReport.vertices(zMultiplier).map(v => [0.0, 0.0, 0.0]).flat(1)
-  // Each triangle has 3 vertices with the same surface normal.
-  const triangleNormals = triangulation.map(triangle => {
-    const length = Math.sqrt(triangle.surfaceNormal().x * triangle.surfaceNormal().x +
-      triangle.surfaceNormal().y * triangle.surfaceNormal().y +
-      triangle.surfaceNormal().z * triangle.surfaceNormal().z)
-    return [
-    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length,
-    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length,
-    triangle.surfaceNormal().x / length, triangle.surfaceNormal().y / length, triangle.surfaceNormal().z / length]
-    }).flat(1)
-  const normals = new Float32Array(lineNormals.concat(triangleNormals))
-  const normalBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW)
-
-  // Calculate and create texture buffer.
-  const lineTextureCoords = moodyReport.vertices(zMultiplier).map(v => [0.0, 1.0]).flat(1)
-
-  // TODO: Cache these vertices for a given zMultiplier.
-  const minX = Math.min(...vertices.map(vertex => vertex.x))
-  const maxX = Math.max(...vertices.map(vertex => vertex.x))
-  const minY = Math.min(...vertices.map(vertex => vertex.y))
-  const maxY = Math.max(...vertices.map(vertex => vertex.y))
-  const tableSurfaceRatio = (maxY - minY) / (maxX - minX)
-  const numRepeatsX = 1
-  const numRepeatsY = numRepeatsX * tableSurfaceRatio
-  //  Map [minX, maxX] => [0, 1] and [minY, maxY] => [0, 1]
-  // (val - A) * (b - a) / (B - A) + a
-  const triangleTextureCoords = triangulation.map((triangle, index) => [
-    ((triangle.v0.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v0.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),
-    ((triangle.v1.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v1.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),
-    ((triangle.v2.x - maxX) * (numRepeatsX + 1)) / (maxX - minX), ((triangle.v2.y - maxY) * (numRepeatsY + 1)) / (maxY - minY),]
-  ).flat(1)
-
-  const textureCoordinates = new Float32Array(lineTextureCoords.concat(triangleTextureCoords))
-  const textureBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, textureCoordinates, gl.STATIC_DRAW)
-
-  const types = new Float32Array(
-    moodyReport.vertices(zMultiplier).map(v => [0.0]).flat(1) // "Union jack" colored lines have type "0.0"
-    .concat(triangulation.map(triangle => [1.0, 1.0, 1.0]).flat(1))) // Table vertices have type "1.0"
-  const typeBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, typeBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, types, gl.STATIC_DRAW)
-
-  return { positionBuffer: positionBuffer, normalBuffer: normalBuffer, textureBuffer: textureBuffer, typeBuffer: typeBuffer, triangleVertices: triangulatedVertices }
-}
-
-function getColorBuffer(gl, moodyReport, triangleVertices) {
-  const triangleZValues = triangleVertices.filter((v, i) => (i + 1) % 3 == 0)
-  const minZ = Math.min(...triangleZValues)
-  const maxZ = Math.max(...triangleZValues)
-  const normalizedTriangleZValues = triangleZValues.map(value => (value - minZ) / (maxZ - minZ))
-  const colorMappedZValues = normalizedTriangleZValues.map(value => interpolate(turboColormapData, value))
-  const colors = new Array(moodyReport.topStartingDiagonalTable.numStations).fill([0.9568627450980393, 0.2627450980392157, 0.21176470588235294, 1.0]).flat(1)
-    .concat(new Array(moodyReport.bottomStartingDiagonalTable.numStations).fill([1.0, 0.9254901960784314, 0.2313725490196078, 1.0]).flat(1))
-    .concat(new Array(moodyReport.northPerimeterTable.numStations).fill([0.2980392156862745, 0.6862745098039216, 0.3137254901960784, 1.0]).flat(1))
-    .concat(new Array(moodyReport.eastPerimeterTable.numStations).fill([1.0, 0.4980392156862745, 0.3137254901960784, 1.0]).flat(1))
-    .concat(new Array(moodyReport.southPerimeterTable.numStations).fill([0.12941176470588237, 0.5882352941176471, 0.9529411764705882, 1.0]).flat(1))
-    .concat(new Array(moodyReport.westPerimeterTable.numStations).fill([1.0, 0.5019607843137255, 0.6745098039215687, 1.0]).flat(1))
-    .concat(new Array(moodyReport.horizontalCenterTable.numStations).fill([0.0, 0.749019607843137, 0.8470588235294118, 1.0]).flat(1))
-    .concat(new Array(moodyReport.verticalCenterTable.numStations).fill([0.607843137254902, 0.1568627450980392, 0.6862745098039216, 1.0]).flat(1))
-    .concat(colorMappedZValues.flat(1)) // Add color mapped colors for the triangles z-value.
-
-  const colorBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW)
-
-  return colorBuffer
-}
-
-function interpolate(colormap, x) {
-  x = Math.max(0.0, Math.min(1.0, x))
-  const a = Math.trunc(x * 255.0)
-  const b = Math.min(255, a + 1)
-  const f = x * 255.0 - a
-  return [colormap[a][0] + (colormap[b][0] - colormap[a][0]) * f,
-          colormap[a][1] + (colormap[b][1] - colormap[a][1]) * f,
-          colormap[a][2] + (colormap[b][2] - colormap[a][2]) * f,
-          1.0]
-}
-
-function setPositionAttribute(gl, buffers, programInfo) {
-  const numComponents = 3
-  const type = gl.FLOAT
-  const normalize = false
-  const stride = 0
-  const offset = 0
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer)
-  gl.vertexAttribPointer(
-    programInfo.attribLocations.vertexPosition,
-    numComponents,
-    type,
-    normalize,
-    stride,
-    offset)
-  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition)
-}
-
-function setNormalAttribute(gl, buffers, programInfo) {
-  const numComponents = 3
-  const type = gl.FLOAT
-  const normalize = false
-  const stride = 0
-  const offset = 0
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normalBuffer)
-  gl.vertexAttribPointer(
-    programInfo.attribLocations.vertexNormal,
-    numComponents,
-    type,
-    normalize,
-    stride,
-    offset,
-  )
-  gl.enableVertexAttribArray(programInfo.attribLocations.vertexNormal)
-}
-
-function setColorAttribute(gl, buffers, programInfo) {
-  const numComponents = 4
-  const type = gl.FLOAT
-  const normalize = false
-  const stride = 0
-  const offset = 0
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.lineColors)
-  gl.vertexAttribPointer(
-    programInfo.attribLocations.vertexColor,
-    numComponents,
-    type,
-    normalize,
-    stride,
-    offset,
-  )
-  gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor)
-}
-
-function setTextureAttribute(gl, buffers, programInfo) {
-  const num = 2
-  const type = gl.FLOAT
-  const normalize = false
-  const stride = 0
-  const offset = 0
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureBuffer)
-  gl.vertexAttribPointer(
-    programInfo.attribLocations.textureCoord,
-    num,
-    type,
-    normalize,
-    stride,
-    offset,
-  )
-  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord)
-}
-
-function setTypeAttribute(gl, buffers, programInfo) {
-  const numComponents = 1
-  const type = gl.FLOAT
-  const normalize = false
-  const stride = 0
-  const offset = 0
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.typeBuffer)
-  gl.vertexAttribPointer(
-    programInfo.attribLocations.vertexType,
-    numComponents,
-    type,
-    normalize,
-    stride,
-    offset)
-  gl.enableVertexAttribArray(programInfo.attribLocations.vertexType)
-}
-
-// Initialize texture and load its image.
-function loadTexture(gl, url) {
-  const texture = gl.createTexture()
-  gl.bindTexture(gl.TEXTURE_2D, texture)
-  const level = 0
-  const internalFormat = gl.RGBA
-  const width = 1
-  const height = 1
-  const border = 0
-  const srcFormat = gl.RGBA
-  const srcType = gl.UNSIGNED_BYTE
-  const pixel = new Uint8Array([0, 0, 255, 255]) // opaque blue
-  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel)
-
-  const image = new Image()
-  image.onload = () => {
-    gl.bindTexture(gl.TEXTURE_2D, texture)
-    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image)
-
-    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
-      gl.generateMipmap(gl.TEXTURE_2D)
-    } else {
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
-    }
-  }
-  image.src = url
-
-  return texture
-}
-
-function isPowerOf2(value) {
-  return (value & (value - 1)) === 0
-}
-
-// Initialize a shader program.
-function initShaderProgram(gl, vsSource, fsSource) {
-  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
-  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource)
-
-  const shaderProgram = gl.createProgram()
-  gl.attachShader(shaderProgram, vertexShader)
-  gl.attachShader(shaderProgram, fragmentShader)
-  gl.linkProgram(shaderProgram)
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    console.log(`Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgram)}`)
-    return null
-  }
-
-  return shaderProgram
-}
-
-// Creates a shader of the given type, uploads the source and compiles it.
-function loadShader(gl, type, source) {
-  const shader = gl.createShader(type)
-  gl.shaderSource(shader, source)
-  gl.compileShader(shader)
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.log(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`)
-    gl.deleteShader(shader)
-    return null
-  }
-
-  return shader
-}
-
-class Vector3 {
-  constructor(x, y, z) {
-    this.x = x
-    this.y = y
-    this.z = z
-  }
-
-  cross(v) {
-    return new Vector3(
-      this.y * v.z - this.z * v.y,
-      this.z * v.x - this.x * v.z,
-      this.x * v.y - this.y * v.x)
-  }
-
-  minus(v) {
-    return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z)
- }
-  dot(v) {
-    return this.x * v.x + this.y * v.y + this.z * v.z
-  }
-
-  norm() {
-    const length = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z)
-    return new Vector3(this.x / length, this.y / length, this.z / length)
-  }
-}
-
-// Turbo Color Map by Google: https://blog.research.google/2019/08/turbo-improved-rainbow-colormap-for.html
-// Copyright 2019 Google LLC.
-// SPDX-License-Identifier: Apache-2.0
-// Author: Anton Mikhailov
-const turboColormapData = [[0.18995,0.07176,0.23217],[0.19483,0.08339,0.26149],[0.19956,0.09498,0.29024],[0.20415,0.10652,0.31844],[0.20860,0.11802,0.34607],[0.21291,0.12947,0.37314],[0.21708,0.14087,0.39964],[0.22111,0.15223,0.42558],[0.22500,0.16354,0.45096],[0.22875,0.17481,0.47578],[0.23236,0.18603,0.50004],[0.23582,0.19720,0.52373],[0.23915,0.20833,0.54686],[0.24234,0.21941,0.56942],[0.24539,0.23044,0.59142],[0.24830,0.24143,0.61286],[0.25107,0.25237,0.63374],[0.25369,0.26327,0.65406],[0.25618,0.27412,0.67381],[0.25853,0.28492,0.69300],[0.26074,0.29568,0.71162],[0.26280,0.30639,0.72968],[0.26473,0.31706,0.74718],[0.26652,0.32768,0.76412],[0.26816,0.33825,0.78050],[0.26967,0.34878,0.79631],[0.27103,0.35926,0.81156],[0.27226,0.36970,0.82624],[0.27334,0.38008,0.84037],[0.27429,0.39043,0.85393],[0.27509,0.40072,0.86692],[0.27576,0.41097,0.87936],[0.27628,0.42118,0.89123],[0.27667,0.43134,0.90254],[0.27691,0.44145,0.91328],[0.27701,0.45152,0.92347],[0.27698,0.46153,0.93309],[0.27680,0.47151,0.94214],[0.27648,0.48144,0.95064],[0.27603,0.49132,0.95857],[0.27543,0.50115,0.96594],[0.27469,0.51094,0.97275],[0.27381,0.52069,0.97899],[0.27273,0.53040,0.98461],[0.27106,0.54015,0.98930],[0.26878,0.54995,0.99303],[0.26592,0.55979,0.99583],[0.26252,0.56967,0.99773],[0.25862,0.57958,0.99876],[0.25425,0.58950,0.99896],[0.24946,0.59943,0.99835],[0.24427,0.60937,0.99697],[0.23874,0.61931,0.99485],[0.23288,0.62923,0.99202],[0.22676,0.63913,0.98851],[0.22039,0.64901,0.98436],[0.21382,0.65886,0.97959],[0.20708,0.66866,0.97423],[0.20021,0.67842,0.96833],[0.19326,0.68812,0.96190],[0.18625,0.69775,0.95498],[0.17923,0.70732,0.94761],[0.17223,0.71680,0.93981],[0.16529,0.72620,0.93161],[0.15844,0.73551,0.92305],[0.15173,0.74472,0.91416],[0.14519,0.75381,0.90496],[0.13886,0.76279,0.89550],[0.13278,0.77165,0.88580],[0.12698,0.78037,0.87590],[0.12151,0.78896,0.86581],[0.11639,0.79740,0.85559],[0.11167,0.80569,0.84525],[0.10738,0.81381,0.83484],[0.10357,0.82177,0.82437],[0.10026,0.82955,0.81389],[0.09750,0.83714,0.80342],[0.09532,0.84455,0.79299],[0.09377,0.85175,0.78264],[0.09287,0.85875,0.77240],[0.09267,0.86554,0.76230],[0.09320,0.87211,0.75237],[0.09451,0.87844,0.74265],[0.09662,0.88454,0.73316],[0.09958,0.89040,0.72393],[0.10342,0.89600,0.71500],[0.10815,0.90142,0.70599],[0.11374,0.90673,0.69651],[0.12014,0.91193,0.68660],[0.12733,0.91701,0.67627],[0.13526,0.92197,0.66556],[0.14391,0.92680,0.65448],[0.15323,0.93151,0.64308],[0.16319,0.93609,0.63137],[0.17377,0.94053,0.61938],[0.18491,0.94484,0.60713],[0.19659,0.94901,0.59466],[0.20877,0.95304,0.58199],[0.22142,0.95692,0.56914],[0.23449,0.96065,0.55614],[0.24797,0.96423,0.54303],[0.26180,0.96765,0.52981],[0.27597,0.97092,0.51653],[0.29042,0.97403,0.50321],[0.30513,0.97697,0.48987],[0.32006,0.97974,0.47654],[0.33517,0.98234,0.46325],[0.35043,0.98477,0.45002],[0.36581,0.98702,0.43688],[0.38127,0.98909,0.42386],[0.39678,0.99098,0.41098],[0.41229,0.99268,0.39826],[0.42778,0.99419,0.38575],[0.44321,0.99551,0.37345],[0.45854,0.99663,0.36140],[0.47375,0.99755,0.34963],[0.48879,0.99828,0.33816],[0.50362,0.99879,0.32701],[0.51822,0.99910,0.31622],[0.53255,0.99919,0.30581],[0.54658,0.99907,0.29581],[0.56026,0.99873,0.28623],[0.57357,0.99817,0.27712],[0.58646,0.99739,0.26849],[0.59891,0.99638,0.26038],[0.61088,0.99514,0.25280],[0.62233,0.99366,0.24579],[0.63323,0.99195,0.23937],[0.64362,0.98999,0.23356],[0.65394,0.98775,0.22835],[0.66428,0.98524,0.22370],[0.67462,0.98246,0.21960],[0.68494,0.97941,0.21602],[0.69525,0.97610,0.21294],[0.70553,0.97255,0.21032],[0.71577,0.96875,0.20815],[0.72596,0.96470,0.20640],[0.73610,0.96043,0.20504],[0.74617,0.95593,0.20406],[0.75617,0.95121,0.20343],[0.76608,0.94627,0.20311],[0.77591,0.94113,0.20310],[0.78563,0.93579,0.20336],[0.79524,0.93025,0.20386],[0.80473,0.92452,0.20459],[0.81410,0.91861,0.20552],[0.82333,0.91253,0.20663],[0.83241,0.90627,0.20788],[0.84133,0.89986,0.20926],[0.85010,0.89328,0.21074],[0.85868,0.88655,0.21230],[0.86709,0.87968,0.21391],[0.87530,0.87267,0.21555],[0.88331,0.86553,0.21719],[0.89112,0.85826,0.21880],[0.89870,0.85087,0.22038],[0.90605,0.84337,0.22188],[0.91317,0.83576,0.22328],[0.92004,0.82806,0.22456],[0.92666,0.82025,0.22570],[0.93301,0.81236,0.22667],[0.93909,0.80439,0.22744],[0.94489,0.79634,0.22800],[0.95039,0.78823,0.22831],[0.95560,0.78005,0.22836],[0.96049,0.77181,0.22811],[0.96507,0.76352,0.22754],[0.96931,0.75519,0.22663],[0.97323,0.74682,0.22536],[0.97679,0.73842,0.22369],[0.98000,0.73000,0.22161],[0.98289,0.72140,0.21918],[0.98549,0.71250,0.21650],[0.98781,0.70330,0.21358],[0.98986,0.69382,0.21043],[0.99163,0.68408,0.20706],[0.99314,0.67408,0.20348],[0.99438,0.66386,0.19971],[0.99535,0.65341,0.19577],[0.99607,0.64277,0.19165],[0.99654,0.63193,0.18738],[0.99675,0.62093,0.18297],[0.99672,0.60977,0.17842],[0.99644,0.59846,0.17376],[0.99593,0.58703,0.16899],[0.99517,0.57549,0.16412],[0.99419,0.56386,0.15918],[0.99297,0.55214,0.15417],[0.99153,0.54036,0.14910],[0.98987,0.52854,0.14398],[0.98799,0.51667,0.13883],[0.98590,0.50479,0.13367],[0.98360,0.49291,0.12849],[0.98108,0.48104,0.12332],[0.97837,0.46920,0.11817],[0.97545,0.45740,0.11305],[0.97234,0.44565,0.10797],[0.96904,0.43399,0.10294],[0.96555,0.42241,0.09798],[0.96187,0.41093,0.09310],[0.95801,0.39958,0.08831],[0.95398,0.38836,0.08362],[0.94977,0.37729,0.07905],[0.94538,0.36638,0.07461],[0.94084,0.35566,0.07031],[0.93612,0.34513,0.06616],[0.93125,0.33482,0.06218],[0.92623,0.32473,0.05837],[0.92105,0.31489,0.05475],[0.91572,0.30530,0.05134],[0.91024,0.29599,0.04814],[0.90463,0.28696,0.04516],[0.89888,0.27824,0.04243],[0.89298,0.26981,0.03993],[0.88691,0.26152,0.03753],[0.88066,0.25334,0.03521],[0.87422,0.24526,0.03297],[0.86760,0.23730,0.03082],[0.86079,0.22945,0.02875],[0.85380,0.22170,0.02677],[0.84662,0.21407,0.02487],[0.83926,0.20654,0.02305],[0.83172,0.19912,0.02131],[0.82399,0.19182,0.01966],[0.81608,0.18462,0.01809],[0.80799,0.17753,0.01660],[0.79971,0.17055,0.01520],[0.79125,0.16368,0.01387],[0.78260,0.15693,0.01264],[0.77377,0.15028,0.01148],[0.76476,0.14374,0.01041],[0.75556,0.13731,0.00942],[0.74617,0.13098,0.00851],[0.73661,0.12477,0.00769],[0.72686,0.11867,0.00695],[0.71692,0.11268,0.00629],[0.70680,0.10680,0.00571],[0.69650,0.10102,0.00522],[0.68602,0.09536,0.00481],[0.67535,0.08980,0.00449],[0.66449,0.08436,0.00424],[0.65345,0.07902,0.00408],[0.64223,0.07380,0.00401],[0.63082,0.06868,0.00401],[0.61923,0.06367,0.00410],[0.60746,0.05878,0.00427],[0.59550,0.05399,0.00453],[0.58336,0.04931,0.00486],[0.57103,0.04474,0.00529],[0.55852,0.04028,0.00579],[0.54583,0.03593,0.00638],[0.53295,0.03169,0.00705],[0.51989,0.02756,0.00780],[0.50664,0.02354,0.00863],[0.49321,0.01963,0.00955],[0.47960,0.01583,0.01055]]
-
-// Delaunay Triangulation from: https://github.com/msavela/delaunay/
-class Vertex {
-  constructor(x, y, z) {
-    this.x = x
-    this.y = y
-    this.z = z
-  }
-
-  equals(vertex) {
-    return this.x === vertex.x && this.y == vertex.y && this.z == vertex.z
-  }
-}
-
-class Edge {
-  constructor(v0, v1) {
-    this.v0 = v0
-    this.v1 = v1
-  }
-
-  equals(edge) {
-    return (this.v0.equals(edge.v0) && this.v1.equals(edge.v1)) ||
-      (this.v0.equals(edge.v1) && this.v1.equals(edge.v0))
-  }
-}
-
-class Triangle {
-  constructor(v0, v1, v2) {
-    this.v0 = v0
-    this.v1 = v1
-    this.v2 = v2
-    this.edgeVec0 = new Vector3(v1.x - v0.x, v1.y - v0.y, v1.z - v0.z)
-    this.edgeVec1 = new Vector3(v2.x - v0.x, v2.y - v0.y, v2.z - v0.z)
-    this.calcCircumcircle()
-  }
-
-  calcCircumcircle() {
-    // Reference: http://www.faqs.org/faqs/graphics/algorithms-faq/
-    // Subject 1.04: How do I generate a circle through three points?
-    const A = this.v1.x - this.v0.x
-    const B = this.v1.y - this.v0.y
-    const C = this.v2.x - this.v0.x
-    const D = this.v2.y - this.v0.y
-
-    const E = A * (this.v0.x + this.v1.x) + B * (this.v0.y + this.v1.y)
-    const F = C * (this.v0.x + this.v2.x) + D * (this.v0.y + this.v2.y)
-
-    const G = 2.0 * (A * (this.v2.y - this.v1.y) - B * (this.v2.x - this.v1.x))
-
-    let dx, dy
-
-    // Collinear points, get extremes and use midpoint as center
-    if (Math.round(Math.abs(G)) == 0) {
-      const minx = Math.min(this.v0.x, this.v1.x, this.v2.x)
-      const miny = Math.min(this.v0.y, this.v1.y, this.v2.y)
-      const maxx = Math.max(this.v0.x, this.v1.x, this.v2.x)
-      const maxy = Math.max(this.v0.y, this.v1.y, this.v2.y)
-
-      this.center = new Vertex((minx + maxx) / 2, (miny + maxy) / 2, 0)
-
-      dx = this.center.x - minx
-      dy = this.center.y - miny
-    } else {
-      const cx = (D * E - B * F) / G
-      const cy = (A * F - C * E) / G
-
-      this.center = new Vertex(cx, cy, 0)
-
-      dx = this.center.x - this.v0.x
-      dy = this.center.y - this.v0.y
-    }
-    this.radius = Math.sqrt(dx * dx + dy * dy)
-  }
-
-  inCircumcircle(v) {
-    const dx = this.center.x - v.x
-    const dy = this.center.y - v.y
-    return Math.sqrt(dx * dx + dy * dy) <= this.radius
-  }
-
-  surfaceNormal() {
-    return this.edgeVec1.cross(this.edgeVec0)
-  }
-}
-
-function getSuperTriangle(vertices) {
-  let minx = Infinity
-  let miny = Infinity
-
-  let maxx = -Infinity
-  let maxy = -Infinity
-  vertices.forEach(vertex => {
-    minx = Math.min(minx, vertex.x)
-    miny = Math.min(minx, vertex.y)
-    maxx = Math.max(maxx, vertex.x)
-    maxy = Math.max(maxx, vertex.y)
-  })
-
-  const dx = (maxx - minx) * 10
-  const dy = (maxy - miny) * 10
-
-  const v0 = new Vertex(minx - dx, miny - dy * 3, 0)
-  const v1 = new Vertex(minx - dx, maxy + dy, 0)
-  const v2 = new Vertex(maxx + dx * 3, maxy + dy, 0)
-
-  return new Triangle(v0, v1, v2)
-}
-
-function addVertex(vertex, triangles) {
-  let edges = []
-
-  // Remove triangles with circumcircles containing the vertex.
-  triangles = triangles.filter(triangle => {
-    if (triangle.inCircumcircle(vertex)) {
-      edges.push(new Edge(triangle.v0, triangle.v1))
-      edges.push(new Edge(triangle.v1, triangle.v2))
-      edges.push(new Edge(triangle.v2, triangle.v0))
-      return false
-    }
-    return true
-  })
-
-  // Get unique edges.
-  edges = uniqueEdges(edges)
-
-  // Create new triangles from the unique edges and new vertex.
-  edges.forEach(edge => {
-    triangles.push(new Triangle(edge.v0, edge.v1, vertex))
-  })
-
-  return triangles
-}
-
-function uniqueEdges(edges) {
-  const uniqueEdges = []
-  for (let i = 0; i < edges.length; ++i) {
-    let isUnique = true
-
-    // See if edge is unique.
-    for (let j = 0; j < edges.length; ++j) {
-      if (i != j && edges[i].equals(edges[j])) {
-        isUnique = false
-        break
-      }
-    }
-
-    // Edge is unique, add to unique edges array.
-    isUnique && uniqueEdges.push(edges[i])
-  }
-
-  return uniqueEdges
-}
-
-function bowyerWatson(vertices) {
-  // Create bounding 'super' triangle.
-  let st = getSuperTriangle(vertices)
-  // Initialize triangles while adding bounding triangle.
-  let triangles = [st]
-
-  // Triangulate each vertex.
-  vertices.forEach(vertex => {
-    triangles = addVertex(vertex, triangles)
-  })
-
-  // Remove triangles that share edges with super triangle.
-  triangles = triangles.filter(triangle => {
-    return !(triangle.v0 == st.v0 || triangle.v0 == st.v1 || triangle.v0 == st.v2 ||
-      triangle.v1 == st.v0 || triangle.v1 == st.v1 || triangle.v1 == st.v2 ||
-      triangle.v2 == st.v0 || triangle.v2 == st.v1 || triangle.v2 == st.v2)
-  })
-
-  return triangles
-}
-
-// From glMatrix v4.
-// https://github.com/toji/gl-matrix/tree/glmatrix-next
-// Copyright 2022 Brandon Jones, Colin MacKenzie IV
-const IDENTITY_4X4 = new Float32Array([
-  1, 0, 0, 0,
-  0, 1, 0, 0,
-  0, 0, 1, 0,
-  0, 0, 0, 1,
-])
-const EPSILON = 0.000001
-
-class Mat4 extends Float32Array {
-  constructor(...values) {
-    switch (values.length) {
-      case 16:
-        super(values)
-        break
-      default:
-        super(IDENTITY_4X4)
-        break
-    }
-  }
-
-  // Creates a new identity 4x4 Matrix.
-  static create() {
-    return new Mat4()
-  }
-
-  scale(v) {
-    return Mat4.scale(this, this, v)
-  }
-
-  static scale(out, a, v) {
-    const x = v[0]
-    const y = v[1]
-
-    out[0] = x * a[0]
-    out[1] = x * a[1]
-    out[2] = x * a[2]
-
-    out[3] = y * a[3]
-    out[4] = y * a[4]
-    out[5] = y * a[5]
-
-    out[6] = a[6]
-    out[7] = a[7]
-    out[8] = a[8]
-    return out
-  }
-
-  multiply(b) {
-    return Mat4.multiply(this, this, b)
-  }
-
-  static multiply(out, a, b) {
-    const a00 = a[0]
-    const a01 = a[1]
-    const a02 = a[2]
-    const a03 = a[3]
-    const a10 = a[4]
-    const a11 = a[5]
-    const a12 = a[6]
-    const a13 = a[7]
-    const a20 = a[8]
-    const a21 = a[9]
-    const a22 = a[10]
-    const a23 = a[11]
-    const a30 = a[12]
-    const a31 = a[13]
-    const a32 = a[14]
-    const a33 = a[15]
-
-    // Cache only the current line of the second matrix
-    let b0 = b[0]
-    let b1 = b[1]
-    let b2 = b[2]
-    let b3 = b[3]
-    out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
-    out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
-    out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
-    out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
-
-    b0 = b[4]
-    b1 = b[5]
-    b2 = b[6]
-    b3 = b[7]
-    out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
-    out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
-    out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
-    out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
-
-    b0 = b[8]
-    b1 = b[9]
-    b2 = b[10]
-    b3 = b[11]
-    out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
-    out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
-    out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
-    out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
-
-    b0 = b[12]
-    b1 = b[13]
-    b2 = b[14]
-    b3 = b[15]
-    out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30
-    out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31
-    out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32
-    out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33
-    return out
-  }
-
-  invert() {
-    return Mat4.invert(this, this)
-  }
-
-  static invert(out, a) {
-    const a00 = a[0],
-      a01 = a[1],
-      a02 = a[2],
-      a03 = a[3]
-    const a10 = a[4],
-      a11 = a[5],
-      a12 = a[6],
-      a13 = a[7]
-    const a20 = a[8],
-      a21 = a[9],
-      a22 = a[10],
-      a23 = a[11]
-    const a30 = a[12],
-      a31 = a[13],
-      a32 = a[14],
-      a33 = a[15]
-
-    const b00 = a00 * a11 - a01 * a10
-    const b01 = a00 * a12 - a02 * a10
-    const b02 = a00 * a13 - a03 * a10
-    const b03 = a01 * a12 - a02 * a11
-    const b04 = a01 * a13 - a03 * a11
-    const b05 = a02 * a13 - a03 * a12
-    const b06 = a20 * a31 - a21 * a30
-    const b07 = a20 * a32 - a22 * a30
-    const b08 = a20 * a33 - a23 * a30
-    const b09 = a21 * a32 - a22 * a31
-    const b10 = a21 * a33 - a23 * a31
-    const b11 = a22 * a33 - a23 * a32
-
-    // Calculate the determinant
-    let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06
-
-    if (!det) {
-      return null
-    }
-    det = 1.0 / det
-
-    out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det
-    out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det
-    out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det
-    out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det
-    out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det
-    out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det
-    out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det
-    out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det
-    out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det
-    out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det
-    out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det
-    out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det
-    out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det
-    out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det
-    out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det
-    out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det
-
-    return out
-  }
-
-  transpose() {
-    return Mat4.transpose(this, this)
-  }
-
-  static transpose(out, a) {
-    // If we are transposing ourselves we can skip a few steps but have to cache some values
-    if (out === a) {
-      const a01 = a[1],
-        a02 = a[2],
-        a03 = a[3]
-      const a12 = a[6],
-        a13 = a[7]
-      const a23 = a[11]
-
-      out[1] = a[4]
-      out[2] = a[8]
-      out[3] = a[12]
-      out[4] = a01
-      out[6] = a[9]
-      out[7] = a[13]
-      out[8] = a02
-      out[9] = a12
-      out[11] = a[14]
-      out[12] = a03
-      out[13] = a13
-      out[14] = a23
-    } else {
-      out[0] = a[0]
-      out[1] = a[4]
-      out[2] = a[8]
-      out[3] = a[12]
-      out[4] = a[1]
-      out[5] = a[5]
-      out[6] = a[9]
-      out[7] = a[13]
-      out[8] = a[2]
-      out[9] = a[6]
-      out[10] = a[10]
-      out[11] = a[14]
-      out[12] = a[3]
-      out[13] = a[7]
-      out[14] = a[11]
-      out[15] = a[15]
-    }
-
-    return out
-  }
-
-  // WebGL/OpenGL compat (z range [-1, 1])
-  perspective(fovy, aspect, near, far) {
-    return Mat4.perspective(this, fovy, aspect, near, far)
-  }
-
-  // WebGL/OpenGL compat (z range [-1, 1])
-  static perspective(out, fovy, aspect, near, far) {
-    const f = 1.0 / Math.tan(fovy / 2)
-    out[0] = f / aspect
-    out[1] = 0
-    out[2] = 0
-    out[3] = 0
-    out[4] = 0
-    out[5] = f
-    out[6] = 0
-    out[7] = 0
-    out[8] = 0
-    out[9] = 0
-    out[11] = -1
-    out[12] = 0
-    out[13] = 0
-    out[15] = 0
-    if (far != null && far !== Infinity) {
-      const nf = 1 / (near - far)
-      out[10] = (far + near) * nf
-      out[14] = 2 * far * near * nf
-    } else {
-      out[10] = -1
-      out[14] = -2 * near
-    }
-    return out
-  }
-
-  rotate(rad, axis) {
-    return Mat4.rotate(this, this, rad, axis)
-  }
-
-  static rotate(out, a, rad, axis) {
-    let x = axis[0]
-    let y = axis[1]
-    let z = axis[2]
-    let len = Math.sqrt(x * x + y * y + z * z)
-
-    if (len < EPSILON) {
-      return null
-    }
-
-    len = 1 / len
-    x *= len
-    y *= len
-    z *= len
-
-    const s = Math.sin(rad)
-    const c = Math.cos(rad)
-    const t = 1 - c
-
-    const a00 = a[0]
-    const a01 = a[1]
-    const a02 = a[2]
-    const a03 = a[3]
-    const a10 = a[4]
-    const a11 = a[5]
-    const a12 = a[6]
-    const a13 = a[7]
-    const a20 = a[8]
-    const a21 = a[9]
-    const a22 = a[10]
-    const a23 = a[11]
-
-    // Construct the elements of the rotation matrix
-    const b00 = x * x * t + c
-    const b01 = y * x * t + z * s
-    const b02 = z * x * t - y * s
-    const b10 = x * y * t - z * s
-    const b11 = y * y * t + c
-    const b12 = z * y * t + x * s
-    const b20 = x * z * t + y * s
-    const b21 = y * z * t - x * s
-    const b22 = z * z * t + c
-
-    // Perform rotation-specific matrix multiplication
-    out[0] = a00 * b00 + a10 * b01 + a20 * b02
-    out[1] = a01 * b00 + a11 * b01 + a21 * b02
-    out[2] = a02 * b00 + a12 * b01 + a22 * b02
-    out[3] = a03 * b00 + a13 * b01 + a23 * b02
-    out[4] = a00 * b10 + a10 * b11 + a20 * b12
-    out[5] = a01 * b10 + a11 * b11 + a21 * b12
-    out[6] = a02 * b10 + a12 * b11 + a22 * b12
-    out[7] = a03 * b10 + a13 * b11 + a23 * b12
-    out[8] = a00 * b20 + a10 * b21 + a20 * b22
-    out[9] = a01 * b20 + a11 * b21 + a21 * b22
-    out[10] = a02 * b20 + a12 * b21 + a22 * b22
-    out[11] = a03 * b20 + a13 * b21 + a23 * b22
-
-    if (a !== out) {
-      // If the source and destination differ, copy the unchanged last row
-      out[12] = a[12]
-      out[13] = a[13]
-      out[14] = a[14]
-      out[15] = a[15]
-    }
-    return out
-  }
-
-  translate(v) {
-    return Mat4.translate(this, this, v)
-  }
-
-  static translate(out, a, v) {
-    const x = v[0]
-    const y = v[1]
-    const z = v[2]
-
-    if (a === out) {
-      out[12] = a[0] * x + a[4] * y + a[8] * z + a[12]
-      out[13] = a[1] * x + a[5] * y + a[9] * z + a[13]
-      out[14] = a[2] * x + a[6] * y + a[10] * z + a[14]
-      out[15] = a[3] * x + a[7] * y + a[11] * z + a[15]
-    } else {
-      const a00 = a[0]
-      const a01 = a[1]
-      const a02 = a[2]
-      const a03 = a[3]
-      const a10 = a[4]
-      const a11 = a[5]
-      const a12 = a[6]
-      const a13 = a[7]
-      const a20 = a[8]
-      const a21 = a[9]
-      const a22 = a[10]
-      const a23 = a[11]
-
-      out[0] = a00
-      out[1] = a01
-      out[2] = a02
-      out[3] = a03
-      out[4] = a10
-      out[5] = a11
-      out[6] = a12
-      out[7] = a13
-      out[8] = a20
-      out[9] = a21
-      out[10] = a22
-      out[11] = a23
-
-      out[12] = a00 * x + a10 * y + a20 * z + a[12]
-      out[13] = a01 * x + a11 * y + a21 * z + a[13]
-      out[14] = a02 * x + a12 * y + a22 * z + a[14]
-      out[15] = a03 * x + a13 * y + a23 * z + a[15]
-    }
-
-    return out
-  }
-
-}
+export { MoodyReport, SurfacePlate, roundTo }
diff --git a/webgl-debug.js b/webgl-debug.js
index bc77ca6..071e9bc 100644
--- a/webgl-debug.js
+++ b/webgl-debug.js
@@ -3,7 +3,7 @@
 **
 ** Permission is hereby granted, free of charge, to any person obtaining a
 ** copy of this software and/or associated documentation files (the
-** "Materials"), to deal in the Materials without restriction, including
+** 'Materials'), to deal in the Materials without restriction, including
 ** without limitation the rights to use, copy, modify, merge, publish,
 ** distribute, sublicense, and/or sell copies of the Materials, and to
 ** permit persons to whom the Materials are furnished to do so, subject to
@@ -12,7 +12,7 @@
 ** The above copyright notice and this permission notice shall be included
 ** in all copies or substantial portions of the Materials.
 **
-** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+** THE MATERIALS ARE PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
@@ -23,8 +23,6 @@
 
 // Various functions for helping debug WebGL apps.
 
-WebGLDebugUtils = function() {
-
 /**
  * Wrapped logging function.
  * @param {string} msg Message to log.
@@ -92,22 +90,31 @@ var glValidEnumContexts = {
   'getTexParameter': {2: { 0:true, 1:true }},
   'texParameterf': {3: { 0:true, 1:true }},
   'texParameteri': {3: { 0:true, 1:true, 2:true }},
-  // texImage2D and texSubImage2D are defined below with WebGL 2 entrypoints
+  'texImage2D': {
+     9: { 0:true, 2:true, 6:true, 7:true },
+     6: { 0:true, 2:true, 3:true, 4:true }
+  },
+  'texSubImage2D': {
+    9: { 0:true, 6:true, 7:true },
+    7: { 0:true, 4:true, 5:true }
+  },
   'copyTexImage2D': {8: { 0:true, 2:true }},
   'copyTexSubImage2D': {8: { 0:true }},
   'generateMipmap': {1: { 0:true }},
-  // compressedTexImage2D and compressedTexSubImage2D are defined below with WebGL 2 entrypoints
+  'compressedTexImage2D': {7: { 0: true, 2:true }},
+  'compressedTexSubImage2D': {8: { 0: true, 6:true }},
 
   // Buffer objects
 
   'bindBuffer': {2: { 0:true }},
-  // bufferData and bufferSubData are defined below with WebGL 2 entrypoints
+  'bufferData': {3: { 0:true, 2:true }},
+  'bufferSubData': {3: { 0:true }},
   'getBufferParameter': {2: { 0:true, 1:true }},
 
   // Renderbuffers and framebuffers
 
   'pixelStorei': {2: { 0:true, 1:true }},
-  // readPixels is defined below with WebGL 2 entrypoints
+  'readPixels': {7: { 4:true, 5:true }},
   'bindRenderbuffer': {2: { 0:true }},
   'bindFramebuffer': {2: { 0:true }},
   'checkFramebufferStatus': {1: { 0:true }},
@@ -143,137 +150,7 @@ var glValidEnumContexts = {
 
   // EXT_blend_minmax extension
 
-  'blendEquationEXT': {1: { 0:true }},
-
-  // WebGL 2 Buffer objects
-
-  'bufferData': {
-    3: { 0:true, 2:true }, // WebGL 1
-    4: { 0:true, 2:true }, // WebGL 2
-    5: { 0:true, 2:true }  // WebGL 2
-  },
-  'bufferSubData': {
-    3: { 0:true }, // WebGL 1
-    4: { 0:true }, // WebGL 2
-    5: { 0:true }  // WebGL 2
-  },
-  'copyBufferSubData': {5: { 0:true, 1:true }},
-  'getBufferSubData': {3: { 0:true }, 4: { 0:true }, 5: { 0:true }},
-
-  // WebGL 2 Framebuffer objects
-
-  'blitFramebuffer': {10: { 8: { 'enumBitwiseOr': ['COLOR_BUFFER_BIT', 'DEPTH_BUFFER_BIT', 'STENCIL_BUFFER_BIT'] }, 9:true }},
-  'framebufferTextureLayer': {5: { 0:true, 1:true }},
-  'invalidateFramebuffer': {2: { 0:true }},
-  'invalidateSubFramebuffer': {6: { 0:true }},
-  'readBuffer': {1: { 0:true }},
-
-  // WebGL 2 Renderbuffer objects
-
-  'getInternalformatParameter': {3: { 0:true, 1:true, 2:true }},
-  'renderbufferStorageMultisample': {5: { 0:true, 2:true }},
-
-  // WebGL 2 Texture objects
-
-  'texStorage2D': {5: { 0:true, 2:true }},
-  'texStorage3D': {6: { 0:true, 2:true }},
-  'texImage2D': {
-    9: { 0:true, 2:true, 6:true, 7:true }, // WebGL 1 & 2
-    6: { 0:true, 2:true, 3:true, 4:true }, // WebGL 1
-    10: { 0:true, 2:true, 6:true, 7:true } // WebGL 2
-  },
-  'texImage3D': {
-    10: { 0:true, 2:true, 7:true, 8:true },
-    11: { 0:true, 2:true, 7:true, 8:true }
-  },
-  'texSubImage2D': {
-    9: { 0:true, 6:true, 7:true }, // WebGL 1 & 2
-    7: { 0:true, 4:true, 5:true }, // WebGL 1
-    10: { 0:true, 6:true, 7:true } // WebGL 2
-  },
-  'texSubImage3D': {
-    11: { 0:true, 8:true, 9:true },
-    12: { 0:true, 8:true, 9:true }
-  },
-  'copyTexSubImage3D': {9: { 0:true }},
-  'compressedTexImage2D': {
-    7: { 0: true, 2:true }, // WebGL 1 & 2
-    8: { 0: true, 2:true }, // WebGL 2
-    9: { 0: true, 2:true }  // WebGL 2
-  },
-  'compressedTexImage3D': {
-    8: { 0: true, 2:true },
-    9: { 0: true, 2:true },
-    10: { 0: true, 2:true }
-  },
-  'compressedTexSubImage2D': {
-    8: { 0: true, 6:true }, // WebGL 1 & 2
-    9: { 0: true, 6:true }, // WebGL 2
-    10: { 0: true, 6:true } // WebGL 2
-  },
-  'compressedTexSubImage3D': {
-    10: { 0: true, 8:true },
-    11: { 0: true, 8:true },
-    12: { 0: true, 8:true }
-  },
-
-  // WebGL 2 Vertex attribs
-
-  'vertexAttribIPointer': {5: { 2:true }},
-
-  // WebGL 2 Writing to the drawing buffer
-
-  'drawArraysInstanced': {4: { 0:true }},
-  'drawElementsInstanced': {5: { 0:true, 2:true }},
-  'drawRangeElements': {6: { 0:true, 4:true }},
-
-  // WebGL 2 Reading back pixels
-
-  'readPixels': {
-    7: { 4:true, 5:true }, // WebGL 1 & 2
-    8: { 4:true, 5:true }  // WebGL 2
-  },
-
-  // WebGL 2 Multiple Render Targets
-
-  'clearBufferfv': {3: { 0:true }, 4: { 0:true }},
-  'clearBufferiv': {3: { 0:true }, 4: { 0:true }},
-  'clearBufferuiv': {3: { 0:true }, 4: { 0:true }},
-  'clearBufferfi': {4: { 0:true }},
-
-  // WebGL 2 Query objects
-
-  'beginQuery': {2: { 0:true }},
-  'endQuery': {1: { 0:true }},
-  'getQuery': {2: { 0:true, 1:true }},
-  'getQueryParameter': {2: { 1:true }},
-
-  // WebGL 2 Sampler objects
-
-  'samplerParameteri': {3: { 1:true, 2:true }},
-  'samplerParameterf': {3: { 1:true }},
-  'getSamplerParameter': {2: { 1:true }},
-
-  // WebGL 2 Sync objects
-
-  'fenceSync': {2: { 0:true, 1: { 'enumBitwiseOr': [] } }},
-  'clientWaitSync': {3: { 1: { 'enumBitwiseOr': ['SYNC_FLUSH_COMMANDS_BIT'] } }},
-  'waitSync': {3: { 1: { 'enumBitwiseOr': [] } }},
-  'getSyncParameter': {2: { 1:true }},
-
-  // WebGL 2 Transform Feedback
-
-  'bindTransformFeedback': {2: { 0:true }},
-  'beginTransformFeedback': {1: { 0:true }},
-  'transformFeedbackVaryings': {3: { 2:true }},
-
-  // WebGL2 Uniform Buffer Objects and Transform Feedback Buffers
-
-  'bindBufferBase': {3: { 0:true }},
-  'bindBufferRange': {5: { 0:true }},
-  'getIndexedParameter': {2: { 0:true }},
-  'getActiveUniforms': {3: { 2:true }},
-  'getActiveUniformBlockParameter': {3: { 2:true }}
+  'blendEquationEXT': {1: { 0:true }}
 };
 
 /**
@@ -338,8 +215,8 @@ function mightBeEnum(value) {
 function glEnumToString(value) {
   checkInit();
   var name = glEnums[value];
-  return (name !== undefined) ? ("gl." + name) :
-      ("/*UNKNOWN WebGL ENUM*/ 0x" + value.toString(16) + "");
+  return (name !== undefined) ? ('gl.' + name) :
+      ('/*UNKNOWN WebGL ENUM*/ 0x' + value.toString(16) + '');
 }
 
 /**
@@ -381,13 +258,9 @@ function glFunctionArgToString(functionName, numArgs, argumentIndex, value) {
     }
   }
   if (value === null) {
-    return "null";
+    return 'null';
   } else if (value === undefined) {
-    return "undefined";
-  } else if (ArrayBuffer.isView(value)) {
-    // Large typed array views are common in WebGL APIs and create
-    // huge strings in logs.
-    return "<" + value.constructor.name + ">";
+    return 'undefined';
   } else {
     return value.toString();
   }
@@ -402,8 +275,8 @@ function glFunctionArgToString(functionName, numArgs, argumentIndex, value) {
  * @return {string} The arguments as a string.
  */
 function glFunctionArgsToString(functionName, args) {
-  // apparently we can't do args.join(",");
-  var argStr = "";
+  // apparently we can't do args.join(',');
+  var argStr = '';
   var numArgs = args.length;
   for (var ii = 0; ii < numArgs; ++ii) {
     argStr += ((ii == 0) ? '' : ', ') +
@@ -414,24 +287,24 @@ function glFunctionArgsToString(functionName, args) {
 
 
 function makePropertyWrapper(wrapper, original, propertyName) {
-  //log("wrap prop: " + propertyName);
+  //log('wrap prop: ' + propertyName);
   wrapper.__defineGetter__(propertyName, function() {
     return original[propertyName];
   });
   // TODO(gmane): this needs to handle properties that take more than
   // one value?
   wrapper.__defineSetter__(propertyName, function(value) {
-    //log("set: " + propertyName);
+    //log('set: ' + propertyName);
     original[propertyName] = value;
   });
 }
 
 // Makes a function that calls a function on another object.
 function makeFunctionWrapper(original, functionName) {
-  //log("wrap fn: " + functionName);
+  //log('wrap fn: ' + functionName);
   var f = original[functionName];
   return function() {
-    //log("call: " + functionName);
+    //log('call: ' + functionName);
     var result = f.apply(original, arguments);
     return result;
   };
@@ -458,15 +331,15 @@ function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc, opt_err_ctx) {
   opt_err_ctx = opt_err_ctx || ctx;
   init(ctx);
   opt_onErrorFunc = opt_onErrorFunc || function(err, functionName, args) {
-        // apparently we can't do args.join(",");
-        var argStr = "";
+        // apparently we can't do args.join(',');
+        var argStr = '';
         var numArgs = args.length;
         for (var ii = 0; ii < numArgs; ++ii) {
           argStr += ((ii == 0) ? '' : ', ') +
               glFunctionArgToString(functionName, numArgs, ii, args[ii]);
         }
-        error("WebGL error "+ glEnumToString(err) + " in "+ functionName +
-              "(" + argStr + ")");
+        error('WebGL error '+ glEnumToString(err) + ' in '+ functionName +
+              '(' + argStr + ')');
       };
 
   // Holds booleans for each GL error so after we get the error ourselves
@@ -500,9 +373,6 @@ function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc, opt_err_ctx) {
         var wrapped = makeErrorWrapper(ctx, propertyName);
         wrapper[propertyName] = function () {
           var result = wrapped.apply(ctx, arguments);
-          if (!result) {
-            return null;
-          }
           return makeDebugContext(result, opt_onErrorFunc, opt_onFunc, opt_err_ctx);
         };
       }
@@ -528,12 +398,6 @@ function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc, opt_err_ctx) {
 }
 
 function resetToInitialState(ctx) {
-  var isWebGL2RenderingContext = !!ctx.createTransformFeedback;
-
-  if (isWebGL2RenderingContext) {
-    ctx.bindVertexArray(null);
-  }
-
   var numAttribs = ctx.getParameter(ctx.MAX_VERTEX_ATTRIBS);
   var tmp = ctx.createBuffer();
   ctx.bindBuffer(ctx.ARRAY_BUFFER, tmp);
@@ -541,9 +405,6 @@ function resetToInitialState(ctx) {
     ctx.disableVertexAttribArray(ii);
     ctx.vertexAttribPointer(ii, 4, ctx.FLOAT, false, 0, 0);
     ctx.vertexAttrib1f(ii, 0);
-    if (isWebGL2RenderingContext) {
-      ctx.vertexAttribDivisor(ii, 0);
-    }
   }
   ctx.deleteBuffer(tmp);
 
@@ -552,11 +413,6 @@ function resetToInitialState(ctx) {
     ctx.activeTexture(ctx.TEXTURE0 + ii);
     ctx.bindTexture(ctx.TEXTURE_CUBE_MAP, null);
     ctx.bindTexture(ctx.TEXTURE_2D, null);
-    if (isWebGL2RenderingContext) {
-      ctx.bindTexture(ctx.TEXTURE_2D_ARRAY, null);
-      ctx.bindTexture(ctx.TEXTURE_3D, null);
-      ctx.bindSampler(ii, null);
-    }
   }
 
   ctx.activeTexture(ctx.TEXTURE0);
@@ -601,33 +457,6 @@ function resetToInitialState(ctx) {
   ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height);
   ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT | ctx.STENCIL_BUFFER_BIT);
 
-  if (isWebGL2RenderingContext) {
-    ctx.drawBuffers([ctx.BACK]);
-    ctx.readBuffer(ctx.BACK);
-    ctx.bindBuffer(ctx.COPY_READ_BUFFER, null);
-    ctx.bindBuffer(ctx.COPY_WRITE_BUFFER, null);
-    ctx.bindBuffer(ctx.PIXEL_PACK_BUFFER, null);
-    ctx.bindBuffer(ctx.PIXEL_UNPACK_BUFFER, null);
-    var numTransformFeedbacks = ctx.getParameter(ctx.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS);
-    for (var ii = 0; ii < numTransformFeedbacks; ++ii) {
-      ctx.bindBufferBase(ctx.TRANSFORM_FEEDBACK_BUFFER, ii, null);
-    }
-    var numUBOs = ctx.getParameter(ctx.MAX_UNIFORM_BUFFER_BINDINGS);
-    for (var ii = 0; ii < numUBOs; ++ii) {
-      ctx.bindBufferBase(ctx.UNIFORM_BUFFER, ii, null);
-    }
-    ctx.disable(ctx.RASTERIZER_DISCARD);
-    ctx.pixelStorei(ctx.UNPACK_IMAGE_HEIGHT, 0);
-    ctx.pixelStorei(ctx.UNPACK_SKIP_IMAGES, 0);
-    ctx.pixelStorei(ctx.UNPACK_ROW_LENGTH, 0);
-    ctx.pixelStorei(ctx.UNPACK_SKIP_ROWS, 0);
-    ctx.pixelStorei(ctx.UNPACK_SKIP_PIXELS, 0);
-    ctx.pixelStorei(ctx.PACK_ROW_LENGTH, 0);
-    ctx.pixelStorei(ctx.PACK_SKIP_ROWS, 0);
-    ctx.pixelStorei(ctx.PACK_SKIP_PIXELS, 0);
-    ctx.hint(ctx.FRAGMENT_SHADER_DERIVATIVE_HINT, ctx.DONT_CARE);
-  }
-
   // TODO: This should NOT be needed but Firefox fails with 'hint'
   while(ctx.getError());
 }
@@ -646,7 +475,6 @@ function makeLostContextSimulatingCanvas(canvas) {
   var numCalls_ = 0;
   var canRestore_ = false;
   var restoreTimeout_ = 0;
-  var isWebGL2RenderingContext;
 
   // Holds booleans for each GL error so can simulate errors.
   var glErrorShadow_ = { };
@@ -655,12 +483,11 @@ function makeLostContextSimulatingCanvas(canvas) {
     return function() {
       var ctx = f.apply(canvas, arguments);
       // Did we get a context and is it a WebGL context?
-      if ((ctx instanceof WebGLRenderingContext) || (window.WebGL2RenderingContext && (ctx instanceof WebGL2RenderingContext))) {
+      if (ctx instanceof WebGLRenderingContext) {
         if (ctx != unwrappedContext_) {
           if (unwrappedContext_) {
-            throw "got different context"
+            throw 'got different context'
           }
-          isWebGL2RenderingContext = window.WebGL2RenderingContext && (ctx instanceof WebGL2RenderingContext);
           unwrappedContext_ = ctx;
           wrappedContext_ = makeLostContextSimulatingContext(unwrappedContext_);
         }
@@ -671,7 +498,7 @@ function makeLostContextSimulatingCanvas(canvas) {
   }(canvas.getContext);
 
   function wrapEvent(listener) {
-    if (typeof(listener) == "function") {
+    if (typeof(listener) == 'function') {
       return listener;
     } else {
       return function(info) {
@@ -715,12 +542,12 @@ function makeLostContextSimulatingCanvas(canvas) {
       while (unwrappedContext_.getError());
       clearErrors();
       glErrorShadow_[unwrappedContext_.CONTEXT_LOST_WEBGL] = true;
-      var event = makeWebGLContextEvent("context lost");
+      var event = makeWebGLContextEvent('context lost');
       var callbacks = onLost_.slice();
       setTimeout(function() {
-          //log("numCallbacks:" + callbacks.length);
+          //log('numCallbacks:' + callbacks.length);
           for (var ii = 0; ii < callbacks.length; ++ii) {
-            //log("calling callback:" + ii);
+            //log('calling callback:' + ii);
             callbacks[ii](event);
           }
           if (restoreTimeout_ >= 0) {
@@ -737,7 +564,7 @@ function makeLostContextSimulatingCanvas(canvas) {
       if (onRestored_.length) {
         setTimeout(function() {
             if (!canRestore_) {
-              throw "can not restore. webglcontestlost listener did not call event.preventDefault";
+              throw 'can not restore. webglcontestlost listener did not call event.preventDefault';
             }
             freeResources();
             resetToInitialState(unwrappedContext_);
@@ -745,7 +572,7 @@ function makeLostContextSimulatingCanvas(canvas) {
             numCalls_ = 0;
             canRestore_ = false;
             var callbacks = onRestored_.slice();
-            var event = makeWebGLContextEvent("context restored");
+            var event = makeWebGLContextEvent('context restored');
             for (var ii = 0; ii < callbacks.length; ++ii) {
               callbacks[ii](event);
             }
@@ -756,7 +583,7 @@ function makeLostContextSimulatingCanvas(canvas) {
 
   canvas.loseContextInNCalls = function(numCalls) {
     if (contextLost_) {
-      throw "You can not ask a lost contet to be lost";
+      throw 'You can not ask a lost contet to be lost';
     }
     numCallsToLoseContext_ = numCalls_ + numCalls;
   };
@@ -792,7 +619,7 @@ function makeLostContextSimulatingCanvas(canvas) {
   function clearErrors() {
     var k = Object.keys(glErrorShadow_);
     for (var ii = 0; ii < k.length; ++ii) {
-      delete glErrorShadow_[k[ii]];
+      delete glErrorShadow_[k];
     }
   }
 
@@ -809,7 +636,7 @@ function makeLostContextSimulatingCanvas(canvas) {
   function makeLostContextFunctionWrapper(ctx, functionName) {
     var f = ctx[functionName];
     return function() {
-      // log("calling:" + functionName);
+      // log('calling:' + functionName);
       // Only call the functions if the context is not lost.
       loseContextIfTime();
       if (!contextLost_) {
@@ -839,19 +666,6 @@ function makeLostContextSimulatingCanvas(canvas) {
       } else if (resource instanceof WebGLTexture) {
         unwrappedContext_.deleteTexture(resource);
       }
-      else if (isWebGL2RenderingContext) {
-        if (resource instanceof WebGLQuery) {
-          unwrappedContext_.deleteQuery(resource);
-        } else if (resource instanceof WebGLSampler) {
-          unwrappedContext_.deleteSampler(resource);
-        } else if (resource instanceof WebGLSync) {
-          unwrappedContext_.deleteSync(resource);
-        } else if (resource instanceof WebGLTransformFeedback) {
-          unwrappedContext_.deleteTransformFeedback(resource);
-        } else if (resource instanceof WebGLVertexArrayObject) {
-          unwrappedContext_.deleteVertexArray(resource);
-        }
-      }
     }
   }
 
@@ -896,22 +710,13 @@ function makeLostContextSimulatingCanvas(canvas) {
     };
 
     var creationFunctions = [
-      "createBuffer",
-      "createFramebuffer",
-      "createProgram",
-      "createRenderbuffer",
-      "createShader",
-      "createTexture"
+      'createBuffer',
+      'createFramebuffer',
+      'createProgram',
+      'createRenderbuffer',
+      'createShader',
+      'createTexture'
     ];
-    if (isWebGL2RenderingContext) {
-      creationFunctions.push(
-        "createQuery",
-        "createSampler",
-        "fenceSync",
-        "createTransformFeedback",
-        "createVertexArray"
-      );
-    }
     for (var ii = 0; ii < creationFunctions.length; ++ii) {
       var functionName = creationFunctions[ii];
       wrappedContext_[functionName] = function(f) {
@@ -929,39 +734,24 @@ function makeLostContextSimulatingCanvas(canvas) {
     }
 
     var functionsThatShouldReturnNull = [
-      "getActiveAttrib",
-      "getActiveUniform",
-      "getBufferParameter",
-      "getContextAttributes",
-      "getAttachedShaders",
-      "getFramebufferAttachmentParameter",
-      "getParameter",
-      "getProgramParameter",
-      "getProgramInfoLog",
-      "getRenderbufferParameter",
-      "getShaderParameter",
-      "getShaderInfoLog",
-      "getShaderSource",
-      "getTexParameter",
-      "getUniform",
-      "getUniformLocation",
-      "getVertexAttrib"
+      'getActiveAttrib',
+      'getActiveUniform',
+      'getBufferParameter',
+      'getContextAttributes',
+      'getAttachedShaders',
+      'getFramebufferAttachmentParameter',
+      'getParameter',
+      'getProgramParameter',
+      'getProgramInfoLog',
+      'getRenderbufferParameter',
+      'getShaderParameter',
+      'getShaderInfoLog',
+      'getShaderSource',
+      'getTexParameter',
+      'getUniform',
+      'getUniformLocation',
+      'getVertexAttrib'
     ];
-    if (isWebGL2RenderingContext) {
-      functionsThatShouldReturnNull.push(
-        "getInternalformatParameter",
-        "getQuery",
-        "getQueryParameter",
-        "getSamplerParameter",
-        "getSyncParameter",
-        "getTransformFeedbackVarying",
-        "getIndexedParameter",
-        "getUniformIndices",
-        "getActiveUniforms",
-        "getActiveUniformBlockParameter",
-        "getActiveUniformBlockName"
-      );
-    }
     for (var ii = 0; ii < functionsThatShouldReturnNull.length; ++ii) {
       var functionName = functionsThatShouldReturnNull[ii];
       wrappedContext_[functionName] = function(f) {
@@ -976,23 +766,14 @@ function makeLostContextSimulatingCanvas(canvas) {
     }
 
     var isFunctions = [
-      "isBuffer",
-      "isEnabled",
-      "isFramebuffer",
-      "isProgram",
-      "isRenderbuffer",
-      "isShader",
-      "isTexture"
+      'isBuffer',
+      'isEnabled',
+      'isFramebuffer',
+      'isProgram',
+      'isRenderbuffer',
+      'isShader',
+      'isTexture'
     ];
-    if (isWebGL2RenderingContext) {
-      isFunctions.push(
-        "isQuery",
-        "isSampler",
-        "isSync",
-        "isTransformFeedback",
-        "isVertexArray"
-      );
-    }
     for (var ii = 0; ii < isFunctions.length; ++ii) {
       var functionName = isFunctions[ii];
       wrappedContext_[functionName] = function(f) {
@@ -1040,43 +821,11 @@ function makeLostContextSimulatingCanvas(canvas) {
       return contextLost_;
     };
 
-    if (isWebGL2RenderingContext) {
-      wrappedContext_.getFragDataLocation = function(f) {
-        return function() {
-          loseContextIfTime();
-          if (contextLost_) {
-            return -1;
-          }
-          return f.apply(ctx, arguments);
-        };
-      }(wrappedContext_.getFragDataLocation);
-
-      wrappedContext_.clientWaitSync = function(f) {
-        return function() {
-          loseContextIfTime();
-          if (contextLost_) {
-            return wrappedContext_.WAIT_FAILED;
-          }
-          return f.apply(ctx, arguments);
-        };
-      }(wrappedContext_.clientWaitSync);
-
-      wrappedContext_.getUniformBlockIndex = function(f) {
-        return function() {
-          loseContextIfTime();
-          if (contextLost_) {
-            return wrappedContext_.INVALID_INDEX;
-          }
-          return f.apply(ctx, arguments);
-        };
-      }(wrappedContext_.getUniformBlockIndex);
-    }
-
     return wrappedContext_;
   }
 }
 
-return {
+export default {
   /**
    * Initializes this module. Safe to call more than once.
    * @param {!WebGLRenderingContext} ctx A WebGL context. If
@@ -1142,11 +891,11 @@ return {
    *
    *    function throwOnGLError(err, funcName, args) {
    *      throw WebGLDebugUtils.glEnumToString(err) +
-   *            " was caused by call to " + funcName;
+   *            ' was caused by call to ' + funcName;
    *    };
    *
    *    ctx = WebGLDebugUtils.makeDebugContext(
-   *        canvas.getContext("webgl"), throwOnGLError);
+   *        canvas.getContext('webgl'), throwOnGLError);
    *
    * @param {!WebGLRenderingContext} ctx The webgl context to wrap.
    * @param {!function(err, funcName, args): void} opt_onErrorFunc The function
@@ -1190,6 +939,3 @@ return {
    */
   'resetToInitialState': resetToInitialState
 };
-
-}();
-