에러 메세지
Uncaught TypeError: Failed to execute 'uniform3fv' on 'WebGLRenderingContext': The provided value cannot be converted to a sequence.
상황
dxf-parser를 활용하여 .dxf 파일을 파싱.변환된 정보로 Threejs의 innerMesh와 lineMesh 생성하는 로직을 짜던 중 위와 같은 에러가 발생했다.
기존 작업된 코드들을 참고하여 짰던 코드였고, 코드 검토를 통해 확인해봤을 때도 크게 문제되는 부분은 없다고 판단되어 AI의 도움을 받아보기로 했다.
ChatGPT, Gemini, Copilot에게 모두 물어봤으며, 3개 모두 ChatGPT가 알려준 정보와 비슷한 정보를 제공했다. (실상 필요로 했던 정보가 아니었으며, 별 도움이 안됨)
https://chatgpt.com/share/67be6b5b-6ee0-8010-a9e1-3dd863f0059c
ChatGPT - uniform3fv 오류 해결
Shared via ChatGPT
chatgpt.com
( 어떻게 질문 했으며, 어떤 답변을 받았는지는 위 링크를 통해 확인해보실 수 있습니다 )
GPT가 알려준 에러의 핵심은
gl.uniform3fv(location, value) 호출 시 value가 Float32Array 또는 길이가 3인 Array 타입이 아닐 때 발생합니다.
라는 것
이는 현 작업 환경과 매치되는 정보가 아니었기 때문에 원초적인 해결방법으로 구글에 에러메세지 그대로 검색해봤다.
해결
https://github.com/spite/THREE.MeshLine/issues/39
Failed to execute 'uniform3fv' on 'WebGLRenderingContext' · Issue #39 · spite/THREE.MeshLine
Uncaught TypeError: Failed to execute 'uniform3fv' on 'WebGLRenderingContext': No function was found that matched the signature provided. I got this issue when i'm trying to create a basic line wit...
github.com
여기서 바로 답을 얻을 수 있었다. (역시 킹갓제네럴 구글 or Github issue 🥹)
해결방법
lineMesh.material.color = new THREE.Color(0xff0000);
핵심은 material.color 할당 방식이 잘못됐던 것.
lineMesh.material.color = 0xff0000;
라고 작성했었는데, 이게 아니라 THREE.Color 인스턴스를 생성하여 color를 할당해주어야 옳은 방식이었던 것이다.
덕분에 문제 해결~!
여기서 깨알 꿀팁
0xff0000 와 #ff0000 는 서로 다른 걸까?
라는 궁금증이 들었고, gpt에게 물어봤다.
#RRGGBB 형식과 0xRRGGBB 형식의 차이점
- #RRGGBB 형식: 일반적으로 웹 디자인 (CSS, HTML) 또는 그래픽 디자인 툴에서 색상을 지정할 때 가장 흔하게 사용되는 형식입니다. # 기호 뒤에 빨강(RR), 초록(GG), 파랑(BB) 값을 순서대로 16진수로 두 자리씩 표기합니다. 예를 들어, #192895 는 빨강 19, 초록 28, 파랑 95 (16진수)의 양을 나타냅니다.
- 0xRRGGBB 형식: 0x 접두사는 C, C++, Java, Python 등 프로그래밍 언어에서 16진수를 나타낼 때 일반적으로 사용되는 접두사입니다. 따라서 0x192895 역시 #192895 와 완전히 동일한 색상을 나타내는 16진수 컬러 코드이며, 주로 프로그래밍 코드 내에서 색상을 지정할 때 사용됩니다.
라는 답변.
✔️ 추가 (25-03-05)
three.js에서 컬러를 지정할 경우 16진수 숫자 형식으로 지정하는게 성능적인 이점이 있을 수 있다.
three.js 내부적으로 Color 인스턴스는 RGB 값을 숫자로 처리한다.
new THREE.Color(0xff0000)과 같이 16진수 숫자를 직접 입력하면 three.js는 이 값을 그대로 숫자로 처리할 수 있다.
반면, new THREE.Color('#ff0000')과 같이 CSS 스타일 문자열을 입력하면 three.js는 문자열 파싱 과정을 거쳐 RGB 숫자로 변환해야 한다.
아주 미미한 차이일 수 있지만, 대량의 색상 인스턴스를 생성하는 경우 숫자 입력이 약간 더 효율적일 수 있다.
따라서 두 형식 모두 색상은 동일하고 다만 사용되는 환경과 처리되는 규모에 따라 어떤 방식으로 처리할지에 대한 판단이 필요 !