From b660ea2802bdb5b3a1deaf3ccacccbe2ca5d113d Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Sun, 28 Jun 2026 14:06:44 +0200 Subject: [PATCH] fix(ShaderView): forward transparent to Canvas; adopt installWebGPU; bump rn-webgpu 0.5.15 - Forward the transparent prop to so transparency works on Android (Android ignores alphaMode; the native transparent prop controls it). - Replace the hand-rolled worklet global injection (which also overwrote the run-loop's setImmediate with requestAnimationFrame) with the official installWebGPU() called inside the render worklet. Removes the fragile cross-worklet ordering and the incorrect setImmediate override. - Bump react-native-webgpu 0.5.14 -> 0.5.15 (adds installWebGPU). --- example/package.json | 2 +- package.json | 2 +- src/components/ShaderView/index.tsx | 15 +++++++-- src/hooks/useWGPUSetup.tsx | 3 -- src/utils/initWebGPU.ts | 47 ----------------------------- yarn.lock | 12 ++++---- 6 files changed, 21 insertions(+), 60 deletions(-) delete mode 100644 src/utils/initWebGPU.ts diff --git a/example/package.json b/example/package.json index 0b86a47..2ff5282 100644 --- a/example/package.json +++ b/example/package.json @@ -24,7 +24,7 @@ "react-native-reanimated": "4.3.1", "react-native-safe-area-context": "~5.7.0", "react-native-screens": "4.25.2", - "react-native-webgpu": "0.5.14", + "react-native-webgpu": "0.5.15", "react-native-worklets": "0.8.3" }, "devDependencies": { diff --git a/package.json b/package.json index c32114b..82afb02 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "react-native-builder-bob": "^0.41.0", "react-native-gesture-handler": "2.31.1", "react-native-reanimated": "4.3.1", - "react-native-webgpu": "0.5.14", + "react-native-webgpu": "0.5.15", "react-native-worklets": "0.8.3", "release-it": "^20.2.0", "turbo": "^2.9.16", diff --git a/src/components/ShaderView/index.tsx b/src/components/ShaderView/index.tsx index ced33f9..b210cc7 100644 --- a/src/components/ShaderView/index.tsx +++ b/src/components/ShaderView/index.tsx @@ -1,5 +1,5 @@ import { PixelRatio, StyleSheet } from 'react-native'; -import { Canvas } from 'react-native-webgpu'; +import { Canvas, installWebGPU } from 'react-native-webgpu'; import { useEffect, useRef } from 'react'; import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets'; import { colorToVec4 } from '../../utils/colors'; @@ -99,6 +99,12 @@ export default function ShaderView({ scheduleOnRuntime(runtime, () => { 'worklet'; + // Worklet runtimes start without the WebGPU flag constants + // (GPUBufferUsage, GPUTextureUsage, ...). installWebGPU() captures them + // into this runtime so they're available below. Idempotent / safe no-op + // if already installed. + installWebGPU(); + // Create pipeline once const pipeline = device.createRenderPipeline({ layout: 'auto', @@ -251,7 +257,12 @@ export default function ShaderView({ ]); return ( - + ); } diff --git a/src/hooks/useWGPUSetup.tsx b/src/hooks/useWGPUSetup.tsx index 9c8af9c..9c15c81 100644 --- a/src/hooks/useWGPUSetup.tsx +++ b/src/hooks/useWGPUSetup.tsx @@ -6,7 +6,6 @@ import { } from 'react-native-webgpu'; import { useEffect, useState } from 'react'; import type { WorkletRuntime } from 'react-native-worklets'; -import { initWebGPU } from '../utils/initWebGPU'; import { BackgroundRuntime } from '../utils/backgroundRuntime'; type GPUResources = { @@ -56,8 +55,6 @@ export function useWGPUSetup(): WGPUSetupResult { alphaMode: 'premultiplied', }); - initWebGPU(runtime); - if (!cancelled) { setResources({ device, context, presentationFormat }); } diff --git a/src/utils/initWebGPU.ts b/src/utils/initWebGPU.ts deleted file mode 100644 index 0624ef5..0000000 --- a/src/utils/initWebGPU.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { scheduleOnRuntime, type WorkletRuntime } from 'react-native-worklets'; - -/** - * Installs WebGPU globals on the given worklet runtime. - * - * Worklet runtimes run on a separate JS context that lacks browser-like globals. - * This function captures WebGPU constants and `navigator.gpu` from the RN thread - * and injects them into the worklet's `globalThis` so that WebGPU code can run - * as if it were in a browser environment. - * - * @param runtime - The worklet runtime to initialize - */ -export function initWebGPU(runtime: WorkletRuntime) { - const navigator = globalThis.navigator as NavigatorGPU; - const GPUBufferUsage = globalThis.GPUBufferUsage; - const GPUColorWrite = globalThis.GPUColorWrite; - const GPUMapMode = globalThis.GPUMapMode; - const GPUShaderStage = globalThis.GPUShaderStage; - const GPUTextureUsage = globalThis.GPUTextureUsage; - - scheduleOnRuntime(runtime, () => { - 'worklet'; - - if (globalThis.self) { - return; - } - globalThis.self = globalThis; - globalThis.navigator = { gpu: navigator.gpu } as unknown as Navigator; - globalThis.GPUBufferUsage = GPUBufferUsage; - globalThis.GPUColorWrite = GPUColorWrite; - globalThis.GPUMapMode = GPUMapMode; - globalThis.GPUShaderStage = GPUShaderStage; - globalThis.GPUTextureUsage = GPUTextureUsage; - globalThis.setImmediate = - globalThis.requestAnimationFrame as typeof setImmediate; - }); -} - -declare global { - var self: typeof globalThis; - var _WORKLET: boolean | undefined; - var performance: { now(): number }; - - interface Navigator { - gpu: GPU; - } -} diff --git a/yarn.lock b/yarn.lock index 4c22538..7f4e5fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10743,7 +10743,7 @@ __metadata: react-native-reanimated: "npm:4.3.1" react-native-safe-area-context: "npm:~5.7.0" react-native-screens: "npm:4.25.2" - react-native-webgpu: "npm:0.5.14" + react-native-webgpu: "npm:0.5.15" react-native-worklets: "npm:0.8.3" typescript: "npm:6.0.3" languageName: unknown @@ -10777,7 +10777,7 @@ __metadata: react-native-builder-bob: "npm:^0.41.0" react-native-gesture-handler: "npm:2.31.1" react-native-reanimated: "npm:4.3.1" - react-native-webgpu: "npm:0.5.14" + react-native-webgpu: "npm:0.5.15" react-native-worklets: "npm:0.8.3" release-it: "npm:^20.2.0" turbo: "npm:^2.9.16" @@ -10878,9 +10878,9 @@ __metadata: languageName: node linkType: hard -"react-native-webgpu@npm:0.5.14": - version: 0.5.14 - resolution: "react-native-webgpu@npm:0.5.14" +"react-native-webgpu@npm:0.5.15": + version: 0.5.15 + resolution: "react-native-webgpu@npm:0.5.15" peerDependencies: react: "*" react-native: ">=0.81.0" @@ -10891,7 +10891,7 @@ __metadata: optional: true react-native-worklets: optional: true - checksum: 10c0/305f81f31273275a0f13616af3b50c5418ee06d1e098a5a613446ec5ed88730a65e6e8f206628a9e080cc579684bbee7a8ef3a3d46dae748ad793e4fb22e2030 + checksum: 10c0/91430eb36a5ff5f7e43519a79b384bc9648776c2b4788900e8f9154a706cc8c60c101decc3ef32631cef300f2f636e9aeb038ccf90b15dd8cbb7f8381f39fa4b languageName: node linkType: hard