-
Notifications
You must be signed in to change notification settings - Fork 37
Description
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",