상단에 메뉴있음.
resize시에 프레임 저하가 생김. 아마도 requestAnimationFrame 함수 관련된 문제인 것으로 보임.
const requestAnimationFrameRef = useRef(requestAnimationFrame(animate));
로 초기화 하던 코드를 const requestAnimationFrameRef = useRef<number>(-1);
으로 초기화 하고 useEffect
의 callback에서 requestAnimationFrameRef.current = requestAnimationFrame(animate);
코드를 사용하면서 해결함.
retina display를 위해서 devicePixelRatio 값으로 canvas.width, canvas.height에 곱하는데 이 때 canvas.style.width, canvas.style.height는 그대로 유지해야 함. useCanvas.tsx 참고
useEffect에서 함수 호출 시에 dependency를 작성하는게 까다롭네 => const로 함수 선언하는데 useCallback 사용해서 해결함.
pure canvas or...
for 2D graphics: PixiJS, learningPIXI (old but useful), tutorial, docs, pixi-viewport
react-pixi (react 18에서 이슈 있음)
for 3D graphics: three.js, babylon.js pixi3d
참고 사이트
https://fff.cmiscm.com