react-native-webgpu 0.5.16 → 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.
- package/README.md +6 -409
- package/apple/MetalLayerColorSpace.mm +44 -0
- package/cpp/rnwgpu/SurfaceRegistry.h +10 -0
- package/lib/commonjs/formats.js +30 -0
- package/lib/commonjs/formats.js.map +1 -0
- package/lib/commonjs/main/index.js +12 -0
- package/lib/commonjs/main/index.js.map +1 -1
- package/lib/commonjs/main/index.web.js +11 -0
- package/lib/commonjs/main/index.web.js.map +1 -1
- package/lib/module/formats.js +24 -0
- package/lib/module/formats.js.map +1 -0
- package/lib/module/main/index.js +1 -0
- package/lib/module/main/index.js.map +1 -1
- package/lib/module/main/index.web.js +1 -0
- package/lib/module/main/index.web.js.map +1 -1
- package/lib/typescript/jest.config.d.ts +1 -0
- package/lib/typescript/lib/commonjs/formats.d.ts +3 -0
- package/lib/typescript/lib/commonjs/formats.d.ts.map +1 -0
- package/lib/typescript/lib/module/formats.d.ts +2 -0
- package/lib/typescript/lib/module/formats.d.ts.map +1 -0
- package/lib/typescript/lib/module/main/index.d.ts +1 -0
- package/lib/typescript/lib/module/main/index.web.d.ts +1 -0
- package/lib/typescript/src/formats.d.ts +2 -0
- package/lib/typescript/src/formats.d.ts.map +1 -0
- package/lib/typescript/src/main/index.d.ts +1 -0
- package/lib/typescript/src/main/index.d.ts.map +1 -1
- package/lib/typescript/src/main/index.web.d.ts +1 -0
- package/lib/typescript/src/main/index.web.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/formats.ts +23 -0
- package/src/main/index.tsx +1 -0
- package/src/main/index.web.tsx +1 -0
package/README.md
CHANGED
|
@@ -1,416 +1,13 @@
|
|
|
1
1
|
# React Native WebGPU
|
|
2
2
|
|
|
3
|
-
React Native
|
|
3
|
+
WebGPU for React Native, powered by Dawn.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[wcandillon.github.io/react-native-webgpu](https://wcandillon.github.io/react-native-webgpu/)
|
|
6
6
|
|
|
7
|
-
##
|
|
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
|
-
|
|
11
|
+
## Contributing
|
|
14
12
|
|
|
15
|
-
|
|
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;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getPreferredHighBitDepthCanvasFormat = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
/// <reference types="@webgpu/types" />
|
|
9
|
+
|
|
10
|
+
// Non-spec helper: the canvas texture format most likely to reach the display
|
|
11
|
+
// with more than 8 bits per channel on the current platform. The returned
|
|
12
|
+
// format keeps standard (SDR) sRGB semantics: values are encoded exactly like
|
|
13
|
+
// on an 8-bit canvas, only with more precision, so colors match across
|
|
14
|
+
// formats. This is about bit depth, not HDR (no extended range).
|
|
15
|
+
//
|
|
16
|
+
// - Apple platforms: "rgba16float" (16-bit float per channel). The library
|
|
17
|
+
// tags the CAMetalLayer with the extended sRGB colorspace automatically so
|
|
18
|
+
// the values display identically to an 8-bit canvas.
|
|
19
|
+
// - Android: "rgb10a2unorm". A float16 swapchain works but is tagged as an
|
|
20
|
+
// SDR sRGB layer, and SurfaceFlinger quantizes SDR layers to the display
|
|
21
|
+
// pipeline depth during composition, discarding the extra precision.
|
|
22
|
+
// RGBA_1010102 buffers keep SDR semantics and can pass through composition,
|
|
23
|
+
// including direct scanout on 10-bit panels. Requires the Vulkan surface to
|
|
24
|
+
// expose the 10-bit format (common on modern devices).
|
|
25
|
+
// - Web: "rgba16float", the float canvas format supported by browsers.
|
|
26
|
+
const getPreferredHighBitDepthCanvasFormat = () => {
|
|
27
|
+
return _reactNative.Platform.OS === "android" ? "rgb10a2unorm" : "rgba16float";
|
|
28
|
+
};
|
|
29
|
+
exports.getPreferredHighBitDepthCanvasFormat = getPreferredHighBitDepthCanvasFormat;
|
|
30
|
+
//# sourceMappingURL=formats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","getPreferredHighBitDepthCanvasFormat","Platform","OS","exports"],"sourceRoot":"../../src","sources":["formats.ts"],"mappings":";;;;;;AAEA,IAAAA,YAAA,GAAAC,OAAA;AAFA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,oCAAoC,GAAGA,CAAA,KAAwB;EAC1E,OAAOC,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAAG,cAAc,GAAG,aAAa;AACnE,CAAC;AAACC,OAAA,CAAAH,oCAAA,GAAAA,oCAAA","ignoreList":[]}
|
|
@@ -74,6 +74,18 @@ Object.keys(_GPUDeviceProvider).forEach(function (key) {
|
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
76
|
});
|
|
77
|
+
var _formats = require("../formats");
|
|
78
|
+
Object.keys(_formats).forEach(function (key) {
|
|
79
|
+
if (key === "default" || key === "__esModule") return;
|
|
80
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
81
|
+
if (key in exports && exports[key] === _formats[key]) return;
|
|
82
|
+
Object.defineProperty(exports, key, {
|
|
83
|
+
enumerable: true,
|
|
84
|
+
get: function () {
|
|
85
|
+
return _formats[key];
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
});
|
|
77
89
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
78
90
|
const _installOk = _NativeWebGPUModule.default.install();
|
|
79
91
|
(0, _external.registerWebGPUForReanimated)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_external","require","_NativeWebGPUModule","_interopRequireDefault","_Canvas","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Offscreen","_WebGPUViewNativeComponent","_hooks","_GPUDeviceProvider","e","__esModule","default","_installOk","WebGPUModule","install","registerWebGPUForReanimated","RNWebGPU","navigator","gpu","userAgent","global","createImageBitmap","bind","console","warn"],"sourceRoot":"../../../src","sources":["main/index.tsx"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,UAAA,GAAAhB,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAW,UAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,UAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,UAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,0BAAA,GAAAjB,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAY,0BAAA,EAAAX,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAU,0BAAA,CAAAV,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,0BAAA,CAAAV,GAAA;IAAA;EAAA;AAAA;AACA,IAAAW,MAAA,GAAAlB,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAa,MAAA,EAAAZ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAW,MAAA,CAAAX,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,MAAA,CAAAX,GAAA;IAAA;EAAA;AAAA;AACA,IAAAY,kBAAA,GAAAnB,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAc,kBAAA,EAAAb,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAY,kBAAA,CAAAZ,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,kBAAA,CAAAZ,GAAA;IAAA;EAAA;AAAA;
|
|
1
|
+
{"version":3,"names":["_external","require","_NativeWebGPUModule","_interopRequireDefault","_Canvas","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Offscreen","_WebGPUViewNativeComponent","_hooks","_GPUDeviceProvider","_formats","e","__esModule","default","_installOk","WebGPUModule","install","registerWebGPUForReanimated","RNWebGPU","navigator","gpu","userAgent","global","createImageBitmap","bind","console","warn"],"sourceRoot":"../../../src","sources":["main/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -59,4 +59,15 @@ Object.keys(_GPUDeviceProvider).forEach(function (key) {
|
|
|
59
59
|
}
|
|
60
60
|
});
|
|
61
61
|
});
|
|
62
|
+
var _formats = require("../formats");
|
|
63
|
+
Object.keys(_formats).forEach(function (key) {
|
|
64
|
+
if (key === "default" || key === "__esModule") return;
|
|
65
|
+
if (key in exports && exports[key] === _formats[key]) return;
|
|
66
|
+
Object.defineProperty(exports, key, {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _formats[key];
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
62
73
|
//# sourceMappingURL=index.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["require","_Canvas","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Offscreen","_WebGPUViewNativeComponent","_hooks","_GPUDeviceProvider"],"sourceRoot":"../../../src","sources":["main/index.web.tsx"],"mappings":";;;;;AAAAA,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAR,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,UAAA,GAAAV,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAO,UAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,UAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,UAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,0BAAA,GAAAX,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAQ,0BAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,0BAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,0BAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,MAAA,GAAAZ,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,MAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,MAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,kBAAA,GAAAb,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAU,kBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,kBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,kBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["require","_Canvas","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Offscreen","_WebGPUViewNativeComponent","_hooks","_GPUDeviceProvider","_formats"],"sourceRoot":"../../../src","sources":["main/index.web.tsx"],"mappings":";;;;;AAAAA,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAR,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,UAAA,GAAAV,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAO,UAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,UAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,UAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,0BAAA,GAAAX,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAQ,0BAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,0BAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,0BAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,MAAA,GAAAZ,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,MAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,MAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,kBAAA,GAAAb,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAU,kBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,kBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,kBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,QAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,QAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,QAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,QAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="@webgpu/types" />
|
|
2
|
+
|
|
3
|
+
import { Platform } from "react-native";
|
|
4
|
+
|
|
5
|
+
// Non-spec helper: the canvas texture format most likely to reach the display
|
|
6
|
+
// with more than 8 bits per channel on the current platform. The returned
|
|
7
|
+
// format keeps standard (SDR) sRGB semantics: values are encoded exactly like
|
|
8
|
+
// on an 8-bit canvas, only with more precision, so colors match across
|
|
9
|
+
// formats. This is about bit depth, not HDR (no extended range).
|
|
10
|
+
//
|
|
11
|
+
// - Apple platforms: "rgba16float" (16-bit float per channel). The library
|
|
12
|
+
// tags the CAMetalLayer with the extended sRGB colorspace automatically so
|
|
13
|
+
// the values display identically to an 8-bit canvas.
|
|
14
|
+
// - Android: "rgb10a2unorm". A float16 swapchain works but is tagged as an
|
|
15
|
+
// SDR sRGB layer, and SurfaceFlinger quantizes SDR layers to the display
|
|
16
|
+
// pipeline depth during composition, discarding the extra precision.
|
|
17
|
+
// RGBA_1010102 buffers keep SDR semantics and can pass through composition,
|
|
18
|
+
// including direct scanout on 10-bit panels. Requires the Vulkan surface to
|
|
19
|
+
// expose the 10-bit format (common on modern devices).
|
|
20
|
+
// - Web: "rgba16float", the float canvas format supported by browsers.
|
|
21
|
+
export const getPreferredHighBitDepthCanvasFormat = () => {
|
|
22
|
+
return Platform.OS === "android" ? "rgb10a2unorm" : "rgba16float";
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=formats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","getPreferredHighBitDepthCanvasFormat","OS"],"sourceRoot":"../../src","sources":["formats.ts"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,cAAc;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oCAAoC,GAAGA,CAAA,KAAwB;EAC1E,OAAOD,QAAQ,CAACE,EAAE,KAAK,SAAS,GAAG,cAAc,GAAG,aAAa;AACnE,CAAC","ignoreList":[]}
|
package/lib/module/main/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export * from "../Offscreen";
|
|
|
5
5
|
export * from "../WebGPUViewNativeComponent";
|
|
6
6
|
export * from "../hooks";
|
|
7
7
|
export * from "../GPUDeviceProvider";
|
|
8
|
+
export * from "../formats";
|
|
8
9
|
export { default as WebGPUModule } from "../NativeWebGPUModule";
|
|
9
10
|
const _installOk = WebGPUModule.install();
|
|
10
11
|
registerWebGPUForReanimated();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerWebGPUForReanimated","WebGPUModule","default","_installOk","install","RNWebGPU","navigator","gpu","userAgent","global","createImageBitmap","bind","console","warn"],"sourceRoot":"../../../src","sources":["main/index.tsx"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,aAAa;AACzD,OAAOC,YAAY,MAAM,uBAAuB;AAEhD,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,UAAU;AACxB,cAAc,sBAAsB;
|
|
1
|
+
{"version":3,"names":["registerWebGPUForReanimated","WebGPUModule","default","_installOk","install","RNWebGPU","navigator","gpu","userAgent","global","createImageBitmap","bind","console","warn"],"sourceRoot":"../../../src","sources":["main/index.tsx"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,aAAa;AACzD,OAAOC,YAAY,MAAM,uBAAuB;AAEhD,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,YAAY;AAE1B,SAASC,OAAO,IAAID,YAAY,QAAQ,uBAAuB;AAE/D,MAAME,UAAU,GAAGF,YAAY,CAACG,OAAO,CAAC,CAAC;AAEzCJ,2BAA2B,CAAC,CAAC;AAE7B,IAAI,OAAOK,QAAQ,KAAK,WAAW,EAAE;EACnC,IAAI,CAACC,SAAS,EAAE;IACd;IACAA,SAAS,GAAG;MACVC,GAAG,EAAEF,QAAQ,CAACE,GAAG;MACjBC,SAAS,EAAE;IACb,CAAC;EACH,CAAC,MAAM;IACLF,SAAS,CAACC,GAAG,GAAGF,QAAQ,CAACE,GAAG;IAC5B,IAAI,OAAOD,SAAS,CAACE,SAAS,KAAK,QAAQ,EAAE;MAC3C,IAAI;QACF;QACA;QACAF,SAAS,CAACE,SAAS,GAAG,cAAc;MACtC,CAAC,CAAC,MAAM;QACN;MAAA;IAEJ;EACF;EACAC,MAAM,CAACC,iBAAiB,GACtBD,MAAM,CAACC,iBAAiB,IAAIL,QAAQ,CAACK,iBAAiB,CAACC,IAAI,CAACN,QAAQ,CAAC;AACzE,CAAC,MAAM;EACLO,OAAO,CAACC,IAAI,CACV,4CAA4CV,UAAU,uCACxD,CAAC;AACH","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ export * from "../Offscreen";
|
|
|
4
4
|
export * from "../WebGPUViewNativeComponent";
|
|
5
5
|
export * from "../hooks";
|
|
6
6
|
export * from "../GPUDeviceProvider";
|
|
7
|
+
export * from "../formats";
|
|
7
8
|
|
|
8
9
|
// We don't need to set all global properties on web, webgpu is already available globally
|
|
9
10
|
//# sourceMappingURL=index.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["main/index.web.tsx"],"mappings":"AAAA,OAAO,yBAAyB;AAEhC,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,UAAU;AACxB,cAAc,sBAAsB;;
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["main/index.web.tsx"],"mappings":"AAAA,OAAO,yBAAyB;AAEhC,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,YAAY;;AAE1B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formats.d.ts","sourceRoot":"","sources":["../../../commonjs/formats.js"],"names":[],"mappings":";AAyBA,uFAEC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formats.d.ts","sourceRoot":"","sources":["../../../module/formats.js"],"names":[],"mappings":"AAoBO,uFAEN"}
|
|
@@ -3,5 +3,6 @@ export * from "../Offscreen";
|
|
|
3
3
|
export * from "../WebGPUViewNativeComponent";
|
|
4
4
|
export * from "../hooks";
|
|
5
5
|
export * from "../GPUDeviceProvider";
|
|
6
|
+
export * from "../formats";
|
|
6
7
|
export { default as WebGPUModule } from "../NativeWebGPUModule";
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formats.d.ts","sourceRoot":"","sources":["../../../src/formats.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,oCAAoC,QAAO,gBAEvD,CAAC"}
|
|
@@ -3,5 +3,6 @@ export * from "../Offscreen";
|
|
|
3
3
|
export * from "../WebGPUViewNativeComponent";
|
|
4
4
|
export * from "../hooks";
|
|
5
5
|
export * from "../GPUDeviceProvider";
|
|
6
|
+
export * from "../formats";
|
|
6
7
|
export { default as WebGPUModule } from "../NativeWebGPUModule";
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
package/src/formats.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="@webgpu/types" />
|
|
2
|
+
|
|
3
|
+
import { Platform } from "react-native";
|
|
4
|
+
|
|
5
|
+
// Non-spec helper: the canvas texture format most likely to reach the display
|
|
6
|
+
// with more than 8 bits per channel on the current platform. The returned
|
|
7
|
+
// format keeps standard (SDR) sRGB semantics: values are encoded exactly like
|
|
8
|
+
// on an 8-bit canvas, only with more precision, so colors match across
|
|
9
|
+
// formats. This is about bit depth, not HDR (no extended range).
|
|
10
|
+
//
|
|
11
|
+
// - Apple platforms: "rgba16float" (16-bit float per channel). The library
|
|
12
|
+
// tags the CAMetalLayer with the extended sRGB colorspace automatically so
|
|
13
|
+
// the values display identically to an 8-bit canvas.
|
|
14
|
+
// - Android: "rgb10a2unorm". A float16 swapchain works but is tagged as an
|
|
15
|
+
// SDR sRGB layer, and SurfaceFlinger quantizes SDR layers to the display
|
|
16
|
+
// pipeline depth during composition, discarding the extra precision.
|
|
17
|
+
// RGBA_1010102 buffers keep SDR semantics and can pass through composition,
|
|
18
|
+
// including direct scanout on 10-bit panels. Requires the Vulkan surface to
|
|
19
|
+
// expose the 10-bit format (common on modern devices).
|
|
20
|
+
// - Web: "rgba16float", the float canvas format supported by browsers.
|
|
21
|
+
export const getPreferredHighBitDepthCanvasFormat = (): GPUTextureFormat => {
|
|
22
|
+
return Platform.OS === "android" ? "rgb10a2unorm" : "rgba16float";
|
|
23
|
+
};
|
package/src/main/index.tsx
CHANGED
package/src/main/index.web.tsx
CHANGED