├── .gitignore ├── .gitmodules ├── .yarn └── releases │ └── yarn-3.6.4.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── examples └── Example │ ├── .bundle │ └── config │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── .yarn │ └── releases │ │ └── yarn-3.6.4.cjs │ ├── .yarnrc.yml │ ├── Gemfile │ ├── Gemfile.lock │ ├── README.md │ ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── ic_launcher-playstore.png │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ ├── ic_launcher.xml │ │ │ └── ic_launcher_round.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ └── values │ │ │ ├── ic_launcher_background.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── babel │ └── gltf-babel-transformer.js │ ├── index.js │ ├── ios │ ├── .xcode.env │ ├── Example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Example.xcscheme │ ├── Example.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── Example │ │ ├── AppDelegate.swift │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ ├── Contents.json │ │ │ │ ├── dark_60@2x.png │ │ │ │ ├── dark_60@3x.png │ │ │ │ ├── icon_60@2x.png │ │ │ │ ├── icon_60@3x.png │ │ │ │ ├── tinted_60@2x.png │ │ │ │ └── tinted_60@3x.png │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── PrivacyInfo.xcprivacy │ ├── Podfile │ └── Podfile.lock │ ├── jest.config.js │ ├── metro.config.js │ ├── myThread.js │ ├── package.json │ ├── src │ ├── App.tsx │ ├── Components │ │ ├── ExampleScreen.tsx │ │ ├── Examples.tsx │ │ ├── List.tsx │ │ ├── Root.tsx │ │ ├── Square.tsx │ │ ├── controls │ │ │ ├── dat.gui │ │ │ │ ├── Controller.ts │ │ │ │ ├── FunctionController.ts │ │ │ │ ├── Gui.test.ts │ │ │ │ ├── Gui.ts │ │ │ │ ├── NumberController.ts │ │ │ │ ├── OptionsController.ts │ │ │ │ ├── SliderController.ts │ │ │ │ ├── StringController.ts │ │ │ │ ├── SwitchController.ts │ │ │ │ ├── incrementingId.test.ts │ │ │ │ ├── incrementingId.ts │ │ │ │ └── types.ts │ │ │ ├── react │ │ │ │ ├── ControlBackground.tsx │ │ │ │ ├── ControlButton.tsx │ │ │ │ ├── ControlFolder.tsx │ │ │ │ ├── ControlInput.tsx │ │ │ │ ├── ControlLabel.tsx │ │ │ │ ├── ControlNumberInput.tsx │ │ │ │ ├── ControlOptions.tsx │ │ │ │ ├── ControlSlider.tsx │ │ │ │ ├── ControlSwitch.tsx │ │ │ │ ├── ControlTextInput.tsx │ │ │ │ ├── ControlsContainer.tsx │ │ │ │ ├── controlsStyles.ts │ │ │ │ └── useControls.tsx │ │ │ ├── sliderUtils.test.ts │ │ │ └── sliderUtils.ts │ │ ├── globalStyles.ts │ │ └── stats │ │ │ ├── HudContainer.tsx │ │ │ ├── HudLabel.tsx │ │ │ ├── HudText.tsx │ │ │ ├── hudStyles.ts │ │ │ ├── useHudText.tsx │ │ │ └── useStats.tsx │ ├── InHouse │ │ ├── AdapterInfo.tsx │ │ ├── AnimateCanvas │ │ │ ├── AnimateCanvas.tsx │ │ │ └── triangle.wgsl │ │ ├── CWTriangle │ │ │ ├── CWTriangle.tsx │ │ │ └── cw-triangle.wgsl │ │ ├── ClearBuffer.tsx │ │ ├── Crop.tsx │ │ ├── ExceedDeviceLimits.tsx │ │ ├── FlakesTexture.tsx │ │ ├── Outlines │ │ │ ├── Outlines.tsx │ │ │ ├── cube.gltf │ │ │ └── outlines.wgsl │ │ ├── Portal │ │ │ ├── Portal.tsx │ │ │ ├── portal.gltf │ │ │ ├── portal.jpg │ │ │ └── portal.wgsl │ │ ├── ResizeCanvas │ │ │ ├── ResizeCanvas.tsx │ │ │ ├── runResizeCanvas.ts │ │ │ └── triangle.wgsl │ │ ├── Thread.tsx │ │ └── Video.tsx │ ├── Three │ │ ├── Clearcoat │ │ │ └── Clearcoat.tsx │ │ ├── Clipping │ │ │ └── Clipping.tsx │ │ ├── ComputeGeometry │ │ │ └── ComputeGeometry.tsx │ │ ├── ComputeParticles │ │ │ └── ComputeParticles.tsx │ │ ├── GLTFLoader │ │ │ └── GLTFLoader.tsx │ │ ├── HelloThree │ │ │ └── HelloThree.tsx │ │ └── LogarithmicDepthBuffer │ │ │ └── LogarithmicDepthBuffer.tsx │ ├── WebGPUSamples │ │ ├── BasicGraphics │ │ │ ├── CubeMap │ │ │ │ ├── CubeMap.tsx │ │ │ │ └── sampleCubemap.frag.wgsl │ │ │ ├── FractalCube │ │ │ │ ├── FractalCube.tsx │ │ │ │ └── sampleSelf.frag.wgsl │ │ │ ├── HelloTriangle │ │ │ │ └── HelloTriangle.tsx │ │ │ ├── HelloTriangleMSAA │ │ │ │ └── HelloTriangleMSAA.tsx │ │ │ ├── InstancedCube │ │ │ │ ├── InstancedCube.tsx │ │ │ │ └── instanced.vert.wgsl │ │ │ ├── RotatingCube │ │ │ │ └── RotatingCube.tsx │ │ │ ├── TexturedCube │ │ │ │ ├── TexturedCube.tsx │ │ │ │ └── sampleTextureMixColor.frag.wgsl │ │ │ └── TwoCubes │ │ │ │ └── TwoCubes.tsx │ │ ├── GPGPU │ │ │ ├── BitonicSort │ │ │ │ ├── BitonicSort.tsx │ │ │ │ ├── atomicToZero.wgsl │ │ │ │ ├── bitonicCompute.ts │ │ │ │ ├── bitonicDisplay.frag.wgsl │ │ │ │ ├── bitonicDisplay.ts │ │ │ │ └── utils.ts │ │ │ ├── ComputeBoids │ │ │ │ ├── ComputeBoids.tsx │ │ │ │ ├── sprite.wgsl │ │ │ │ └── updateSprites.wgsl │ │ │ └── GameOfLife │ │ │ │ ├── GameOfLife.tsx │ │ │ │ ├── compute.wgsl │ │ │ │ ├── frag.wgsl │ │ │ │ └── vert.wgsl │ │ ├── GraphicsTechniques │ │ │ ├── ABuffer │ │ │ │ ├── ABuffer.tsx │ │ │ │ ├── composite.wgsl │ │ │ │ ├── opaque.wgsl │ │ │ │ └── translucent.wgsl │ │ │ ├── Cameras │ │ │ │ ├── Cameras.tsx │ │ │ │ ├── camera.ts │ │ │ │ ├── cube.wgsl │ │ │ │ └── input.ts │ │ │ ├── Cornell │ │ │ │ ├── Cornell.tsx │ │ │ │ ├── common.ts │ │ │ │ ├── common.wgsl │ │ │ │ ├── radiosity.ts │ │ │ │ ├── radiosity.wgsl │ │ │ │ ├── rasterizer.ts │ │ │ │ ├── rasterizer.wgsl │ │ │ │ ├── raytracer.ts │ │ │ │ ├── raytracer.wgsl │ │ │ │ ├── scene.ts │ │ │ │ ├── tonemapper.ts │ │ │ │ └── tonemapper.wgsl │ │ │ ├── DeferredRendering │ │ │ │ ├── DeferredRendering.tsx │ │ │ │ ├── fragmentDeferredRendering.wgsl │ │ │ │ ├── fragmentGBuffersDebugView.wgsl │ │ │ │ ├── fragmentWriteGBuffers.wgsl │ │ │ │ ├── lightUpdate.wgsl │ │ │ │ ├── vertexTextureQuad.wgsl │ │ │ │ └── vertexWriteGBuffers.wgsl │ │ │ ├── ImageBlur │ │ │ │ ├── ImageBlur.tsx │ │ │ │ └── blur.wgsl │ │ │ ├── NormalMap │ │ │ │ ├── NormalMap.tsx │ │ │ │ ├── normalMap.wgsl │ │ │ │ └── utils.ts │ │ │ ├── ParticlesHDR │ │ │ │ ├── ParticlesHDR.tsx │ │ │ │ ├── particle.wgsl │ │ │ │ └── probabilityMap.wgsl │ │ │ ├── ShadowMapping │ │ │ │ ├── ShadowMapping.tsx │ │ │ │ ├── fragment.wgsl │ │ │ │ ├── vertex.wgsl │ │ │ │ └── vertexShadow.wgsl │ │ │ ├── SkinnedMesh │ │ │ │ ├── SkinnedMesh.tsx │ │ │ │ ├── glbUtils.ts │ │ │ │ ├── gltf.ts │ │ │ │ ├── gltf.wgsl │ │ │ │ ├── grid.wgsl │ │ │ │ ├── gridData.ts │ │ │ │ └── gridUtils.ts │ │ │ ├── VolumeRendering │ │ │ │ ├── VolumeRendering.tsx │ │ │ │ └── volume.wgsl │ │ │ └── Wireframe │ │ │ │ ├── Wireframe.tsx │ │ │ │ ├── models.ts │ │ │ │ ├── solidColorLit.wgsl │ │ │ │ ├── utils.ts │ │ │ │ └── wireframe.wgsl │ │ ├── WebGPUFeatures │ │ │ ├── OcclusionQueries │ │ │ │ ├── OcclusionQueries.tsx │ │ │ │ └── solidColorLit.wgsl │ │ │ ├── RenderBundles │ │ │ │ ├── RenderBundles.tsx │ │ │ │ └── mesh.wgsl │ │ │ ├── ReversedZ │ │ │ │ ├── ReversedZ.tsx │ │ │ │ ├── fragment.wgsl │ │ │ │ ├── fragmentPrecisionErrorPass.wgsl │ │ │ │ ├── fragmentTextureQuad.wgsl │ │ │ │ ├── vertex.wgsl │ │ │ │ ├── vertexDepthPrePass.wgsl │ │ │ │ ├── vertexPrecisionErrorPass.wgsl │ │ │ │ └── vertexTextureQuad.wgsl │ │ │ └── SamplerParameters │ │ │ │ ├── SamplerParameters.tsx │ │ │ │ ├── showTexture.wgsl │ │ │ │ └── texturedSquare.wgsl │ │ ├── assets │ │ │ └── img │ │ │ │ ├── Di-3d.png │ │ │ │ ├── brickwall_albedo.jpg │ │ │ │ ├── brickwall_height.jpg │ │ │ │ ├── brickwall_normal.jpg │ │ │ │ ├── cubemap │ │ │ │ ├── negx.jpg │ │ │ │ ├── negy.jpg │ │ │ │ ├── negz.jpg │ │ │ │ ├── posx.jpg │ │ │ │ ├── posy.jpg │ │ │ │ └── posz.jpg │ │ │ │ ├── moon.jpg │ │ │ │ ├── saturn.jpg │ │ │ │ ├── spiral_height.png │ │ │ │ ├── spiral_normal.png │ │ │ │ ├── toybox_height.png │ │ │ │ ├── toybox_normal.png │ │ │ │ ├── webgpu.png │ │ │ │ └── wood_albedo.png │ │ ├── meshes │ │ │ ├── box.ts │ │ │ ├── cube.ts │ │ │ ├── mesh.ts │ │ │ ├── sphere.ts │ │ │ ├── stanfordDragon.ts │ │ │ ├── stanfordDragonData.ts │ │ │ ├── teapot.ts │ │ │ └── utils.ts │ │ └── shaders │ │ │ ├── basic.vert.wgsl │ │ │ ├── fullscreenTexturedQuad.wgsl │ │ │ ├── red.frag.wgsl │ │ │ ├── triangle.vert.wgsl │ │ │ └── vertexPositionColor.frag.wgsl │ ├── assets │ │ └── images │ │ │ └── cropImage.png │ ├── types │ │ ├── TextDecoder.d.ts │ │ ├── gltf.d.ts │ │ └── navigationTypes.ts │ └── utils │ │ ├── FlakesTextureGenerator.ts │ │ ├── constants.ts │ │ ├── examplesCallback.ts │ │ ├── launchArguments.ts │ │ ├── observable.test.ts │ │ ├── observable.ts │ │ └── shaders │ │ ├── flakesTexture.wgsl │ │ ├── quad.wgsl │ │ ├── videoQuad.wgsl │ │ └── yuv8420torgba8.wgsl │ └── tsconfig.json ├── package.json ├── packages ├── react-native-webgpu-experimental │ ├── .clang-format │ ├── .gitignore │ ├── .prettierrc.js │ ├── android │ │ ├── CMakeLists.txt │ │ ├── build.gradle │ │ ├── gradle.properties │ │ └── src │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── AndroidManifestNew.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── webgpu │ │ │ │ └── experimental │ │ │ │ ├── CxxBridge.kt │ │ │ │ └── WebgpuExperimentalPackage.kt │ │ │ ├── newarch │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── webgpu │ │ │ │ └── experimental │ │ │ │ └── WebgpuExperimentalModule.kt │ │ │ └── oldarch │ │ │ └── java │ │ │ └── com │ │ │ └── webgpu │ │ │ └── experimental │ │ │ └── WebgpuExperimentalModule.kt │ ├── babel.config.js │ ├── cxx │ │ ├── Compression.cpp │ │ ├── Compression.h │ │ ├── InstallExperimentalJSI.cpp │ │ ├── InstallExperimentalJSI.h │ │ ├── SocketCallback.h │ │ ├── VideoPlayer.h │ │ ├── android │ │ │ ├── NdkVideoPlayer.cpp │ │ │ ├── NdkVideoPlayer.h │ │ │ ├── SocketCallback.cpp │ │ │ ├── VideoPlayer.cpp │ │ │ ├── WGPUExperimentalJsi.cpp │ │ │ └── WGPUExperimentalJsi.h │ │ └── ios │ │ │ ├── SocketCallback.mm │ │ │ ├── ThreadManager.h │ │ │ ├── ThreadManager.mm │ │ │ ├── VideoPlayer.mm │ │ │ ├── WGPUExperimentalJsi.h │ │ │ └── WGPUExperimentalJsi.mm │ ├── package.json │ ├── react-native-webgpu-experimental.podspec │ ├── react-native.config.js │ ├── src │ │ ├── ThreadWebGpuView.tsx │ │ ├── index.ts │ │ ├── native.ts │ │ └── specs │ │ │ ├── NativeWebgpuExperimentalModule.ts │ │ │ └── index.ts │ ├── tsconfig.json │ └── types │ │ └── globals.d.ts ├── react-native-webgpu-tests │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc.cjs │ ├── bin │ │ ├── test-examples │ │ └── test-package │ ├── package.json │ └── src │ │ ├── examples │ │ ├── examples-to-test.js │ │ ├── examples.js │ │ ├── generate-examples-html.js │ │ └── socket-listener.js │ │ ├── index.js │ │ ├── package │ │ ├── build-android.js │ │ ├── build-ios.js │ │ ├── generate-project.js │ │ ├── pack.js │ │ └── package.js │ │ └── utils │ │ ├── config.js │ │ ├── log.js │ │ ├── prompt-builder.js │ │ ├── queue.js │ │ └── shell.js ├── react-native-webgpu-three │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc.js │ ├── DEV.md │ ├── LICENSE │ ├── README.md │ ├── babel │ │ ├── index.js │ │ └── package.json │ ├── metro │ │ ├── index.js │ │ └── package.json │ ├── package.json │ ├── src │ │ ├── CanvasProxy.js │ │ ├── Image.js │ │ ├── ThreeWebGpuView.js │ │ ├── TouchEventsAdapter.js │ │ ├── constNodePatch.js │ │ ├── debugLogging.js │ │ ├── examples │ │ │ └── jsm │ │ │ │ ├── capabilities │ │ │ │ └── WebGPU.js │ │ │ │ └── nodes │ │ │ │ └── pmrem │ │ │ │ └── PMREMNode.js │ │ ├── index.js │ │ ├── nodeBuilderPatch.js │ │ └── rendererPatch.js │ └── types │ │ └── index.d.ts └── react-native-webgpu │ ├── .clang-format │ ├── .gitignore │ ├── .prettierrc.js │ ├── README.md │ ├── android │ ├── CMakeLists.txt │ ├── build.gradle │ ├── gradle.properties │ └── src │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── AndroidManifestNew.xml │ │ └── java │ │ │ └── com │ │ │ └── webgpu │ │ │ ├── BitmapLoaderFactory.kt │ │ │ ├── BlobBitmapLoader.kt │ │ │ ├── CxxBridge.kt │ │ │ ├── DrawableBitmapLoader.kt │ │ │ ├── ExceptionHandler.kt │ │ │ ├── HTTPBitmapLoader.kt │ │ │ ├── WebGPUView.kt │ │ │ ├── WebGPUViewManagerImpl.kt │ │ │ └── WebgpuPackage.kt │ │ ├── newarch │ │ └── com │ │ │ └── webgpu │ │ │ ├── WebGPUViewManager.kt │ │ │ └── WebgpuModule.kt │ │ └── oldarch │ │ └── com │ │ └── webgpu │ │ ├── WebGPUViewManager.kt │ │ └── WebgpuModule.kt │ ├── babel.config.js │ ├── cxx │ ├── AdapterHostObject.cpp │ ├── AdapterHostObject.h │ ├── ArrayBufferUtils.h │ ├── AutoReleasePool.h │ ├── BindGroupHostObject.cpp │ ├── BindGroupHostObject.h │ ├── BindGroupLayoutHostObject.cpp │ ├── BindGroupLayoutHostObject.h │ ├── BufferHostObject.cpp │ ├── BufferHostObject.h │ ├── CommandBufferHostObject.cpp │ ├── CommandBufferHostObject.h │ ├── CommandEncoderHostObject.cpp │ ├── CommandEncoderHostObject.h │ ├── ComputePassEncoderHostObject.cpp │ ├── ComputePassEncoderHostObject.h │ ├── ComputePipelineHostObject.cpp │ ├── ComputePipelineHostObject.h │ ├── ConstantConversion.cpp │ ├── ConstantConversion.h │ ├── ContextHostObject.cpp │ ├── ContextHostObject.h │ ├── CreateImageBitmap.h │ ├── DeviceHostObject.cpp │ ├── DeviceHostObject.h │ ├── ErrorHandler.h │ ├── ExampleHostObject.cpp │ ├── ExampleHostObject.h │ ├── ImageBitmapHostObject.cpp │ ├── ImageBitmapHostObject.h │ ├── InstallRootJSI.cpp │ ├── InstallRootJSI.h │ ├── JSIInstance.cpp │ ├── JSIInstance.h │ ├── Mixins.h │ ├── PipelineLayoutHostObject.cpp │ ├── PipelineLayoutHostObject.h │ ├── QuerySetHostObject.cpp │ ├── QuerySetHostObject.h │ ├── QueueHostObject.cpp │ ├── QueueHostObject.h │ ├── RenderBundleEncoderHostObject.cpp │ ├── RenderBundleEncoderHostObject.h │ ├── RenderBundleHostObject.cpp │ ├── RenderBundleHostObject.h │ ├── RenderPassEncoderHostObject.cpp │ ├── RenderPassEncoderHostObject.h │ ├── RenderPipelineHostObject.cpp │ ├── RenderPipelineHostObject.h │ ├── SamplerHostObject.cpp │ ├── SamplerHostObject.h │ ├── ShaderModuleHostObject.cpp │ ├── ShaderModuleHostObject.h │ ├── Surface.h │ ├── SurfaceSize.h │ ├── SurfacesManager.cpp │ ├── SurfacesManager.h │ ├── TextureHostObject.cpp │ ├── TextureHostObject.h │ ├── TextureViewHostObject.cpp │ ├── TextureViewHostObject.h │ ├── Thread.h │ ├── WGPUContext.cpp │ ├── WGPUContext.h │ ├── WGPUConversions.cpp │ ├── WGPUConversions.h │ ├── WGPUDefaults.cpp │ ├── WGPUDefaults.h │ ├── WGPUJsiUtils.h │ ├── WGPUPromise.cpp │ ├── WGPUPromise.h │ ├── WGPUWrappers.h │ ├── android │ │ ├── CreateImageBitmap.cpp │ │ ├── JNIBitmapLoaderFactory.h │ │ ├── JNIBlobBitmapLoader.h │ │ ├── JNIDrawableBitmapLoader.h │ │ ├── JNIExceptionHandler.h │ │ ├── JNIHTTPBitmapLoader.h │ │ ├── Surface.cpp │ │ ├── Thread.cpp │ │ ├── WGPUAndroidInstance.cpp │ │ ├── WGPUAndroidInstance.h │ │ ├── WGPUJsi.cpp │ │ ├── WGPUJsi.h │ │ └── WGPULog.h │ └── ios │ │ ├── CreateImageBitmap.mm │ │ ├── Surface.mm │ │ ├── Thread.mm │ │ ├── UIImage+Bitmap.h │ │ ├── UIImage+Bitmap.mm │ │ ├── WGPUJsi.h │ │ ├── WGPUJsi.mm │ │ ├── WGPULog.h │ │ ├── WGPUObjCInstance.h │ │ ├── WGPUObjCInstance.m │ │ ├── WGPUWebGPUView.h │ │ ├── WGPUWebGPUView.mm │ │ └── WGPUWebGPUViewManager.mm │ ├── metro │ ├── index.js │ └── package.json │ ├── package.json │ ├── react-native-webgpu.podspec │ ├── react-native.config.js │ ├── src │ ├── WebGpuView.tsx │ ├── constants.ts │ ├── index.ts │ ├── native.ts │ ├── specs │ │ ├── NativeWebgpuModule.ts │ │ ├── WebgpuNativeComponent.ts │ │ └── index.ts │ ├── styles.ts │ └── types.ts │ ├── tsconfig.json │ ├── types │ ├── webGpuTypes.d.ts │ └── wgsl.d.ts │ └── wgsl-babel-transformer │ ├── index.js │ └── package.json ├── scripts ├── build-android.sh ├── build-ios.sh ├── check-elf-alignment.sh ├── codegen.sh ├── copy-headers.sh ├── copy-types.sh ├── format-cxx.sh └── zip-libs.sh ├── turbo.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # MacOS 2 | __MACOSX 3 | .DS_Store 4 | *.pem 5 | 6 | # Yarn 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/sdks 12 | !.yarn/versions 13 | 14 | # VSCode 15 | /.vscode 16 | 17 | /.idea 18 | /node_modules 19 | **/react-native-webgpu-*.tgz 20 | /.test* 21 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "submodules/wgpu-native"] 2 | path = submodules/wgpu-native 3 | url = https://github.com/gfx-rs/wgpu-native.git 4 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.6.4.cjs 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sean Henry 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native WebGPU 2 | 3 | A [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) port for react native to provide direct access to Metal and Vulkan for iOS and Android via the WebGPU api. 4 | 5 | ## Packages 6 | 7 | ### [react-native-webgpu](packages/react-native-webgpu) 8 | 9 | Direct access to the low-level graphics api [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) in React Native. 10 | 11 | ### [react-native-webgpu-three](packages/react-native-webgpu-three) 12 | 13 | Coming soon. A small helper library to enable [Three.js](https://threejs.org/) projects on React Native. 14 | 15 | ## Running the examples 16 | 17 | The best way to learn WebGPU is to check out the examples. You can find instructions to run the examples [here](examples/Example). 18 | -------------------------------------------------------------------------------- /examples/Example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /examples/Example/.eslintignore: -------------------------------------------------------------------------------- 1 | /.bundle 2 | /.yarn 3 | /android 4 | /ios 5 | /node_modules 6 | /vendor 7 | /babel.config.js 8 | /metro.config.js 9 | -------------------------------------------------------------------------------- /examples/Example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | rules: { 5 | 'react/react-in-jsx-scope': 'off', 6 | 'no-bitwise': 'off', 7 | 'no-dupe-class-members': 'off', 8 | semi: 'off', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /examples/Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | **/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | .kotlin/ 37 | 38 | # node.js 39 | # 40 | node_modules/ 41 | npm-debug.log 42 | yarn-error.log 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | **/fastlane/report.xml 52 | **/fastlane/Preview.html 53 | **/fastlane/screenshots 54 | **/fastlane/test_output 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # Ruby / CocoaPods 60 | **/Pods/ 61 | /vendor/bundle/ 62 | 63 | # Temporary files created by Metro to check the health of the file watcher 64 | .metro-health-check* 65 | 66 | # testing 67 | /coverage 68 | 69 | # Yarn 70 | .yarn/* 71 | !.yarn/patches 72 | !.yarn/plugins 73 | !.yarn/releases 74 | !.yarn/sdks 75 | !.yarn/versions 76 | -------------------------------------------------------------------------------- /examples/Example/.prettierignore: -------------------------------------------------------------------------------- 1 | /.bundle 2 | /.yarn 3 | /android 4 | /ios 5 | /node_modules 6 | /vendor 7 | -------------------------------------------------------------------------------- /examples/Example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | semi: true, 8 | }; 9 | -------------------------------------------------------------------------------- /examples/Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/Example/.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.6.4.cjs 4 | -------------------------------------------------------------------------------- /examples/Example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby "3.3.5" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | 12 | # Ruby 3.4.0 has removed some libraries from the standard library. 13 | gem 'bigdecimal' 14 | gem 'logger' 15 | gem 'benchmark' 16 | gem 'mutex_m' 17 | -------------------------------------------------------------------------------- /examples/Example/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | You can run the examples using the instructions below. 4 | 5 | 1. Clone the project 6 | 7 | ```bash 8 | git clone https://github.com/seanhenry/react-native-webgpu.git 9 | ``` 10 | 11 | 2. Compile workspace packages 12 | 13 | ```bash 14 | cd packages/react-native-webgpu 15 | yarn build 16 | cd ../.. 17 | 18 | cd packages/react-native-webgpu-experimental 19 | yarn build 20 | cd ../.. 21 | ``` 22 | 23 | 3. Install JavaScript dependencies 24 | 25 | ```bash 26 | cd react-native-webgpu/examples/Example 27 | yarn 28 | ``` 29 | 30 | 4. Download WebGPU dependencies 31 | 32 | ```bash 33 | wget https://github.com/seanhenry/react-native-webgpu/releases/download/v0.0.0/Bin+Headers.zip 34 | unzip Bin+Headers.zip -d ../../packages/react-native-webgpu 35 | ``` 36 | 37 |
38 | Manual instructions 39 | 40 | - Download `Bin+Headers.zip` from the [release page](https://github.com/seanhenry/react-native-webgpu/releases/tag/v0.0.0). 41 | - Unzip and move the `bin` and `include` folders to `../../packages/react-native-webgpu` 42 |
43 | 44 | 5. Install pods (iOS only) 45 | 46 | ```bash 47 | yarn pod:install 48 | ``` 49 | 50 | 6. Build and run 51 | 52 | ```bash 53 | yarn ios 54 | yarn android 55 | ``` 56 | -------------------------------------------------------------------------------- /examples/Example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/debug.keystore -------------------------------------------------------------------------------- /examples/Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/ic_launcher-playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/ic_launcher-playstore.png -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/java/com/example/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "Example" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Example 3 | 4 | -------------------------------------------------------------------------------- /examples/Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | allprojects { 2 | project.pluginManager.withPlugin("com.facebook.react") { 3 | react { 4 | reactNativeDir = rootProject.file("../../../node_modules/react-native/") 5 | } 6 | } 7 | } 8 | 9 | buildscript { 10 | ext { 11 | buildToolsVersion = "35.0.0" 12 | minSdkVersion = 27 13 | compileSdkVersion = 35 14 | targetSdkVersion = 35 15 | ndkVersion = "27.1.12297006" 16 | kotlinVersion = "2.0.21" 17 | } 18 | repositories { 19 | google() 20 | mavenCentral() 21 | } 22 | dependencies { 23 | classpath("com.android.tools.build:gradle") 24 | classpath("com.facebook.react:react-native-gradle-plugin") 25 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 26 | } 27 | } 28 | 29 | apply plugin: "com.facebook.react.rootproject" 30 | -------------------------------------------------------------------------------- /examples/Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /examples/Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'Example' 5 | include ':app' 6 | includeBuild('../../../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /examples/Example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Example", 3 | "displayName": "Example" 4 | } 5 | -------------------------------------------------------------------------------- /examples/Example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | plugins: [ 4 | ...require('react-native-webgpu-three/babel').plugins, 5 | 'react-native-reanimated/plugin', 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /examples/Example/babel/gltf-babel-transformer.js: -------------------------------------------------------------------------------- 1 | const babelTransformer = require('react-native-webgpu/wgsl-babel-transformer'); 2 | 3 | module.exports = {...babelTransformer}; 4 | module.exports.transform = function (options) { 5 | if (options.filename.endsWith('.gltf')) { 6 | options.src = `const contents = ${options.src}; 7 | export default contents;`; 8 | } 9 | return babelTransformer.transform(options); 10 | }; 11 | -------------------------------------------------------------------------------- /examples/Example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'fast-text-encoding'; 6 | import {AppRegistry, Platform} from 'react-native'; 7 | import App from './src/App'; 8 | import {name as appName} from './app.json'; 9 | import {install, Backends, defaultBackends} from 'react-native-webgpu'; 10 | import { 11 | ENABLE_THREADS, 12 | install as installExperimental, 13 | } from 'react-native-webgpu-experimental'; 14 | import 'react-native-webgpu-three'; 15 | 16 | defaultBackends.current = 17 | Platform.OS === 'android' ? Backends.Vulkan : Backends.All; 18 | install(); 19 | installExperimental(); 20 | if (ENABLE_THREADS) { 21 | global.reactNativeWebGPUThreads.spawn({ 22 | bundleId: 'myThread', 23 | threadId: 'myThread-0', 24 | }); 25 | } 26 | AppRegistry.registerComponent(appName, () => App); 27 | -------------------------------------------------------------------------------- /examples/Example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /examples/Example/ios/Example.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/Example/ios/Example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/Example/ios/Example/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import React 3 | import React_RCTAppDelegate 4 | import ReactAppDependencyProvider 5 | 6 | @main 7 | class AppDelegate: UIResponder, UIApplicationDelegate { 8 | var window: UIWindow? 9 | 10 | var reactNativeDelegate: ReactNativeDelegate? 11 | var reactNativeFactory: RCTReactNativeFactory? 12 | 13 | func application( 14 | _ application: UIApplication, 15 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil 16 | ) -> Bool { 17 | let delegate = ReactNativeDelegate() 18 | let factory = RCTReactNativeFactory(delegate: delegate) 19 | delegate.dependencyProvider = RCTAppDependencyProvider() 20 | 21 | reactNativeDelegate = delegate 22 | reactNativeFactory = factory 23 | 24 | window = UIWindow(frame: UIScreen.main.bounds) 25 | 26 | factory.startReactNative( 27 | withModuleName: "Example", 28 | in: window, 29 | launchOptions: launchOptions 30 | ) 31 | 32 | return true 33 | } 34 | } 35 | 36 | class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate { 37 | override func sourceURL(for bridge: RCTBridge) -> URL? { 38 | self.bundleURL() 39 | } 40 | 41 | override func bundleURL() -> URL? { 42 | #if DEBUG 43 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") 44 | #else 45 | Bundle.main.url(forResource: "main", withExtension: "jsbundle") 46 | #endif 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/dark_60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/dark_60@2x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/dark_60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/dark_60@3x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/icon_60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/icon_60@2x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/icon_60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/icon_60@3x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/tinted_60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/tinted_60@2x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/tinted_60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seanhenry/react-native-webgpu/f2403751a626a86180ee410f5d89fa61545d79f7/examples/Example/ios/Example/Images.xcassets/AppIcon.appiconset/tinted_60@3x.png -------------------------------------------------------------------------------- /examples/Example/ios/Example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/Example/ios/Example/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyAccessedAPIType 33 | NSPrivacyAccessedAPICategoryDiskSpace 34 | NSPrivacyAccessedAPITypeReasons 35 | 36 | 85F4.1 37 | 38 | 39 | 40 | NSPrivacyCollectedDataTypes 41 | 42 | NSPrivacyTracking 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /examples/Example/ios/Podfile: -------------------------------------------------------------------------------- 1 | $WGPUEnableThreads = true 2 | 3 | # Resolve react_native_pods.rb with node to allow for hoisting 4 | require Pod::Executable.execute_command('node', ['-p', 5 | 'require.resolve( 6 | "react-native/scripts/react_native_pods.rb", 7 | {paths: [process.argv[1]]}, 8 | )', __dir__]).strip 9 | 10 | platform :ios, min_ios_version_supported 11 | prepare_react_native_project! 12 | 13 | linkage = ENV['USE_FRAMEWORKS'] 14 | if linkage != nil 15 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 16 | use_frameworks! :linkage => linkage.to_sym 17 | end 18 | 19 | target 'Example' do 20 | config = use_native_modules! 21 | 22 | use_react_native!( 23 | :path => config[:reactNativePath], 24 | # An absolute path to your application root. 25 | :app_path => "#{Pod::Config.instance.installation_root}/.." 26 | ) 27 | 28 | post_install do |installer| 29 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 30 | react_native_post_install( 31 | installer, 32 | config[:reactNativePath], 33 | :mac_catalyst_enabled => false, 34 | # :ccache_enabled => true 35 | ) 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /examples/Example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /examples/Example/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | const path = require('path'); 3 | const webGpuConfig = require('react-native-webgpu/metro'); 4 | const threeConfig = require('react-native-webgpu-three/metro'); 5 | 6 | const root = path.resolve(__dirname, '../..'); 7 | const defaultConfig = getDefaultConfig(__dirname); 8 | 9 | /** 10 | * Metro configuration 11 | * https://reactnative.dev/docs/metro 12 | * 13 | * @type {import('@react-native/metro-config').MetroConfig} 14 | */ 15 | const config = { 16 | watchFolders: [root], 17 | resolver: { 18 | resolveRequest: threeConfig.resolver.resolveRequest, 19 | unstable_enablePackageExports: true, 20 | sourceExts: [ 21 | ...defaultConfig.resolver.sourceExts, 22 | ...webGpuConfig.resolver.sourceExts, 23 | 'gltf', 24 | ], 25 | }, 26 | transformer: { 27 | babelTransformerPath: require.resolve('./babel/gltf-babel-transformer'), 28 | }, 29 | }; 30 | 31 | module.exports = mergeConfig(defaultConfig, config); 32 | -------------------------------------------------------------------------------- /examples/Example/src/Components/Root.tsx: -------------------------------------------------------------------------------- 1 | import {List} from './List'; 2 | import {type NavigationProp, useNavigation} from '@react-navigation/native'; 3 | import type {Routes} from '../types/navigationTypes'; 4 | import {Examples} from './ExampleScreen'; 5 | import {useSafeAreaInsets} from 'react-native-safe-area-context'; 6 | 7 | export function Root() { 8 | const navigation = useNavigation>(); 9 | const insets = useSafeAreaInsets(); 10 | 11 | return ( 12 | 13 | insets={insets} 14 | onPressItem={item => navigation.navigate('examples', {name: item.title})} 15 | sections={[ 16 | { 17 | title: 'Examples', 18 | data: [ 19 | {title: 'WebGPUSamples'}, 20 | {title: 'Three'}, 21 | {title: 'InHouse'}, 22 | ], 23 | }, 24 | ]} 25 | /> 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /examples/Example/src/Components/Square.tsx: -------------------------------------------------------------------------------- 1 | import {Keyboard, StyleSheet, View} from 'react-native'; 2 | import type {ReactNode} from 'react'; 3 | 4 | export const Square = ({children}: {children: ReactNode}) => ( 5 | 6 | {children} 7 | 8 | ); 9 | 10 | const styles = StyleSheet.create({ 11 | container: { 12 | width: '100%', 13 | aspectRatio: 1, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/FunctionController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | 4 | type Fn = () => void; 5 | 6 | export class FunctionController extends Controller { 7 | constructor(object: T, property: keyof T, label?: string) { 8 | super(object, property); 9 | this.name(label ?? String(property)); 10 | } 11 | 12 | fire() { 13 | this.change(); 14 | this.value.call(this.object); 15 | this.finishChange(); 16 | } 17 | 18 | override render(): ControlComponent<'function'> { 19 | return { 20 | type: 'function', 21 | props: { 22 | key: this.key, 23 | title: this.getName(), 24 | disabled: this.disabled, 25 | onPress: () => this.fire(), 26 | }, 27 | }; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/NumberController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | 4 | export class NumberController extends Controller { 5 | constructor( 6 | object: T, 7 | property: keyof T, 8 | private min: unknown, 9 | private max: unknown, 10 | ) { 11 | super(object, property); 12 | } 13 | 14 | render(): ControlComponent<'number'> { 15 | return { 16 | type: 'number', 17 | props: { 18 | key: this.key, 19 | title: this.getName(), 20 | disabled: this.disabled, 21 | min: typeof this.min === 'number' ? this.min : undefined, 22 | max: typeof this.max === 'number' ? this.max : undefined, 23 | initialValue: this.value, 24 | observable: this.observable, 25 | onChange: value => 26 | this.setValue( 27 | value, 28 | true, // true because the TextInput is controlled by this.value 29 | ), 30 | onFinishChange: () => this.finishChange(), 31 | }, 32 | }; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/OptionsController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | 4 | export class OptionsController extends Controller { 5 | private options: Record; 6 | constructor(object: T, property: keyof T, options: object) { 7 | super(object, property); 8 | if (Array.isArray(options)) { 9 | this.options = {}; 10 | options.forEach(opt => { 11 | this.options[String(opt)] = opt; 12 | }); 13 | } else { 14 | this.options = options as Record; 15 | } 16 | } 17 | 18 | override setValue(value: unknown, notifyObservers?: boolean) { 19 | const result = super.setValue(value, notifyObservers); 20 | this.finishChange(); 21 | return result; 22 | } 23 | 24 | render(): ControlComponent<'options'> { 25 | return { 26 | type: 'options', 27 | props: { 28 | key: this.key, 29 | title: this.getName(), 30 | disabled: this.disabled, 31 | initialValue: String(this.value), 32 | options: Object.entries(this.options).map(([key, value]) => ({ 33 | key, 34 | title: key, 35 | onPress: () => this.setValue(value, false), 36 | })), 37 | observable: this.observable, 38 | }, 39 | }; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/SliderController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | import {calculateStep} from '../sliderUtils'; 4 | 5 | export class SliderController extends Controller { 6 | constructor( 7 | object: T, 8 | property: keyof T, 9 | private min: number, 10 | private max: number, 11 | private _step: unknown, 12 | ) { 13 | super(object, property); 14 | } 15 | 16 | render(): ControlComponent<'slider'> { 17 | return { 18 | type: 'slider', 19 | props: { 20 | key: this.key, 21 | title: this.getName(), 22 | disabled: this.disabled, 23 | min: this.min, 24 | max: this.max, 25 | step: 26 | typeof this._step === 'number' 27 | ? this._step 28 | : calculateStep(this.value), 29 | initialValue: this.value, 30 | observable: this.observable, 31 | onChange: value => this.setValue(value, false), 32 | onFinishChange: () => this.finishChange(), 33 | }, 34 | }; 35 | } 36 | 37 | step(step: number) { 38 | this._step = step; 39 | return this; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/StringController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | 4 | export class StringController extends Controller { 5 | render(): ControlComponent<'string'> { 6 | return { 7 | type: 'string', 8 | props: { 9 | key: this.key, 10 | title: this.getName(), 11 | disabled: this.disabled, 12 | initialValue: this.value, 13 | observable: this.observable, 14 | onChange: value => 15 | this.setValue( 16 | value, 17 | true, // true because the TextInput is controlled by this.value 18 | ), 19 | onFinishChange: () => this.finishChange(), 20 | }, 21 | }; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/SwitchController.ts: -------------------------------------------------------------------------------- 1 | import {Controller} from './Controller'; 2 | import {ControlComponent} from './types'; 3 | 4 | export class SwitchController extends Controller { 5 | override setValue(value: boolean, notifyObservers: boolean) { 6 | const result = super.setValue(value, notifyObservers); 7 | this.finishChange(); 8 | return result; 9 | } 10 | 11 | render(): ControlComponent<'switch'> { 12 | return { 13 | type: 'switch', 14 | props: { 15 | key: this.key, 16 | title: this.getName(), 17 | disabled: this.disabled, 18 | initialValue: Boolean(this.value), 19 | onChange: value => this.setValue(value, false), 20 | observable: this.observable, 21 | }, 22 | }; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/incrementingId.test.ts: -------------------------------------------------------------------------------- 1 | import {__resetIds, getId} from './incrementingId'; 2 | 3 | describe('getId', () => { 4 | beforeEach(() => { 5 | __resetIds(); 6 | }); 7 | 8 | it('gets id', () => { 9 | expect(getId('test')).toBe(0); 10 | expect(getId('test')).toBe(1); 11 | __resetIds(); 12 | expect(getId('test')).toBe(0); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/dat.gui/incrementingId.ts: -------------------------------------------------------------------------------- 1 | let ids: Record = {}; 2 | 3 | export const __resetIds = () => { 4 | ids = {}; 5 | }; 6 | 7 | export const getId = (key: string) => { 8 | ids[key] ??= 0; 9 | const id = ids[key]; 10 | ids[key] += 1; 11 | return id; 12 | }; 13 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/react/ControlBackground.tsx: -------------------------------------------------------------------------------- 1 | import {PropsWithChildren} from 'react'; 2 | import {View} from 'react-native'; 3 | import {controlsStyles} from './controlsStyles'; 4 | 5 | type ControlBackgroundProps = PropsWithChildren<{dark?: boolean}>; 6 | 7 | export const ControlBackground = ({children, dark}: ControlBackgroundProps) => { 8 | return ( 9 | 15 | {children} 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /examples/Example/src/Components/controls/react/ControlButton.tsx: -------------------------------------------------------------------------------- 1 | import {Button, ButtonProps} from 'react-native'; 2 | import {controlForegroundColor} from './controlsStyles'; 3 | 4 | type ControlButtonProps = Pick; 5 | 6 | export const ControlButton = ({ 7 | title, 8 | onPress, 9 | disabled, 10 | }: ControlButtonProps) => { 11 | return ( 12 |