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/preview/index.html b/preview/index.html
@@ -18,34 +18,89 @@
 <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;
+
       p.setup = async function () {
-        p.createCanvas(400, 400, p.WEBGL);
-        fbo = p.createFramebuffer()
+        await p.createCanvas(400, 400, p.WEBGPU);
+        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.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;
+          }`,
+        })
+	/*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.push();
+        p.orbitControl();
+        const t = p.millis() * 0.002;
         p.background(200);
-        fbo.begin()
-        p.background('blue')
-        p.strokeWeight(10);
-        p.push()
-        p.stroke('red')
-        p.line(-100, -100, 100, 100);
-        p.pop()
-        p.translate(200, 200)
-        p.line(-100, -100, 100, 100);
-        fbo.end()
-        p.image(fbo, 0, 0)
-        p.pop();
+        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),
+          )
+          p.texture(fbo)
+          p.sphere(30);
+          p.pop();
+        }
       };
     };
 
     new p5(sketch);
   </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;