Unable to render with PlayCanvas

[marklundin]

I'm testing react-native-webgpu using PlayCanvas with the following code. However nothing seems to render on IOS Simulator (I've got Metal Validation disabled).

I can change the alpha property of the context, and it will switch from transparent -> opague, however, changing the camera clear color does nothing, Im not sure if this a timing issue when calling present(). Any tips would be massively appreciated 🙏

const ref = useCanvasEffect(async () => {
    try {
      const context = ref.current.getContext('webgpu')!;

      // Import PlayCanvas dynamically to avoid static import issues
      const pc = await import('playcanvas');

      const canvas = ref.current as any;
      if (!canvas) {
        throw new Error("Canvas not available");
      }

      canvas.width = context.canvas.width;
      canvas.height = context.canvas.height;

      // Add missing DOM methods to the canvas
      if (!canvas.getBoundingClientRect) {
        canvas.getBoundingClientRect = function() {
          return {
            top: 0, left: 0,
            width: canvas.width,
            height: canvas.height,
            right: canvas.width,
            bottom: canvas.height,
            x: 0,  y: 0,
            toJSON: function() {
              return {
                top: this.top,
                left: this.left,
                width: this.width,
                height: this.height,
                right: this.right,
                bottom: this.bottom,
                x: this.x,
                y: this.y
              };
            }
          };
        };
      }

      canvas.style = {
        width: '100%',
        height: '100%',
      }

      // Create graphics device
      const gfxOptions = {
        deviceTypes: ['webgpu'], // instructs PlayCanvas to initialize using WebGPU
        alpha: false,
        antialias: false
      };

      console.log('Starting Device')
      const device = await pc.createGraphicsDevice(canvas, gfxOptions);
      console.log('Device created')
      device.maxPixelRatio = 1;//Math.min(window.devicePixelRatio || 1, 2);

      // Create app options
      const createOptions = new pc.AppOptions();
      createOptions.graphicsDevice = device;
      createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem];

      // Create and initialize app
      const app = new pc.AppBase(canvas);
      app.init(createOptions);
      app.start();

      // Set canvas fill mode and resolution
      app.setCanvasFillMode(pc.FILLMODE_NONE, canvas.width, canvas.height);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);

      // // Handle resize
      const resize = () => app.resizeCanvas(canvas.width, canvas.height);
      resize();

      // Create box entity
      const box = new pc.Entity('cube');
      box.addComponent('render', {
        type: 'box'
      });
      app.root.addChild(box);

      // Create camera entity
      const camera = new pc.Entity('camera');
      camera.addComponent('camera', {
        clearColor: new pc.Color(1, 0.6, 0.9)
      });
      app.root.addChild(camera);
      camera.setPosition(0, 0, 3);

      // Create directional light entity
      const light = new pc.Entity('light');
      light.addComponent('light');
      app.root.addChild(light);
      light.setEulerAngles(45, 0, 0);

      app.on('frameend', () => {
        context.present();
      })

    } catch (error) {
      console.error("Error setting up PlayCanvas:", error);
    }
  });