react-native-webgpu 0.5.15 → 0.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/README.md +6 -409
  2. package/apple/MetalLayerColorSpace.mm +44 -0
  3. package/cpp/rnwgpu/SurfaceRegistry.h +10 -0
  4. package/cpp/rnwgpu/api/Canvas.h +18 -0
  5. package/lib/commonjs/Canvas.js.map +1 -1
  6. package/lib/commonjs/GPUDeviceProvider.js +33 -0
  7. package/lib/commonjs/GPUDeviceProvider.js.map +1 -0
  8. package/lib/commonjs/WebPolyfillGPUModule.js +7 -1
  9. package/lib/commonjs/WebPolyfillGPUModule.js.map +1 -1
  10. package/lib/commonjs/constants.js +20 -5
  11. package/lib/commonjs/constants.js.map +1 -1
  12. package/lib/commonjs/formats.js +30 -0
  13. package/lib/commonjs/formats.js.map +1 -0
  14. package/lib/commonjs/hooks.js +2 -26
  15. package/lib/commonjs/hooks.js.map +1 -1
  16. package/lib/commonjs/main/index.js +24 -0
  17. package/lib/commonjs/main/index.js.map +1 -1
  18. package/lib/commonjs/main/index.web.js +22 -0
  19. package/lib/commonjs/main/index.web.js.map +1 -1
  20. package/lib/module/Canvas.js.map +1 -1
  21. package/lib/module/GPUDeviceProvider.js +24 -0
  22. package/lib/module/GPUDeviceProvider.js.map +1 -0
  23. package/lib/module/WebPolyfillGPUModule.js +7 -1
  24. package/lib/module/WebPolyfillGPUModule.js.map +1 -1
  25. package/lib/module/constants.js +15 -5
  26. package/lib/module/constants.js.map +1 -1
  27. package/lib/module/formats.js +24 -0
  28. package/lib/module/formats.js.map +1 -0
  29. package/lib/module/hooks.js +1 -22
  30. package/lib/module/hooks.js.map +1 -1
  31. package/lib/module/main/index.js +2 -0
  32. package/lib/module/main/index.js.map +1 -1
  33. package/lib/module/main/index.web.js +2 -0
  34. package/lib/module/main/index.web.js.map +1 -1
  35. package/lib/typescript/jest.config.d.ts +1 -0
  36. package/lib/typescript/lib/commonjs/GPUDeviceProvider.d.ts +8 -0
  37. package/lib/typescript/lib/commonjs/GPUDeviceProvider.d.ts.map +1 -0
  38. package/lib/typescript/lib/commonjs/constants.d.ts +5 -1
  39. package/lib/typescript/lib/commonjs/formats.d.ts +3 -0
  40. package/lib/typescript/lib/commonjs/formats.d.ts.map +1 -0
  41. package/lib/typescript/lib/commonjs/hooks.d.ts +4 -9
  42. package/lib/typescript/lib/commonjs/hooks.d.ts.map +1 -1
  43. package/lib/typescript/lib/module/GPUDeviceProvider.d.ts +8 -0
  44. package/lib/typescript/lib/module/GPUDeviceProvider.d.ts.map +1 -0
  45. package/lib/typescript/lib/module/constants.d.ts.map +1 -1
  46. package/lib/typescript/lib/module/formats.d.ts +2 -0
  47. package/lib/typescript/lib/module/formats.d.ts.map +1 -0
  48. package/lib/typescript/lib/module/hooks.d.ts +2 -9
  49. package/lib/typescript/lib/module/hooks.d.ts.map +1 -1
  50. package/lib/typescript/lib/module/main/index.d.ts +2 -0
  51. package/lib/typescript/lib/module/main/index.web.d.ts +2 -0
  52. package/lib/typescript/src/Canvas.d.ts +5 -0
  53. package/lib/typescript/src/Canvas.d.ts.map +1 -1
  54. package/lib/typescript/src/GPUDeviceProvider.d.ts +15 -0
  55. package/lib/typescript/src/GPUDeviceProvider.d.ts.map +1 -0
  56. package/lib/typescript/src/constants.d.ts.map +1 -1
  57. package/lib/typescript/src/formats.d.ts +2 -0
  58. package/lib/typescript/src/formats.d.ts.map +1 -0
  59. package/lib/typescript/src/hooks.d.ts +2 -17
  60. package/lib/typescript/src/hooks.d.ts.map +1 -1
  61. package/lib/typescript/src/main/index.d.ts +2 -0
  62. package/lib/typescript/src/main/index.d.ts.map +1 -1
  63. package/lib/typescript/src/main/index.web.d.ts +2 -0
  64. package/lib/typescript/src/main/index.web.d.ts.map +1 -1
  65. package/lib/typescript/src/types.d.ts +5 -0
  66. package/lib/typescript/src/types.d.ts.map +1 -1
  67. package/package.json +12 -3
  68. package/src/Canvas.tsx +7 -0
  69. package/src/GPUDeviceProvider.tsx +39 -0
  70. package/src/WebPolyfillGPUModule.ts +6 -0
  71. package/src/constants.ts +5 -5
  72. package/src/formats.ts +23 -0
  73. package/src/hooks.tsx +3 -41
  74. package/src/main/index.tsx +2 -0
  75. package/src/main/index.web.tsx +2 -0
  76. package/src/types.ts +7 -0
package/README.md CHANGED
@@ -1,416 +1,13 @@
1
1
  # React Native WebGPU
2
2
 
3
- React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).
3
+ WebGPU for React Native, powered by Dawn.
4
4
 
5
- React Native WebGPU requires React Native 0.81 or newer. It doesn't support the legacy architecture.
5
+ [wcandillon.github.io/react-native-webgpu](https://wcandillon.github.io/react-native-webgpu/)
6
6
 
7
- ## Installation
7
+ ## Getting Started
8
8
 
9
- ```
10
- npm install react-native-webgpu
11
- ```
9
+ [Installation instructions](https://wcandillon.github.io/react-native-webgpu/docs/getting-started/installation)
12
10
 
13
- > The package was previously published as `react-native-wgpu`. A shim with that name is still available and simply re-exports `react-native-webgpu`.
11
+ ## Contributing
14
12
 
15
- ## With Expo
16
-
17
- Expo provides a React Native WebGPU template that works with React Three Fiber.
18
- This works on iOS, Android, and Web.
19
-
20
- ```
21
- npx create-expo-app@latest -e with-webgpu
22
- ```
23
-
24
- https://github.com/user-attachments/assets/efbd05f8-4ce0-46c2-919c-03e1095bc8ac
25
-
26
- Below are some examples from the [example app](/apps/example/).
27
-
28
- https://github.com/user-attachments/assets/116a41b2-2cf8-49f1-9f16-a5c83637c198
29
-
30
- Starting from `r168`, Three.js runs out of the box with React Native WebGPU.
31
- You need to have a slight modification of [the metro config](/apps/example/metro.config.js) to resolve Three.js to the WebGPU build.
32
- We also support [react-three-fiber](/apps/example/src/ThreeJS/Fiber.tsx); to make it work, patch `node_modules/@react-three/fiber/package.json` (for instance via `patch-package`) so that it resolves to the WebGPU entry point instead of the React Native bundle:
33
-
34
- ```diff
35
- diff --git a/node_modules/@react-three/fiber/package.json b/node_modules/@react-three/fiber/package.json
36
- @@
37
- - "react-native": "native/dist/react-three-fiber-native.cjs.js",
38
- + "react-native": "dist/react-three-fiber.cjs.js",
39
- ```
40
-
41
- For model loading, we also need [the following polyfill](/apps/example/src/App.tsx#29).
42
-
43
- https://github.com/user-attachments/assets/5b49ef63-0a3c-4679-aeb5-e4b4dddfcc1d
44
-
45
- We also provide prebuilt binaries for visionOS and macOS.
46
-
47
- https://github.com/user-attachments/assets/2d5c618e-5b15-4cef-8558-d4ddf8c70667
48
-
49
- ## Usage
50
-
51
- Usage is identical to Web.
52
-
53
- ```tsx
54
- import React from "react";
55
- import { StyleSheet, View, PixelRatio } from "react-native";
56
- import { Canvas, CanvasRef } from "react-native-webgpu";
57
-
58
- import { redFragWGSL, triangleVertWGSL } from "./triangle";
59
-
60
- export function HelloTriangle() {
61
- const ref = useRef<CanvasRef>(null);
62
- useEffect(() => {
63
- const helloTriangle = async () => {
64
- const adapter = await navigator.gpu.requestAdapter();
65
- if (!adapter) {
66
- throw new Error("No adapter");
67
- }
68
- const device = await adapter.requestDevice();
69
- const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
70
-
71
- const context = ref.current!.getContext("webgpu")!;
72
- const canvas = context.canvas as HTMLCanvasElement;
73
- canvas.width = canvas.clientWidth * PixelRatio.get();
74
- canvas.height = canvas.clientHeight * PixelRatio.get();
75
-
76
- if (!context) {
77
- throw new Error("No context");
78
- }
79
-
80
- context.configure({
81
- device,
82
- format: presentationFormat,
83
- alphaMode: "opaque",
84
- });
85
-
86
- const pipeline = device.createRenderPipeline({
87
- layout: "auto",
88
- vertex: {
89
- module: device.createShaderModule({
90
- code: triangleVertWGSL,
91
- }),
92
- entryPoint: "main",
93
- },
94
- fragment: {
95
- module: device.createShaderModule({
96
- code: redFragWGSL,
97
- }),
98
- entryPoint: "main",
99
- targets: [
100
- {
101
- format: presentationFormat,
102
- },
103
- ],
104
- },
105
- primitive: {
106
- topology: "triangle-list",
107
- },
108
- });
109
-
110
- const commandEncoder = device.createCommandEncoder();
111
-
112
- const textureView = context.getCurrentTexture().createView();
113
-
114
- const renderPassDescriptor: GPURenderPassDescriptor = {
115
- colorAttachments: [
116
- {
117
- view: textureView,
118
- clearValue: [0, 0, 0, 1],
119
- loadOp: "clear",
120
- storeOp: "store",
121
- },
122
- ],
123
- };
124
-
125
- const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
126
- passEncoder.setPipeline(pipeline);
127
- passEncoder.draw(3);
128
- passEncoder.end();
129
-
130
- device.queue.submit([commandEncoder.finish()]);
131
-
132
- context.present();
133
- };
134
- helloTriangle();
135
- }, [ref]);
136
-
137
- return (
138
- <View style={style.container}>
139
- <Canvas ref={ref} style={style.webgpu} />
140
- </View>
141
- );
142
- }
143
-
144
- const style = StyleSheet.create({
145
- container: {
146
- flex: 1,
147
- },
148
- webgpu: {
149
- flex: 1,
150
- },
151
- });
152
- ```
153
-
154
- ## Example App
155
-
156
- To run the example app you first need to [install Dawn](#installing-dawn).
157
-
158
- From there you will be able to run the example app properly.
159
-
160
- ## Similarities and Differences with the Web
161
-
162
- The API has been designed to be completely symmetric with the Web.
163
- For instance, you can access the WebGPU context synchronously, as well as the canvas size.
164
- Pixel density and canvas resizing are handled exactly like on the Web as well.
165
-
166
- ```tsx
167
- // The default canvas size is not scaled to the device pixel ratio
168
- // When resizing the canvas, the clientWidth and clientHeight are updated automatically
169
- // This behaviour is symmetric to the Web
170
- const ctx = canvas.current.getContext("webgpu")!;
171
- ctx.canvas.width = ctx.canvas.clientWidth * PixelRatio.get();
172
- ctx.canvas.height = ctx.canvas.clientHeight * PixelRatio.get();
173
- ```
174
-
175
- ### Frame Scheduling
176
-
177
- In React Native, frame presentation is a manual operation: when you are ready to present a frame, call `present()` on the context after submitting your commands to the queue. This works the same on every runtime: the main JS runtime, the Reanimated UI runtime, and dedicated worklet runtimes (`createWorkletRuntime` / `runOnRuntime`, or a Vision Camera frame processor). `present()` runs synchronously on the calling thread, so the frame is presented from whichever thread did the rendering.
178
-
179
- ```tsx
180
- // draw
181
- // submit to the queue
182
- device.queue.submit([commandEncoder.finish()]);
183
- // This method is React Native only
184
- context.present();
185
- ```
186
-
187
- ### Threading model
188
-
189
- react-native-webgpu can drive WebGPU from more than one JavaScript runtime: the main JS runtime, the Reanimated UI runtime, and dedicated worklet runtimes (`createWorkletRuntime` / `runOnRuntime`, or a Vision Camera frame processor).
190
- This module also works well with [Bundle Mode](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/) and lets you run complex Three.js scenes on the UI thread or dedicated worklet threads.
191
-
192
- There is a caveat with `device.lost` and `uncapturederror`: they are only delivered on the main JS runtime. This is usually fine because the GPU device is typically created on the main JS thread and then sent to the UI or a dedicated worklet thread. However, if for some reason you create the device outside the main JS thread, beware that `device.lost` and `uncapturederror` won't fire.
193
-
194
- ### Canvas Transparency
195
-
196
- On Android, the `alphaMode` property is ignored when configuring the canvas.
197
- To have a transparent canvas by default, use the `transparent` property.
198
-
199
- ```tsx
200
- return (
201
- <View style={style.container}>
202
- <Canvas ref={ref} style={style.webgpu} transparent />
203
- </View>
204
- );
205
- ```
206
-
207
- ### External Textures
208
-
209
- This module provides a `createImageBitmap` function that you can use in `copyExternalImageToTexture`.
210
-
211
- ```tsx
212
- const url = Image.resolveAssetSource(require("./assets/image.png")).uri;
213
- const response = await fetch(url);
214
- const imageBitmap = await createImageBitmap(await response.blob());
215
-
216
- const texture = device.createTexture({
217
- size: [imageBitmap.width, imageBitmap.height, 1],
218
- format: "rgba8unorm",
219
- usage:
220
- GPUTextureUsage.TEXTURE_BINDING |
221
- GPUTextureUsage.COPY_DST |
222
- GPUTextureUsage.RENDER_ATTACHMENT,
223
- });
224
- device.queue.copyExternalImageToTexture(
225
- { source: imageBitmap },
226
- { texture },
227
- [imageBitmap.width, imageBitmap.height],
228
- );
229
- ```
230
-
231
- ### Shared Texture Memory
232
-
233
- React Native WebGPU exposes Dawn's `SharedTextureMemory` so you can import a native pixel surface (an `IOSurface`-backed `CVPixelBuffer` on iOS, an `AHardwareBuffer` on Android) as a sampleable `GPUTexture` without copying pixels through the CPU. This is the path you want for camera frames, video frames, or anything coming out of a hardware producer.
234
-
235
- Like `importExternalTexture` on the web, this is **enabled by default**, there is nothing to request at device creation. The only thing to check is that the device supports it before importing. It always does on iOS/macOS; it can be missing on some Android drivers and emulators.
236
-
237
- ```tsx
238
- import type { NativeVideoFrame } from "react-native-wgpu";
239
-
240
- const adapter = await navigator.gpu.requestAdapter();
241
- const device = await adapter!.requestDevice();
242
-
243
- // On by default when supported; this is the only check you need.
244
- if (!device.features.has("rnwebgpu/native-texture" as GPUFeatureName)) {
245
- return; // rare: some Android drivers/emulators can't import native surfaces
246
- }
247
-
248
- // `frame` here is a NativeVideoFrame whose .handle is the native surface
249
- // (IOSurfaceRef / AHardwareBuffer*). NativeVideoFrames are produced by helpers
250
- // like RNWebGPU.createVideoPlayer or RNWebGPU.createTestVideoFrame, or by
251
- // any third-party module that hands you a compatible native pointer.
252
- const memory = device.importSharedTextureMemory({
253
- handle: frame.handle,
254
- label: "video-frame",
255
- });
256
- const texture = memory.createTexture();
257
-
258
- memory.beginAccess(texture, /* initialized */ true);
259
- // ... bind `texture` into a sampler and render normally ...
260
- memory.endAccess(texture);
261
-
262
- texture.destroy();
263
- frame.release();
264
- ```
265
-
266
- `beginAccess`/`endAccess` bracket the GPU's read window on the shared surface. Pass `initialized: true` when the producer has already written meaningful pixels (the typical video/camera case) and `false` when the next pass will fully overwrite the texture.
267
-
268
- ### Importing External Textures
269
-
270
- `GPUDevice.importExternalTexture` is the higher-level path for sampling a native surface. You hand it a `NativeVideoFrame` and get back a `GPUExternalTexture` that you bind as a `texture_external` and read with `textureSampleBaseClampToEdge`. It does two things for you on top of `SharedTextureMemory`:
271
-
272
- - **Color conversion.** Camera and video surfaces are usually biplanar YUV (NV12), not RGB. An external texture carries the YUV→RGB matrix and the source/destination color-space transfer functions, so on the supported paths the sampler returns ready-to-use RGB in hardware. With raw `SharedTextureMemory` you would sample the luma/chroma planes and do that conversion by hand in WGSL. This is the main reason to prefer it for camera and video frames.
273
- - **Lifecycle.** It owns the `SharedTextureMemory` + `createTexture` + `beginAccess`/`endAccess` sequence internally, so you just import the frame and `destroy()` the result.
274
-
275
- It builds on the same default-on capability as Shared Texture Memory above, so feature-detect the device the same way before importing.
276
-
277
- > **Android note:** the hardware YUV→RGB conversion is fully automatic on iOS (NV12 `IOSurface`). On Android, camera frames arrive as an _opaque_ YCbCr `AHardwareBuffer`, and Dawn's Vulkan path forces an identity (`RGB_IDENTITY`) sampler conversion, so the external sample comes back as raw `[Y, Cb, Cr]`. You still get the zero-copy import and the rotation/mirror transform, but you need to apply the YUV→RGB matrix yourself in the shader. See the `CAMERA_PRELUDE` in the [VisionCamera example](/apps/example/src/VisionCamera/shaders.ts) for a ready-made BT.709 decode.
278
-
279
- ```tsx
280
- const adapter = await navigator.gpu.requestAdapter();
281
- const device = await adapter!.requestDevice();
282
- // Feature-detect as shown above before importing on unsupported hardware.
283
-
284
- const render = () => {
285
- // A GPUExternalTexture expires once the queue work that used it is submitted,
286
- // so re-import one every frame.
287
- const externalTexture = device.importExternalTexture({
288
- source: frame, // a NativeVideoFrame
289
- label: "video-frame",
290
- });
291
-
292
- const bindGroup = device.createBindGroup({
293
- layout: pipeline.getBindGroupLayout(0),
294
- entries: [
295
- { binding: 0, resource: externalTexture },
296
- { binding: 1, resource: sampler },
297
- ],
298
- });
299
-
300
- // ... encode a pass that samples `externalTexture`, then:
301
- device.queue.submit([encoder.finish()]);
302
- context.present();
303
-
304
- // Release the surface's access window right after the submit that sampled it.
305
- externalTexture.destroy();
306
- };
307
- ```
308
-
309
- Camera frames arrive in the sensor's native orientation, so `importExternalTexture` also accepts non-spec `rotation` (`0` | `90` | `180` | `270`, in degrees) and `mirrored` (horizontal flip) options. Dawn bakes them into the sampling transform, so the shader sees an upright frame. They map directly onto VisionCamera's `frame.orientation` / `frame.isMirrored`.
310
-
311
- #### Calling `destroy()`
312
-
313
- A `GPUExternalTexture` keeps an open access window on the underlying native surface until the wrapper is destroyed. On the Web `importExternalTexture` is core and the lifetime is handled for you; here the window is tied to the JavaScript object's lifetime. Call `externalTexture.destroy()` right after the `queue.submit()` that sampled it (never before) to release the surface back to its producer immediately. `destroy()` is idempotent, and the surface is also released when the object is garbage-collected, but relying on GC can starve a producer's buffer pool (e.g. an `AVPlayer`'s recycled `IOSurface`s) and pile up GPU resources, so prefer the explicit call in a render loop.
314
-
315
- ### Reanimated Integration
316
-
317
- React Native WebGPU supports running WebGPU rendering on the UI thread using [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) and [React Native Worklets](https://github.com/margelo/react-native-worklets).
318
-
319
- First, install the optional peer dependencies:
320
-
321
- ```sh
322
- npm install react-native-reanimated react-native-worklets
323
- ```
324
-
325
- WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets.
326
- Call `installWebGPU()` once at the top of the worklet to install flag constants like `GPUBufferUsage`, `GPUTextureUsage`, and so on.
327
-
328
- ```tsx
329
- import { Canvas, installWebGPU } from "react-native-webgpu";
330
- import { runOnUI } from "react-native-reanimated";
331
-
332
- const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => {
333
- "worklet";
334
- installWebGPU();
335
- // WebGPU constants are now available on this worklet thread
336
- const buffer = device.createBuffer({
337
- size,
338
- usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
339
- });
340
- // WebGPU rendering code runs on the UI thread
341
- const commandEncoder = device.createCommandEncoder();
342
- // ... render ...
343
- device.queue.submit([commandEncoder.finish()]);
344
- context.present();
345
- };
346
-
347
- // Initialize WebGPU on main thread, then run on UI thread
348
- const device = await adapter.requestDevice();
349
- const context = canvasRef.current.getContext("webgpu");
350
- runOnUI(renderFrame)(device, context);
351
- ```
352
-
353
- ## Troubleshooting
354
-
355
- ### iOS
356
-
357
- To run the React Native WebGPU project on the iOS simulator, you need to disable the Metal validation API.
358
- In "Edit Scheme," uncheck "Metal Validation". Learn more [here](https://developer.apple.com/documentation/xcode/validating-your-apps-metal-api-usage/).
359
-
360
- <img width="1052" alt="Uncheck 'Metal Validation'" src="https://github.com/user-attachments/assets/2676e5cc-e351-4a97-bdc8-22cbd7df2ef2">
361
-
362
- ## Library Development
363
-
364
- Make sure to check out the submodules:
365
-
366
- ```
367
- git submodule update --init
368
- ```
369
-
370
- Make sure you have all the tools required for building the Skia libraries (Android Studio, XCode, Ninja, CMake, Android NDK/build tools).
371
-
372
- ### Installing Dawn
373
-
374
- There is an alternative way which is to install the prebuilt binaries from GitHub.
375
-
376
- ```sh
377
- $ yarn
378
- $ cd packages/webgpu
379
- $ yarn install-dawn
380
- ```
381
-
382
- ### Building Dawn
383
-
384
- Alternatively, you can build Dawn locally.
385
-
386
- ```sh
387
- yarn
388
- cd packages/webgpu
389
- yarn build-dawn
390
- ```
391
-
392
- ### Upgrading
393
-
394
- 1. `git submodule update --remote`
395
- 2. `yarn clean-dawn`
396
- 3. `yarn build-dawn`
397
-
398
- ### Codegen
399
-
400
- * `cd packages/webgpu && yarn codegen`
401
-
402
- ### Testing
403
-
404
- In the `package` folder, to run the test against Chrome for reference:
405
-
406
- ```
407
- yarn test:ref
408
- ```
409
-
410
- To run the e2e test, open the example app on the e2e screen.
411
- By default, it will try to connect to a localhost test server.
412
- If you want to run the test suite on a physical device, you can modify the address [here](/apps/example/src/useClient.ts#L4).
413
-
414
- ```
415
- yarn test
416
- ```
13
+ For detailed information on library development, building, testing, and contributing guidelines, please see [CONTRIBUTING.md](packages/webgpu/CONTRIBUTING.md).
@@ -0,0 +1,44 @@
1
+ #import <CoreGraphics/CoreGraphics.h>
2
+ #import <Foundation/Foundation.h>
3
+ #import <QuartzCore/CAMetalLayer.h>
4
+ #import <QuartzCore/CATransaction.h>
5
+
6
+ #include "webgpu/webgpu_cpp.h"
7
+
8
+ namespace rnwgpu {
9
+
10
+ // WebGPU canvas values are sRGB-encoded regardless of the texture format
11
+ // (GPUCanvasConfiguration.colorSpace defaults to "srgb"), so the same shader
12
+ // output must display identically on bgra8unorm and rgba16float surfaces.
13
+ // Core Animation interprets a float-format layer with a nil colorspace as
14
+ // extended *linear* sRGB, which displays the same values noticeably brighter.
15
+ // Tagging the layer as (gamma-encoded) extended sRGB matches the browser
16
+ // behavior: identical colors, with the extra precision of float16.
17
+ void applyCAMetalLayerColorSpace(void *nativeSurface,
18
+ wgpu::TextureFormat format) {
19
+ CALayer *layer = (__bridge CALayer *)nativeSurface;
20
+ if (![layer isKindOfClass:[CAMetalLayer class]]) {
21
+ return;
22
+ }
23
+ auto metalLayer = static_cast<CAMetalLayer *>(layer);
24
+ if (format == wgpu::TextureFormat::RGBA16Float) {
25
+ CGColorSpaceRef colorSpace =
26
+ CGColorSpaceCreateWithName(kCGColorSpaceExtendedSRGB);
27
+ metalLayer.colorspace = colorSpace;
28
+ CGColorSpaceRelease(colorSpace);
29
+ } else if (metalLayer.colorspace != nil) {
30
+ // Restore the default (no color matching) when reconfiguring back to an
31
+ // 8-bit format.
32
+ metalLayer.colorspace = nil;
33
+ }
34
+ // The change must be set synchronously so the first present already sees
35
+ // it, and it must reach the render server. On a non-main thread (RN JS or
36
+ // worklet runtime) the property lands in that thread's implicit
37
+ // CATransaction, which may never commit on threads without a spinning
38
+ // runloop, so flush it now. On the main thread the runloop commits it.
39
+ if (!NSThread.isMainThread) {
40
+ [CATransaction flush];
41
+ }
42
+ }
43
+
44
+ } // namespace rnwgpu
@@ -15,6 +15,13 @@ void WaitForCommandsToBeScheduled(WGPUDevice device);
15
15
 
16
16
  namespace rnwgpu {
17
17
 
18
+ #ifdef __APPLE__
19
+ // Tags the CAMetalLayer with the colorspace matching the configured texture
20
+ // format. Implemented in apple/MetalLayerColorSpace.mm.
21
+ void applyCAMetalLayerColorSpace(void *nativeSurface,
22
+ wgpu::TextureFormat format);
23
+ #endif
24
+
18
25
  struct NativeInfo {
19
26
  void *nativeSurface;
20
27
  int width;
@@ -187,6 +194,9 @@ private:
187
194
  void _configure() {
188
195
  if (surface) {
189
196
  surface.Configure(&config);
197
+ #ifdef __APPLE__
198
+ applyCAMetalLayerColorSpace(nativeSurface, config.format);
199
+ #endif
190
200
  } else {
191
201
  wgpu::TextureDescriptor textureDesc;
192
202
  textureDesc.format = config.format;
@@ -36,6 +36,15 @@ public:
36
36
 
37
37
  void *getSurface() { return _surface; }
38
38
 
39
+ // No-op DOM-compatibility stubs so that web renderers (Three.js,
40
+ // react-three-fiber) can treat the canvas like an HTMLCanvasElement without
41
+ // needing a JS wrapper. Extra JS arguments are ignored.
42
+ void addEventListener() {}
43
+ void removeEventListener() {}
44
+ void dispatchEvent() {}
45
+ void setPointerCapture() {}
46
+ void releasePointerCapture() {}
47
+
39
48
  static void definePrototype(jsi::Runtime &runtime, jsi::Object &prototype) {
40
49
  installGetter(runtime, prototype, "surface", &Canvas::getSurface);
41
50
  installGetterSetter(runtime, prototype, "width", &Canvas::getWidth,
@@ -44,6 +53,15 @@ public:
44
53
  &Canvas::setHeight);
45
54
  installGetter(runtime, prototype, "clientWidth", &Canvas::getClientWidth);
46
55
  installGetter(runtime, prototype, "clientHeight", &Canvas::getClientHeight);
56
+ installMethod(runtime, prototype, "addEventListener",
57
+ &Canvas::addEventListener);
58
+ installMethod(runtime, prototype, "removeEventListener",
59
+ &Canvas::removeEventListener);
60
+ installMethod(runtime, prototype, "dispatchEvent", &Canvas::dispatchEvent);
61
+ installMethod(runtime, prototype, "setPointerCapture",
62
+ &Canvas::setPointerCapture);
63
+ installMethod(runtime, prototype, "releasePointerCapture",
64
+ &Canvas::releasePointerCapture);
47
65
  }
48
66
 
49
67
  private:
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","Canvas","transparent","ref","props","viewRef","useRef","contextId","_","useState","useImperativeHandle","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","View","collapsable","style","flex","exports"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","Canvas","transparent","ref","props","viewRef","useRef","contextId","_","useState","useImperativeHandle","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","View","collapsable","style","flex","exports"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useMainDevice = exports.GPUDeviceProvider = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _hooks = require("./hooks");
9
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
10
+ const DeviceContext = /*#__PURE__*/(0, _react.createContext)(null);
11
+ const GPUDeviceProvider = ({
12
+ children,
13
+ adapterOptions,
14
+ deviceDescriptor
15
+ }) => {
16
+ const state = (0, _hooks.useDevice)(adapterOptions, deviceDescriptor);
17
+ if (!state.device) {
18
+ return null;
19
+ }
20
+ return /*#__PURE__*/_react.default.createElement(DeviceContext.Provider, {
21
+ value: state
22
+ }, children);
23
+ };
24
+ exports.GPUDeviceProvider = GPUDeviceProvider;
25
+ const useMainDevice = () => {
26
+ const ctx = (0, _react.useContext)(DeviceContext);
27
+ if (!ctx) {
28
+ throw new Error("No DeviceContext found.");
29
+ }
30
+ return ctx;
31
+ };
32
+ exports.useMainDevice = useMainDevice;
33
+ //# sourceMappingURL=GPUDeviceProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_hooks","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DeviceContext","createContext","GPUDeviceProvider","children","adapterOptions","deviceDescriptor","state","useDevice","device","createElement","Provider","value","exports","useMainDevice","ctx","useContext","Error"],"sourceRoot":"../../src","sources":["GPUDeviceProvider.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AAAoC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOpC,MAAMkB,aAAa,gBAAG,IAAAC,oBAAa,EAA4B,IAAI,CAAC;AAQ7D,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,QAAQ;EACRC,cAAc;EACdC;AACmB,CAAC,KAAK;EACzB,MAAMC,KAAK,GAAG,IAAAC,gBAAS,EAACH,cAAc,EAAEC,gBAAgB,CAAC;EACzD,IAAI,CAACC,KAAK,CAACE,MAAM,EAAE;IACjB,OAAO,IAAI;EACb;EACA,oBACE/B,MAAA,CAAAc,OAAA,CAAAkB,aAAA,CAACT,aAAa,CAACU,QAAQ;IAACC,KAAK,EAAEL;EAAM,GAAEH,QAAiC,CAAC;AAE7E,CAAC;AAACS,OAAA,CAAAV,iBAAA,GAAAA,iBAAA;AAEK,MAAMW,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACf,aAAa,CAAC;EACrC,IAAI,CAACc,GAAG,EAAE;IACR,MAAM,IAAIE,KAAK,CAAC,yBAAyB,CAAC;EAC5C;EACA,OAAOF,GAAG;AACZ,CAAC;AAACF,OAAA,CAAAC,aAAA,GAAAA,aAAA","ignoreList":[]}
@@ -13,7 +13,13 @@ function getNativeSurface(contextId) {
13
13
  height,
14
14
  width,
15
15
  clientHeight: height,
16
- clientWidth: width
16
+ clientWidth: width,
17
+ // On web the real DOM canvas handles events; delegate to it.
18
+ addEventListener: canvas.addEventListener.bind(canvas),
19
+ removeEventListener: canvas.removeEventListener.bind(canvas),
20
+ dispatchEvent: canvas.dispatchEvent.bind(canvas),
21
+ setPointerCapture: canvas.setPointerCapture.bind(canvas),
22
+ releasePointerCapture: canvas.releasePointerCapture.bind(canvas)
17
23
  };
18
24
  }
19
25
  function makeWebGPUCanvasContext(contextId, width, height) {
@@ -1 +1 @@
1
- {"version":3,"names":["_utils","require","fabric","getNativeSurface","contextId","canvas","document","getElementById","contextIdToId","height","width","getBoundingClientRect","surface","BigInt","clientHeight","clientWidth","makeWebGPUCanvasContext","dpr","window","devicePixelRatio","pixelWidth","toString","pixelHeight","getAttribute","setAttribute","context","getContext","Object","assign","present","RNWebGPU","MakeWebGPUCanvasContext"],"sourceRoot":"../../src","sources":["WebPolyfillGPUModule.ts"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,MAAM,GAAG,IAAI;AAEnB,SAASC,gBAAgBA,CAACC,SAAiB,EAAE;EAC3C,MAAMC,MAAM,GAAGC,QAAQ,CAACC,cAAc,CACpC,IAAAC,oBAAa,EAACJ,SAAS,CACzB,CAAsB;EAEtB,MAAM;IAAEK,MAAM;IAAEC;EAAM,CAAC,GAAGL,MAAM,CAACM,qBAAqB,CAAC,CAAE;EAEzD,OAAO;IACLC,OAAO,EAAEC,MAAM,CAACT,SAAS,CAAC;IAC1BK,MAAM;IACNC,KAAK;IACLI,YAAY,EAAEL,MAAM;IACpBM,WAAW,EAAEL;EACf,CAAC;AACH;AAEA,SAASM,uBAAuBA,CAC9BZ,SAAiB,EACjBM,KAAa,EACbD,MAAc,EACd;EACA,MAAMJ,MAAM,GAAGC,QAAQ,CAACC,cAAc,CACpC,IAAAC,oBAAa,EAACJ,SAAS,CACzB,CAAsB;EAEtB,MAAMa,GAAG,GAAGC,MAAM,CAACC,gBAAgB,IAAI,CAAC;EACxC,MAAMC,UAAU,GAAG,CAACV,KAAK,GAAGO,GAAG,EAAEI,QAAQ,CAAC,CAAC;EAC3C,MAAMC,WAAW,GAAG,CAACb,MAAM,GAAGQ,GAAG,EAAEI,QAAQ,CAAC,CAAC;EAE7C,IACEhB,MAAM,CAACkB,YAAY,CAAC,OAAO,CAAC,KAAKH,UAAU,IAC3Cf,MAAM,CAACkB,YAAY,CAAC,QAAQ,CAAC,KAAKD,WAAW,EAC7C;IACAjB,MAAM,CAACmB,YAAY,CAAC,OAAO,EAAEJ,UAAU,CAAC;IACxCf,MAAM,CAACmB,YAAY,CAAC,QAAQ,EAAEF,WAAW,CAAC;EAC5C;EAEA,MAAMG,OAAO,GAAGpB,MAAM,CAACqB,UAAU,CAAC,QAAQ,CAAE;EAC5C;EACA;EACA,OAAOC,MAAM,CAACC,MAAM,CAACH,OAAO,EAAE;IAAEI,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,CAAC,CAAC;AACtD;;AAEA;AACAX,MAAM,CAACY,QAAQ,GAAG;EAChB3B,gBAAgB;EAChB4B,uBAAuB,EAAEf,uBAAuB;EAChDd;AACF,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_utils","require","fabric","getNativeSurface","contextId","canvas","document","getElementById","contextIdToId","height","width","getBoundingClientRect","surface","BigInt","clientHeight","clientWidth","addEventListener","bind","removeEventListener","dispatchEvent","setPointerCapture","releasePointerCapture","makeWebGPUCanvasContext","dpr","window","devicePixelRatio","pixelWidth","toString","pixelHeight","getAttribute","setAttribute","context","getContext","Object","assign","present","RNWebGPU","MakeWebGPUCanvasContext"],"sourceRoot":"../../src","sources":["WebPolyfillGPUModule.ts"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,MAAM,GAAG,IAAI;AAEnB,SAASC,gBAAgBA,CAACC,SAAiB,EAAE;EAC3C,MAAMC,MAAM,GAAGC,QAAQ,CAACC,cAAc,CACpC,IAAAC,oBAAa,EAACJ,SAAS,CACzB,CAAsB;EAEtB,MAAM;IAAEK,MAAM;IAAEC;EAAM,CAAC,GAAGL,MAAM,CAACM,qBAAqB,CAAC,CAAE;EAEzD,OAAO;IACLC,OAAO,EAAEC,MAAM,CAACT,SAAS,CAAC;IAC1BK,MAAM;IACNC,KAAK;IACLI,YAAY,EAAEL,MAAM;IACpBM,WAAW,EAAEL,KAAK;IAClB;IACAM,gBAAgB,EAAEX,MAAM,CAACW,gBAAgB,CAACC,IAAI,CAACZ,MAAM,CAAC;IACtDa,mBAAmB,EAAEb,MAAM,CAACa,mBAAmB,CAACD,IAAI,CAACZ,MAAM,CAAC;IAC5Dc,aAAa,EAAEd,MAAM,CAACc,aAAa,CAACF,IAAI,CAACZ,MAAM,CAAC;IAChDe,iBAAiB,EAAEf,MAAM,CAACe,iBAAiB,CAACH,IAAI,CAACZ,MAAM,CAAC;IACxDgB,qBAAqB,EAAEhB,MAAM,CAACgB,qBAAqB,CAACJ,IAAI,CAACZ,MAAM;EACjE,CAAC;AACH;AAEA,SAASiB,uBAAuBA,CAC9BlB,SAAiB,EACjBM,KAAa,EACbD,MAAc,EACd;EACA,MAAMJ,MAAM,GAAGC,QAAQ,CAACC,cAAc,CACpC,IAAAC,oBAAa,EAACJ,SAAS,CACzB,CAAsB;EAEtB,MAAMmB,GAAG,GAAGC,MAAM,CAACC,gBAAgB,IAAI,CAAC;EACxC,MAAMC,UAAU,GAAG,CAAChB,KAAK,GAAGa,GAAG,EAAEI,QAAQ,CAAC,CAAC;EAC3C,MAAMC,WAAW,GAAG,CAACnB,MAAM,GAAGc,GAAG,EAAEI,QAAQ,CAAC,CAAC;EAE7C,IACEtB,MAAM,CAACwB,YAAY,CAAC,OAAO,CAAC,KAAKH,UAAU,IAC3CrB,MAAM,CAACwB,YAAY,CAAC,QAAQ,CAAC,KAAKD,WAAW,EAC7C;IACAvB,MAAM,CAACyB,YAAY,CAAC,OAAO,EAAEJ,UAAU,CAAC;IACxCrB,MAAM,CAACyB,YAAY,CAAC,QAAQ,EAAEF,WAAW,CAAC;EAC5C;EAEA,MAAMG,OAAO,GAAG1B,MAAM,CAAC2B,UAAU,CAAC,QAAQ,CAAE;EAC5C;EACA;EACA,OAAOC,MAAM,CAACC,MAAM,CAACH,OAAO,EAAE;IAAEI,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,CAAC,CAAC;AACtD;;AAEA;AACAX,MAAM,CAACY,QAAQ,GAAG;EAChBjC,gBAAgB;EAChBkC,uBAAuB,EAAEf,uBAAuB;EAChDpB;AACF,CAAC","ignoreList":[]}
@@ -32,9 +32,24 @@ exports.GPUTextureUsage = exports.GPUShaderStage = exports.GPUMapMode = exports.
32
32
  // re-exports `./main` before `./constants`, and `./main` installs the native
33
33
  // module synchronously, so the globals always exist by the time this runs.
34
34
 
35
- const GPUBufferUsage = exports.GPUBufferUsage = globalThis.GPUBufferUsage;
36
- const GPUTextureUsage = exports.GPUTextureUsage = globalThis.GPUTextureUsage;
37
- const GPUShaderStage = exports.GPUShaderStage = globalThis.GPUShaderStage;
38
- const GPUColorWrite = exports.GPUColorWrite = globalThis.GPUColorWrite;
39
- const GPUMapMode = exports.GPUMapMode = globalThis.GPUMapMode;
35
+ const {
36
+ GPUBufferUsage
37
+ } = globalThis;
38
+ exports.GPUBufferUsage = GPUBufferUsage;
39
+ const {
40
+ GPUTextureUsage
41
+ } = globalThis;
42
+ exports.GPUTextureUsage = GPUTextureUsage;
43
+ const {
44
+ GPUShaderStage
45
+ } = globalThis;
46
+ exports.GPUShaderStage = GPUShaderStage;
47
+ const {
48
+ GPUColorWrite
49
+ } = globalThis;
50
+ exports.GPUColorWrite = GPUColorWrite;
51
+ const {
52
+ GPUMapMode
53
+ } = globalThis;
54
+ exports.GPUMapMode = GPUMapMode;
40
55
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["GPUBufferUsage","exports","globalThis","GPUTextureUsage","GPUShaderStage","GPUColorWrite","GPUMapMode"],"sourceRoot":"../../src","sources":["constants.ts"],"mappings":";;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,MAAMA,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,UAAU,CAACF,cAAc;AAEhD,MAAMG,eAAe,GAAAF,OAAA,CAAAE,eAAA,GAAGD,UAAU,CAACC,eAAe;AAElD,MAAMC,cAAc,GAAAH,OAAA,CAAAG,cAAA,GAAGF,UAAU,CAACE,cAAc;AAEhD,MAAMC,aAAa,GAAAJ,OAAA,CAAAI,aAAA,GAAGH,UAAU,CAACG,aAAa;AAE9C,MAAMC,UAAU,GAAAL,OAAA,CAAAK,UAAA,GAAGJ,UAAU,CAACI,UAAU","ignoreList":[]}
1
+ {"version":3,"names":["GPUBufferUsage","globalThis","exports","GPUTextureUsage","GPUShaderStage","GPUColorWrite","GPUMapMode"],"sourceRoot":"../../src","sources":["constants.ts"],"mappings":";;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,MAAM;EAAEA;AAAe,CAAC,GAAGC,UAAU;AAACC,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAEtC,MAAM;EAAEG;AAAgB,CAAC,GAAGF,UAAU;AAACC,OAAA,CAAAC,eAAA,GAAAA,eAAA;AAEvC,MAAM;EAAEC;AAAe,CAAC,GAAGH,UAAU;AAACC,OAAA,CAAAE,cAAA,GAAAA,cAAA;AAEtC,MAAM;EAAEC;AAAc,CAAC,GAAGJ,UAAU;AAACC,OAAA,CAAAG,aAAA,GAAAA,aAAA;AAErC,MAAM;EAAEC;AAAW,CAAC,GAAGL,UAAU;AAACC,OAAA,CAAAI,UAAA,GAAAA,UAAA","ignoreList":[]}