p5 2.2.3 → 2.3.0-rc.1

package/dist/{rendering-CC8JNTwG.js → rendering-ltTIxpF2.js}

@@ -1,7 +1,8 @@
-import { p as CORNER, t as CORNERS, v as CENTER, aB as COVER, aC as CONTAIN, a9 as RIGHT, aw as BOTTOM, B as BLEND, aD as FILL, ad as IMAGE, C as CLAMP, w as ROUND, Y as LINES, X as POINTS, c as TRIANGLES, ab as BLUR, D as DARKEST, L as LIGHTEST, A as ADD, S as SUBTRACT, a as SCREEN, E as EXCLUSION, R as REPLACE, M as MULTIPLY, b as REMOVE, as as BURN, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, d as UNSIGNED_INT, U as UNSIGNED_BYTE, av as LEFT, ax as BASELINE, ay as TOP, aE as SIMPLE, aF as FULL, q as TWO_PI, Q as OPEN, a2 as NORMAL, V as CLOSE, at as PIE, au as CHORD, h as TEXTURE, P as P2D, g as LINEAR, aa as WEBGL2, N as NEAREST, aG as LINEAR_MIPMAP, f as REPEAT, e as MIRROR, F as FLOAT, ac as WEBGL, H as HALF_FLOAT } from './constants-BdTiYOQI.js';
-import { C as Color, c as creatingReading, h as RGBA, R as RGB } from './creating_reading-C7hu6sg1.js';
+import { n as CORNER, r as CORNERS, t as CENTER, aB as COVER, aC as CONTAIN, aa as RIGHT, aw as BOTTOM, B as BLEND, aD as FILL, ae as IMAGE, C as CLAMP, u as ROUND, Q as LINES, K as POINTS, c as TRIANGLES, ac as BLUR, D as DARKEST, L as LIGHTEST, A as ADD, S as SUBTRACT, a as SCREEN, E as EXCLUSION, R as REPLACE, M as MULTIPLY, b as REMOVE, au as BURN, aq as OVERLAY, ar as HARD_LIGHT, as as SOFT_LIGHT, at as DODGE, d as UNSIGNED_INT, U as UNSIGNED_BYTE, av as LEFT, ax as BASELINE, ay as TOP, aE as SIMPLE, aF as FULL, o as TWO_PI, O as OPEN, a1 as NORMAL, J as CLOSE, a0 as PIE, $ as CHORD, a7 as TEXTURE, P as P2D, g as LINEAR, ab as WEBGL2, N as NEAREST, aG as LINEAR_MIPMAP, f as REPEAT, e as MIRROR, F as FLOAT, ad as WEBGL, H as HALF_FLOAT, W as WEBGPU } from './constants-0wkVUfqa.js';
+import { C as Color, c as creatingReading, h as RGBA, R as RGB } from './creating_reading-DLkHH80h.js';
+import './strands/ir_types.js';
 import { Element } from './dom/p5.Element.js';
-import { R as Renderer, I as Image } from './p5.Renderer-BmD2P6Wv.js';
+import { R as Renderer, I as Image } from './p5.Renderer-CQI8PO1F.js';
 import { MediaElement } from './dom/p5.MediaElement.js';
 import primitives from './shape/2d_primitives.js';
 import attributes from './shape/attributes.js';
@@ -12,7 +13,6 @@ import * as omggif from 'omggif';
 import canvas from './core/helpers.js';
 import { parse } from './io/csv.js';
 import { _checkFileExtension, downloadFile } from './io/utilities.js';
-import { GIFEncoder, quantize, nearestColorIndex } from 'gifenc';
 import pixels from './image/pixels.js';
 import transform from './core/transform.js';
 import GeometryBuilder from './webgl/GeometryBuilder.js';
@@ -37,7 +37,6 @@ import trigonometry from './math/trigonometry.js';
  * @module Image
  * @submodule Image
  * @for p5
- * @requires core
  */
 
 
@@ -736,7 +735,6 @@ if(typeof p5 !== 'undefined'){
  * @module IO
  * @submodule Input
  * @for p5
- * @requires core
  */
 
 
@@ -2851,11 +2849,12 @@ if(typeof p5 !== 'undefined'){
   files(p5, p5.prototype);
 }
 
+var X={trailer:59};function F(t=256){let e=0,s=new Uint8Array(t);return {get buffer(){return s.buffer},reset(){e=0;},bytesView(){return s.subarray(0,e)},bytes(){return s.slice(0,e)},writeByte(r){n(e+1),s[e]=r,e++;},writeBytes(r,o=0,i=r.length){n(e+i);for(let c=0;c<i;c++)s[e++]=r[c+o];},writeBytesView(r,o=0,i=r.byteLength){n(e+i),s.set(r.subarray(o,o+i),e),e+=i;}};function n(r){var o=s.length;if(o>=r)return;var i=1024*1024;r=Math.max(r,o*(o<i?2:1.125)>>>0),o!=0&&(r=Math.max(r,256));let c=s;s=new Uint8Array(r),e>0&&s.set(c.subarray(0,e),0);}}var O=12,J=5003,lt=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function at(t,e,s,n,r=F(512),o=new Uint8Array(256),i=new Int32Array(J),c=new Int32Array(J)){let x=i.length,a=Math.max(2,n);o.fill(0),c.fill(0),i.fill(-1);let l=0,f=0,g=a+1,h=g,b=false,w=h,_=(1<<w)-1,u=1<<g-1,k=u+1,B=u+2,p=0,A=s[0],z=0;for(let y=x;y<65536;y*=2)++z;z=8-z,r.writeByte(a),I(u);let d=s.length;for(let y=1;y<d;y++){t:{let m=s[y],v=(m<<O)+A,M=m<<z^A;if(i[M]===v){A=c[M];break t}let V=M===0?1:x-M;for(;i[M]>=0;)if(M-=V,M<0&&(M+=x),i[M]===v){A=c[M];break t}I(A),A=m,B<1<<O?(c[M]=B++,i[M]=v):(i.fill(-1),B=u+2,b=true,I(u));}}return I(A),I(k),r.writeByte(0),r.bytesView();function I(y){for(l&=lt[f],f>0?l|=y<<f:l=y,f+=w;f>=8;)o[p++]=l&255,p>=254&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0),l>>=8,f-=8;if((B>_||b)&&(b?(w=h,_=(1<<w)-1,b=false):(++w,_=w===O?1<<w:(1<<w)-1)),y==k){for(;f>0;)o[p++]=l&255,p>=254&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0),l>>=8,f-=8;p>0&&(r.writeByte(p),r.writeBytesView(o,0,p),p=0);}}}var $=at;function D(t,e,s){return t<<8&63488|e<<2&992|s>>3}function G(t,e,s,n){return t>>4|e&240|(s&240)<<4|(n&240)<<8}function j(t,e,s){return t>>4<<8|e&240|s>>4}function R(t,e,s){return t<e?e:t>s?s:t}function T(t){return t*t}function tt(t,e,s){var n=0,r=1e100;let o=t[e],i=o.cnt;o.ac;let x=o.rc,a=o.gc,l=o.bc;for(var f=o.fw;f!=0;f=t[f].fw){let h=t[f],b=h.cnt,w=i*b/(i+b);if(!(w>=r)){var g=0;(g+=w*T(h.rc-x),!(g>=r)&&(g+=w*T(h.gc-a),!(g>=r)&&(g+=w*T(h.bc-l),!(g>=r)&&(r=g,n=f))));}}o.err=r,o.nn=n;}function Q(){return {ac:0,rc:0,gc:0,bc:0,cnt:0,nn:0,fw:0,bk:0,tm:0,mtm:0,err:0}}function ut(t,e){let s=e==="rgb444"?4096:65536,n=new Array(s),r=t.length;if(e==="rgba4444")for(let o=0;o<r;++o){let i=t[o],c=i>>24&255,x=i>>16&255,a=i>>8&255,l=i&255,f=G(l,a,x,c),g=f in n?n[f]:n[f]=Q();g.rc+=l,g.gc+=a,g.bc+=x,g.ac+=c,g.cnt++;}else if(e==="rgb444")for(let o=0;o<r;++o){let i=t[o],c=i>>16&255,x=i>>8&255,a=i&255,l=j(a,x,c),f=l in n?n[l]:n[l]=Q();f.rc+=a,f.gc+=x,f.bc+=c,f.cnt++;}else for(let o=0;o<r;++o){let i=t[o],c=i>>16&255,x=i>>8&255,a=i&255,l=D(a,x,c),f=l in n?n[l]:n[l]=Q();f.rc+=a,f.gc+=x,f.bc+=c,f.cnt++;}return n}function H(t,e,s={}){let{format:n="rgb565",clearAlpha:r=true,clearAlphaColor:o=0,clearAlphaThreshold:i=0,oneBitAlpha:c=false}=s;if(!t||!t.buffer)throw new Error("quantize() expected RGBA Uint8Array data");if(!(t instanceof Uint8Array)&&!(t instanceof Uint8ClampedArray))throw new Error("quantize() expected RGBA Uint8Array data");let x=new Uint32Array(t.buffer),a=s.useSqrt!==false,l=n==="rgba4444",f=ut(x,n),g=f.length,h=g-1,b=new Uint32Array(g+1);for(var w=0,u=0;u<g;++u){let C=f[u];if(C!=null){var _=1/C.cnt;l&&(C.ac*=_),C.rc*=_,C.gc*=_,C.bc*=_,f[w++]=C;}}T(e)/w<.022&&(a=false);for(var u=0;u<w-1;++u)f[u].fw=u+1,f[u+1].bk=u,a&&(f[u].cnt=Math.sqrt(f[u].cnt));a&&(f[u].cnt=Math.sqrt(f[u].cnt));var k,B,p;for(u=0;u<w;++u){tt(f,u);var A=f[u].err;for(B=++b[0];B>1&&(p=B>>1,!(f[k=b[p]].err<=A));B=p)b[B]=k;b[B]=u;}var z=w-e;for(u=0;u<z;){for(var d;;){var I=b[1];if(d=f[I],d.tm>=d.mtm&&f[d.nn].mtm<=d.tm)break;d.mtm==h?I=b[1]=b[b[0]--]:(tt(f,I),d.tm=u);var A=f[I].err;for(B=1;(p=B+B)<=b[0]&&(p<b[0]&&f[b[p]].err>f[b[p+1]].err&&p++,!(A<=f[k=b[p]].err));B=p)b[B]=k;b[B]=I;}var y=f[d.nn],m=d.cnt,v=y.cnt,_=1/(m+v);l&&(d.ac=_*(m*d.ac+v*y.ac)),d.rc=_*(m*d.rc+v*y.rc),d.gc=_*(m*d.gc+v*y.gc),d.bc=_*(m*d.bc+v*y.bc),d.cnt+=y.cnt,d.mtm=++u,f[y.bk].fw=y.fw,f[y.fw].bk=y.bk,y.mtm=h;}let M=[];var V=0;for(u=0;;++V){let L=R(Math.round(f[u].rc),0,255),C=R(Math.round(f[u].gc),0,255),Y=R(Math.round(f[u].bc),0,255),E=255;if(l){if(E=R(Math.round(f[u].ac),0,255),c){let st=typeof c=="number"?c:127;E=E<=st?0:255;}r&&E<=i&&(L=C=Y=o,E=0);}let K=l?[L,C,Y,E]:[L,C,Y];if(xt(M,K)||M.push(K),(u=f[u].fw)==0)break}return M}function xt(t,e){for(let s=0;s<t.length;s++){let n=t[s],r=n[0]===e[0]&&n[1]===e[1]&&n[2]===e[2],o=n.length>=4&&e.length>=4?n[3]===e[3]:true;if(r&&o)return  true}return  false}function U(t,e){var s=0,n;for(n=0;n<t.length;n++){let r=t[n]-e[n];s+=r*r;}return s}function W(t,e,s=U){let n=Infinity,r=-1;for(let o=0;o<t.length;o++){let i=t[o],c=s(e,i);c<n&&(n=c,r=o);}return r}function ct(t={}){let{initialCapacity:e=4096,auto:s=true}=t,n=F(e),r=5003,o=new Uint8Array(256),i=new Int32Array(r),c=new Int32Array(r),x=false;return {reset(){n.reset(),x=false;},finish(){n.writeByte(X.trailer);},bytes(){return n.bytes()},bytesView(){return n.bytesView()},get buffer(){return n.buffer},get stream(){return n},writeHeader:a,writeFrame(l,f,g,h={}){let{transparent:b=false,transparentIndex:w=0,delay:_=0,palette:u=null,repeat:k=0,colorDepth:B=8,dispose:p=-1}=h,A=false;if(s?x||(A=true,a(),x=true):A=Boolean(h.first),f=Math.max(0,Math.floor(f)),g=Math.max(0,Math.floor(g)),A){if(!u)throw new Error("First frame must include a { palette } option");pt(n,f,g,u,B),it(n,u),k>=0&&dt(n,k);}let z=Math.round(_/10);wt(n,p,z,b,w);let d=Boolean(u)&&!A;ht(n,f,g,d?u:null),d&&it(n,u),yt(n,l,f,g,B,o,i,c);}};function a(){ft(n,"GIF89a");}}function wt(t,e,s,n,r){t.writeByte(33),t.writeByte(249),t.writeByte(4),r<0&&(r=0,n=false);var o,i;n?(o=1,i=2):(o=0,i=0),e>=0&&(i=e&7),i<<=2;let c=0;t.writeByte(0|i|c|o),S(t,s),t.writeByte(r||0),t.writeByte(0);}function pt(t,e,s,n,r=8){let o=1,i=0,c=Z(n.length)-1,x=o<<7|r-1<<4|i<<3|c,a=0,l=0;S(t,e),S(t,s),t.writeBytes([x,a,l]);}function dt(t,e){t.writeByte(33),t.writeByte(255),t.writeByte(11),ft(t,"NETSCAPE2.0"),t.writeByte(3),t.writeByte(1),S(t,e),t.writeByte(0);}function it(t,e){let s=1<<Z(e.length);for(let n=0;n<s;n++){let r=[0,0,0];n<e.length&&(r=e[n]),t.writeByte(r[0]),t.writeByte(r[1]),t.writeByte(r[2]);}}function ht(t,e,s,n){if(t.writeByte(44),S(t,0),S(t,0),S(t,e),S(t,s),n){let r=0,o=0,i=Z(n.length)-1;t.writeByte(128|r|o|0|i);}else t.writeByte(0);}function yt(t,e,s,n,r=8,o,i,c){$(s,n,e,r,t,o,i,c);}function S(t,e){t.writeByte(e&255),t.writeByte(e>>8&255);}function ft(t,e){for(var s=0;s<e.length;s++)t.writeByte(e.charCodeAt(s));}function Z(t){return Math.max(Math.ceil(Math.log2(t)),1)}
+
 /**
  * @module Image
  * @submodule Loading & Displaying
  * @for p5
- * @requires core
  */
 
 
@@ -3266,7 +3265,7 @@ function loadingDisplaying(p5, fn){
     this.pixelDensity(lastPixelDensity);
 
     // create the gif encoder and the colorspace format
-    const gif = GIFEncoder();
+    const gif = ct();
 
     // calculate the global palette for this set of frames
     const globalPalette = _generateGlobalPalette(frames);
@@ -3287,7 +3286,7 @@ function loadingDisplaying(p5, fn){
           (frame[i * 4 + 2] << 8) |
           frame[i * 4 + 3];
         if (paletteCache[key] === undefined) {
-          paletteCache[key] = nearestColorIndex(
+          paletteCache[key] = W(
             globalPalette,
             frame.slice(i * 4, (i + 1) * 4)
           );
@@ -3414,7 +3413,7 @@ function loadingDisplaying(p5, fn){
     }
 
     // quantize this massive array into 256 colors and return it!
-    let colorPalette = quantize(allColors, 256, {
+    let colorPalette = H(allColors, 256, {
       format: 'rgba4444',
       oneBitAlpha: true
     });
@@ -3986,6 +3985,9 @@ function loadingDisplaying(p5, fn){
    * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
    * a red tint and make them transparent.
    *
+   * Calling `tint()` without an argument returns the current tint as a 
+   * <a href="#/p5.Color">p5.Color</a> object.
+   *
    * @method tint
    * @param  {Number}        v1      red or hue value.
    * @param  {Number}        v2      green or saturation value.
@@ -4090,10 +4092,18 @@ function loadingDisplaying(p5, fn){
    * @method tint
    * @param  {p5.Color}      color   the tint color
    */
+  /**
+   * @method tint
+   * @return {p5.Color}      the current tint color
+   */
   fn.tint = function(...args) {
-    // p5._validateParameters('tint', args);
-    const c = this.color(...args);
-    this._renderer.states.setValue('tint', c._getRGBA([255, 255, 255, 255]));
+    if (args.length === 0) {
+      return this._renderer.states.tint; // getter
+    }
+    else {
+      this._renderer.states.setValue('tint', this.color(...args));
+      return this;
+    }
   };
 
   /**
@@ -4127,6 +4137,7 @@ function loadingDisplaying(p5, fn){
    */
   fn.noTint = function() {
     this._renderer.states.setValue('tint', null);
+    return this;
   };
 
   /**
@@ -4158,6 +4169,8 @@ function loadingDisplaying(p5, fn){
    * <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
    * center. The next parameters are its width and height.
    *
+   * Calling `imageMode()` without an argument returns the current image mode, either `CORNER`, `CORNERS`, or `CENTER`.
+   *
    * @method imageMode
    * @param {(CORNER|CORNERS|CENTER)} mode either CORNER, CORNERS, or CENTER.
    *
@@ -4221,8 +4234,15 @@ function loadingDisplaying(p5, fn){
    *   describe('A square image of a brick wall is drawn on a gray square.');
    * }
    */
+  /**
+   * @method imageMode
+   * @return {(CORNER|CORNERS|CENTER)}      the current image mode
+   */
   fn.imageMode = function(m) {
     // p5._validateParameters('imageMode', arguments);
+    if (typeof m === 'undefined') { // getter
+      return this._renderer.states.imageMode;
+    }
     if (
       m === CORNER ||
       m === CORNERS ||
@@ -4240,7 +4260,6 @@ if(typeof p5 !== 'undefined'){
 /**
  * @module 3D
  * @submodule Camera
- * @requires core
  */
 
 
@@ -5836,10 +5855,10 @@ class Camera {
     const up1 = rotMat1.row(1);
 
     // prepare new vectors.
-    const newFront = new Vector();
-    const newUp = new Vector();
-    const newEye = new Vector();
-    const newCenter = new Vector();
+    const newFront = new Vector(0, 0, 0);
+    const newUp = new Vector(0, 0, 0);
+    const newEye = new Vector(0, 0, 0);
+    const newCenter = new Vector(0, 0, 0);
 
     // Create the inverse matrix of mat0 by transposing mat0,
     // and multiply it to mat1 from the right.
@@ -8093,6 +8112,12 @@ if(typeof p5 !== 'undefined'){
   camera(p5, p5.prototype);
 }
 
+/**
+ * @module 3D
+ * @for p5
+ */
+
+
 const { STROKE_CAP_ENUM, STROKE_JOIN_ENUM } = getStrokeDefs(()=>"");
 
 class Renderer3D extends Renderer {
@@ -8205,7 +8230,7 @@ class Renderer3D extends Renderer {
     this.states._useShininess = 1;
     this.states._useMetalness = 0;
 
-    this.states.tint = [255, 255, 255, 255];
+    this.states.tint = new Color([1, 1, 1, 1]);
 
     this.states.constantAttenuation = 1;
     this.states.linearAttenuation = 0;
@@ -8228,6 +8253,7 @@ class Renderer3D extends Renderer {
 
     // clipping
     this._clipDepths = [];
+    this._textContextSavedStack = [];
     this._isClipApplied = false;
     this._stencilTestOn = false;
 
@@ -8289,6 +8315,8 @@ class Renderer3D extends Renderer {
     // Used by beginShape/endShape functions to construct a p5.Geometry
     this.shapeBuilder = new ShapeBuilder(this);
 
+    this._largeTessellationAcknowledged = false;
+
     this.geometryBufferCache = new GeometryBufferCache(this);
 
     this.curStrokeCap = ROUND;
@@ -8545,10 +8573,6 @@ class Renderer3D extends Renderer {
    * combining them with `buildGeometry()` once and then drawing that will run
    * faster than repeatedly drawing the individual pieces.
    *
-   * One can also draw shapes directly between
-   * <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a> instead of using a callback
-   * function.
    * @param {Function} callback A function that draws shapes.
    * @returns {p5.Geometry} The model that was built from the callback function.
    */
@@ -8794,7 +8818,7 @@ class Renderer3D extends Renderer {
     this.states.setValue("enableLighting", false);
 
     //reset tint value for new frame
-    this.states.setValue("tint", [255, 255, 255, 255]);
+    this.states.setValue("tint", new Color([1,1,1,1]));
 
     //Clear depth every frame
     this._resetBuffersBeforeDraw();
@@ -9395,6 +9419,15 @@ class Renderer3D extends Renderer {
     return this;
   }
 
+  push() {
+    super.push();
+    const saved = !!(this.states.textFont?.font);
+    if (saved) {
+      this.textDrawingContext().save();
+    }
+    this._textContextSavedStack.push(saved);
+  }
+
   pop(...args) {
     if (
       this._clipDepths.length > 0 &&
@@ -9402,6 +9435,9 @@ class Renderer3D extends Renderer {
     ) {
       this._clearClip();
     }
+    if (this._textContextSavedStack.pop()) {
+      this.textDrawingContext().restore();
+    }
     super.pop(...args);
     this._applyStencilTestIfClipping();
   }
@@ -9559,7 +9595,7 @@ class Renderer3D extends Renderer {
     // works differently and is global p5 state. If the p5 state has
     // been cleared, we also need to clear the value in uSampler to match.
     fillShader.setUniform("uSampler", this.states._tex || empty);
-    fillShader.setUniform("uTint", this.states.tint);
+    fillShader.setUniform("uTint", this.states.tint._getRGBA([255, 255, 255, 255]));
 
     fillShader.setUniform("uHasSetAmbient", this.states._hasSetAmbient);
     fillShader.setUniform("uAmbientMatColor", this.states.curAmbientColor);
@@ -10058,8 +10094,598 @@ class Renderer3D extends Renderer {
   }
 }
 
+const webGPUAddonMessage = 'Add the WebGPU add-on to your project and pass WEBGPU as the last argument to createCanvas.';
+
 function renderer3D(p5, fn) {
   p5.Renderer3D = Renderer3D;
+
+  ShapeBuilder.prototype.friendlyErrorsDisabled = function() {
+    return Boolean(p5.disableFriendlyErrors);
+  };
+
+  /**
+   * Creates a <a href="#/p5/p5.StorageBuffer">`p5.StorageBuffer`</a>, which is
+   * a block of data that shaders can read from, and compute shaders
+   * can also write to. This is only available in WebGPU mode.
+   *
+   * To read or write the data inside a shader, use
+   * <a href="#/p5/uniformStorage">`uniformStorage()`</a>. To update its contents
+   * from JavaScript, call <a href="#/p5.StorageBuffer/update">`.update()`</a>
+   * on the result with new data.
+   *
+   * Pass an array of objects to store a list of items, each with named
+   * properties. The properties can be numbers, arrays of numbers, vectors
+   * created with <a href="#/p5/createVector">`createVector()`</a>, or colors
+   * created with <a href="#/p5/color">`color()`</a>. Inside the shader, each
+   * item is accessed by index, and its properties are available by name.
+   *
+   * ```js example
+   * let instanceData;
+   * let instancesShader;
+   * let instance;
+   * let count = 5;
+   *
+   * async function setup() {
+   *   await createCanvas(200, 200, WEBGPU);
+   *
+   *   let data = [];
+   *   for (let i = 0; i < count; i++) {
+   *     data.push({
+   *       position: createVector(
+   *         random(-1, 1) * width / 2,
+   *         random(-1, 1) * height / 2,
+   *         0,
+   *       ),
+   *       color: color(
+   *         random(255),
+   *         random(255),
+   *         random(255)
+   *       )
+   *     });
+   *   }
+   *   instanceData = createStorage(data);
+   *   instance = buildGeometry(drawInstance);
+   *   instancesShader = buildMaterialShader(drawInstances);
+   *   describe('Five spheres at random positions, each a different random color.');
+   * }
+   *
+   * function drawInstance() {
+   *   sphere(15);
+   * }
+   *
+   * function drawInstances() {
+   *   let data = uniformStorage(instanceData);
+   *   let itemColor = sharedVec4();
+   *
+   *   worldInputs.begin();
+   *   let item = data[instanceID()];
+   *   itemColor = item.color;
+   *   worldInputs.position += item.position;
+   *   worldInputs.end();
+   *
+   *   finalColor.begin();
+   *   finalColor.set(itemColor);
+   *   finalColor.end();
+   * }
+   *
+   * function draw() {
+   *   background(220);
+   *   lights();
+   *   noStroke();
+   *   shader(instancesShader);
+   *   model(instance, count);
+   * }
+   * ```
+   *
+   * You can also store a plain list of numbers by passing an array of numbers.
+   * Inside the shader, each number is accessed by index directly. To create an
+   * empty list to be filled in by a compute shader, pass a count instead.
+   *
+   * ```js example
+   * let cells;
+   * let nextCells;
+   * let gameShader;
+   * let displayShader;
+   * const W = 100;
+   * const H = 100;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *
+   *   let initial = new Float32Array(W * H);
+   *   for (let i = 0; i < initial.length; i++) {
+   *     initial[i] = random() > 0.7 ? 1 : 0;
+   *   }
+   *   cells = createStorage(initial);
+   *   nextCells = createStorage(W * H);
+   *
+   *   gameShader = buildComputeShader(simulate);
+   *   displayShader = buildFilterShader(display);
+   *   describe('An animated Game of Life simulation displayed as black and white pixels.');
+   * }
+   *
+   * function simulate() {
+   *   let current = uniformStorage(() => cells);
+   *   let next = uniformStorage(() => nextCells);
+   *   let w = uniformInt(() => W);
+   *   let h = uniformInt(() => H);
+   *   let x = index.x;
+   *   let y = index.y;
+   *
+   *   let n = 0;
+   *   for (let dy = -1; dy <= 1; dy++) {
+   *     for (let dx = -1; dx <= 1; dx++) {
+   *       if (dx != 0 || dy != 0) {
+   *         let nx = (x + dx + w) % w;
+   *         let ny = (y + dy + h) % h;
+   *         n += current[ny * w + nx];
+   *       }
+   *     }
+   *   }
+   *
+   *   let alive = current[y * w + x];
+   *   let nextOutput = 0;
+   *   if (alive == 1) {
+   *     if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
+   *       nextOutput = 1;
+   *     }
+   *   } else {
+   *     if (abs(n - 3) < 0.1) {
+   *       nextOutput = 1;
+   *     }
+   *   }
+   *   next[y * w + x] = nextOutput;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(() => cells);
+   *   let w = uniformInt(() => W);
+   *   let h = uniformInt(() => H);
+   *
+   *   filterColor.begin();
+   *   let x = floor(filterColor.texCoord.x * w);
+   *   let y = floor(filterColor.texCoord.y * h);
+   *   let alive = data[y * w + x];
+   *   filterColor.set([alive, alive, alive, 1]);
+   *   filterColor.end();
+   * }
+   *
+   * function draw() {
+   *   compute(gameShader, W, H);
+   *   [nextCells, cells] = [cells, nextCells];
+   *   filter(displayShader);
+   * }
+   * ```
+   *
+   * @method createStorage
+   * @submodule p5.strands
+   * @beta
+   * @webgpu
+   * @webgpuOnly
+   * @param {Number|Array|Float32Array|Object[]} dataOrCount Either a number specifying the count of floats,
+   *   an array/Float32Array of floats, or an array of objects describing struct elements.
+   * @returns {p5.StorageBuffer} A storage buffer.
+   */
+  fn.createStorage = function (dataOrCount) {
+    if (!this._renderer.createStorage) {
+      p5._friendlyError(
+        `createStorage() is only available with the WebGPU renderer. ${webGPUAddonMessage}`,
+        'createStorage'
+      );
+      return;
+    }
+    return this._renderer.createStorage(dataOrCount);
+  };
+
+  /**
+   * Returns the default shader used for compute operations.
+   *
+   * Calling <a href="#/p5/buildComputeShader">`buildComputeShader(shaderFunction)`</a>
+   * is equivalent to calling `baseComputeShader().modify(shaderFunction)`.
+   *
+   * Read <a href="#/p5/buildComputeShader">the `buildComputeShader` reference</a> or
+   * call `baseComputeShader().inspectHooks()` for more information on what you can do with
+   * the base compute shader.
+   *
+   * @method baseComputeShader
+   * @submodule p5.strands
+   * @beta
+   * @webgpu
+   * @webgpuOnly
+   * @returns {p5.Shader} The base compute shader.
+   */
+  fn.baseComputeShader = function () {
+    if (!this._renderer.baseComputeShader) {
+      p5._friendlyError(
+        `baseComputeShader() is only available with the WebGPU renderer. ${webGPUAddonMessage}`,
+        'baseComputeShader'
+      );
+      return;
+    }
+    return this._renderer.baseComputeShader();
+  };
+
+  /**
+   * Create a new compute shader using p5.strands.
+   *
+   * A compute shader lets you run many calculations all at once on your GPU. They
+   * are similar to a <a href="#/p5/for>`for` loop,</a> but each iteration of the
+   * loop happens in parallel on the GPU rather than running one after the other.
+   * This makes them ideal for calculations or simulations involving many items.
+   *
+   * You create a compute shader by passing a function to `buildComputeShader`.
+   * The function represents one iteration of a loop.
+   *
+   * The compute shader can be run by calling <a href="#/p5/compute">`compute()`</a>
+   * and passing the shader in, along with the number of iterations in up to three
+   * dimensions. Use the <a href="#/p5/index">`index`</a> vector inside of your
+   * iteration function to refer to the current iteration of the loop. The `x`, `y`,
+   * and `z` properties will count up from zero to the count in each dimension passed
+   * into `compute`.
+   *
+   * A compute shader will read from and write to storage, which is often an array of
+   * numbers or objects. Use <a href="#/p5/createStorage">`createStorage`</a> to construct
+   * initial data. Connect your iteration function to the storage by passing the storage
+   * into <a href="#/p5/uniformStorage">`uniformStorage`</a>.
+   *
+   * Often, compute shaders are paired with <a href="#/p5/model">`model(myGeometry, count)`</a>
+   * to draw one instance per object in the storage, and a shader that uses
+   * <a href="#/p5/instanceID">`instanceID()`</a> to position each instance.
+   *
+   * ```js example
+   * let particles;
+   * let computeShader;
+   * let displayShader;
+   * let instance;
+   * const numParticles = 100;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *   particles = createStorage(makeParticles(width / 2, height / 2));
+   *   computeShader = buildComputeShader(simulate);
+   *   displayShader = buildMaterialShader(display);
+   *   instance = buildGeometry(drawParticle);
+   *   describe('100 orange particles shooting outward.');
+   * }
+   *
+   * function makeParticles(x, y) {
+   *   let data = [];
+   *   for (let i = 0; i < numParticles; i++) {
+   *     let angle = (i / numParticles) * TWO_PI;
+   *     let speed = random(0.5, 2);
+   *     data.push({
+   *       position: createVector(x, y),
+   *       velocity: createVector(cos(angle) * speed, sin(angle) * speed),
+   *     });
+   *   }
+   *   return data;
+   * }
+   *
+   * function drawParticle() {
+   *   sphere(2);
+   * }
+   *
+   * function simulate() {
+   *   let data = uniformStorage(particles);
+   *   let idx = index.x;
+   *   data[idx].position = data[idx].position + data[idx].velocity;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(particles);
+   *   worldInputs.begin();
+   *   let pos = data[instanceID()].position;
+   *   worldInputs.position.xy += pos - [width / 2, height / 2];
+   *   worldInputs.end();
+   * }
+   *
+   * function draw() {
+   *   background(30);
+   *   if (frameCount % 60 === 0) {
+   *     particles.update(makeParticles(random(width), random(height)));
+   *   }
+   *   compute(computeShader, numParticles);
+   *   noStroke();
+   *   fill(255, 200, 50);
+   *   shader(displayShader);
+   *   model(instance, numParticles);
+   * }
+   * ```
+   *
+   * ```js example
+   * let particles;
+   * let computeShader;
+   * let displayShader;
+   * let instance;
+   * const numParticles = 50;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *
+   *   let data = [];
+   *   for (let i = 0; i < numParticles; i++) {
+   *     data.push({
+   *       position: createVector(
+   *         random(-40, 40),
+   *         random(-40, 40)
+   *       ),
+   *       velocity: createVector(
+   *         random(-1, 1),
+   *         random(-1, 1)
+   *       ),
+   *     });
+   *   }
+   *   particles = createStorage(data);
+   *
+   *   computeShader = buildComputeShader(simulate);
+   *   displayShader = buildMaterialShader(display);
+   *   instance = buildGeometry(drawParticle);
+   *   describe('50 white spheres bouncing around the canvas.');
+   * }
+   *
+   * function drawParticle() {
+   *   sphere(3);
+   * }
+   *
+   * function simulate() {
+   *   let r = 3;
+   *   let data = uniformStorage(particles);
+   *   let idx = index.x;
+   *   let pos = data[idx].position;
+   *   let vel = data[idx].velocity;
+   *   pos = pos + vel;
+   *   if (pos.x > width/2 - r || pos.x < -height/2 + r) {
+   *     vel.x = -vel.x;
+   *     pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
+   *   }
+   *   if (pos.y > height/2 - r || pos.y < -height/2 + r) {
+   *     vel.y = -vel.y;
+   *     pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
+   *   }
+   *   data[idx].position = pos;
+   *   data[idx].velocity = vel;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(particles);
+   *   worldInputs.begin();
+   *   let pos = data[instanceID()].position;
+   *   worldInputs.position.xy += pos;
+   *   worldInputs.end();
+   * }
+   *
+   * function draw() {
+   *   background(30);
+   *   compute(computeShader, numParticles);
+   *   noStroke();
+   *   fill(255);
+   *   lights();
+   *   shader(displayShader);
+   *   model(instance, numParticles);
+   * }
+   * ```
+   *
+   * @method buildComputeShader
+   * @submodule p5.strands
+   * @beta
+   * @webgpu
+   * @webgpuOnly
+   * @param {Function} callback A function building a p5.strands compute shader.
+   * @returns {p5.Shader} The compute shader.
+   */
+  fn.buildComputeShader = function (cb, context) {
+    if (!this._renderer.baseComputeShader) {
+      p5._friendlyError(
+        `buildComputeShader() is only available with the WebGPU renderer. ${webGPUAddonMessage}`,
+        'buildComputeShader'
+      );
+      return;
+    }
+    return this.baseComputeShader().modify(cb, context, { hook: 'iteration' });
+  };
+
+  /**
+   * Dispatches a compute shader to run on the GPU.
+   *
+   * The first parameter, `shader`, is a compute shader created with
+   * <a href="#/p5/buildComputeShader">`buildComputeShader`</a>.
+   *
+   * Pass a number for `x` to run a simple loop. Inside the shader's iteration
+   * function, <a href="#/p5/index">`index.x`</a> will count up from 0 to
+   * that number.
+   *
+   * ```js example
+   * let particles;
+   * let computeShader;
+   * let displayShader;
+   * let instance;
+   * const numParticles = 50;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *
+   *   let data = [];
+   *   for (let i = 0; i < numParticles; i++) {
+   *     data.push({
+   *       position: createVector(
+   *         random(-40, 40),
+   *         random(-40, 40)
+   *       ),
+   *       velocity: createVector(
+   *         random(-1, 1),
+   *         random(-1, 1)
+   *       ),
+   *     });
+   *   }
+   *   particles = createStorage(data);
+   *
+   *   computeShader = buildComputeShader(simulate);
+   *   displayShader = buildMaterialShader(display);
+   *   instance = buildGeometry(drawParticle);
+   *   describe('50 white spheres bouncing around the canvas.');
+   * }
+   *
+   * function drawParticle() {
+   *   sphere(3);
+   * }
+   *
+   * function simulate() {
+   *   let r = 3;
+   *   let data = uniformStorage(particles);
+   *   let idx = index.x;
+   *   let pos = data[idx].position;
+   *   let vel = data[idx].velocity;
+   *   pos = pos + vel;
+   *   if (pos.x > width/2 - r || pos.x < -height/2 + r) {
+   *     vel.x = -vel.x;
+   *     pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
+   *   }
+   *   if (pos.y > height/2 - r || pos.y < -height/2 + r) {
+   *     vel.y = -vel.y;
+   *     pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
+   *   }
+   *   data[idx].position = pos;
+   *   data[idx].velocity = vel;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(particles);
+   *   worldInputs.begin();
+   *   let pos = data[instanceID()].position;
+   *   worldInputs.position.xy += pos;
+   *   worldInputs.end();
+   * }
+   *
+   * function draw() {
+   *   background(30);
+   *   compute(computeShader, numParticles);
+   *   noStroke();
+   *   fill(255);
+   *   lights();
+   *   shader(displayShader);
+   *   model(instance, numParticles);
+   * }
+   * ```
+   *
+   * You can also pass `y` and `z` to loop in up to three dimensions, using
+   * `index.y` and `index.z` to get the position in each. This is useful for
+   * working with 2D grids, like in the Game of Life example below.
+   *
+   * ```js example
+   * let cells;
+   * let nextCells;
+   * let gameShader;
+   * let displayShader;
+   * const W = 100;
+   * const H = 100;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *
+   *   let initial = new Float32Array(W * H);
+   *   for (let i = 0; i < initial.length; i++) {
+   *     initial[i] = random() > 0.7 ? 1 : 0;
+   *   }
+   *   cells = createStorage(initial);
+   *   nextCells = createStorage(W * H);
+   *
+   *   gameShader = buildComputeShader(simulate);
+   *   displayShader = buildFilterShader(display);
+   *   describe('An animated Game of Life simulation displayed as black and white pixels.');
+   * }
+   *
+   * function simulate() {
+   *   let current = uniformStorage(() => cells);
+   *   let next = uniformStorage(() => nextCells);
+   *   let w = uniformInt(() => W);
+   *   let h = uniformInt(() => H);
+   *   let x = index.x;
+   *   let y = index.y;
+   *
+   *   let n = 0;
+   *   for (let dy = -1; dy <= 1; dy++) {
+   *     for (let dx = -1; dx <= 1; dx++) {
+   *       if (dx != 0 || dy != 0) {
+   *         let nx = (x + dx + w) % w;
+   *         let ny = (y + dy + h) % h;
+   *         n += current[ny * w + nx];
+   *       }
+   *     }
+   *   }
+   *
+   *   let alive = current[y * w + x];
+   *   let nextOutput = 0;
+   *   if (alive == 1) {
+   *     if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
+   *       nextOutput = 1;
+   *     }
+   *   } else {
+   *     if (abs(n - 3) < 0.1) {
+   *       nextOutput = 1;
+   *     }
+   *   }
+   *   next[y * w + x] = nextOutput;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(() => cells);
+   *   let w = uniformInt(() => W);
+   *   let h = uniformInt(() => H);
+   *
+   *   filterColor.begin();
+   *   let x = floor(filterColor.texCoord.x * w);
+   *   let y = floor(filterColor.texCoord.y * h);
+   *   let alive = data[y * w + x];
+   *   filterColor.set([alive, alive, alive, 1]);
+   *   filterColor.end();
+   * }
+   *
+   * function draw() {
+   *   compute(gameShader, W, H);
+   *   [nextCells, cells] = [cells, nextCells];
+   *   filter(displayShader);
+   * }
+   * ```
+   *
+   * @method compute
+   * @submodule p5.strands
+   * @beta
+   * @webgpu
+   * @webgpuOnly
+   * @param {p5.Shader} shader The compute shader to run.
+   * @param {Number} x Number of invocations in the X dimension.
+   * @param {Number} [y=1] Number of invocations in the Y dimension.
+   * @param {Number} [z=1] Number of invocations in the Z dimension.
+   */
+  fn.compute = function (shader, x, y, z) {
+    if (!this._renderer.compute) {
+      p5._friendlyError(
+        `compute() is only available with the WebGPU renderer. ${webGPUAddonMessage}`,
+        'compute'
+      );
+      return;
+    }
+    this._renderer.compute(shader, x, y, z);
+  };
+
+  /**
+   * Information about the current iteration of a compute shader.
+   *
+   * Use it inside a
+   * <a href="#/p5/buildComputeShader">`buildComputeShader()`</a>
+   * function to write a loop that runs in parallel on the GPU.
+   *
+   * `index` is a three-component vector with the current index
+   *  across all dimensions passed to
+   *  <a href="#/p5/compute">`compute()`</a>. For example, use
+   *  `index.x` to get the index when looping in one dimension.
+   *
+   * @property index
+   * @submodule p5.strands
+   * @beta
+   * @webgpu
+   * @webgpuOnly
+   */
 }
 
 if (typeof p5 !== "undefined") {
@@ -10070,8 +10696,6 @@ if (typeof p5 !== "undefined") {
  * @module Shape
  * @submodule 3D Primitives
  * @for p5
- * @requires core
- * @requires p5.Geometry
  */
 
 
@@ -11857,33 +12481,38 @@ function primitives3D(p5, fn){
       const prevMode = this.states.textureMode;
       this.states.setValue('textureMode', NORMAL);
       const prevOrder = this.bezierOrder();
-      this.bezierOrder(2);
+      this.bezierOrder(3);
       this.beginShape();
       const addUVs = (x, y) => [x, y, 0, (x - x1)/width, (y - y1)/height];
+      const rr = 0.5523; // kappa: 4*(sqrt(2)-1)/3, handle ratio for cubic bezier circle approximation
       if (tr !== 0) {
         this.vertex(...addUVs(x2 - tr, y1));
-        this.bezierVertex(...addUVs(x2, y1));
+        this.bezierVertex(...addUVs(x2 - tr + tr * rr, y1));
+        this.bezierVertex(...addUVs(x2, y1 + tr - tr * rr));
         this.bezierVertex(...addUVs(x2, y1 + tr));
       } else {
         this.vertex(...addUVs(x2, y1));
       }
       if (br !== 0) {
         this.vertex(...addUVs(x2, y2 - br));
-        this.bezierVertex(...addUVs(x2, y2));
+        this.bezierVertex(...addUVs(x2, y2 - br + br * rr));
+        this.bezierVertex(...addUVs(x2 - br + rr * br, y2));
         this.bezierVertex(...addUVs(x2 - br, y2));
       } else {
         this.vertex(...addUVs(x2, y2));
       }
       if (bl !== 0) {
         this.vertex(...addUVs(x1 + bl, y2));
-        this.bezierVertex(...addUVs(x1, y2));
+        this.bezierVertex(...addUVs(x1 + bl - bl * rr, y2));
+        this.bezierVertex(...addUVs(x1, y2 - bl + bl * rr));
         this.bezierVertex(...addUVs(x1, y2 - bl));
       } else {
         this.vertex(...addUVs(x1, y2));
       }
       if (tl !== 0) {
         this.vertex(...addUVs(x1, y1 + tl));
-        this.bezierVertex(...addUVs(x1, y1));
+        this.bezierVertex(...addUVs(x1, y1 + tl - tl * rr));
+        this.bezierVertex(...addUVs(x1 + tl - tl * rr, y1));
         this.bezierVertex(...addUVs(x1 + tl, y1));
       } else {
         this.vertex(...addUVs(x1, y1));
@@ -12665,7 +13294,6 @@ if(typeof p5 !== 'undefined'){
  * @module 3D
  * @submodule Lights
  * @for p5
- * @requires core
  */
 
 
@@ -14428,7 +15056,6 @@ if(typeof p5 !== 'undefined'){
  * @module 3D
  * @submodule Material
  * @for p5
- * @requires core
  */
 
 
@@ -14921,6 +15548,7 @@ function material(p5, fn) {
    * `loadFilterShader('myShader.js', onLoaded)`.
    *
    * @method loadFilterShader
+   * @beta
    * @submodule p5.strands
    * @param {String} filename path to a p5.strands JavaScript file or a GLSL fragment shader file
    * @param {Function} [successCallback] callback to be called once the shader is
@@ -17073,6 +17701,8 @@ function material(p5, fn) {
    *
    * Note: `textureMode()` can only be used in WebGL mode.
    *
+   * Calling `textureMode()` with no arguments returns the current texture mode.
+   *
    * @method  textureMode
    * @param {(IMAGE|NORMAL)} mode either IMAGE or NORMAL.
    *
@@ -17135,7 +17765,14 @@ function material(p5, fn) {
    *   endShape();
    * }
    */
+  /**
+   * @method textureMode
+   * @return {(IMAGE|NORMAL)} The current texture mode, either IMAGE or NORMAL.
+   */
   fn.textureMode = function (mode) {
+    if (typeof mode === 'undefined') { // getter
+      return this._renderer.states.textureMode;
+    }
     if (mode !== IMAGE && mode !== NORMAL) {
       console.warn(
         `You tried to set ${mode} textureMode only supports IMAGE & NORMAL `,
@@ -17243,6 +17880,9 @@ function material(p5, fn) {
    *
    * Note: `textureWrap()` can only be used in WebGL mode.
    *
+   * Calling `textureWrap()` with no arguments returns an object with the current
+   * mode for x and y directions, as in `{ wrapX: CLAMP, wrapY: REPEAT }`.
+   *
    * @method textureWrap
    * @param {(CLAMP|REPEAT|MIRROR)} wrapX either CLAMP, REPEAT, or MIRROR
    * @param {(CLAMP|REPEAT|MIRROR)} [wrapY=wrapX] either CLAMP, REPEAT, or MIRROR
@@ -17398,13 +18038,31 @@ function material(p5, fn) {
    *   endShape();
    * }
    */
+  /**
+   * @method textureWrap
+   * @return {{x: (CLAMP|REPEAT|MIRROR), y: (CLAMP|REPEAT|MIRROR)}} The current texture wrapping for x and y.
+   */
   fn.textureWrap = function (wrapX, wrapY = wrapX) {
-    this._renderer.states.setValue("textureWrapX", wrapX);
-    this._renderer.states.setValue("textureWrapY", wrapY);
+    if (typeof wrapX === 'undefined') { // getter
+      return {
+        x: this._renderer.states.textureWrapX,
+        y: this._renderer.states.textureWrapY
+      };
+    }
+    // accept what is returned from the getter
+    if (wrapX.hasOwnProperty('x') && wrapX.hasOwnProperty('y')) {
+      wrapX = wrapX.x;
+      wrapY = wrapX.y;
+    }
+    this._renderer.states.setValue('textureWrapX', wrapX);
+    this._renderer.states.setValue('textureWrapY', wrapY);
 
-    for (const texture of this._renderer.textures.values()) {
-      texture.setWrapMode(wrapX, wrapY);
+    if (this._renderer.textures) {
+      for (const texture of this._renderer.textures.values()) {
+        texture.setWrapMode(wrapX, wrapY);
+      }
     }
+    return this;
   };
 
   /**
@@ -18896,7 +19554,6 @@ function graphics(p5, fn){
  * @module 3D
  * @submodule Material
  * @for p5
- * @requires core
  */
 
 
@@ -19304,8 +19961,8 @@ if(typeof p5 !== 'undefined'){
  * @param {Uint8Array|Float32Array|undefined} pixels An existing pixels array to reuse if the size is the same
  * @param {WebGLRenderingContext} gl The WebGL context
  * @param {WebGLFramebuffer|null} framebuffer The Framebuffer to read
- * @param {Number} x The x coordiante to read, premultiplied by pixel density
- * @param {Number} y The y coordiante to read, premultiplied by pixel density
+ * @param {Number} x The x coordinate to read, premultiplied by pixel density
+ * @param {Number} y The y coordinate to read, premultiplied by pixel density
  * @param {Number} width The width in pixels to be read (factoring in pixel density)
  * @param {Number} height The height in pixels to be read (factoring in pixel density)
  * @param {GLEnum} format Either RGB or RGBA depending on how many channels to read
@@ -19727,6 +20384,20 @@ function populateGLSLHooks(shader, src, shaderType) {
       }
     }
   }
+
+  // Handle instanceID varying for fragment access
+  if (shader.hooks.instanceIDVarying) {
+    const { declaration, source, interpolation } = shader.hooks.instanceIDVarying;
+    const qualifier = interpolation ? `${interpolation} ` : '';
+    if (shaderType === "vertex") {
+      // Emit flat out declaration and inject assignment into main() body
+      hooks += `${qualifier}OUT ${declaration};\n`;
+      postMain = postMain.replace(/\{/, `{\n  ${declaration.split(' ').pop()} = ${source};`);
+    } else if (shaderType === "fragment") {
+      hooks += `${qualifier}IN ${declaration};\n`;
+    }
+  }
+
   for (const hookDef in shader.hooks.helpers) {
     hooks += `${hookDef}${shader.hooks.helpers[hookDef]}\n`;
   }
@@ -19783,7 +20454,6 @@ function checkWebGLCapabilities({ GL, webglVersion }) {
 
 /**
  * @module Rendering
- * @requires constants
  */
 
 
@@ -21230,10 +21900,12 @@ function rendering(p5, fn){
    * system variable to check what version is being used, or call
    * `setAttributes({ version: 1 })` to create a WebGL1 context.
    *
+   * Note: In WebGPU mode, you must `await` this function.
+   *
    * @method createCanvas
    * @param  {Number} [width] width of the canvas. Defaults to 100.
    * @param  {Number} [height] height of the canvas. Defaults to 100.
-   * @param  {(P2D|WEBGL|P2DHDR|WEBGPU)} [renderer] either P2D, WEBGL, or WEBGPU. Defaults to `P2D`.
+   * @param  {(P2D|WEBGL|P2DHDR)} [renderer] either P2D or WEBGL. Defaults to `P2D`.
    * @param  {HTMLCanvasElement} [canvas] existing canvas element that should be used for the sketch.
    * @return {p5.Renderer} new `p5.Renderer` that holds the canvas.
    *
@@ -21291,6 +21963,14 @@ function rendering(p5, fn){
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
    */
+  /**
+   * @method createCanvas
+   * @param  {Number} width
+   * @param  {Number} height
+   * @param  {WEBGPU} renderer
+   * @param  {HTMLCanvasElement} [canvas]
+   * @return {Promise<p5.Renderer>}
+   */
   /**
    * @method createCanvas
    * @param  {Number} [width]
@@ -21310,6 +21990,14 @@ function rendering(p5, fn){
       args.unshift(renderer);
     }
 
+    if (!renderers[selectedRenderer]) {
+      if (selectedRenderer === WEBGPU) {
+        p5._friendlyError(`To create a WEBGPU canvas, remember to add the WebGPU add-on to your project.`);
+      } else {
+        p5._friendlyError(`We weren't able to find a renderer called ${selectedRenderer}.`);
+      }
+    }
+
     // Init our graphics renderer
     if(this._renderer) this._renderer.remove();
     this._renderer = new renderers[selectedRenderer](this, w, h, true, ...args);
@@ -21846,4 +22534,4 @@ if(typeof p5 !== 'undefined'){
   rendering(p5, p5.prototype);
 }
 
-export { Camera as C, FramebufferTexture as F, Graphics as G, MipmapTexture as M, Renderer3D as R, Texture as T, request as a, loadingDisplaying as b, camera as c, files as d, setWebGLTextureParams as e, framebuffer as f, getWebGLUniformMetadata as g, getWebGLShaderAttributes as h, image as i, populateGLSLHooks as j, rendering as k, light as l, material as m, graphics as n, readPixelWebGL as o, primitives3D as p, readPixelsWebGL as q, renderer3D as r, setWebGLUniformValue as s, texture as t, checkWebGLCapabilities as u, FramebufferCamera as v, Framebuffer as w, renderers as x };
+export { Camera as C, FramebufferTexture as F, Graphics as G, MipmapTexture as M, Renderer3D as R, Texture as T, light as a, framebuffer as b, camera as c, request as d, setWebGLTextureParams as e, files as f, getWebGLUniformMetadata as g, getWebGLShaderAttributes as h, image as i, populateGLSLHooks as j, rendering as k, loadingDisplaying as l, material as m, graphics as n, readPixelWebGL as o, primitives3D as p, readPixelsWebGL as q, renderer3D as r, setWebGLUniformValue as s, texture as t, checkWebGLCapabilities as u, FramebufferCamera as v, Framebuffer as w, renderers as x };