iOS support for transparent CAMetalLayer in WebGPU rendering

Would it be possible to add a feature specifically for iOS that allows developers to configure transparency in the CAMetalLayer used for WebGPU rendering?

I need to enable animations on top of other React Native views, but after testing multiple settings, I found that the underlying CAMetalLayer is opaque by default, preventing transparent WebGPU rendering.

The current clearValue used on iOS defaults to an opaque color, even if alpha values are set in the fragment shader:

const renderPassDescriptor: GPURenderPassDescriptor = {
      colorAttachments: [
        {
          view: undefined as unknown as GPUTextureView,
          clearValue: [1, 1, 1, 0], // Alpha is 0, but result is still opaque
          loadOp: 'clear' as const,
          storeOp: 'store' as const,
        },
      ],
    };

It seems like modifying the native settings below could address the issue:

Set self.opaque = NO; for the custom MetalView. Set self.layer.opaque = NO; for the backing CAMetalLayer.

However, I’m not an expert so I'm unsure about the performance implications or if this is the ideal solution. If this isn't possible, are there any alternative approaches to achieve background transparency?

wcandillon / react-native-webgpu

iOS support for transparent CAMetalLayer in WebGPU rendering #141