react-native-wgpu 0.1.12 → 0.1.13

package/apple/ApplePlatformContext.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include "PlatformContext.h"
+
+namespace rnwgpu {
+
+class ApplePlatformContext : public PlatformContext {
+public:
+  ApplePlatformContext();
+  ~ApplePlatformContext() = default;
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *surface, int width,
+                            int height) override;
+
+  ImageData createImageBitmap(std::string blobId, double offset,
+                              double size) override;
+};
+
+} // namespace rnwgpu

package/apple/ApplePlatformContext.mm

@@ -0,0 +1,86 @@
+#include "ApplePlatformContext.h"
+
+#include <TargetConditionals.h>
+
+#import <React/RCTBlobManager.h>
+#import <React/RCTBridge+Private.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+#include "RNWebGPUManager.h"
+#include "WebGPUModule.h"
+
+namespace rnwgpu {
+
+void isSimulatorWithAPIValidation() {
+#if TARGET_OS_SIMULATOR
+  NSDictionary *environment = [[NSProcessInfo processInfo] environment];
+  NSString *metalDeviceWrapperType = environment[@"METAL_DEVICE_WRAPPER_TYPE"];
+
+  if ([metalDeviceWrapperType isEqualToString:@"1"]) {
+    throw std::runtime_error(
+        "To use React Native WebGPU project on the iOS simulator, you need to "
+        "disable the Metal validation API. In 'Edit Scheme,' uncheck 'Metal "
+        "Validation.'");
+  }
+#endif
+}
+
+ApplePlatformContext::ApplePlatformContext() { isSimulatorWithAPIValidation(); }
+
+wgpu::Surface ApplePlatformContext::makeSurface(wgpu::Instance instance,
+                                                void *surface, int width,
+                                                int height) {
+  wgpu::SurfaceDescriptorFromMetalLayer metalSurfaceDesc;
+  metalSurfaceDesc.layer = surface;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &metalSurfaceDesc;
+  return instance.CreateSurface(&surfaceDescriptor);
+}
+
+ImageData ApplePlatformContext::createImageBitmap(std::string blobId,
+                                                  double offset, double size) {
+  RCTBlobManager *blobManager =
+      [[RCTBridge currentBridge] moduleForClass:RCTBlobManager.class];
+  NSData *blobData =
+      [blobManager resolve:[NSString stringWithUTF8String:blobId.c_str()]
+                    offset:(long)offset
+                      size:(long)size];
+
+  if (!blobData) {
+    throw std::runtime_error("Couldn't retrive blob data");
+  }
+
+  UIImage *image = [UIImage imageWithData:blobData];
+  if (!image) {
+    throw std::runtime_error("Couldn't decode image");
+  }
+
+  CGImageRef cgImage = image.CGImage;
+  size_t width = CGImageGetWidth(cgImage);
+  size_t height = CGImageGetHeight(cgImage);
+  size_t bitsPerComponent = 8;
+  size_t bytesPerRow = width * 4;
+  std::vector<uint8_t> imageData(height * bytesPerRow);
+
+  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+  CGContextRef context = CGBitmapContextCreate(
+      imageData.data(), width, height, bitsPerComponent, bytesPerRow,
+      colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
+
+  CGContextDrawImage(context, CGRectMake(0, 0, width, height), cgImage);
+
+  // Now imageData contains a copy of the bitmap data
+
+  CGContextRelease(context);
+  CGColorSpaceRelease(colorSpace);
+
+  // Use the copied data
+  ImageData result;
+  result.width = static_cast<int>(width);
+  result.height = static_cast<int>(height);
+  result.data = imageData;
+  result.format = wgpu::TextureFormat::RGBA8Unorm;
+  return result;
+}
+
+} // namespace rnwgpu

package/apple/MetalView.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#import "WebGPUModule.h"
+#import <UIKit/UIKit.h>
+
+@interface MetalView : UIView
+
+@property NSNumber *contextId;
+
+- (void)configure;
+- (void)update;
+
+@end

package/apple/MetalView.mm

@@ -0,0 +1,58 @@
+#import "MetalView.h"
+#import "webgpu_cpp.h"
+
+#ifndef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewManager.h>
+#endif // RCT_NEW_ARCH_ENABLED
+
+@implementation MetalView {
+  BOOL _isConfigured;
+}
+
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+
+- (void)configure {
+  auto size = self.frame.size;
+  std::shared_ptr<rnwgpu::RNWebGPUManager> manager = [WebGPUModule getManager];
+  void *nativeSurface = (__bridge void *)self.layer;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto gpu = manager->_gpu;
+  auto surface = manager->_platformContext->makeSurface(
+      gpu, nativeSurface, size.width, size.height);
+  registry
+      .getSurfaceInfoOrCreate([_contextId intValue], gpu, size.width,
+                              size.height)
+      ->switchToOnscreen(nativeSurface, surface);
+}
+
+- (void)update {
+  auto size = self.frame.size;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  registry.getSurfaceInfo([_contextId intValue])
+      ->resize(size.width, size.height);
+}
+
+- (void)dealloc {
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  // Remove the surface info from the registry
+  registry.removeSurfaceInfo([_contextId intValue]);
+}
+
+#ifndef RCT_NEW_ARCH_ENABLED
+// Paper only method
+// TODO: this method is wrong, it appears to call configureSurface instead of
+// updateSurface sometimes
+- (void)reactSetFrame:(CGRect)frame {
+  [super reactSetFrame:frame];
+  if (!_isConfigured) {
+    [self configure];
+    _isConfigured = YES;
+  } else {
+    [self update];
+  }
+}
+#endif // RCT_NEW_ARCH_ENABLED
+
+@end

package/apple/WebGPUModule.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#import "RNWebGPUManager.h"
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNWgpuViewSpec/RNWgpuViewSpec.h>
+@interface WebGPUModule : RCTEventEmitter <NativeWebGPUModuleSpec>
+#else
+@interface WebGPUModule : RCTEventEmitter <RCTBridgeModule>
+#endif
+
+@property(nonatomic, weak) RCTBridge *bridge;
+@property(nonatomic, weak) RCTModuleRegistry *moduleRegistry;
+
++ (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager;
+
+@end

package/apple/WebGPUModule.mm

@@ -0,0 +1,93 @@
+#import "WebGPUModule.h"
+#include "ApplePlatformContext.h"
+#import "GPUCanvasContext.h"
+
+#import <React/RCTBridge+Private.h>
+#import <React/RCTLog.h>
+#import <React/RCTUIManagerUtils.h>
+#import <ReactCommon/RCTTurboModule.h>
+#import <jsi/jsi.h>
+#import <memory>
+
+namespace jsi = facebook::jsi;
+namespace react = facebook::react;
+
+@implementation WebGPUModule
+
+RCT_EXPORT_MODULE(WebGPUModule)
+
+static std::shared_ptr<rnwgpu::RNWebGPUManager> webgpuManager;
+
++ (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager {
+  return webgpuManager;
+}
+
+#pragma Setup and invalidation
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (void)invalidate {
+  // if (_webgpuManager != nil) {
+  //   [_webgpuManager invalidate];
+  // }
+  webgpuManager = nil;
+}
+
+- (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager {
+  return webgpuManager;
+}
+
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
+  if (webgpuManager != nil) {
+    // Already initialized, ignore call.
+    return @true;
+  }
+  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)[RCTBridge currentBridge];
+  if (!cxxBridge.runtime) {
+    NSLog(@"Failed to install react-native-filament: RCTBridge is not a "
+          @"RCTCxxBridge!");
+    return [NSNumber numberWithBool:NO];
+  }
+
+  jsi::Runtime *runtime = (jsi::Runtime *)cxxBridge.runtime;
+  if (!runtime) {
+    NSLog(@"Failed to install react-native-filament: jsi::Runtime* was null!");
+    return [NSNumber numberWithBool:NO];
+  }
+  std::shared_ptr<react::CallInvoker> jsInvoker = cxxBridge.jsCallInvoker;
+  if (!jsInvoker) {
+    NSLog(@"Failed to install react-native-filament: react::CallInvoker was "
+          @"null!");
+    return [NSNumber numberWithBool:NO];
+  }
+
+  if (!jsInvoker) {
+    jsInvoker = cxxBridge.jsCallInvoker;
+  }
+  std::shared_ptr<rnwgpu::PlatformContext> platformContext =
+      std::make_shared<rnwgpu::ApplePlatformContext>();
+  // TODO: remove allocation here
+  webgpuManager = std::make_shared<rnwgpu::RNWebGPUManager>(runtime, jsInvoker,
+                                                            platformContext);
+  return @true;
+}
+
+// RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(createSurfaceContext
+//                                        : (double)contextId) {
+//   int contextIdInt = contextId;
+//   RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
+//   auto runtime = (jsi::Runtime *)cxxBridge.runtime;
+
+//   return @true;
+// }
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeWebGPUModuleSpecJSI>(params);
+}
+#endif
+
+@end

package/apple/WebGPUView.h

@@ -0,0 +1,15 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#pragma once
+
+#import "MetalView.h"
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface WebGPUView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/apple/WebGPUView.mm

@@ -0,0 +1,68 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "WebGPUView.h"
+
+#import <react/renderer/components/RNWgpuViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNWgpuViewSpec/EventEmitters.h>
+#import <react/renderer/components/RNWgpuViewSpec/Props.h>
+#import <react/renderer/components/RNWgpuViewSpec/RCTComponentViewHelpers.h>
+
+#import "MetalView.h"
+#import "RCTFabricComponentsPlugins.h"
+#import "Utils.h"
+
+using namespace facebook::react;
+
+@implementation WebGPUView
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<WebGPUViewComponentDescriptor>();
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  /*
+    It's important to destroy the Metal Layer before releasing a view
+    to the recycled pool to prevent displaying outdated content from
+    the last usage in the new context.
+  */
+  self.contentView = nil;
+}
+
+- (MetalView *)getContentView {
+  if (!self.contentView) {
+    self.contentView = [MetalView new];
+  }
+  return (MetalView *)self.contentView;
+}
+
+- (void)updateProps:(const Props::Shared &)props
+           oldProps:(const Props::Shared &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(_props);
+  const auto &newViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(props);
+
+  if (newViewProps.contextId != oldViewProps.contextId) {
+    /*
+      The context is set only once during mounting the component
+      and never changes because it isn't available for users to modify.
+    */
+    MetalView *metalView = [MetalView new];
+    self.contentView = metalView;
+    [metalView setContextId:@(newViewProps.contextId)];
+    [metalView configure];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics {
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [(MetalView *)self.contentView update];
+}
+
+Class<RCTComponentViewProtocol> WebGPUViewCls(void) { return WebGPUView.class; }
+
+@end
+#endif

package/apple/WebGPUViewManager.mm

@@ -0,0 +1,23 @@
+#import "MetalView.h"
+#import "RCTBridge.h"
+#import "WebGPUModule.h"
+#import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
+
+@interface WebGPUViewManager : RCTViewManager
+@end
+
+@implementation WebGPUViewManager
+
+RCT_EXPORT_MODULE(WebGPUView)
+
+- (UIView *)view {
+  return [MetalView new];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(contextId, NSNumber, UIView) {
+  NSNumber *contextId = [RCTConvert NSNumber:json];
+  [(MetalView *)view setContextId:contextId];
+}
+
+@end

package/cpp/rnwgpu/api/Convertors.h

@@ -280,15 +280,6 @@ public:
            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);

package/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);
 }
 

package/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;

package/lib/typescript/src/__tests__/Alpha.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Alpha.spec.d.ts.map

package/lib/typescript/src/__tests__/Alpha.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alpha.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/Alpha.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -15,7 +15,7 @@
     "android/cpp/**",
     "android/src/**",
     "cpp/**/*.{h,cpp}",
-    "ios/**",
+    "apple/**",
     "libs/**",
     "*.podspec"
   ],

package/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");
+  });
+});