Skip to content

after 3 renders 4 stops rendering the cube #247

@Egorsemigor

Description

@Egorsemigor

here is the code of the cube from the example, when I go to this screen 3 times, it renders, but the 4th time and subsequent times it stops rendering

import * as THREE from 'three';
import {Canvas, useCanvasEffect} from 'react-native-wgpu';
import {View} from 'react-native';
import {makeWebGPURenderer} from './functions/makeWebGpuRenderer';

const Cube = () => {
const ref = useCanvasEffect(async () => {
const context = ref.current!.getContext('webgpu')!;
const {width, height} = context.canvas;

const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = makeWebGPURenderer(context);
console.log('before renderer1');
await renderer.init();
console.log('after renderer.init()');

function animate(time: number) {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;

  renderer.render(scene, camera);
  context.present();
}
renderer.setAnimationLoop(animate);
return () => {
  renderer.setAnimationLoop(null);
  renderer.dispose();
  geometry.dispose();
  material.dispose();
};

});

return (
<View style={{flex: 1, backgroundColor: 'red'}}>
<Canvas ref={ref} style={{flex: 1}} />

);
};
export default Cube;

export const makeWebGPURenderer = (context: GPUCanvasContext) => {
const renderer = new THREE.WebGPURenderer({
antialias: true,
powerPreference: 'high-performance',
// @ts-expect-error
canvas: new ReactNativeCanvas(context.canvas),
// debug: {checkLimits: true, checkDirtyAttributes: true},
context,
});
return renderer;
};

and sometimes this error appears:
Possible unhandled promise rejection (id: 0): TypeError: Cannot read property 'used Times' of
undefined

"react-native-wgpu": "^0.2.0",

2025-08-26.13.40.51.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions