GL_INVALID_OPERATION: Insufficient buffer size 이슈 해결

react three fiber(r3f) 사용 중 간헐적으로 메시가 나타나지 않으며 해당 에러가 나오는 상황

 

결론부터 이야기하면 r3f에서 Mesh에 geometry를 설정한 방법 때문에 발생한 문제였다.

 

// before

<mesh>
  <bufferGeometry /> <-- 문제 부분
<mesh>

 

// after

meshRef.current.geometry = geometry

<mesh />

 

 

r3f 공식홈페이지에서도 before와 같은 방식의 예시 코드가 있어서 확실하지는 않지만

 

GPT에서는 JSX vs js style 에 대한 차이를 말해줬는데

jsx 방식 사용 시 react의 재조정 단계에서 문제가 발생할 수 있다고 한다.

다행히 해결된건지 코드 수정 이후 아직까진 에러가 발생하지 않았다.