Support instancing for immediate-mode primitives

Author: aashu2006

src/core/p5.Renderer3D.js

@@ -532,7 +532,7 @@ export class Renderer3D extends Renderer {
   }
 
   endShape(mode, count) {
-    this.drawShapeCount = count;
+    this.drawShapeCount = count ?? this._instanceCount ?? 1;
     super.endShape(mode, count);
   }
 
@@ -2038,61 +2038,55 @@ function renderer3D(p5, fn) {
    * 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);
-   * }
+    * let instanceData;
+    * let instancesShader;
+    * 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);
+    *   instancesShader = buildMaterialShader(drawInstances);
+    *   describe('Five spheres at random positions, each a different random color.');
+    * }
+    *
+    * function drawInstances() {
+    *   let data = uniformStorage(instanceData);
+    *   let itemColor = sharedVec4();
+    *
+    *   worldInputs.begin();
+    *   let item = data[instanceIndex];
+    *   itemColor = item.color;
+    *   worldInputs.position += item.position;
+    *   worldInputs.end();
+    *
+    *   finalColor.begin();
+    *   finalColor.set(itemColor);
+    *   finalColor.end();
+    * }
+    *
+    * function draw() {
+    *   background(220);
+    *   lights();
+    *   noStroke();
+    *   shader(instancesShader);
+    *   instances(count).sphere(15);
+    * }
    * ```
    *
    * You can also store a plain list of numbers by passing an array of numbers.
@@ -2246,23 +2240,21 @@ function renderer3D(p5, fn) {
    * 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>
+   * Often, compute shaders are paired with <a href="#/p5/instances">`instances(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.
+   * <a href="#/p5/instanceIndex">`instanceIndex`</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.');
    * }
    *
@@ -2279,10 +2271,6 @@ function renderer3D(p5, fn) {
    *   return data;
    * }
    *
-   * function drawParticle() {
-   *   sphere(2);
-   * }
-   *
    * function simulate() {
    *   let data = uniformStorage(particles);
    *   let idx = index.x;
@@ -2292,7 +2280,7 @@ function renderer3D(p5, fn) {
    * function display() {
    *   let data = uniformStorage(particles);
    *   worldInputs.begin();
-   *   let pos = data[instanceID()].position;
+   *   let pos = data[instanceIndex].position;
    *   worldInputs.position.xy += pos - [width / 2, height / 2];
    *   worldInputs.end();
    * }
@@ -2306,15 +2294,14 @@ function renderer3D(p5, fn) {
    *   noStroke();
    *   fill(255, 200, 50);
    *   shader(displayShader);
-   *   model(instance, numParticles);
+   *   instances(numParticles).sphere(2);
    * }
    * ```
    *
    * ```js example
    * let particles;
    * let computeShader;
    * let displayShader;
-   * let instance;
    * const numParticles = 50;
    *
    * async function setup() {
@@ -2337,14 +2324,9 @@ function renderer3D(p5, fn) {
    *
    *   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);
@@ -2367,7 +2349,7 @@ function renderer3D(p5, fn) {
    * function display() {
    *   let data = uniformStorage(particles);
    *   worldInputs.begin();
-   *   let pos = data[instanceID()].position;
+   *   let pos = data[instanceIndex].position;
    *   worldInputs.position.xy += pos;
    *   worldInputs.end();
    * }
@@ -2379,7 +2361,7 @@ function renderer3D(p5, fn) {
    *   fill(255);
    *   lights();
    *   shader(displayShader);
-   *   model(instance, numParticles);
+   *   instances(numParticles).sphere(3);
    * }
    * ```
    *
@@ -2416,7 +2398,6 @@ function renderer3D(p5, fn) {
    * let particles;
    * let computeShader;
    * let displayShader;
-   * let instance;
    * const numParticles = 50;
    *
    * async function setup() {
@@ -2439,14 +2420,9 @@ function renderer3D(p5, fn) {
    *
    *   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);
@@ -2469,7 +2445,7 @@ function renderer3D(p5, fn) {
    * function display() {
    *   let data = uniformStorage(particles);
    *   worldInputs.begin();
-   *   let pos = data[instanceID()].position;
+   *   let pos = data[instanceIndex].position;
    *   worldInputs.position.xy += pos;
    *   worldInputs.end();
    * }
@@ -2481,7 +2457,7 @@ function renderer3D(p5, fn) {
    *   fill(255);
    *   lights();
    *   shader(displayShader);
-   *   model(instance, numParticles);
+   *   instances(numParticles).sphere(3);
    * }
    * ```
    *

src/shape/vertex.js

@@ -833,11 +833,20 @@ function vertex(p5, fn){
    *   describe('A row of four squares. Their colors transition from purple on the left to red on the right');
    * }
    */
-  fn.endShape = function(mode, count = 1) {
+  fn.endShape = function(mode, count) {
     // p5._validateParameters('endShape', arguments);
-    if (count < 1) {
-      console.log('🌸 p5.js says: You can not have less than one instance');
-      count = 1;
+    if (typeof mode === 'number') {
+      count = mode;
+      mode = undefined;
+    }
+
+    if (count !== undefined) {
+      if (count < 1) {
+        console.log('🌸 p5.js says: You can not have less than one instance');
+        count = 1;
+      } else {
+        count = Math.round(count);
+      }
     }
 
     this._renderer.endShape(mode, count);

src/webgl/3d_primitives.js

@@ -2611,6 +2611,10 @@ function primitives3D(p5, fn){
    * @property {function(x: Number, y: Number, w: Number, h: Number=, detail: Number=): undefined} ellipse
    * @property {function(x: Number, y: Number, w: Number, h: Number, start: Number, stop: Number, mode: String=, detail: Number=): undefined} arc
    * @property {function(model: p5.Geometry, count: Number=): undefined} model
+   * @property {function(x1: Number, y1: Number, z1: Number|Number, x2: Number=, y2: Number=, z2: Number=): undefined} line
+   * @property {function(x: Number, y: Number, z: Number=): undefined} point
+   * @property {function(x1: Number, y1: Number, z1: Number|Number, x2: Number=, y2: Number=, z2: Number=, x3: Number=, y3: Number=, z3: Number=, x4: Number=, y4: Number=, z4: Number=): undefined} bezier
+   * @property {function(x1: Number, y1: Number, z1: Number|Number, x2: Number=, y2: Number=, z2: Number=, x3: Number=, y3: Number=, z3: Number=, x4: Number=, y4: Number=, z4: Number=): undefined} spline
    */
 
   /**
@@ -2627,7 +2631,7 @@ function primitives3D(p5, fn){
    *   integer.
    * @returns {p5.InstancesWrapper} an object with methods `sphere`, `box`, `plane`,
    *   `ellipsoid`, `cylinder`, `cone`, `torus`, `triangle`, `rect`, `quad`,
-   *   `ellipse`, `arc`, and `model`. Call one of
+   *   `ellipse`, `arc`, `model`, `line`, `point`, `bezier`, and `spline`. Call one of
    *   these to draw `count` instances of that primitive.
    *
    * @example
@@ -2688,7 +2692,7 @@ function primitives3D(p5, fn){
       }
     };
 
-    return {
+    const result = {
       sphere:    wrap(r.sphere),
       box:       wrap(r.box),
       plane:     wrap(r.plane),
@@ -2701,8 +2705,18 @@ function primitives3D(p5, fn){
       quad:      wrap(this.quad, this),
       ellipse:   wrap(this.ellipse, this),
       arc:       wrap(this.arc, this),
-      model:     wrap(r.model)
+      model:     wrap(r.model),
+      line:      wrap(this.line, this),
+      point:     wrap(this.point, this),
+      bezier:    wrap(this.bezier, this),
+      spline:    wrap(this.spline, this)
     };
+
+    if (typeof this.curve === 'function') {
+      result.curve = wrap(this.curve, this);
+    }
+
+    return result;
   };
 }
 

src/webgl/loading.js

@@ -1077,23 +1077,17 @@ function loading(p5, fn){
    * }
    * ```
    *
-   * Multiple instances can be drawn at once with `model(geometry, count)`. On its own,
+   * Multiple instances can be drawn at once with `instances(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.
+   * <a href="#/p5/instanceIndex">`instanceIndex`</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);
    * }
    *
@@ -1102,7 +1096,7 @@ function loading(p5, fn){
    *   // Spread spheres evenly across the canvas based on their index
    *   let spacing = width / count;
    *   worldInputs.position.x +=
-   *     (instanceID() - (count - 1) / 2) * spacing;
+   *     (instanceIndex - (count - 1) / 2) * spacing;
    *   worldInputs.end();
    * }
    *
@@ -1112,7 +1106,7 @@ function loading(p5, fn){
    *   noStroke();
    *   fill('red');
    *   shader(instancesShader);
-   *   model(instance, count);
+   *   instances(count).sphere(15);
    * }
    * ```
    *