Uniform과 좌표

precision mediump float;

// ── Uniform 선언 — CPU에서 전달받는 값 ──
uniform float u_time;       // 경과 시간 (초)
uniform vec2 u_resolution;  // 캔버스 크기 (width, height)
uniform vec2 u_mouse;       // 마우스 위치 (x, y)

void main() {
  // ── 좌표 정규화 — 0.0 ~ 1.0 범위로 변환 ──
  vec2 st = gl_FragCoord.xy / u_resolution;
  // st.x: 0(왼쪽) ~ 1(오른쪽)
  // st.y: 0(아래) ~ 1(위)

  // 정규화된 좌표로 그라데이션
  vec3 color = vec3(st.x, st.y, 0.5);
  gl_FragColor = vec4(color, 1.0);
}

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

void main() {
  vec2 st = gl_FragCoord.xy / u_resolution;

  // ── 시간에 따른 색상 변화 ──
  float r = sin(u_time) * 0.5 + 0.5;        // 0~1 사이 진동
  float g = sin(u_time + 2.094) * 0.5 + 0.5; // 120도 위상차
  float b = sin(u_time + 4.189) * 0.5 + 0.5; // 240도 위상차

  vec3 bgColor = vec3(r * st.x, g * st.y, b);

  // ── 마우스 위치 활용 ──
  vec2 mouseNorm = u_mouse / u_resolution; // 마우스도 정규화
  float dist = distance(st, mouseNorm);     // 픽셀~마우스 거리

  // 마우스 주변에 빛나는 원
  float glow = 0.05 / dist;
  vec3 glowColor = vec3(1.0, 0.8, 0.3) * glow;

  // 색상 혼합
  vec3 finalColor = bgColor + glowColor;
  gl_FragColor = vec4(finalColor, 1.0);
}

// JavaScript에서 Uniform 값 전달하기 (WebGL)
const gl = canvas.getContext('webgl');

// uniform 위치 가져오기
const uTime = gl.getUniformLocation(program, 'u_time');
const uResolution = gl.getUniformLocation(program, 'u_resolution');
const uMouse = gl.getUniformLocation(program, 'u_mouse');

// 렌더 루프에서 매 프레임 업데이트
function render(time) {
  gl.uniform1f(uTime, time * 0.001); // 밀리초 → 초
  gl.uniform2f(uResolution, canvas.width, canvas.height);
  gl.uniform2f(uMouse, mouseX, canvas.height - mouseY); // y축 반전

  gl.drawArrays(gl.TRIANGLES, 0, 6);
  requestAnimationFrame(render);
}