From WebGL 컨텍스트 에러 해결 to 그래픽 가속 설정, CPU와 GPU, 디바이스에 따른 GPU 대응하기!
Three.js를 이용하여 간단한 돌다리 건너기 랜덤 게임을 개발중이였고, 문제없이 잘 돌아가고 있었다.
그런데 갑자기 아래와 같은 WebGL 관련 에러가 발생했다. 하루종일 로컬 서버를 켜놓고
(아무것도 건드리지 않았는데..갑자기 왜 이런일이..! ㅜㅜ)
구글링을 했고, 검색했던 글 중에는 그래픽 카드의 손상일 수도 있다는 글을 보고 엄청 식겁했다.
식은땀+좌절하며 제발 다른 이유이기를 간절히 바라면서 찾아본 결과!
다행히 간단한 해결 방법으로 문제를 해결할 수 있었다.ㅎ
발생한 에러
THREE.WebGLRenderer: A WebGL context could not be created. Reason:
Could not create a WebGL context, VENDOR � 0xffff, DEVICE � 0xffff,
GL_VENDOR � Google Inc. (Google), GL_RENDERER � ANGLE (Google, Vulkan 1.3.0 SwiftShader Device (LLVM 10.0.0)),
SwiftShader driver-5.0.0, GL_VERSION � 5.0.0, Sandboxed = yes, Optimus = no, AMD switchable = no,
Reset notification strategy � 0x8252, ErrorMessage � BindToCurrentSequence failed: .THREE.WebGLRenderer: A WebGL context could not be created. Reason: Failed to create a WebGL2 context.
THREE.WebGLRenderer: Error creating WebGL context.
WebGL 컨텍스트를 생성할 수 없다는 에러였다.
StackOverflow를 참고했고 크롬 시스템 설정에서 ‘가능한 경우 그래픽 가속 사용’을 활성화하면 해결된다는 답변을 발견했다!
(휴우...)
해결 방법
요기에 많은 해결방법이 있지만, 나는 그 중에 나는 아래와 같은 방법으로 해결했다!
1. Chrome 설정 > 시스템 이동
2. ‘가능한 경우 그래픽 가속 사용’ 옵션 활성화
3. Chrome을 다시 실행하여 변경 사항 적용.
해결 방법은 정말 간단했다!
적용 후 Three.js 프로젝트를 다시 실행하니 정상적으로 실행되었다!
왜 그래픽 가속 사용을 켰더니 잘 돌아가는거지? 의문이 생겼다.
그래픽 가속부터 무엇인지 찾아보자!
그래픽 가속의 정의와 원리
‘그래픽 가속’ = ‘하드웨어 가속’ = ‘GPU 가속’ 모두 같은 의미
정의
하드웨어 가속은 CPU에서 동작하는 소프트웨어를 사용하는 것이 아닌 별도 하드웨어(GPU)를 사용하여 동영상 같은 많은 자원이 필요한 작업을 빠르게 하는 기술이다.
원리
우리가 웹서핑을 하거나 동영상을 재생할 때, 화면을 표시할 때 어떤 픽셀에 어떤 색을 표시해야 하는지 같은 연산을 처리한다. 이러한 연산을 프로그램, 즉 소프트웨어가 직접 처리를 하면 해당 과정을 CPU가 처리를 해야 한다. 하지만 CPU는 해당 연산 말고도 처리해야 할 연산이 많기 때문에 느려질 수가 있다. 해당 문제를 해결하기 위해서 해당 연산을 CPU가 아닌 GPU같이 해당 작업에 특화된 하드웨어로 넘겨서 처리하는 것이다.
출처 https://namu.wiki/w/%ED%95%98%EB%93%9C%EC%9B%A8%EC%96%B4%20%EA%B0%80%EC%86%8D
이걸 읽고 다음과 같은 생각이 들었다.
GPU는 왜 특화 되어있지?
궁금증 풀기 스타뜨! 먼저 CPU, GPU에 대해서 자세히 알아보자!
GPU가 그래픽 작업에 특화된 이유
CPU(central processing unit, 중앙처리장치)
CPU는 컴퓨터의 두뇌와 같다. 아래 그림에서 사무원으로 묘사된 CPU 코어는 직렬 작업을 잘한다. 따라서, 여러 종류의 작업을 하나씩 순서대로 처리할 수 있다. CPU에는 보통 4~16개의 강력한 코어를 가지고 있고, 코어 하나는 동일한 칩에 있는 또 다른 CPU나 마찬가지이다. CPU에 코어가 많을수록 동시에 처리할 수 있는 작업이 많아진다. 최신 하드웨어는 보통 하나 이상의 코어를 사용해 스마트폰이나 노트북의 실행 성능을 높인다.
GPU(graphics processing unit, 그래픽처리장치)
GPU는 컴퓨터의 또 다른 부품이다. CPU와 달리 GPU는 간단한 작업에만 특화되어 있다. GPU에는 수백개에서 수천개의 작은 코어가 있고, 이 코어들은 병렬 연산이 가능해 여러 GPU 코어가 동시에 작업을 수행할 수 있다. 그래픽처리장치라는 이름에서 알 수 있듯이 GPU는 그래픽 작업을 처리하기 위해 개발되었다. 그래서 그래픽 관련 설명에서 "GPU를 사용한다"나 "GPU의 지원을 받는다"와 같은 말이 빠른 렌더링과 매끄러운 상호작용에 관련된 표현이다.
CPU vs GPU 차이 요약
CPU (Central Processing Unit, 중앙처리장치)
- 서버의 주요 처리 연산을 해결하는 일반화된 구성 요소
- 코어 수는 더 적지만 코어 성능은 더 강력함
- 직렬 명령 처리를 위해 설계됨
- 적합한 용도 : 범용 컴퓨팅 애플리케이션
GPU (Graphics Processing Unit, 그래픽처리장치)
- 병령 컴퓨팅에 탁월한 전문화된 구성 요소
- CPU보다 코어 수는 더 많지만 CPU 코어보다 성능이 떨어짐
- 병렬 명령 처리를 위해 설계됨
- 적합한 용도 : 고성능 컴퓨팅 애플리케이션
GPU는 수천 개의 코어를 사용해 병렬 처리를 수행하므로 빠른 그래픽 처리 속도가 가능하고,
그래픽 연산을 GPU가 담당하면 CPU는 다른 연산에 집중할 수 있어 CPU 부하 감소의 이점을 가진다!
이러한 이유에서 복잡한 3D 그래픽을 처리하는 Three.js 같은 라이브러리는 GPU의 도움을 받는 것이 좋다!
무분별한 하드웨어 가속 사용 시 문제점
그렇다면,, 항상 '그래픽 가속 사용 옵션'을 켜놓고 있으면 더 좋은거 아닌가? 라는 생각을 했었다.
찾아보니 무분별한 하드웨어 가속을 사용하게 되면 다음과 같은 문제가 생길 수 있다고 한다.
- 오히려 속도가 느려지거나 브라우저에 문제가 일어날 수 있다.
- 성능이 낮은 기기에서 하드웨어 가속을 사용하면 오히려 성능 저하를 가져올 수 있다.
Chrome 브라우저에서 하드웨어 가속 vs Firefox 브라우저에서 하드웨어 가속
Chrome 브라우저에서는 하드웨어 가속을 켜지 않으면, 아예 로드가 안된다.
Firefox에서도 동일한 현상이 생기는지 궁금해서 테스트해봤다.
그러나 Firefox에서는 하드웨어 가속을 켜지 않아도 실행이 잘 된다.
(이런 차이가 나는 이유는 나중에 더 찾아봐야겠다..!)
Chrome의 하드웨어 가속 OFF
흥미로운건 Firefox로 테스트하면서 실제 GPU가 사용되고 있다는걸 작업관리자를 통해 확인할 수 있었고,
하드웨어 가속 ON 상태가 OFF 상태보다 페이지 로딩시간이 약 300ms 빠르다는 것을 알 수 있었다!
Firefox 하드웨어 가속 사용 O
Firefox 하드웨어 가속 사용 X
사실 난 이 글을 작성하고 있는 시점에 이미 게임의 배포를 마친 상태이고, 배포링크를 여기저기 공유하면서 사용해보라고 했다,,
그치만 내 코드는 사용자 디바이스의 GPU를 고려하지 않고 만들어졌다..
'내가 만든 게임이 다른이들의 GPU를 갉아먹고 있을 수도 있겠다'라는 생각이 들었댜,,
유저의 디바이스에 맞게 GPU를 효과적으로 사용할 수 있어야겠다는 생각이 들었다!
GPU 사용 가능여부에 따라 대응하기
https://developer.mozilla.org/en-US/docs/Web/API/GPU/requestAdapter
https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips?hl=ko
위 글들을 읽고 GPU 사용 가능 여부에 따라 대응할 수 있는 코드를 추가로 작성했다.
GPU 사용 가능 여부 감지
navigator에서 gpu를 사용할 수 없는 경우 발생할 수 있는 JavaScript 오류를 보여주는 API가 있다.
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.log('GPU 사용 불가');
return;
}
const device = await adapter.requestDevice();
Device 손실 테스트하기
adapter는 ‘가능한 경우 그래픽 가속 사용’을 통해 테스트할 수 있지만,
실제 device의 손실 처리는 의도적으로 망가뜨릴 수 없어 어떻게 테스트할까 싶었는데,
이에 관한 내용이 엄청 자세히 나와있는 글을 찾았다.
https://toji.dev/webgpu-best-practices/device-loss#chrome-specific-testing
let simulatedLoss = false;
function simulateDeviceLoss() {
simulatedLoss = true;
device.destroy();
}
device.lost.then((info) => {
if (info.reason == 'unknown' || simulatedLoss) {
simulatedLoss = false;
// Handle loss as if it were unexpected.
} else {
// Device destroyed as expected.
}
});
simulateDeviceLoss(); // Will trigger the "unexpected" code path
GPU 사용에 대응한 전체 코드
device와 adapter가 존재할 때 게임을 실행할 수 있도록 수정했고,
GPU 어댑터가 없거나 문제가 발생한 경우엔 사용자에게 문제를 알려줌으로써 사용자 경험을 개선시킬 수 있도록 수정했다!
import './style.css';
import basic from './basic';
import { gameStart } from './gameManager';
let title = '';
let message = '디바이스 GPU를 확인해주세요!';
function routeIfLost(title) {
const body = document.querySelector('body');
const nav = `<a href="/">Home</a>`;
const routes = {
'': `<h1>${title}</h1>
<p>${message}</p>`,
};
const render = (path) => {
body.innerHTML = routes[path.replace(/^#\//, '')] ?? `<h1>404</h1>${nav}`;
body.style.minHeight = '100vh';
body.style.display = 'flex';
body.style.flexDirection = 'column';
body.style.justifyContent = 'center';
body.style.alignItems = 'center';
};
window.onhashchange = (evt) => render(window.location.hash);
render(window.location.hash);
}
async function init() {
// 디바이스 파괴 테스트 코드
let simulatedLoss = false;
async function simulateDeviceLoss() {
simulatedLoss = true;
device.destroy();
}
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.log('GPU 사용 불가');
title = '가능한 경우 그래픽 가속 사용 메뉴를 활성화 해주세요';
routeIfLost(title);
return;
}
const device = await adapter.requestDevice();
device.lost.then((info) => {
if (info.reason == 'unknown' || simulatedLoss) {
simulatedLoss = false; // 테스트
title = 'GPU 장치가 손실되었거나 찾을 수 없습니다.🥹';
routeIfLost(title);
} else {
title = 'GPU 장치가 파괴되었습니다.🥹';
routeIfLost(title);
}
});
simulateDeviceLoss();
if (device && adapter) {
gameStart();
basic();
}
}
init();
회고,,
에러를 해결하는건 정말 금방 해결했지만, 궁금증이 생겨도 만드는데 급급하다보니 일단 배포까지 해버린 상태에서 문제를 파악하고 수정했다. 하지만 개발 과정에서 발생할 수 있는 궁금증과 문제점들을 초기에 충분히 검토하지 못하고 서둘렀던 점은 반성해야 할 것 같다...
앞으로는 배포 전에 충분한 검토와 테스트를 거쳐 사용자에게 더 완성도 높은 서비스를 제공할 수 있도록 해야겠다!!
참고
https://d2.naver.com/helloworld/2922312
https://wr1tten6y-k.tistory.com/94
https://stackoverflow.com/questions/54232528/error-creating-webgl-context-three-js-chrome
**https://discourse.threejs.org/t/webgl-context-creation-error/48483**
https://toji.dev/webgpu-best-practices/device-loss#chrome-specific-testing
