Add Canvas transparency on iOS (#157)

apps/example/src/Triangle/HelloTriangle.tsx

@@ -25,7 +25,7 @@ export function HelloTriangle() {
     context.configure({
       device,
       format: presentationFormat,
-      alphaMode: "opaque",
+      alphaMode: "premultiplied",
     });
 
     const pipeline = device.createRenderPipeline({
@@ -79,7 +79,8 @@ export function HelloTriangle() {
 
   return (
     <View style={style.container}>
-      <Canvas ref={ref} style={style.webgpu} />
+      <View style={{ flex: 1, backgroundColor: "#3498db" }} />
+      <Canvas ref={ref} style={StyleSheet.absoluteFill} />
     </View>
   );
 }
@@ -88,7 +89,4 @@ const style = StyleSheet.create({
   container: {
     flex: 1,
   },
-  webgpu: {
-    flex: 1,
-  },
 });

apps/example/src/Triangle/triangle.ts

@@ -14,4 +14,4 @@ fn main(
 export const redFragWGSL = `@fragment
 fn main() -> @location(0) vec4f {
   return vec4(1.0, 0.0, 0.0, 1.0);
-}`;
+}`;

packages/webgpu/cpp/rnwgpu/api/Convertors.h

@@ -280,15 +280,6 @@ class Convertor {
            Convert(out.label, in.label);
   }
 
-  // [[nodiscard]] bool Convert(wgpu::CanvasConfiguration &out,
-  //                            const GPUCanvasConfiguration &in) {
-  //   return Convert(out.device, in.device) && Convert(out.format, in.format)
-  //   &&
-  //          Convert(out.usage, in.usage) && Convert(out.viewFormats,
-  //          in.viewFormats) && Convert(out.colorSpace, in.colorSpace) &&
-  //          Convert(out.alphaMode, in.alphaMode);
-  // }
-
   [[nodiscard]] bool Convert(wgpu::Color &out, const GPUColor &in) {
     return Convert(out.r, in.r) && Convert(out.g, in.g) &&
            Convert(out.b, in.b) && Convert(out.a, in.a);

packages/webgpu/cpp/rnwgpu/api/GPUCanvasContext.cpp

@@ -16,12 +16,13 @@ void GPUCanvasContext::configure(
       throw std::runtime_error("Error with SurfaceConfiguration");
     }
   }
-  if (!conv(surfaceConfiguration.format, configuration->format)) {
-    throw std::runtime_error("Error with SurfaceConfiguration");
-  }
-  if (!conv(surfaceConfiguration.usage, configuration->usage)) {
-    throw std::runtime_error("Error with SurfaceConfiguration");
+  if (!conv(surfaceConfiguration.usage, configuration->usage) || !conv(surfaceConfiguration.format, configuration->format)) {
+        throw std::runtime_error("Error with SurfaceConfiguration");
   }
+
+#ifdef __APPLE__
+  surfaceConfiguration.alphaMode = configuration->alphaMode;
+#endif
   _surfaceInfo->configure(surfaceConfiguration);
 }
 

packages/webgpu/cpp/rnwgpu/api/descriptors/GPUCanvasConfiguration.h

@@ -21,6 +21,7 @@ struct GPUCanvasConfiguration {
   std::optional<double> usage;       // GPUTextureUsageFlags
   std::optional<std::vector<wgpu::TextureFormat>>
       viewFormats; // Iterable<GPUTextureFormat>
+  wgpu::CompositeAlphaMode alphaMode = wgpu::CompositeAlphaMode::Opaque;
 };
 
 } // namespace rnwgpu
@@ -58,6 +59,12 @@ struct JSIConverter<std::shared_ptr<rnwgpu::GPUCanvasConfiguration>> {
                                                                       prop,
                                                                       false);
       }
+      if (value.hasProperty(runtime, "alphaMode")) {
+        auto prop = value.getProperty(runtime, "alphaMode").asString(runtime).utf8(runtime);
+        if (prop == "premultiplied") {
+          result->alphaMode = wgpu::CompositeAlphaMode::Premultiplied;
+        }
+      }
     }
 
     return result;

packages/webgpu/src/__tests__/Alpha.spec.ts

@@ -0,0 +1,28 @@
+import { checkImage, client, encodeImage } from "./setup";
+
+describe("Alpha", () => {
+  it("Premultiplied Color", async () => {
+    const result = await client.eval(({ device, ctx, canvas }) => {
+      const commandEncoder = device.createCommandEncoder();
+      const textureView = ctx.getCurrentTexture().createView();
+      const alpha = 0.5;
+      const renderPassDescriptor: GPURenderPassDescriptor = {
+        colorAttachments: [
+          {
+            view: textureView,
+            clearValue: [0.3 * alpha, 0.6 * alpha, 1 * alpha, alpha],
+            loadOp: "clear",
+            storeOp: "store",
+          },
+        ],
+      };
+
+      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+      passEncoder.end();
+      device.queue.submit([commandEncoder.finish()]);
+      return canvas.getImageData();
+    });
+    const image = encodeImage(result);
+    checkImage(image, "snapshots/semi-opaque-cyan.png");
+  });
+});