TextureWorker.js 의 사용여부를 설정합니다. true 라면 PNG 파일을 파싱하는 과정을 background thread 에서 진행하게 됩니다.
자바스크립트의 async function 는 이름에 비동기(async)가 들어가지만, 진정한 의미의 비동기가 아닙니다. async function 는 Promise 를 반환하며, Promise.then() 에 콜백함수를 등록하는 문법을 제공하기에, 멀티 스레딩(Multi-Threading)이 사용된다고 헷갈릴 수 있습니다.
예를 들어 C++의 std::promise , std::future 의 경우, 실제로 std::thread 를 생성하여 작업을 수행합니다. 그렇기에 std::future<T>::get() 을 사용하면 main thread 에서 std::promise 가 작업을 마칠때까지 기다릴 수 있습니다.
반면 JS 의 async function 은 작업을 잠시 미뤄두는 식이기에, main thread 에서 작업이 진행되는건 매한가지입니다. 그렇기에 너무 작업량이 많은 경우, 웹페이지가 잠시 응답하지 않게 되는 것이죠. 또한 C++ 과 달리 main thread 에서 Promise 가 작업을 마칠때까지는 기다리는 블로킹 함수는 제공하지 않습니다.
실제로 작업을 병렬로 처리하고 싶다면 스레드(Thread)를 생성해야 합니다. JS 에서 스레딩(Threading)을 사용하는 유일한 방법은 Web Worker API 를 사용하는 것입니다. Texture.useWorker 가 바로 Web Worker 를 사용하여 텍스처를 로드하는 작업(task)을 background thread 에게 넘기는 것이죠.
PNG 를 읽는 작업을 background thread 로 넘겼기에, 크기가 너무 큰 텍스처(Texture)를 로드하는 경우에도 웹페이지가 프리징(freezing)에 걸리지 않습니다. 텍스처 로드가 완료되는 순으로, 구름(Clouds)과 대기(Atmosphere)가 지구에 추가되는 모습을 볼 수 있습니다.
반대로 Texture.useWorker = false 였다면, 이미지를 전부 로드하기 전까지 웹페이지가 작동하지 않는 모습을 볼 수 있습니다. 이는 사용자에게 크게 불편함을 주기에, 기본적으로 Texture.useWorker = true 를 해주는 것을 권장합니다.
물론 사용하는 웹브라우저가 Web Worker API 를 지원하지 않는 경우, Texture.useWorekr 는 " Your browser doesn't support web workers" 라는 에러 메시지를 콘솔창에 출력할 것입니다. 이 경우 Texture 를 로드하는 과정은 main thread 에서 해야 합니다.
Texture.useWorker
TextureWorker.js 를 사용할지 여부를 나타내는 boolean . true 로 설정하면 Worker 객체를 생성합니다. 반대로 Worker 를 종료하려면 false 로 설정하시길 바랍니다.