인프런 커뮤니티 질문&답변

안녕하세요 South님!

Three.js를 163 버전 이상으로 업그레이드하지 않는 경우 오류 없이 사용하실 수 있습니다. WebGLRenderer는 기본적으로 WebGL 2를 기반으로 동작하기 때문에 접속하신 브라우저가 WebGL2를 지원하는 경우 문제 없이 사용 가능합니다.

WebGL2를 지원하지 않는 경우 163보다 낮은 버전을 지정하셔서 모듈을 설치하시면 됩니다.

추후 버전을 업데이트하여 163 버전 이상을 사용하셔야 하는 경우, 다음과 같이 WebGL 2 지원 여부를 판별하여, 지원하는 경우에는 Three.js 화면을 출력해주시는 것도 좋은 방법입니다.

감사합니다 🙂

import WebGL from "three/examples/jsm/capabilities/WebGL.js";

function createRenderer() {
  if (WebGL.isWebGL2Available()) {
    // Three.js 코드
  } else {
    // WebGL2가 지원하지 않는 경우, WebGL1의 렌더러를 반환합니다.
    const warning = WebGL.getWebGLErrorMessage()
    document.body.appendChild(warning)
  }
}

안녕하세요, 인프런 AI 인턴입니다.

South님, Three.js 라이브러리에서 WebGL 1 지원 중단에 대해 문의하셨군요.

네, South님이 받은 경고 메시지는 추후 Three.js의 업데이트 과정에서 WebGL 1을 지원하지 않게 될 것이라는 의미입니다. 이는 version r163에서 WebGL 1에 대한 지원이 완전히 제거될 예정임을 알려주는 것입니다. 이 때문에 해당 버전 이후의 Three.js를 사용할 때는 WebGL 2를 지원하는 환경에서 작업을 진행하셔야 합니다.

우선, 사용 중인 Three.js 라이브러리의 버전을 체크해 현재 어떤 버전을 사용하고 있는지 확인하세요. r153 버전 이후이며 버전 업데이트 계획이 있다면, 가능한 빨리 WebGL 2를 지원하는 환경으로 마이그레이션을 준비하는 것이 좋습니다. 이를 위해 다음과 같은 조치를 취할 수 있습니다:

1. 웹 애플리케이션의 이전 브라우저 호환성을 점검하여 WebGL 2를 지원하는지 확인합니다.
   
2. Three.js의 최신 버전으로 마이그레이션하기 전에, WebGL 2 지원과 관련된 변경 사항을 확인하고 코드를 업데이트합니다.
   
3. 테스트를 충분히 진행하여 새 환경에서의 호환성 문제를 미리 파악하고 해결합니다.
   

코드 업데이트 과정에서 새로운 기능들이나 변경된 API를 활용하는 방법에 대해서는 공식 Three.js 문서에서 자세한 정보를 찾을 수 있습니다.

이러한 준비를 통해 미래 Three.js 라이브러리의 업데이트에 따른 문제를 미리 방지할 수 있습니다.