Three.js

Using the Three.js WebGPU backend, you can run the library on top of React Native.

Loading WebGPU playground…

1. Metro configuration

Three.js publishes separate WebGL and WebGPU entry points. Metro must load build/three.webgpu.js when you import three or three/webgpu. See Expo setup for a complete Metro configuration:

// metro.config.js - resolveRequest excerpt
if (moduleName === "three" || moduleName === "three/webgpu") {
  return {
    filePath: path.resolve(threePackagePath, "build/three.webgpu.js"),
    type: "sourceFile",
  };
}
if (moduleName.startsWith("three/addons/")) {
  return {
    filePath: path.resolve(
      threePackagePath,
      "examples/jsm/" + moduleName.replace("three/addons/", "") + ".js",
    ),
    type: "sourceFile",
  };
}

Import from three/webgpu, not three (which would pull the WebGL build).

WebGPURenderer expects a DOM-like canvas with width, height, clientWidth, and clientHeight, plus a few event methods. The native canvas from getContext("webgpu") already satisfies this interface, so pass it directly along with the same GPUCanvasContext:

export function (: GPUCanvasContext) {
  return new .({
    : true,
    : .,
    ,
  });
}

Async init

WebGPURenderer.init() is async. Do not call render() until it resolves - unlike raw WebGPU where pipeline creation is synchronous after requestDevice.

3. Render loop + present

Configure the context once (Canvas), then animate:

const  = .!.("webgpu")!;
const  = . as HTMLCanvasElement;

. = . * .();
. = . * .();

.({
  ,
  : ..(),
  : "premultiplied",
});

const  = ();
await .();

const  = new .();
const  = new .(70, . / ., 0.01, 10);
.. = 1;

const  = new .(
  new .(0.35, 0.35, 0.35),
  new .(),
);
.();

function (: number) {
  .. =  / 2000;
  .. =  / 1000;
  .(, );
  .(); // required on React Native
  ();
}
();

Next: React Three Fiber for declarative JSX on top of the same renderer.

Three.js

1. Metro configuration

2. Create the renderer

3. Render loop + present

On this page