01 · WebGL·GPU와 첫 화면
1주 차 / 원문 Day 1 · 실행 예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
CPU와 GPU의 역할, 렌더링 파이프라인을 첫 장면 코드에 연결한다.
선수 지식
JavaScript 함수·객체·모듈, React effect의 생성/정리.
핵심 개념과 설명
WebGL은 브라우저에서 GPU에 그래픽 작업을 요청하는 API입니다. Three.js는 장면과 재질 같은 상위 표현을 제공하지만 GPU가 처리할 데이터를 준비하고 제출하는 과정은 여전히 필요합니다.
정점 처리 → 삼각형의 화면 투영과 래스터화 → fragment 처리 → 깊이 검사와 합성을 거쳐 화면이 만들어집니다. GPU는 같은 프로그램으로 많은 정점·fragment를 처리하기 좋고, React는 메뉴와 조작 상태를 담당합니다. React render와 renderer.render는 같은 과정이 아닙니다.
학습 후 얻을 역량
- CPU와 GPU의 역할, 렌더링 파이프라인을 첫 장면 코드에 연결한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실행 준비
프로젝트 루트에서 pnpm install --frozen-lockfile, pnpm dev를 실행하고 http://127.0.0.1:5173 을 엽니다. 01 단위를 선택해 화면·코드·필기를 함께 확인합니다. 입력 후 600ms가 지나면 실행되며, 실패한 코드도 저장되므로 오류 메시지를 읽고 수정합니다.
실습 과제
- 먼저 실습 화면의 큐브를 드래그하고 휠로 확대·축소하세요. 코드에서
Scene,PerspectiveCamera,WebGLRenderer를 찾아 각각 무엇을 담당하는지 필기에 적습니다. - 코드 위쪽의
const ROTATE = true를false로 바꿔 움직임을 멈춥니다.CUBE_COLOR를'#3179bf'에서'#e86a33'으로 바꾸고, 입력을 멈춘 뒤 색이 반영되는지 확인하세요. ROTATE = false를 유지하고CAMERA_POSITION을[3, 2, 5]→[0, 2, 5]→[5, 2, 0]으로 한 번씩 바꾸세요. 매번 어느 면이 보일지 먼저 예상하고 실제 화면과 비교합니다.FOV = 50과 큐브 크기는 그대로 둡니다.ROTATE를 다시true로 바꾸고cube.rotation.y += delta * 0.5의0.5를1.0으로 바꾸세요. 색·카메라를 고정한 채 회전 속도의 차이를 관찰합니다.- 괄호 하나를 지워 구문 오류를 만든 뒤 다시 넣어 복구하세요. 오류 메시지와 마지막 정상 화면 유지 여부를 확인하고, 필기에 예상·실제 결과·배운 점을 기록합니다.
화면 코드는 src/labs/01-scene/example.js 원본 또는 이 단위에 저장한 편집본입니다. Monaco에서 JavaScript/TypeScript를 선택하고 600ms 동안 입력이 없으면 문법·타입 검사 후 새 iframe에서 실행합니다. TypeScript는 JavaScript로 변환합니다. 오류 목록을 클릭하면 해당 줄로 이동합니다. 기존 createScene.ts와 SceneLab.tsx는 비교용으로 보존되어 있으며 현재 편집기의 실행 소스는 아닙니다.
TypeScript 실험: 언어를 TypeScript로 바꾸고 const FOV = 50에 : number 타입을 붙입니다. 숫자를 문자열로 바꾸어 타입 오류를 관찰하고 숫자로 복구해 장면 반영을 확인하세요. 원본 복원은 JavaScript로 돌아가며 필기는 유지합니다.
이어서 해 볼 카메라 과제
ROTATE를 false로 고정한 뒤 CAMERA_POSITION을 [3, 2, 5] → [0, 2, 5] → [5, 2, 0]으로 한 번씩 바꿉니다. 변경 전에 어느 면이 보일지 예상하고, 실제 결과와 축 방향을 비교하세요. FOV와 큐브 크기는 고정합니다. OrbitControls의 target은 원점이며 카메라 위치와 바라보는 목표는 서로 다른 값입니다. 자세한 설명은 02 카메라에서 이어갑니다.
관찰할 변수
CUBE_COLOR: 표면 색, CAMERA_POSITION: 보이는 면, ROTATE와 delta * 0.5: 회전 여부·속도. 각 단계에서는 지정한 변수만 바꾸고 나머지는 고정합니다. 카메라 실험 중에는 마우스로 시점을 추가 변경하지 말고 코드 변경 직후 화면을 비교하세요.
완료 조건
- CPU/GPU 역할과 파이프라인을 자기 말로 설명했다.
- 코드 수정이 실제 화면에 반영됨을 확인했다.
- 구문 오류를 복구하고 예상/실제 결과를 기록했다.
자가 점검 질문
- React가 다시 렌더링되지 않아도 큐브가 움직일 수 있나요?
- fragment가 모두 최종 화면에 남을까요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
연결된 예제
예제 원본은 화면의 편집기에 표시되고 실제로 실행됩니다. 첫 주석의 변수나 과제를 하나씩 바꾸고 예상과 결과를 기록하세요. 원본 복원은 코드만 되돌리며 필기를 지우지 않습니다.
실행 환경과 제한을 확인하세요.
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 01-scene
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.