Framebuffer support on WebGPU renderer

.github/workflows/ci-test.yml

@@ -19,12 +19,26 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 20.x
+      - name: Install Vulkan
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libvulkan1 vulkan-tools mesa-vulkan-drivers
+      - name: Install Chrome (latest stable)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y wget gnupg
+          wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+          sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
+          sudo apt-get update
+          sudo apt-get install -y google-chrome-stable
+          which google-chrome
+          google-chrome --version
       - name: Get node modules
         run: npm ci
         env:
           CI: true
       - name: build and test
-        run: npm test
+        run: xvfb-run --auto-servernum --server-args='-screen 0 1280x1024x24' npm test
         env:
           CI: true
       - name: report test coverage

preview/index.html

@@ -30,6 +30,7 @@
 
       p.setup = async function () {
         await p.createCanvas(400, 400, p.WEBGPU);
+        fbo = p.createFramebuffer();
 
         tex = p.createImage(100, 100);
         tex.loadPixels();
@@ -43,6 +44,10 @@
           }
         }
         tex.updatePixels();
+        fbo.draw(() => {
+          p.imageMode(p.CENTER);
+          p.image(tex, 0, 0, p.width, p.height);
+        });
 
         sh = p.baseMaterialShader().modify({
           uniforms: {
@@ -87,7 +92,7 @@
             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(tex)
+          p.texture(fbo)
           p.sphere(30);
           p.pop();
         }

src/core/main.js

@@ -468,11 +468,11 @@ for (const k in constants) {
  * If `setup()` is declared `async` (e.g. `async function setup()`),
  * execution pauses at each `await` until its promise resolves.
  * For example, `font = await loadFont(...)` waits for the font asset
- * to load because `loadFont()` function returns a promise, and the await 
+ * to load because `loadFont()` function returns a promise, and the await
  * keyword means the program will wait for the promise to resolve.
  * This ensures that all assets are fully loaded before the sketch continues.
 
- * 
+ *
  * loading assets.
  *
  * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.

src/image/pixels.js

@@ -933,7 +933,7 @@ function pixels(p5, fn){
    */
   fn.loadPixels = function(...args) {
     // p5._validateParameters('loadPixels', args);
-    this._renderer.loadPixels();
+    return this._renderer.loadPixels();
   };
 
   /**

src/webgl/3d_primitives.js

@@ -1869,7 +1869,7 @@ function primitives3D(p5, fn){
     if (typeof args[4] === 'undefined') {
       // Use the retained mode for drawing rectangle,
       // if args for rounding rectangle is not provided by user.
-      const perPixelLighting = this._pInst._glAttributes.perPixelLighting;
+      const perPixelLighting = this._pInst._glAttributes?.perPixelLighting;
       const detailX = args[4] || (perPixelLighting ? 1 : 24);
       const detailY = args[5] || (perPixelLighting ? 1 : 16);
       const gid = `rect|${detailX}|${detailY}`;