• WebGL2로 파란색 광택 球를 그리고,
• Sine 함수로 표면을 출렁이게 애니메이션하며,
• Phong 조명 모델로 음영을 입히는 코드.

---

1. 파일 구조

Blue Undulating Sphere/
├── index.html           # 캔버스 + main.js 로드
├── style.css            # 캔버스 스타일
├── main.js              # 셰이더 fetch, WebGL 초기화, 버퍼 생성, 렌더 루프, 행렬 수학
└── shaders/
    ├── vertex.glsl      # Vertex Shader (순수 GLSL 코드)
    └── fragment.glsl    # Fragment Shader (순수 GLSL 코드)

셰이더 파일 분리

셰이더 GLSL 코드는 main.js 안에 자바스크립트 템플릿 문자열(`)로 삽입 가능합니다.
하지만 이 방식은 코드가 길어지면 로직과 셰이더가 섞여 읽기 어렵고, 에디터의 GLSL 문법 하이라이트/포맷팅도 받을 수 없습니다. 그래서 순수 .glsl 파일로 분리하는게 좋습니다.

fetch()로 비동기 로드

.glsl 파일은 그냥 텍스트 파일입니다. 브라우저의 fetch()로 읽어와서 셰이더 소스 문자열로 사용합니다.
main.js의 흐름은 다음과 같습니다.

async function main() {
  const [vsSource, fsSource] = await Promise.all([
    loadShaderSource("shaders/vertex.glsl"),
    loadShaderSource("shaders/fragment.glsl"),
  ]);
  initWebGL(vsSource, fsSource); // 로드 완료 후 초기화
}

async function loadShaderSource(url) {
  const response = await fetch(url);
  if (!response.ok)
    throw new Error(`${url} 로드 실패 (HTTP ${response.status})`);
  return response.text();
}

• 비동기(async)가 핵심: 파일을 받아오는 데 시간이 걸리므로 await로 기다린 뒤
  initWebGL()을 호출합니다. 그래서 initWebGL은 셰이더 문자열을 매개변수로 받습니다.
• Promise.all: 두 셰이더를 동시에(병렬) 요청해 더 빨리 받습니다.
• 에러 처리: response.ok를 확인하고, 실패 시 try/catch로 콘솔에 출력합니다.

⚠️ 중요: 로컬 서버 필요

fetch()는 보안 정책(CORS) 때문에 file://로 HTML을 더블클릭해서 열면 동작하지 않습니다. 반드시 VS Code의 Live Server 등 로컬 서버에 띄워야 합니다.

# 프로젝트 폴더에서 (Python 3)
python3 -m http.server 8000
# 브라우저에서 http://localhost:8000 접속

---

2. 렌더링 파이프라인 한눈에 보기

정점 데이터(JS)  →  VBO/VAO  →  Vertex Shader  →  래스터화  →  Fragment Shader  →  화면
generateSphere()                (정점마다)                      (픽셀마다)

1. generateSphere() 가 CPU에서 구의 정점/법선/UV/인덱스 생성.
2. 데이터를 VBO(GPU 버퍼)에 올리고 VAO로 바인딩.
3. Vertex Shader: 정점마다 위치를 변형하고 좌표를 변환.
4. GPU가 삼각형을 픽셀로 쪼갠다(래스터화)하며 v_* 값들을 보간.
5. Fragment Shader: 픽셀마다 색(조명)을 계산.

---

3. 정점 데이터 생성 — generateSphere(radius, lat, lon)

위도(lat) / 경도(lon)를 따라 구면 좌표를 직교 좌표로 변환합니다.

x = cosPhi * sinTheta;
y = cosTheta;
z = sinPhi * sinTheta;

• 법선(normal): 구의 중심이(0,0,0)이라 정점 위치 = 법선 방향입니다.
  그래서 normals.push(x, y, z)로 위치를 그대로 법선으로 씁니다.
• UV 좌표: (j/lon, i/lat) → 0 ~ 1 범위. 텍스처 매핑/절차적 패턴에 사용.
• 인덱스(EBO): 정점을 재사용하려고 삼각형 두 개로 사각형 하나를 구성합니다.
  indices는 Uint16Array(16비트)이므로 최대 정점 수는 65,536개입니다.
  현재 코드는 128 x 128 이라 약 16,641개 정점으로 안전합니다. 격자를 더 키우면 16비트 인덱스 한계를 넘어 깨질 수 있으니 주의하세요.

---

4. 버퍼 설정 — VBO / VAO / EBO

• VBO (Vertex Buffer Object): 정점 속성(위치/법선/UV)을 담는 GPU 버퍼.
• VAO (Vertex Array Object): "어떤 VBO를, 어떤 attribute 위치로, 어떤 형식으로 읽을지"에 대한 설정을 하나로 묶어 저장. 렌더 때 bindVertexArray 한 번이면 됨.
• EBO (Element/Index Buffer Object): 정점 인덱스를 담아 정점 재사용 → 메모리 절약.

vertexAttribPointer(index, size, type, normalized, stride, offset)의
index(0,1,2)는 셰이더의 layout(location = N)과 일치해야 합니다.

location	attribute	size
0	a_position	3
1	a_normal	3
2	a_uv	2

---

5. Vertex Shader (shaders/vertex.glsl)

핵심 1) 절차적 변형 (Sine Wave Displacement)

float displacement = sin(a_position.x * 5.0 + u_time) *
                     sin(a_position.y * 5.0 + u_time) *
                     sin(a_position.z * 5.0 + u_time) * 0.3;
vec3 displacedPosition = a_position + normalize(a_position) * displacement;

• u_time이 매 프레임 증가 → sine 값이 변함 → 표면이 출렁이는 애니메이션.
• normalize(a_position)는 바깥(법선) 방향. 그 방향으로 밀어내 구가 부풀었다 줄었다 함.

핵심 2) 좌표 변환 (MVP)

gl_Position = u_projection * u_view * u_model * vec4(displacedPosition, 1.0);

• Model → View → Projection 순서로 곱해 화면 좌표로 변환.
• GLSL 행렬 곱은 오른쪽에서 왼쪽으로 적용됩니다(model이 먼저).

주의할 점

• v_normal = mat3(u_model) * a_normal;
  여기서는 모델 행렬이 단위행렬(Identity)이라 문제가 없습니다. 하지만 만약
  비균등 스케일(non-uniform scale)을 적용하면 법선이 틀어집니다. 정석은
  normal matrix = transpose(inverse(model)) 를 쓰는 것입니다.
• 위치는 변형(displacement)했지만 법선은 변형 전 값을 그대로 씁니다.
  그래서 조명이 100% 정확하진 않습니다(학습용 단순화). 정확히 하려면 변형된
  표면의 새 법선을 다시 계산해야 합니다.

---

6. Fragment Shader (shaders/fragment.glsl) — Phong 조명

Phong 모델은 세 가지 빛의 합입니다.

최종색 = Ambient(환경광) + Diffuse(난반사) + Specular(정반사)

항목	의미	코드 핵심
Ambient	어디서나 받는 최소한의 빛	0.2 * baseColor
Diffuse	표면이 빛을 향한 정도	max(dot(normal, lightDir), 0.3)
Specular	반짝이는 하이라이트(광택)	pow(max(dot(viewDir, reflectDir),0), 16)

• normalize는 필수: 보간된 v_normal은 길이가 1이 아닐 수 있어 다시 정규화.
• dot(normal, lightDir): 두 벡터가 같은 방향일수록 1에 가깝고 밝아짐.
• Diffuse에서 0.3으로 하한을 둬서 그림자 부분이 완전히 검게 되지 않게 함(스타일 선택).
• shininess(16.0): 값이 클수록 하이라이트가 작고 날카로워짐(더 매끈한 표면).
• reflect(-lightDir, normal): 빛이 표면에서 반사되는 방향 계산.

---

7. 행렬 / 카메라 (main.js 하단)

• perspective(fovy, aspect, near, far): 원근 투영. 멀리 있는 것이 작게 보이게 함.
  aspect = canvas.width / canvas.height (현재 1000x1000이라 1.0).
• lookAt(eye, target, up): 카메라를 eye에 두고 target을 바라보는 뷰 행렬.
  여기선 eye = [0,0,5]로 z축 +5에서 원점을 바라봅니다.
• 실제 프로젝트에서는 직접 구현 대신 gl-matrix 라이브러리를 권장합니다.

---

8. 렌더 루프 — requestAnimationFrame

function render(time) {
  time *= 0.001;        // 밀리초 → 초
  gl.clear(...);
  gl.uniform1f(locs.time, time);   // 셰이더에 시간 전달 → 애니메이션
  gl.drawElements(...);
  requestAnimationFrame(render);   // 다음 프레임 예약
}

• 브라우저 새로고침 주기(보통 60fps)에 맞춰 매 프레임 호출됩니다.
• time은 셰이더의 u_time으로 전달되어 표면 출렁임을 만듭니다.
• gl.enable(gl.DEPTH_TEST)로 깊이 테스트를 켜서 뒤쪽 면이 앞을 덮지 않게 함.

---

9. 아트워크 변경 포인트

1. fragment.glsl에서 shininess를 4.0, 64.0으로 바꿔 광택 변화 관찰.
2. vertex.glsl의 * 0.3 (변형 세기)을 0.0으로 하면 완전한 구가 됨.
3. main.js의 gl.uniform3f(locs.baseColor, ...)로 구의 색을 바꿔 보기.
4. generateSphere(1.3, 16, 16)처럼 분할 수를 줄여 폴리곤이 보이게 해보기.
5. u_lightDirection 값을 바꿔 조명 방향에 따른 음영 변화 관찰.

---

10. 이 코드의 단순화 / 개선 여지

의도적으로 단순화한 부분들입니다. 더 공부하고 싶다면:

• 셰이더 컴파일 에러 체크 없음: createShader/createProgram에서
  getShaderParameter(..., COMPILE_STATUS)와 getProgramParameter(..., LINK_STATUS)로
  성공 여부를 확인하고 getShaderInfoLog로 에러를 출력하는 것이 정석입니다.
• 법선 재계산 없음: 6장 참고(변형된 표면의 법선을 다시 구하지 않음).
• normal matrix 미적용: 5장 참고(비균등 스케일 시 문제).
• 리소스 정리 없음: 학습 예제라 버퍼/프로그램 해제는 생략.

---

Code

📝 index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL2 Modern Point Rendering</title>
    <link rel="stylesheet" href="style.css" />

    <!--WebGL 로직을 담은 스크립트 파일 (셰이더는 fetch로 비동기 로드)-->
    <script src="main.js" defer></script>
  </head>

  <body>
    <!--WebGL 렌더링을 위한 캔버스-->
    <canvas id="webgl_canvas" width="1000" height="1000"></canvas>

  </body>
</html>

📝 style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 전체 페이지 레이아웃 설정 */
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center;     /* 세로 중앙 정렬 */
  background-color: #1a1a1a;
  overflow: hidden;        /* 스크롤바 방지 */
}

/* 캔버스 스타일 */
#webgl_canvas {
  display: block;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border: 1px solid #333;
  background-color: #000;
}

📝 main.js

/**
 * ============================================================================
 * [WebGL2 Procedural Animated Sphere]
 * - 기능: Sine 함수를 이용한 표면 변형(Wave), Phong Lighting, Blue Glossy Material
 * - 방식: 정점 데이터 생성 시 UV 좌표를 포함하여 수학적 변형 유도
 * ============================================================================
 */

const canvas = document.getElementById("webgl_canvas");
const gl = canvas.getContext("webgl2");

if (!gl) {
  console.error("WebGL2를 지원하지 않습니다.");
} else {
  // 셰이더(.glsl) 파일을 fetch로 비동기 로드한 뒤 초기화한다.
  main();
}

// --- [0. 셰이더 파일 로드 후 초기화 시작] ---
async function main() {
  try {
    const [vsSource, fsSource] = await Promise.all([
      loadShaderSource("shaders/vertex.glsl"),
      loadShaderSource("shaders/fragment.glsl"),
    ]);
    initWebGL(vsSource, fsSource);
  } catch (err) {
    console.error("셰이더 로드 실패:", err);
  }
}

// 셰이더 소스 파일(.glsl)을 텍스트로 읽어온다.
async function loadShaderSource(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`${url} 로드 실패 (HTTP ${response.status})`);
  }
  return response.text();
}

function initWebGL(vsSource, fsSource) {
  // --- [1. 셰이더 소스 정의] ---
  // 셰이더 코드는 shaders/ 폴더의 .glsl 파일로 분리되어 있으며,
  // main()에서 fetch로 읽어와 매개변수(vsSource, fsSource)로 전달받는다.
  //  - shaders/vertex.glsl   (Vertex Shader)
  //  - shaders/fragment.glsl (Fragment Shader)

  // --- [2. 셰이더 컴파일 및 프로그램 생성] ---
  const program = createProgram(gl, vsSource, fsSource);
  gl.useProgram(program);

  // --- [3. 구(Sphere) 데이터 생성 (절차적 생성)] ---
  const { vertices, normals, uvs, indices } = generateSphere(1.3, 128, 128);

  // VAO 설정
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // VBO 1: Positions
  const posBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

  // VBO 2: Normals
  const normBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(1);
  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

  // VBO 3: UVs
  const uvBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(2);
  gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 0, 0);

  // EBO: Indices (Element Buffer Object)
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array(indices),
    gl.STATIC_DRAW,
  );

  // --- [4. Uniform 위치 찾기] ---
  const locs = {
    projection: gl.getUniformLocation(program, "u_projection"),
    view: gl.getUniformLocation(program, "u_view"),
    model: gl.getUniformLocation(program, "u_model"),
    time: gl.getUniformLocation(program, "u_time"),
    lightDir: gl.getUniformLocation(program, "u_lightDirection"),
    viewPos: gl.getUniformLocation(program, "u_viewPos"),
    baseColor: gl.getUniformLocation(program, "u_baseColor"),
  };

  // --- [5. 행렬 및 수학 라이브러리 (간이 구현)] ---
  // 실제 프로젝트에서는 gl-matrix 라이브러리 사용을 권장합니다.
  const projectionMatrix = perspective(
    (45 * Math.PI) / 180,
    canvas.width / canvas.height,
    0.1,
    100.0,
  );
  const viewMatrix = lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);

  // --- [6. 렌더링 루프] ---
  gl.clearColor(1.0, 1.0, 1.0, 1.0); // 배경색: 화이트
  gl.enable(gl.DEPTH_TEST); // 깊이 테스트 활성화

  function render(time) {
    time *= 0.001; // 초 단위 변환

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.uniformMatrix4fv(locs.projection, false, projectionMatrix);
    gl.uniformMatrix4fv(locs.view, false, viewMatrix);

    // 모델 행렬: 기본 정체 행렬에서 시작
    const modelMatrix = mat4Identity();
    gl.uniformMatrix4fv(locs.model, false, modelMatrix);

    // Uniform 값 업데이트
    gl.uniform1f(locs.time, time);
    gl.uniform3f(locs.lightDir, 1.0, 2.0, 1.0); // 조명 방향
    gl.uniform3f(locs.viewPos, 0, 0, 5); // 카메라 위치
    gl.uniform3f(locs.baseColor, 0.0, 0.4, 1.0); // 구 색상: 파란색

    gl.bindVertexArray(vao);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

// --- [헬퍼 함수들] ---

function generateSphere(radius, lat, lon) {
  const vertices = [];
  const normals = [];
  const uvs = [];
  const indices = [];

  for (let i = 0; i <= lat; i++) {
    const theta = (i * Math.PI) / lat;
    const sinTheta = Math.sin(theta);
    const cosTheta = Math.cos(theta);

    for (let j = 0; j <= lon; j++) {
      const phi = (j * 2 * Math.PI) / lon;
      const sinPhi = Math.sin(phi);
      const cosPhi = Math.cos(phi);

      const x = cosPhi * sinTheta;
      const y = cosTheta;
      const z = sinPhi * sinTheta;

      vertices.push(x * radius, y * radius, z * radius);
      normals.push(x, y, z); // 구의 중심이 (0,0,0)이므로 정점 위치가 곧 법선
      uvs.push(j / lon, i / lat);
    }
  }

  for (let i = 0; i < lat; i++) {
    for (let j = 0; j < lon; j++) {
      const first = i * (lon + 1) + j;
      const second = first + lon + 1;
      indices.push(first, second, first + 1);
      indices.push(second, second + 1, first + 1);
    }
  }

  return {
    vertices: new Float32Array(vertices),
    normals: new Float32Array(normals),
    uvs: new Float32Array(uvs),
    indices,
  };
}

function createProgram(gl, vs, fs) {
  const vShader = createShader(gl, gl.VERTEX_SHADER, vs);
  const fShader = createShader(gl, gl.FRAGMENT_SHADER, fs);
  const prog = gl.createProgram();
  gl.attachShader(prog, vShader);
  gl.attachShader(prog, fShader);
  gl.linkProgram(prog);
  return prog;
}

function createShader(gl, type, source) {
  const s = gl.createShader(type);
  gl.shaderSource(s, source);
  gl.compileShader(s);
  return s;
}

// --- [최소한의 행렬 수학 라이브러리] ---
function mat4Identity() {
  return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
}

function perspective(fovy, aspect, near, far) {
  const f = 1.0 / Math.tan(fovy / 2);
  const nf = 1 / (near - far);
  return new Float32Array([
    f / aspect,
    0,
    0,
    0,
    0,
    f,
    0,
    0,
    0,
    0,
    (far + near) * nf,
    -1,
    0,
    0,
    2 * far * near * nf,
    0,
  ]);
}

function lookAt(eye, target, up) {
  const z = normalize(subtract(eye, target));
  const x = normalize(cross(up, z));
  const y = normalize(cross(z, x));
  return new Float32Array([
    x[0],
    y[0],
    z[0],
    0,
    x[1],
    y[1],
    z[1],
    0,
    x[2],
    y[2],
    z[2],
    0,
    -dot(x, eye),
    -dot(y, eye),
    -dot(z, eye),
    1,
  ]);
}

// 벡터 연산 유틸리티
function normalize(v) {
  const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  return [v[0] / len, v[1] / len, v[2] / len];
}
function subtract(a, b) {
  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
}
function cross(a, b) {
  return [
    a[1] * b[2] - a[2] * b[1],
    a[2] * b[0] - a[0] * b[2],
    a[0] * b[1] - a[1] * b[0],
  ];
}
function dot(a, b) {
  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
}
/**
 * ============================================================================
 * [WebGL2 Procedural Animated Sphere]
 * - 기능: Sine 함수를 이용한 표면 변형(Wave), Phong Lighting, Blue Glossy Material
 * - 방식: 정점 데이터 생성 시 UV 좌표를 포함하여 수학적 변형 유도
 * ============================================================================
 */

const canvas = document.getElementById("webgl_canvas");
const gl = canvas.getContext("webgl2");

if (!gl) {
  console.error("WebGL2를 지원하지 않습니다.");
} else {
  // 셰이더(.glsl) 파일을 fetch로 비동기 로드한 뒤 초기화한다.
  main();
}

// --- [0. 셰이더 파일 로드 후 초기화 시작] ---
async function main() {
  try {
    const [vsSource, fsSource] = await Promise.all([
      loadShaderSource("shaders/vertex.glsl"),
      loadShaderSource("shaders/fragment.glsl"),
    ]);
    initWebGL(vsSource, fsSource);
  } catch (err) {
    console.error("셰이더 로드 실패:", err);
  }
}

// 셰이더 소스 파일(.glsl)을 텍스트로 읽어온다.
async function loadShaderSource(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`${url} 로드 실패 (HTTP ${response.status})`);
  }
  return response.text();
}

function initWebGL(vsSource, fsSource) {
  // --- [1. 셰이더 소스 정의] ---
  // 셰이더 코드는 shaders/ 폴더의 .glsl 파일로 분리되어 있으며,
  // main()에서 fetch로 읽어와 매개변수(vsSource, fsSource)로 전달받는다.
  //  - shaders/vertex.glsl   (Vertex Shader)
  //  - shaders/fragment.glsl (Fragment Shader)

  // --- [2. 셰이더 컴파일 및 프로그램 생성] ---
  const program = createProgram(gl, vsSource, fsSource);
  gl.useProgram(program);

  // --- [3. 구(Sphere) 데이터 생성 (절차적 생성)] ---
  const { vertices, normals, uvs, indices } = generateSphere(1.3, 128, 128);

  // VAO 설정
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // VBO 1: Positions
  const posBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

  // VBO 2: Normals
  const normBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(1);
  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

  // VBO 3: UVs
  const uvBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(2);
  gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 0, 0);

  // EBO: Indices (Element Buffer Object)
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array(indices),
    gl.STATIC_DRAW,
  );

  // --- [4. Uniform 위치 찾기] ---
  const locs = {
    projection: gl.getUniformLocation(program, "u_projection"),
    view: gl.getUniformLocation(program, "u_view"),
    model: gl.getUniformLocation(program, "u_model"),
    time: gl.getUniformLocation(program, "u_time"),
    lightDir: gl.getUniformLocation(program, "u_lightDirection"),
    viewPos: gl.getUniformLocation(program, "u_viewPos"),
    baseColor: gl.getUniformLocation(program, "u_baseColor"),
  };

  // --- [5. 행렬 및 수학 라이브러리 (간이 구현)] ---
  // 실제 프로젝트에서는 gl-matrix 라이브러리 사용을 권장합니다.
  const projectionMatrix = perspective(
    (45 * Math.PI) / 180,
    canvas.width / canvas.height,
    0.1,
    100.0,
  );
  const viewMatrix = lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);

  // --- [6. 렌더링 루프] ---
  gl.clearColor(1.0, 1.0, 1.0, 1.0); // 배경색: 화이트
  gl.enable(gl.DEPTH_TEST); // 깊이 테스트 활성화

  function render(time) {
    time *= 0.001; // 초 단위 변환

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.uniformMatrix4fv(locs.projection, false, projectionMatrix);
    gl.uniformMatrix4fv(locs.view, false, viewMatrix);

    // 모델 행렬: 기본 정체 행렬에서 시작
    const modelMatrix = mat4Identity();
    gl.uniformMatrix4fv(locs.model, false, modelMatrix);

    // Uniform 값 업데이트
    gl.uniform1f(locs.time, time);
    gl.uniform3f(locs.lightDir, 1.0, 2.0, 1.0); // 조명 방향
    gl.uniform3f(locs.viewPos, 0, 0, 5); // 카메라 위치
    gl.uniform3f(locs.baseColor, 0.0, 0.4, 1.0); // 구 색상: 파란색

    gl.bindVertexArray(vao);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

// --- [헬퍼 함수들] ---

function generateSphere(radius, lat, lon) {
  const vertices = [];
  const normals = [];
  const uvs = [];
  const indices = [];

  for (let i = 0; i <= lat; i++) {
    const theta = (i * Math.PI) / lat;
    const sinTheta = Math.sin(theta);
    const cosTheta = Math.cos(theta);

    for (let j = 0; j <= lon; j++) {
      const phi = (j * 2 * Math.PI) / lon;
      const sinPhi = Math.sin(phi);
      const cosPhi = Math.cos(phi);

      const x = cosPhi * sinTheta;
      const y = cosTheta;
      const z = sinPhi * sinTheta;

      vertices.push(x * radius, y * radius, z * radius);
      normals.push(x, y, z); // 구의 중심이 (0,0,0)이므로 정점 위치가 곧 법선
      uvs.push(j / lon, i / lat);
    }
  }

  for (let i = 0; i < lat; i++) {
    for (let j = 0; j < lon; j++) {
      const first = i * (lon + 1) + j;
      const second = first + lon + 1;
      indices.push(first, second, first + 1);
      indices.push(second, second + 1, first + 1);
    }
  }

  return {
    vertices: new Float32Array(vertices),
    normals: new Float32Array(normals),
    uvs: new Float32Array(uvs),
    indices,
  };
}

function createProgram(gl, vs, fs) {
  const vShader = createShader(gl, gl.VERTEX_SHADER, vs);
  const fShader = createShader(gl, gl.FRAGMENT_SHADER, fs);
  const prog = gl.createProgram();
  gl.attachShader(prog, vShader);
  gl.attachShader(prog, fShader);
  gl.linkProgram(prog);
  return prog;
}

function createShader(gl, type, source) {
  const s = gl.createShader(type);
  gl.shaderSource(s, source);
  gl.compileShader(s);
  return s;
}

// --- [최소한의 행렬 수학 라이브러리] ---
function mat4Identity() {
  return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
}

function perspective(fovy, aspect, near, far) {
  const f = 1.0 / Math.tan(fovy / 2);
  const nf = 1 / (near - far);
  return new Float32Array([
    f / aspect,
    0,
    0,
    0,
    0,
    f,
    0,
    0,
    0,
    0,
    (far + near) * nf,
    -1,
    0,
    0,
    2 * far * near * nf,
    0,
  ]);
}

function lookAt(eye, target, up) {
  const z = normalize(subtract(eye, target));
  const x = normalize(cross(up, z));
  const y = normalize(cross(z, x));
  return new Float32Array([
    x[0],
    y[0],
    z[0],
    0,
    x[1],
    y[1],
    z[1],
    0,
    x[2],
    y[2],
    z[2],
    0,
    -dot(x, eye),
    -dot(y, eye),
    -dot(z, eye),
    1,
  ]);
}

// 벡터 연산 유틸리티
function normalize(v) {
  const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  return [v[0] / len, v[1] / len, v[2] / len];
}
function subtract(a, b) {
  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
}
function cross(a, b) {
  return [
    a[1] * b[2] - a[2] * b[1],
    a[2] * b[0] - a[0] * b[2],
    a[0] * b[1] - a[1] * b[0],
  ];
}
function dot(a, b) {
  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
}

📝 vertex.glsl

#version 300 es
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_normal;
layout(location = 2) in vec2 a_uv;

uniform mat4 u_projection;
uniform mat4 u_view;
uniform mat4 u_model;
uniform float u_time;

out vec3 v_normal;
out vec3 v_position;
out vec2 v_uv;

void main() {
    // 1. 절차적 변형 (Sine Wave): UV 좌표를 활용해 반지름을 조절
    // 파동의 높이를 계산하여 정점의 위치를 미세하게 이동시킴
    float displacement = sin(a_position.x * 5.0 + u_time) *
                         sin(a_position.y * 5.0 + u_time) *
                         sin(a_position.z * 5.0 + u_time) * 0.3;

    vec3 displacedPosition = a_position + normalize(a_position) * displacement;

    // 2. 좌표 변환
    vec4 worldPosition = u_model * vec4(displacedPosition, 1.0);
    v_position = worldPosition.xyz;
    v_normal = mat3(u_model) * a_normal; // 법선 벡터 변환
    v_uv = a_uv;

    gl_Position = u_projection * u_view * worldPosition;
}

📝 fragment.glsl

#version 300 es
precision highp float;

in vec3 v_normal;
in vec3 v_position;
in vec2 v_uv;

uniform vec3 u_lightDirection;
uniform vec3 u_viewPos;
uniform vec3 u_baseColor;

out vec4 outColor;

void main() {
    // 기본 물리값 설정
    vec3 normal = normalize(v_normal);
    vec3 lightDir = normalize(u_lightDirection);
    vec3 viewDir = normalize(u_viewPos - v_position);
    vec3 reflectDir = reflect(-lightDir, normal);

    // 1. Ambient (환경광)
    float ambientStrength = 0.2;
    vec3 ambient = ambientStrength * u_baseColor;

    // 2. Diffuse (난반사)
    float diff = max(dot(normal, lightDir), 0.3);
    vec3 diffuse = diff * u_baseColor;

    // 3. Specular (정반사 - Glossy 효과)
    float specularStrength = 0.8; // 반사광 강도
    float shininess = 16.0;      // 광택의 날카로움
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);
    vec3 specular = specularStrength * spec * vec3(1.0, 1.0, 1.0);

    // 최종 색상 결합
    vec3 result = ambient + diffuse + specular;
    outColor = vec4(result, 1.0);
}

---