[MacOS] 크롬 브라우저에서 그래픽 가속 사용 감지하기

MacOS 에서만 가능 (WinOS 에서는 그래픽 가속 꺼도 WebGL 기능 사용 가능)

 

WebGL 1.0 렌더링 컨텍스트 만족시키는지 확인하는 코드

function isWebGLSupported() {
  try {
    const canvas = document.createElement("canvas");
    // window.WebGL2RenderingContext 를 아래에서 똑같이 사용하면 WebGL 2.0 확인 가능
    return !!(
      window.WebGLRenderingContext &&
      (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
    );
  } catch (err) {
    return false;
  }
}

 

 

WebGLRenderingContext

- WebGL 1.0

- OpenGL ES 2.0

- HTML <canvas> 엘리먼트 사용 시 필요

 

WebGL2RenderingContext

- WebGL 2.0

- OpenGL ES 3.0

- HTML <canvas> 엘리먼트 사용 시 필요

 

참고)

- WebGL2는 WebGL1의 확장으로 WebGL2RenderingContext 인터페이스는 WebGLRenderingContext 인터페이스의 모든 멤버를 구현

- WebGL1 렌더링 컨텍스트의 일부 메서드는 WebGL2 렌더링 컨텍스트에서 사용할 때 추가값을 허용할 수 있음

 

@react-three/drei 라이브러리를 사용가능하다면, 여기서 제공하는 isWebGL2Available 함수를 활용하여 WebGL2RenderingContext 사용 가능한지 확인 가능 (위 코드에서 WebGL1 대신 WebGL2를 썼고 나머지 아예 동일)

import { isWebGL2Available } from "@react-three/drei";
// 함수 이므로 isWebGL2Available() 이런 형태로 사용해야 함