🏗️ GLSL을 외부 파일로 작성하기

WebGL에서 GLSL 셰이더 소스 코드를 정의할 때 JavaScript 내부에 넣지 않고 별도의 파일로 빼고 연결하는 것이 관리하기에 좋습니다. 대개 이렇게 파일을 만들고 이 안에 GLSL 코드를 작성합니다. shaders 폴더 속에 넣으면 좋겠네요.

• vertex.glsl
• fragment.glsl

이렇게 별도 파일을 만들면 에디터에서 Syntax Highlighting이 되고 재사용이 가능한 장점이 있습니다. 하지만 이 방식으로 코드를 작성할 때는 브라우저의 보안 정책에 따라 JS에서 로컬 파일(여기서는 .glsl 파일)을 직접 읽을 수 없다는 것에 주의해야 합니다.

fecth() API를 사용하여 서버로부터 텍스트를 가져오는 과정이 필요하고, 이 텍스트를 불러오는 동안 기다려야 하므로 async/await 같은 비동기 프로그래밍이 필요합니다.

1. 보안과 fetch() API

브라우저 환경은 사용자의 컴퓨터에 있는 로컬 파일 시스템에 대한 직접적인 접근을 엄격히 차단합니다. 만약 웹사이트에 방문했을 때 브라우저가 아무런 제약 없이 로컬 파일을 읽을 수 있다면, 악성 사이트가 사용자의 비밀번호 파일이나 개인 문서를 몰래 훔쳐갈 수 있기 때문입니다.

보안 모델 (Same-Origin Policy):

브라우저는 '동일 출처 정책'을 따릅니다. 즉, 웹 페이지가 실행 중인 서버(예: http://localhost:8080)와 리소스를 요청하는 서버의 주소가 일치해야 합니다. 로컬 파일 경로(file:///C:/...)는 HTTP 프로토콜이 아니기 때문에 웹 표준 보안 규정상 직접적인 JS 접근이 거부됩니다.

Fetch API의 역할:

fetch()는 HTTP/HTTPS 프로토콜을 통해 서버에 "이 파일을 주세요"라고 정식으로 요청을 보내는 인터페이스입니다. 이는 마치 편지를 써서 우체국(브라우저)을 통해 상대방(서버)에게 전달하고 답장을 받는 과정과 같습니다. 로컬에서 개발 중이라면, 단순한 파일 열기가 아니라 로컬 웹 서버(Live Server, Python http.server 등)를 실행하여 파일에 '주소(URL)'를 부여해야만 fetch()로 가져올 수 있습니다.

2. 비동기 프로그래밍 (Asynchronous Programming)

네트워크를 통해 파일을 가져오는 과정은 CPU의 연산 속도에 비해 매우 느린 작업입니다. 만약 브라우저가 파일을 가져올 때까지 아무것도 못 하고 멈춰 있다면, 사용자는 화면이 얼어붙은 것처럼 느끼게 됩니다. 이를 방지하기 위해 비동기 처리를 사용합니다. 이 작업을 기다리는 동안 브라우저의 메인 스레드가 멈추지 않고 다른 작업(렌더링, 이벤트 처리 등)을 계속할 수 있게 됩니다.

동기(Synchronous) vs 비동기(Asynchronous):

• 동기: 커피를 주문하고 커피가 나올 때까지 카운터 앞에 서서 아무것도 안 하고 기다리는 것. (다음 작업 수행 불가)
• 비동기: 커피를 주문하고 진동벨을 받은 뒤, 자리로 돌아와 책을 읽거나 스마트폰을 보는 것. (기다리는 동안 다른 작업 가능)

Promise (약속):

fetch()가 호출되면 즉시 결과값을 주는 대신, "미래에 데이터를 줄게"라는 Promise라는 객체를 반환합니다. 이 객체는 현재 세 가지 상태를 가집니다: Pending(대기), Fulfilled(이행/성공), Rejected(거부/실패).

Async/Await (가장 현대적인 문법):

Promise를 더 직관적으로 다루기 위한 문법입니다.

• async: 해당 함수가 비동기적으로 작동할 것임을 선언합니다. 이 함수는 항상 Promise를 반환합니다.

• await: Promise가 해결(Fulfilled)될 때까지 함수의 실행을 잠시 '일시 정지' 시킵니다. 하지만 전체 브라우저를 멈추는 것이 아니라, 해당 함수 내부의 흐름만 기다리는 것이므로 다른 UI 애니메이션이나 이벤트는 정상 작동합니다.

3. 셰이더 로딩 코드의 구조

셰이더 파일을 fetch()로 불러와 문자열로 변환하는 기본 코드입니다.

/**
 * @description 외부 셰이더 파일을 비동기적으로 로드하는 함수
 * @param {string} url - 셰이더 파일의 경로 (URL)
 * @returns {Promise<string>} - 셰이더 소스 코드 문자열
 */
async function loadShaderSource(url) {
  try {
    // 1. fetch()를 통해 서버에 리소스 요청 (비동기 대기)
    const response = await fetch(url);

    // 2. 응답이 성공적(status 200-299)인지 확인
    if (!response.ok) {
      throw new Error(`파일을 불러오는데 실패했습니다: ${response.statusText}`);
    }

    // 3. 응답 본문을 텍스트 형식으로 읽기 (비동기 대기)
    const shaderCode = await response.text();
    
    console.log("셰이더 로드 완료!");
    return shaderCode;

  } catch (error) {
    // 네트워크 오류나 파일 부재 시 에러 처리
    console.error("셰이더 로딩 에러:", error);
    return null;
  }
}

// 실행 예시
async function initWebGL() {
  console.log("초기화 시작...");
  
  // 비동기 함수 호출 및 결과 대기
  const vertexShaderSource = await loadShaderSource('./shaders/vertex.glsl');
  const fragmentShaderSource = await loadShaderSource('./shaders/fragment.glsl');

  if (vertexShaderSource && fragmentShaderSource) {
    // 셰이더 컴파일 및 WebGL 프로그램 생성 단계로 진입
    console.log("셰이더 소스 준비 완료. 컴파일을 시작합니다.");
  } else {
    console.error("셰이더 소스가 없어 프로그램을 실행할 수 없습니다.");
  }
}

initWebGL();