p5 2.2.3 → 2.3.0-rc.0

package/dist/webgl/index.js

@@ -1,4 +1,4 @@
-import { r as renderer3D, p as primitives3D, l as light, m as material, c as camera, f as framebuffer, t as texture } from '../rendering-CC8JNTwG.js';
+import { r as renderer3D, p as primitives3D, a as light, m as material, c as camera, b as framebuffer, t as texture } from '../rendering-CvNr0bB8.js';
 import interaction from './interaction.js';
 import loading from './loading.js';
 import text from './text.js';
@@ -8,14 +8,15 @@ import matrix from '../math/p5.Matrix.js';
 import geometry from './p5.Geometry.js';
 import dataArray from './p5.DataArray.js';
 import rendererGL from './p5.RendererGL.js';
-import '../constants-BdTiYOQI.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../constants-CYF6mp5_.js';
+import '../creating_reading-DLkHH80h.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../math/p5.Vector.js';
 import '../shape/custom_shapes.js';
@@ -30,7 +31,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';
@@ -51,15 +51,14 @@ import '../type/unicodeRanges.js';
 import '../type/lib/Typr.js';
 import 'pako';
 import '@davepagurek/bezier-path';
-import './strands_glslBackend.js';
-import '../strands/ir_types.js';
+import '../strands_glslBackend-i-ReKgZo.js';
 import '../strands/ir_dag.js';
 import '../strands/strands_FES.js';
-import '../ir_builders-Cd6rU9Vm.js';
+import '../ir_builders-C2ebb6Lu.js';
 import '../strands/ir_cfg.js';
 import '../strands/strands_builtins.js';
 import './shaderHookUtils.js';
-import '../noise3DGLSL-Bwrdi4gi.js';
+import '../webgl2Compatibility-DA7DLMuq.js';
 
 function webgl(p5){
   p5.registerAddon(renderer3D);

package/dist/webgl/interaction.js

@@ -1,11 +1,10 @@
-import { G as GRID, i as AXES } from '../constants-BdTiYOQI.js';
+import { a5 as GRID, a6 as AXES } from '../constants-CYF6mp5_.js';
 import { Vector } from '../math/p5.Vector.js';
 
 /**
  * @module 3D
  * @submodule Interaction
  * @for p5
- * @requires core
  */
 
 
@@ -371,8 +370,11 @@ function interaction(p5, fn){
       // accelerate rotate velocity
       this._renderer.rotateVelocity.add(
         deltaTheta * rotateAccelerationFactor,
-        deltaPhi * rotateAccelerationFactor
+        deltaPhi * rotateAccelerationFactor,
+        0
       );
+
+      //console.log("added");
     }
     if (this._renderer.rotateVelocity.magSq() > 0.000001) {
       // if freeRotation is true, the camera always rotates freely in the direction the pointer moves
@@ -391,8 +393,10 @@ function interaction(p5, fn){
       }
       // damping
       this._renderer.rotateVelocity.mult(damping);
+      //console.log("multiplied", damping,  this._renderer.rotateVelocity);
+
     } else {
-      this._renderer.rotateVelocity.set(0, 0);
+      this._renderer.rotateVelocity.set(0, 0, 0);
     }
 
     // move process

package/dist/webgl/light.js

@@ -1,13 +1,14 @@
-export { l as default } from '../rendering-CC8JNTwG.js';
+export { a as default } from '../rendering-CvNr0bB8.js';
 import '../math/p5.Vector.js';
-import '../creating_reading-C7hu6sg1.js';
-import '../constants-BdTiYOQI.js';
+import '../creating_reading-DLkHH80h.js';
+import '../constants-CYF6mp5_.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
@@ -21,7 +22,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';

package/dist/webgl/loading.js

@@ -1,16 +1,17 @@
 import { Geometry } from './p5.Geometry.js';
 import { Vector } from '../math/p5.Vector.js';
-import { a as request } from '../rendering-CC8JNTwG.js';
-import '../constants-BdTiYOQI.js';
+import { d as request } from '../rendering-CvNr0bB8.js';
+import '../constants-CYF6mp5_.js';
 import './p5.DataArray.js';
 import '../io/utilities.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../creating_reading-DLkHH80h.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
@@ -23,7 +24,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';
@@ -46,8 +46,6 @@ import '../math/trigonometry.js';
  * @module Shape
  * @submodule 3D Models
  * @for p5
- * @requires core
- * @requires p5.Geometry
  */
 
 
@@ -601,7 +599,6 @@ function loading(p5, fn){
     const usedVerts = {}; // Track colored vertices
     let currentMaterial = null;
     let hasColoredVertices = false;
-    let hasColorlessVertices = false;
     for (let line = 0; line < lines.length; ++line) {
       // Each line is a separate object (vertex, face, vertex normal, etc)
       // For each line, split it into tokens on whitespace. The first token
@@ -656,7 +653,7 @@ function loading(p5, fn){
                 model.uvs.push(loadedVerts.vt.at(vertParts[1]) ?
                   loadedVerts.vt.at(vertParts[1]).slice() : [0, 0]);
                 model.vertexNormals.push(loadedVerts.vn.at(vertParts[2]) ?
-                  loadedVerts.vn.at(vertParts[2]).copy() : new Vector());
+                  loadedVerts.vn.at(vertParts[2]).copy() : new Vector(0, 0, 0));
 
                 usedVerts[vertString][currentMaterial] = vertIndex;
                 face.push(vertIndex);
@@ -671,7 +668,7 @@ function loading(p5, fn){
                   model.vertexColors.push(materialDiffuseColor[2]);
                   model.vertexColors.push(1);
                 } else {
-                  hasColorlessVertices = true;
+                  model.vertexColors.push(-1, -1, -1, -1);
                 }
               } else {
                 face.push(usedVerts[vertString][currentMaterial]);
@@ -693,9 +690,8 @@ function loading(p5, fn){
     if (model.vertexNormals.length === 0) {
       model.computeNormals();
     }
-    if (hasColoredVertices === hasColorlessVertices) {
-      // If both are true or both are false, throw an error because the model is inconsistent
-      throw new Error('Model coloring is inconsistent. Either all vertices should have colors or none should.');
+    if (!hasColoredVertices) {
+      model.vertexColors = [];
     }
 
     return model;
@@ -1005,7 +1001,7 @@ function loading(p5, fn){
   /**
    * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
    *
-   * The parameter, `model`, is the
+   * The first parameter, `model`, is the
    * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
    * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
    * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
@@ -1013,11 +1009,7 @@ function loading(p5, fn){
    *
    * Note: `model()` can only be used in WebGL mode.
    *
-   * @method model
-   * @param  {p5.Geometry} model 3D shape to be drawn.
-   *
-   * @param {Number} [count=1] number of instances to draw.
-   * @example
+   * ```js example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -1045,8 +1037,9 @@ function loading(p5, fn){
    * function createShape() {
    *   cone();
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -1092,8 +1085,9 @@ function loading(p5, fn){
    *   cylinder(3, 20);
    *   pop();
    * }
+   * ```
    *
-   * @example
+   * ```js example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -1115,6 +1109,51 @@ function loading(p5, fn){
    *   // Draw the shape.
    *   model(shape);
    * }
+   * ```
+   *
+   * Multiple instances can be drawn at once with `model(geometry, count)`. On its own,
+   * all the instances get drawn to the same spot, but you can use
+   * <a href="#/p5/instanceID">`instanceID()`</a> inside of a shader to handle each instance.
+   * At large counts, this often runs faster than using a `for` loop.
+   *
+   * ```js example
+   * let instancesShader;
+   * let instance;
+   * let count = 5;
+   *
+   * function drawInstance() {
+   *   sphere(15);
+   * }
+   *
+   * function setup() {
+   *   createCanvas(200, 200, WEBGL);
+   *   instance = buildGeometry(drawInstance);
+   *   instancesShader = buildMaterialShader(drawSpaced);
+   * }
+   *
+   * function drawSpaced() {
+   *   worldInputs.begin();
+   *   // Spread spheres evenly across the canvas based on their index
+   *   let spacing = width / count;
+   *   worldInputs.position.x +=
+   *     (instanceID() - (count - 1) / 2) * spacing;
+   *   worldInputs.end();
+   * }
+   *
+   * function draw() {
+   *   background(220);
+   *   lights();
+   *   noStroke();
+   *   fill('red');
+   *   shader(instancesShader);
+   *   model(instance, count);
+   * }
+   * ```
+   *
+   * @method model
+   * @param  {p5.Geometry} model 3D shape to be drawn.
+   *
+   * @param {Number} [count=1] number of instances to draw.
    */
   fn.model = function (model, count = 1) {
     this._assert3d('model');

package/dist/webgl/material.js

@@ -1,13 +1,14 @@
-import '../constants-BdTiYOQI.js';
-export { m as default } from '../rendering-CC8JNTwG.js';
+import '../constants-CYF6mp5_.js';
+export { m as default } from '../rendering-CvNr0bB8.js';
 import './p5.Shader.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../creating_reading-DLkHH80h.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../math/p5.Vector.js';
 import '../shape/custom_shapes.js';
@@ -22,7 +23,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';

package/dist/webgl/p5.Camera.js

@@ -1,17 +1,18 @@
 import '../math/p5.Matrix.js';
 import '../math/p5.Vector.js';
 import './p5.Quat.js';
-export { C as Camera, c as default } from '../rendering-CC8JNTwG.js';
+export { C as Camera, c as default } from '../rendering-CvNr0bB8.js';
 import '../math/Matrices/Matrix.js';
-import '../constants-BdTiYOQI.js';
+import '../constants-CYF6mp5_.js';
 import '../math/Matrices/MatrixInterface.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../creating_reading-DLkHH80h.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
@@ -25,7 +26,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';

package/dist/webgl/p5.Framebuffer.js

@@ -1,12 +1,13 @@
-import '../constants-BdTiYOQI.js';
-import '../creating_reading-C7hu6sg1.js';
-export { w as Framebuffer, v as FramebufferCamera, F as FramebufferTexture, f as default } from '../rendering-CC8JNTwG.js';
+import '../constants-CYF6mp5_.js';
+import '../creating_reading-DLkHH80h.js';
+export { w as Framebuffer, v as FramebufferCamera, F as FramebufferTexture, b as default } from '../rendering-CvNr0bB8.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
+import '../strands/ir_types.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-C0Kzy71d.js';
 import '../image/filters.js';
 import '../math/p5.Vector.js';
 import '../shape/custom_shapes.js';
@@ -21,7 +22,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';

package/dist/webgl/p5.Geometry.js

@@ -1,4 +1,4 @@
-import { a7 as FLAT, a8 as SMOOTH } from '../constants-BdTiYOQI.js';
+import { a8 as FLAT, a9 as SMOOTH } from '../constants-CYF6mp5_.js';
 import { DataArray } from './p5.DataArray.js';
 import { Vector } from '../math/p5.Vector.js';
 import { downloadFile } from '../io/utilities.js';
@@ -7,8 +7,6 @@ import { downloadFile } from '../io/utilities.js';
  * @module Shape
  * @submodule 3D Primitives
  * @for p5
- * @requires core
- * @requires p5.Geometry
  */
 
 
@@ -329,7 +327,7 @@ class Geometry {
    * let saveBtn;
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
-   *   myModel = buildGeometry(function()) {
+   *   myModel = buildGeometry(function() {
    *     for (let i = 0; i < 5; i++) {
    *       push();
    *       translate(
@@ -1204,7 +1202,7 @@ class Geometry {
     // initialize the vertexNormals array with empty vectors
     vertexNormals.length = 0;
     for (iv = 0; iv < vertices.length; ++iv) {
-      vertexNormals.push(new Vector());
+      vertexNormals.push(new Vector(0, 0, 0));
     }
 
     // loop through all the faces adding its normal to the normal

package/dist/webgl/p5.Quat.js

@@ -1,5 +1,5 @@
 import { Vector } from '../math/p5.Vector.js';
-import '../constants-BdTiYOQI.js';
+import '../constants-CYF6mp5_.js';
 
 /**
  * @module Math

package/dist/webgl/p5.RendererGL.js

@@ -1,13 +1,13 @@
-import { ac as WEBGL, aa as WEBGL2, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, p as CORNER, U as UNSIGNED_BYTE, g as LINEAR, aG as LINEAR_MIPMAP, h as TEXTURE, F as FLOAT, d as UNSIGNED_INT, H as HALF_FLOAT } from '../constants-BdTiYOQI.js';
-import { R as Renderer3D, o as readPixelWebGL, q as readPixelsWebGL, M as MipmapTexture, h as getWebGLShaderAttributes, g as getWebGLUniformMetadata, s as setWebGLUniformValue, e as setWebGLTextureParams, j as populateGLSLHooks, u as checkWebGLCapabilities } from '../rendering-CC8JNTwG.js';
+import { ad as WEBGL, ab as WEBGL2, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, n as CORNER, U as UNSIGNED_BYTE, g as LINEAR, aG as LINEAR_MIPMAP, a7 as TEXTURE, F as FLOAT, d as UNSIGNED_INT, H as HALF_FLOAT } from '../constants-CYF6mp5_.js';
+import { R as Renderer3D, o as readPixelWebGL, q as readPixelsWebGL, M as MipmapTexture, h as getWebGLShaderAttributes, g as getWebGLUniformMetadata, s as setWebGLUniformValue, e as setWebGLTextureParams, j as populateGLSLHooks, u as checkWebGLCapabilities } from '../rendering-CvNr0bB8.js';
 import { getStrokeDefs } from './enums.js';
 import { Shader } from './p5.Shader.js';
-import { R as RGB, h as RGBA } from '../creating_reading-C7hu6sg1.js';
-import { I as Image } from '../p5.Renderer-BmD2P6Wv.js';
-import { glslBackend } from './strands_glslBackend.js';
+import { R as RGB, h as RGBA } from '../creating_reading-DLkHH80h.js';
+import { I as Image } from '../p5.Renderer-C0Kzy71d.js';
+import { g as glslBackend } from '../strands_glslBackend-i-ReKgZo.js';
 import '../strands/ir_types.js';
 import { getShaderHookTypes } from './shaderHookUtils.js';
-import { f as filterBaseVert, a as filterBaseFrag, n as noiseGLSL, w as webgl2CompatibilityShader } from '../noise3DGLSL-Bwrdi4gi.js';
+import { f as filterBaseVert, a as filterBaseFrag, w as webgl2CompatibilityShader } from '../webgl2Compatibility-DA7DLMuq.js';
 import '../dom/p5.Element.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
@@ -23,7 +23,6 @@ import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
 import '../io/utilities.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../image/filters.js';
 import '../core/transform.js';
@@ -47,7 +46,7 @@ import '../core/filterShaders.js';
 import '../math/trigonometry.js';
 import '../strands/ir_dag.js';
 import '../strands/strands_FES.js';
-import '../ir_builders-Cd6rU9Vm.js';
+import '../ir_builders-C2ebb6Lu.js';
 import '../strands/ir_cfg.js';
 import '../strands/strands_builtins.js';
 
@@ -55,9 +54,9 @@ var lightingShader = "#define PI 3.141592\n\nprecision highp float;\nprecision h
 
 var normalVert = "IN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\n#define HOOK_DEFINES\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uMaterialColor;\nuniform bool uUseVertexColor;\n\nOUT vec3 vVertexNormal;\nOUT highp vec2 vVertTexCoord;\nOUT vec4 vColor;\n\nstruct Vertex {\n  vec3 position;\n  vec3 normal;\n  vec2 texCoord;\n  vec4 color;\n};\n\nvoid main(void) {\n  HOOK_beforeVertex();\n\n  Vertex inputs;\n  inputs.position = aPosition;\n  inputs.normal = aNormal;\n  inputs.texCoord = aTexCoord;\n  inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n  inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uModelNormalMatrix * inputs.normal;\n  inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  // Already multiplied by the model matrix, just apply view\n  inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n  // Apply both at once\n  inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n  inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n  // Pass varyings to fragment shader\n  vVertTexCoord = inputs.texCoord;\n  vVertexNormal = normalize(inputs.normal);\n  vColor = inputs.color;\n\n  gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n\n  HOOK_afterVertex();\n}\n";
 
-var normalFrag = "IN vec3 vVertexNormal;\nvoid main(void) {\n  HOOK_beforeFragment();\n  OUT_COLOR = HOOK_getFinalColor(vec4(vVertexNormal, 1.0));\n  HOOK_afterFragment();\n}\n";
+var normalFrag = "IN vec3 vVertexNormal;\nIN highp vec2 vVertTexCoord;\nvoid main(void) {\n  HOOK_beforeFragment();\n  OUT_COLOR = HOOK_getFinalColor(vec4(vVertexNormal, 1.0), vVertTexCoord);\n  HOOK_afterFragment();\n}";
 
-var basicFrag = "IN vec4 vColor;\nvoid main(void) {\n  HOOK_beforeFragment();\n  OUT_COLOR = HOOK_getFinalColor(vColor);\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}\n";
+var basicFrag = "IN vec4 vColor;\nIN highp vec2 vVertTexCoord;\nvoid main(void) {\n  HOOK_beforeFragment();\n  OUT_COLOR = HOOK_getFinalColor(vColor, vVertTexCoord);\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}";
 
 var lightVert = "// include lighting.glgl\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT highp vec2 vVertTexCoord;\nOUT vec3 vDiffuseColor;\nOUT vec3 vSpecularColor;\nOUT vec4 vColor;\n\nvoid main(void) {\n\n  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * viewModelPosition;\n\n  vec3 vertexNormal = normalize(uNormalMatrix * aNormal);\n  vVertTexCoord = aTexCoord;\n\n  totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);\n\n  for (int i = 0; i < 8; i++) {\n    if (i < uAmbientLightCount) {\n      vDiffuseColor += uAmbientColor[i];\n    }\n  }\n  \n  vColor = ((uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor);\n}\n";
 
@@ -65,7 +64,7 @@ var lightTextureFrag = "uniform vec4 uTint;\nuniform sampler2D uSampler;\nunifor
 
 var phongVert = "precision highp int;\n\n#define HOOK_DEFINES\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT vec3 vNormal;\nOUT vec2 vTexCoord;\nOUT vec3 vViewPosition;\nOUT vec3 vAmbientColor;\nOUT vec4 vColor;\n\nstruct Vertex {\n  vec3 position;\n  vec3 normal;\n  vec2 texCoord;\n  vec4 color;\n};\n\nvoid main(void) {\n  HOOK_beforeVertex();\n\n  Vertex inputs;\n  inputs.position = aPosition;\n  inputs.normal = aNormal;\n  inputs.texCoord = aTexCoord;\n  inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n  inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uModelNormalMatrix * inputs.normal;\n  inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  // Already multiplied by the model matrix, just apply view\n  inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n  // Apply both at once\n  inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n  inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n  // Pass varyings to fragment shader\n  vViewPosition = inputs.position;\n  vTexCoord = inputs.texCoord;\n  vNormal = inputs.normal;\n  vColor = inputs.color;\n\n  gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n  HOOK_afterVertex();\n}\n";
 
-var phongFrag = "// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec3 uAmbientColor;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec4 vColor;\n\nstruct ColorComponents {\n  vec3 baseColor;\n  float opacity;\n  vec3 ambientColor;\n  vec3 specularColor;\n  vec3 diffuse;\n  vec3 ambient;\n  vec3 specular;\n  vec3 emissive;\n};\n\nstruct Inputs {\n  vec3 normal;\n  vec2 texCoord;\n  vec3 ambientLight;\n  vec3 ambientMaterial;\n  vec3 specularMaterial;\n  vec3 emissiveMaterial;\n  vec4 color;\n  float shininess;\n  float metalness;\n};\n\nvoid main(void) {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.normal = normalize(vNormal);\n  inputs.texCoord = vTexCoord;\n  inputs.ambientLight = uAmbientColor;\n  inputs.color = isTexture\n      ? TEXTURE(uSampler, vTexCoord) * (vec4(uTint.rgb/255., 1.) * uTint.a/255.)\n      : vColor;\n  if (isTexture && inputs.color.a > 0.0) {\n    // Textures come in with premultiplied alpha. Temporarily unpremultiply it\n    // so hooks users don't have to think about premultiplied alpha.\n    inputs.color.rgb /= inputs.color.a;\n  }\n  inputs.shininess = uShininess;\n  inputs.metalness = uMetallic;\n  inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;\n  inputs.specularMaterial = uSpecularMatColor.rgb;\n  inputs.emissiveMaterial = uEmissiveMatColor.rgb;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  vec3 diffuse;\n  vec3 specular;\n  totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);\n\n  // Calculating final color as result of all lights (plus emissive term).\n\n  vec4 baseColor = inputs.color;\n  ColorComponents c;\n  c.opacity = baseColor.a;\n  c.baseColor = baseColor.rgb;\n  c.ambientColor = inputs.ambientMaterial;\n  c.specularColor = inputs.specularMaterial;\n  c.diffuse = diffuse;\n  c.ambient = inputs.ambientLight;\n  c.specular = specular;\n  c.emissive = inputs.emissiveMaterial;\n  OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c));\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}\n";
+var phongFrag = "// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec3 uAmbientColor;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec4 vColor;\n\nstruct ColorComponents {\n  vec3 baseColor;\n  float opacity;\n  vec3 ambientColor;\n  vec3 specularColor;\n  vec3 diffuse;\n  vec3 ambient;\n  vec3 specular;\n  vec3 emissive;\n};\n\nstruct Inputs {\n  vec3 normal;\n  vec2 texCoord;\n  vec3 ambientLight;\n  vec3 ambientMaterial;\n  vec3 specularMaterial;\n  vec3 emissiveMaterial;\n  vec4 color;\n  float shininess;\n  float metalness;\n};\n\nvoid main(void) {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.normal = normalize(vNormal);\n  inputs.texCoord = vTexCoord;\n  inputs.ambientLight = uAmbientColor;\n  inputs.color = isTexture\n      ? TEXTURE(uSampler, vTexCoord) * (vec4(uTint.rgb/255., 1.) * uTint.a/255.)\n      : vColor;\n  if (isTexture && inputs.color.a > 0.0) {\n    // Textures come in with premultiplied alpha. Temporarily unpremultiply it\n    // so hooks users don't have to think about premultiplied alpha.\n    inputs.color.rgb /= inputs.color.a;\n  }\n  inputs.shininess = uShininess;\n  inputs.metalness = uMetallic;\n  inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;\n  inputs.specularMaterial = uSpecularMatColor.rgb;\n  inputs.emissiveMaterial = uEmissiveMatColor.rgb;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  vec3 diffuse;\n  vec3 specular;\n  totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);\n\n  // Calculating final color as result of all lights (plus emissive term).\n\n  vec4 baseColor = inputs.color;\n  ColorComponents c;\n  c.opacity = baseColor.a;\n  c.baseColor = baseColor.rgb;\n  c.ambientColor = inputs.ambientMaterial;\n  c.specularColor = inputs.specularMaterial;\n  c.diffuse = diffuse;\n  c.ambient = inputs.ambientLight;\n  c.specular = specular;\n  c.emissive = inputs.emissiveMaterial;\n  OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c), vTexCoord);\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}\n";
 
 var fontVert = "IN vec3 aPosition;\nIN vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nOUT vec2 vTexCoord;\n\nvoid main() {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n\n  // scale by the size of the glyph's rectangle\n  positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n  // Expand glyph bounding boxes by 1px on each side to give a bit of room\n  // for antialiasing\n  vec3 newOrigin = (uModelViewMatrix * vec4(0., 0., 0., 1.)).xyz;\n  vec3 newDX = (uModelViewMatrix * vec4(1., 0., 0., 1.)).xyz;\n  vec3 newDY = (uModelViewMatrix * vec4(0., 1., 0., 1.)).xyz;\n  vec2 pixelScale = vec2(\n    1. / length(newOrigin - newDX),\n    1. / length(newOrigin - newDY)\n  );\n  vec2 offset = pixelScale * normalize(aTexCoord - vec2(0.5, 0.5));\n  vec2 textureOffset = offset * (1. / vec2(\n    uGlyphRect.z - uGlyphRect.x,\n    uGlyphRect.w - uGlyphRect.y\n  ));\n\n  // move to the corner of the glyph\n  positionVec4.xy += uGlyphRect.xy;\n\n  // move to the letter's line offset\n  positionVec4.x += uGlyphOffset;\n\n  positionVec4.xy += offset;\n  \n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vTexCoord = aTexCoord + textureOffset;\n}\n";
 
@@ -73,7 +72,7 @@ var fontFrag = "#ifndef WEBGL2\n#extension GL_OES_standard_derivatives : enable\
 
 var lineVert = "/*\n  Part of the Processing project - http://processing.org\n  Copyright (c) 2012-15 The Processing Foundation\n  Copyright (c) 2004-12 Ben Fry and Casey Reas\n  Copyright (c) 2001-04 Massachusetts Institute of Technology\n  This library is free software; you can redistribute it and/or\n  modify it under the terms of the GNU Lesser General Public\n  License as published by the Free Software Foundation, version 2.1.\n  This library is distributed in the hope that it will be useful,\n  but WITHOUT ANY WARRANTY; without even the implied warranty of\n  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU\n  Lesser General Public License for more details.\n  You should have received a copy of the GNU Lesser General\n  Public License along with this library; if not, write to the\n  Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n  Boston, MA  02111-1307  USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\n#define HOOK_DEFINES\n\nprecision highp int;\nprecision highp float;\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\n#else\nuniform mat4 uModelViewMatrix;\n#endif\n\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform bool uSimpleLines;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nIN vec3 aPosition;\nIN vec3 aTangentIn;\nIN vec3 aTangentOut;\nIN float aSide;\nIN vec4 aVertexColor;\n\nOUT vec4 vColor;\nOUT vec2 vTangent;\nOUT vec2 vCenter;\nOUT vec2 vPosition;\nOUT float vMaxDist;\nOUT float vCap;\nOUT float vJoin;\nOUT float vStrokeWeight;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n  // Rotate and translate so a starts at the origin and goes out to the right\n  bPoint -= aPoint;\n  vec2 rotatedBFrom = vec2(\n    bPoint.x*aDir.x + bPoint.y*aDir.y,\n    bPoint.y*aDir.x - bPoint.x*aDir.y\n  );\n  vec2 bTo = bPoint + bDir;\n  vec2 rotatedBTo = vec2(\n    bTo.x*aDir.x + bTo.y*aDir.y,\n    bTo.y*aDir.x - bTo.x*aDir.y\n  );\n  float intersectionDistance =\n    rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n    (rotatedBTo.y - rotatedBFrom.y);\n  return aPoint + aDir * intersectionDistance;\n}\n\nstruct StrokeVertex {\n  vec3 position;\n  vec3 tangentIn;\n  vec3 tangentOut;\n  vec4 color;\n  float weight;\n};\n\nvoid main() {\n  HOOK_beforeVertex();\n\n  if (!uSimpleLines) {\n      // Caps have one of either the in or out tangent set to 0\n      vCap = (aTangentIn == vec3(0.)) != (aTangentOut == vec3(0.)) ? 1. : 0.;\n\n      // Joins have two unique, defined tangents\n      vJoin = (\n          aTangentIn != vec3(0.) &&\n          aTangentOut != vec3(0.) &&\n          aTangentIn != aTangentOut\n      ) ? 1. : 0.;\n  }\n\n  StrokeVertex inputs;\n  inputs.position = aPosition.xyz;\n  inputs.color = uUseLineColor ? aVertexColor : uMaterialColor;\n  inputs.weight = uStrokeWeight;\n  inputs.tangentIn = aTangentIn;\n  inputs.tangentOut = aTangentOut;\n\n#ifdef AUGMENTED_HOOK_getObjectInputs\n  inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.tangentIn = (uModelMatrix * vec4(aTangentIn, 0.)).xyz;\n  inputs.tangentOut = (uModelMatrix * vec4(aTangentOut, 0.)).xyz;\n  inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  // Already multiplied by the model matrix, just apply view\n  inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.tangentIn = (uViewMatrix * vec4(aTangentIn, 0.)).xyz;\n  inputs.tangentOut = (uViewMatrix * vec4(aTangentOut, 0.)).xyz;\n#else\n  // Apply both at once\n  inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.tangentIn = (uModelViewMatrix * vec4(aTangentIn, 0.)).xyz;\n  inputs.tangentOut = (uModelViewMatrix * vec4(aTangentOut, 0.)).xyz;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n  inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n  vec4 posp = vec4(inputs.position, 1.);\n  vec4 posqIn = vec4(inputs.position + inputs.tangentIn, 1.);\n  vec4 posqOut = vec4(inputs.position + inputs.tangentOut, 1.);\n  vStrokeWeight = inputs.weight;\n\n  float facingCamera = pow(\n    // The word space tangent's z value is 0 if it's facing the camera\n    abs(normalize(posqIn-posp).z),\n\n    // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n    // so most lines get scaled and don't get clipped\n    0.25\n  );\n\n  // Moving vertices slightly toward the camera\n  // to avoid depth-fighting with the fill triangles.\n  // A mix of scaling and offsetting is used based on distance\n  // Discussion here:\n  // https://github.com/processing/p5.js/issues/7200 \n\n  // using a scale <1 moves the lines towards nearby camera\n  // in order to prevent popping effects due to half of\n  // the line disappearing behind the geometry faces.\n  float zDistance = -posp.z; \n  float distanceFactor = smoothstep(0.0, 800.0, zDistance); \n  \n  // Discussed here:\n  // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848  \n  float scale = mix(1., 0.995, facingCamera);\n  float dynamicScale = mix(scale, 1.0, distanceFactor); // Closer = more scale, farther = less\n\n  posp.xyz = posp.xyz * dynamicScale;\n  posqIn.xyz = posqIn.xyz * dynamicScale;\n  posqOut.xyz = posqOut.xyz * dynamicScale;\n\n  // Moving vertices slightly toward camera when far away \n  // https://github.com/processing/p5.js/issues/6956 \n  float zOffset = mix(0., -1., facingCamera);\n  float dynamicZAdjustment = mix(0.0, zOffset, distanceFactor); // Closer = less zAdjustment, farther = more\n\n  posp.z -= dynamicZAdjustment;\n  posqIn.z -= dynamicZAdjustment;\n  posqOut.z -= dynamicZAdjustment;\n  \n  vec4 p = uProjectionMatrix * posp;\n  vec4 qIn = uProjectionMatrix * posqIn;\n  vec4 qOut = uProjectionMatrix * posqOut;\n\n  // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n  // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n  // prevent division by W by transforming the tangent formula (div by 0 causes\n  // the line to disappear, see https://github.com/processing/processing/issues/5183)\n  // t = screen_q - screen_p\n  //\n  // tangent is normalized and we don't care which aDirection it points to (+-)\n  // t = +- normalize( screen_q - screen_p )\n  // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n  //\n  // extract common factor, <1,1> - <1,1> cancels out\n  // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n  //\n  // convert to common divisor\n  // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n  //\n  // remove the common scalar divisor/factor, not needed due to normalize and +-\n  // (keep uViewport - can't remove because it has different components for x and y\n  //  and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n  // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n  vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n  vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n  vec2 curPerspScale;\n  if(uPerspective == 1) {\n    // Perspective ---\n    // convert from world to clip by multiplying with projection scaling factor\n    // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n    // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n    // Multiplying again by its sign here negates the flip to get just the scale.\n    curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n  } else {\n    // No Perspective ---\n    // multiply by W (to cancel out division by W later in the pipeline) and\n    // convert from screen to clip (derived from clip to screen above)\n    curPerspScale = p.w / (0.5 * uViewport.zw);\n  }\n\n  vec2 offset;\n  if (vJoin == 1. && !uSimpleLines) {\n    vTangent = normalize(tangentIn + tangentOut);\n    vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n    vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n    float side = sign(aSide);\n    float sideEnum = abs(aSide);\n\n    // We generate vertices for joins on either side of the centerline, but\n    // the \"elbow\" side is the only one needing a join. By not setting the\n    // offset for the other side, all its vertices will end up in the same\n    // spot and not render, effectively discarding it.\n    if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n      // Side enums:\n      //   1: the side going into the join\n      //   2: the middle of the join\n      //   3: the side going out of the join\n      if (sideEnum == 2.) {\n        // Calculate the position + tangent on either side of the join, and\n        // find where the lines intersect to find the elbow of the join\n        vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n        vec2 intersection = lineIntersection(\n          c + (side * normalIn * inputs.weight / 2.),\n          tangentIn,\n          c + (side * normalOut * inputs.weight / 2.),\n          tangentOut\n        );\n        offset = (intersection - c);\n\n        // When lines are thick and the angle of the join approaches 180, the\n        // elbow might be really far from the center. We'll apply a limit to\n        // the magnitude to avoid lines going across the whole screen when this\n        // happens.\n        float mag = length(offset);\n        float maxMag = 3. * inputs.weight;\n        if (mag > maxMag) {\n          offset *= maxMag / mag;\n        }\n      } else if (sideEnum == 1.) {\n        offset = side * normalIn * inputs.weight / 2.;\n      } else if (sideEnum == 3.) {\n        offset = side * normalOut * inputs.weight / 2.;\n      }\n    }\n    if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n      vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n      vMaxDist = abs(dot(avgNormal, normalIn * inputs.weight / 2.));\n    } else {\n      vMaxDist = inputs.weight / 2.;\n    }\n  } else {\n    vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n\n    vTangent = tangent;\n    vec2 normal = vec2(-tangent.y, tangent.x);\n\n    float normalOffset = sign(aSide);\n    // Caps will have side values of -2 or 2 on the edge of the cap that\n    // extends out from the line\n    float tangentOffset = abs(aSide) - 1.;\n    offset = (normal * normalOffset + tangent * tangentOffset) *\n      inputs.weight * 0.5;\n    vMaxDist = inputs.weight / 2.;\n  }\n\n  vCenter = p.xy;\n  vPosition = vCenter + offset;\n  vColor = inputs.color;\n\n  gl_Position.xy = p.xy + offset.xy * curPerspScale;\n  gl_Position.zw = p.zw;\n  \n  HOOK_afterVertex();\n}\n";
 
-var lineFrag = "precision highp int;\nprecision highp float;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vStrokeWeight;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n  vec2 aToB = b - a;\n  return dot(aToB, aToB);\n}\n\nstruct Inputs {\n  vec4 color;\n  vec2 tangent;\n  vec2 center;\n  vec2 position;\n  float strokeWeight;\n};\n\nvoid main() {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.color = vColor;\n  inputs.tangent = vTangent;\n  inputs.center = vCenter;\n  inputs.position = vPosition;\n  inputs.strokeWeight = vStrokeWeight;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  if (vCap > 0.) {\n    if (\n      uStrokeCap == STROKE_CAP_ROUND &&\n      HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n    ) {\n      discard;\n    } else if (\n      uStrokeCap == STROKE_CAP_SQUARE &&\n      HOOK_shouldDiscard(dot(inputs.position - inputs.center, inputs.tangent) > 0.)\n    ) {\n      discard;\n    // Use full area for PROJECT\n    } else if (HOOK_shouldDiscard(false)) {\n      discard;\n    }\n  } else if (vJoin > 0.) {\n    if (\n      uStrokeJoin == STROKE_JOIN_ROUND &&\n      HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n    ) {\n      discard;\n    } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n      vec2 normal = vec2(-inputs.tangent.y, inputs.tangent.x);\n      if (HOOK_shouldDiscard(abs(dot(inputs.position - inputs.center, normal)) > vMaxDist)) {\n        discard;\n      }\n    // Use full area for MITER\n    } else if (HOOK_shouldDiscard(false)) {\n      discard;\n    }\n  }\n  OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a);\n  HOOK_afterFragment();\n}\n";
+var lineFrag = "precision highp int;\nprecision highp float;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vStrokeWeight;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n  vec2 aToB = b - a;\n  return dot(aToB, aToB);\n}\n\nstruct Inputs {\n  vec4 color;\n  vec2 tangent;\n  vec2 center;\n  vec2 position;\n  float strokeWeight;\n};\n\nvoid main() {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.color = vColor;\n  inputs.tangent = vTangent;\n  inputs.center = vCenter;\n  inputs.position = vPosition;\n  inputs.strokeWeight = vStrokeWeight;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  if (vCap > 0.) {\n    if (\n      uStrokeCap == STROKE_CAP_ROUND &&\n      HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n    ) {\n      discard;\n    } else if (\n      uStrokeCap == STROKE_CAP_SQUARE &&\n      HOOK_shouldDiscard(dot(inputs.position - inputs.center, inputs.tangent) > 0.)\n    ) {\n      discard;\n    // Use full area for PROJECT\n    } else if (HOOK_shouldDiscard(false)) {\n      discard;\n    }\n  } else if (vJoin > 0.) {\n    if (\n      uStrokeJoin == STROKE_JOIN_ROUND &&\n      HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n    ) {\n      discard;\n    } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n      vec2 normal = vec2(-inputs.tangent.y, inputs.tangent.x);\n      if (HOOK_shouldDiscard(abs(dot(inputs.position - inputs.center, normal)) > vMaxDist)) {\n        discard;\n      }\n    // Use full area for MITER\n    } else if (HOOK_shouldDiscard(false)) {\n      discard;\n    }\n  }\n  OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a, vec2(0.0, 0.0));\n  HOOK_afterFragment();\n}\n";
 
 var imageLightVert = "precision highp float;\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\n\nOUT vec3 localPos;\nOUT vec3 vWorldNormal;\nOUT vec3 vWorldPosition;\nOUT vec2 vTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvoid main() {\n  // Multiply the position by the matrix.\n  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * viewModelPosition;  \n  \n  // orient the normals and pass to the fragment shader\n  vWorldNormal = uNormalMatrix * aNormal;\n  \n  // send the view position to the fragment shader\n  vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;\n  \n  localPos = vWorldPosition;\n  vTexCoord = aTexCoord;\n}\n\n\n/*\nin the vertex shader we'll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.\n*/\n";
 
@@ -571,7 +570,7 @@ class RendererGL extends Renderer3D {
 
   /**
    * Loads the pixels data for this canvas into the pixels[] attribute.
-   * Note that updatePixels() and set() do not work.
+   * Note that set() does not work.
    * Any pixel manipulation must be done directly to the pixels[] array.
    *
    * @private
@@ -764,7 +763,7 @@ class RendererGL extends Renderer3D {
                 color.a = components.opacity;
                 return color;
               }`,
-              "vec4 getFinalColor": "(vec4 color) { return color; }",
+              "vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
               "void afterFragment": "() {}",
             },
           }
@@ -801,7 +800,7 @@ class RendererGL extends Renderer3D {
           },
           fragment: {
             "void beforeFragment": "() {}",
-            "vec4 getFinalColor": "(vec4 color) { return color; }",
+            "vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
             "void afterFragment": "() {}",
           },
         }
@@ -829,7 +828,7 @@ class RendererGL extends Renderer3D {
           },
           fragment: {
             "void beforeFragment": "() {}",
-            "vec4 getFinalColor": "(vec4 color) { return color; }",
+            "vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
             "void afterFragment": "() {}",
           },
         }
@@ -861,7 +860,7 @@ class RendererGL extends Renderer3D {
           fragment: {
             "void beforeFragment": "() {}",
             "Inputs getPixelInputs": "(Inputs inputs) { return inputs; }",
-            "vec4 getFinalColor": "(vec4 color) { return color; }",
+            "vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
             "bool shouldDiscard": "(bool outside) { return outside; }",
             "void afterFragment": "() {}",
           },
@@ -1170,6 +1169,7 @@ class RendererGL extends Renderer3D {
       );
     }
 
+    shader._compiled = true;
     shader._glProgram = program;
     shader._vertShader = vertShader;
     shader._fragShader = fragShader;
@@ -1945,10 +1945,6 @@ class RendererGL extends Renderer3D {
     }
   }
 
-  getNoiseShaderSnippet() {
-    return noiseGLSL;
-  }
-
 }
 
 function rendererGL(p5, fn) {