processing · davepagurek · May 23, 2025 · May 23, 2025 · May 23, 2025 · May 24, 2025
diff --git a/.github/workflows/ci-test.yml b/.github/workflows/ci-test.yml
@@ -11,48 +11,71 @@
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            browser: chrome
+          # - os: windows-latest
+          #   browser: chrome
+
+    runs-on: ${{ matrix.os }}
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
+
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
+
+      - name: Verify Chrome (Ubuntu)
+        if: matrix.os == 'ubuntu-latest' && matrix.browser == 'chrome'
+        run: |
+          google-chrome --version
+
+      - name: Verify Chrome (Windows)
+        if: matrix.os == 'windows-latest' && matrix.browser == 'chrome'
+        run: |
+          & "C:\Program Files\Google\Chrome\Application\chrome.exe" --version
+
       - name: Get node modules
         run: npm ci
         env:
           CI: true
-      - name: build and test
+
+      - name: Build and test (Ubuntu)
         id: test
-        run: npm test
+        if: matrix.os == 'ubuntu-latest'
+        run: npm test -- --project=unit-tests
         continue-on-error: true
         env:
           CI: true
+
       - name: Generate Visual Test Report
         if: always()
         run: node visual-report.js
        env:
          CI: true
      - name: Upload Visual Test Report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: visual-test-report
          path: test/unit/visual/visual-report.html
          retention-days: 14
      - name: generate TypeScript types
        run: npm run generate-types
        env:
          CI: true
      - name: test TypeScript types
        run: npm run test:types
        env:
          CI: true
      - name: report test coverage
        if: steps.test.outcome == 'success'
        run: bash <(curl -s https://codecov.io/bash) -f coverage/coverage-final.json
        env:
          CI: true
      - name: fail job if tests failed
        if: steps.test.outcome != 'success'

diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "./math": "./dist/math/index.js",
     "./utilities": "./dist/utilities/index.js",
     "./webgl": "./dist/webgl/index.js",
+    "./webgpu": "./dist/webgpu/index.js",
     "./type": "./dist/type/index.js"
   },
   "files": [

diff --git a/preview/index.html b/preview/index.html
@@ -18,28 +18,148 @@
 <body>
   <script type="module">
     import p5 from '../src/app.js';
+    import rendererWebGPU from '../src/webgpu/p5.RendererWebGPU.js';
+
+    p5.registerAddon(rendererWebGPU);
 
     const sketch = function (p) {
       let fbo;
+      let sh;
+      let ssh;
+      let tex;
+      let font;
+
       p.setup = async function () {
-        p.createCanvas(400, 400, p.WEBGL);
-        fbo = p.createFramebuffer()
+        await p.createCanvas(400, 400, p.WEBGPU);
+        font = await p.loadFont(
+          'font/PlayfairDisplay.ttf'
+        );
+        fbo = p.createFramebuffer();
+
+        tex = p.createImage(100, 100);
+        tex.loadPixels();
+        for (let x = 0; x < tex.width; x++) {
+          for (let y = 0; y < tex.height; y++) {
+            const off = (x + y * tex.width) * 4;
+            tex.pixels[off] = p.round((x / tex.width) * 255);
+            tex.pixels[off + 1] = p.round((y / tex.height) * 255);
+            tex.pixels[off + 2] = 0;
+            tex.pixels[off + 3] = 255;
+          }
+        }
+        tex.updatePixels();
+        fbo.draw(() => {
+          //p.clear();
+          //p.background('orange');
+          p.imageMode(p.CENTER);
+          p.image(tex, 0, 0, p.width, p.height);
+        });
+
+        /*sh = p.baseMaterialShader().modify({
+          uniforms: {
+            'f32 time': () => p.millis(),
+          },
+          'Vertex getWorldInputs': `(inputs: Vertex) {
+            var result = inputs;
+            result.position.y += 40.0 * sin(uniforms.time * 0.005);
+            return result;
+          }`,
+        })*/
+        sh = p.baseMaterialShader().modify(() => {
+          const time = p.uniformFloat(() => p.millis());
+          p.getWorldInputs((inputs) => {
+            inputs.position.y += 40 * p.sin(time * 0.005);
+            return inputs;
+          });
+        }, { p })
+	/*ssh = p.baseStrokeShader().modify({
+          uniforms: {
+            'f32 time': () => p.millis(),
+          },
+          'StrokeVertex getWorldInputs': `(inputs: StrokeVertex) {
+            var result = inputs;
+            result.position.y += 40.0 * sin(uniforms.time * 0.005);
+            return result;
+          }`,
+	})*/
       };
 
       p.draw = function () {
+        p.clear();
+        /*p.orbitControl();
         p.push();
-        p.background(200);
-        fbo.begin()
-        p.background('blue')
-        p.strokeWeight(10);
+        p.textAlign(p.CENTER, p.CENTER);
+        p.textFont(font);
+        p.textSize(85)
+        p.fill('red')
+        p.noStroke()
+        p.rect(0, 0, 100, 100);
+        p.fill(0);
         p.push()
-        p.stroke('red')
-        p.line(-100, -100, 100, 100);
+        p.rotate(p.millis() * 0.001)
+        p.text('Hello!', 0, 0);
         p.pop()
-        p.translate(200, 200)
-        p.line(-100, -100, 100, 100);
-        fbo.end()
-        p.image(fbo, 0, 0)
+        p.pop();
+        return;*/
+        p.orbitControl();
+        const t = p.millis() * 0.002;
+        p.background(200);
+        p.shader(sh);
+        // p.strokeShader(ssh)
+        p.ambientLight(150);
+        p.directionalLight(100, 100, 100, 0, 1, -1);
+        p.pointLight(155, 155, 155, 0, -200, 500);
+        p.specularMaterial(255);
+        p.shininess(300);
+        //p.stroke('white');
+        p.noStroke();
+        for (const [i, c] of ['red', 'lime', 'blue'].entries()) {
+          p.push();
+          p.fill(c);
+          p.translate(
+            p.width/3 * p.sin(t + i * Math.E),
+            0, //p.width/3 * p.sin(t * 0.9 + i * Math.E + 0.2),
+            p.width/3 * p.sin(t * 1.2 + i * Math.E + 0.3),
+          )
+          if (i % 2 === 0) {
+            if (i === 0) {
+              p.texture(fbo)
+            }
+            p.box(30);
+          } else {
+            p.sphere(30);
+          }
+          p.pop();
+        }
+
+        // Test beginShape/endShape with immediate mode shapes
+        p.push();
+        p.translate(0, 100, 0);
+        p.fill('yellow');
+        p.noStroke();
+
+        // Draw a circle using beginShape/endShape
+        p.beginShape();
+        const numPoints = 16;
+        for (let i = 0; i < numPoints; i++) {
+          const angle = (i / numPoints) * Math.PI * 2;
+          const x = Math.cos(angle) * 50;
+          const y = Math.sin(angle) * 50;
+          p.vertex(x, y);
+        }
+        p.endShape(p.CLOSE);
+
+        p.translate(100, 0, 0);
+        p.fill('purple');
+
+        // Draw a square using beginShape/endShape
+        p.beginShape();
+        p.vertex(-30, -30);
+        p.vertex(30, -30);
+        p.vertex(30, 30);
+        p.vertex(-30, 30);
+        p.endShape(p.CLOSE);
+
         p.pop();
       };
     };
@@ -48,4 +168,4 @@
   </script>
 </body>
 
-</html>
+</html>
diff --git a/src/accessibility/gridOutput.js b/src/accessibility/gridOutput.js
@@ -10,7 +10,7 @@ function gridOutput(p5, fn){
 
   //updates gridOutput
   fn._updateGridOutput = function(idT) {
-    if (this._renderer && this._renderer instanceof p5.RendererGL) {
+    if (this._renderer && this._renderer.isP3D) {
       if (!this._didOutputGridWebGLMessage) {
         this._didOutputGridWebGLMessage = true;
         console.error('gridOutput() does not yet work in WebGL mode.');

diff --git a/src/accessibility/textOutput.js b/src/accessibility/textOutput.js
@@ -10,7 +10,7 @@ function textOutput(p5, fn){
 
   //updates textOutput
   fn._updateTextOutput = function(idT) {
-    if (this._renderer && this._renderer instanceof p5.RendererGL) {
+    if (this._renderer && this._renderer.isP3D) {
       if (!this._didOutputTextWebGLMessage) {
         this._didOutputTextWebGLMessage = true;
         console.error('textOutput() does not yet work in WebGL mode.');

diff --git a/src/core/constants.js b/src/core/constants.js
@@ -72,6 +72,13 @@ export const WEBGL = 'webgl';
  */
 export const WEBGL2 = 'webgl2';
 
+/**
+ * A constant used for creating a WebGPU rendering context
+ * @property {'webgpu'} WEBGPU
+ * @final
+ */
+export const WEBGPU = 'webgpu';
+
 // ENVIRONMENT
 /**
  * @typedef {'default'} ARROW

diff --git a/src/core/main.js b/src/core/main.js
@@ -87,6 +87,7 @@ class p5 {
     this._curElement = null;
     this._elements = [];
     this._glAttributes = null;
+    this._webgpuAttributes = null;
     this._requestAnimId = 0;
     this._isGlobal = false;
     this._loop = true;
@@ -171,9 +172,16 @@ class p5 {
     return this._renderer.drawingContext;
   }
 
+  static _registeredAddons = new Set();
   static registerAddon(addon) {
     const lifecycles = {};
 
+    // Don't re-register an addon. This allows addons
+    // to register dependency addons without worrying about
+    // them getting double-added.
+    if (p5._registeredAddons.has(addon)) return;
+    p5._registeredAddons.add(addon);
+
     addon(p5, p5.prototype, lifecycles);
 
     const validLifecycles = Object.keys(p5.lifecycleHooks);

diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js
@@ -383,6 +383,11 @@ class Renderer {
     return this;
   }
 
+  finishDraw() {
+    // Default no-op implementation
+    // Override in specific renderers as needed
+  }
+
 };
 
 function renderer(p5, fn){