🧱 Boilerplate : Shader Art

BamgasiJM·2026년 6월 26일

목록 보기

4/14

📝 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shader Artwork</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <canvas id="webgl_canvas"></canvas>
        <h1 class="title">Shader Artwork</h1>
    </div>
    <script src="app.js"></script>
</body>
</html>

📝 style.css

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

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 40px 20px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

#webgl_canvas {
    display: block;
    width: 1000px;
    height: 1000px;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.title {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 4px;
    color: #e0e0e0;
    text-transform: uppercase;
}

📝 app.js

/**
 * WebGL2 캔버스 초기화 및 셰이더 렌더링 예제
 * - HTML에서 id가 "webgl_canvas"인 canvas 요소를 가져옴
 * - WebGL2 컨텍스트를 생성하고, 셰이더를 로드/컴파일하여 풀스크린 쿼드를 그립니다.
 * - 애니메이션 루프에서 시간에 따라 변하는 유니폼을 전달합니다.
 */

// ========================================
// 1. 캔버스 및 WebGL2 컨텍스트 획득
// ========================================

// HTML 문서에서 id가 "webgl_canvas"인 canvas 요소를 가져옴
const canvas = document.getElementById("webgl_canvas");

// canvas에서 WebGL2 렌더링 컨텍스트를 요청
// gl 변수는 모든 WebGL API 호출의 진입점 역할을 함
const gl = canvas.getContext("webgl2");

// WebGL2를 지원하지 않는 브라우저인 경우 경고 및 에러 발생
if (!gl) {
  alert("WebGL2를 지원하지 않는 브라우저입니다.");
  throw new Error("WebGL2 not supported");
}

// 캔버스의 실제 픽셀 크기를 1000x1000으로 설정 (CSS 크기와는 별개)
canvas.width = 1000;
canvas.height = 1000;

// 뷰포트를 캔버스 전체 크기로 설정 (픽셀 좌표 매핑)
gl.viewport(0, 0, canvas.width, canvas.height);

// ========================================
// 2. 셰이더 로드 및 컴파일 유틸리티 함수
// ========================================

/**
 * 주어진 URL에서 텍스트 파일을 비동기로 가져옴 (셰이더 소스용)
 * @param {string} url - 셰이더 파일 경로
 * @returns {Promise<string>} 파일 내용
 */
async function loadShader(url) {
  const response = await fetch(url);   // HTTP 요청으로 파일 읽기
  return await response.text();        // 응답 본문을 텍스트로 반환
}

/**
 * WebGL 셰이더 객체를 생성하고 컴파일
 * @param {number} type - gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER
 * @param {string} source - 셰이더 소스 코드
 * @returns {WebGLShader|null} 컴파일된 셰이더 객체 또는 null (오류 시)
 */
function compileShader(type, source) {
  // 빈 셰이더 객체 생성
  const shader = gl.createShader(type);
  // 셰이더 객체에 소스 코드 할당
  gl.shaderSource(shader, source);
  // 셰이더 컴파일 실행
  gl.compileShader(shader);

  // 컴파일 성공 여부 확인
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    // 실패 시 로그 출력 후 셰이더 삭제
    console.error("Shader compilation error:", gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader; // 성공 시 셰이더 객체 반환
}

/**
 * 정점 셰이더와 프래그먼트 셰이더를 연결하여 프로그램 생성
 * @param {WebGLShader} vertexShader - 컴파일된 정점 셰이더
 * @param {WebGLShader} fragmentShader - 컴파일된 프래그먼트 셰이더
 * @returns {WebGLProgram|null} 링크된 프로그램 객체 또는 null (오류 시)
 */
function createProgram(vertexShader, fragmentShader) {
  // 빈 프로그램 객체 생성
  const program = gl.createProgram();
  // 프로그램에 두 셰이더 연결
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // 셰이더들을 링크하여 실행 가능한 프로그램으로 만듦
  gl.linkProgram(program);

  // 링크 성공 여부 확인
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error("Program linking error:", gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    return null;
  }
  return program; // 성공 시 프로그램 객체 반환
}

// ========================================
// 3. 초기화 및 렌더링 설정
// ========================================

/**
 * 모든 WebGL 리소스를 초기화하고 애니메이션 루프 시작
 * - async 함수로 셰이더 파일을 비동기 로드
 */
async function init() {
  // 셰이더 파일들을 비동기로 읽어옴 (경로는 HTML 기준 상대 경로)
  const vertexSource = await loadShader("shaders/vert.glsl");
  const fragmentSource = await loadShader("shaders/frag.glsl");

  // 정점 셰이더 컴파일
  const vertexShader = compileShader(gl.VERTEX_SHADER, vertexSource);
  // 프래그먼트 셰이더 컴파일
  const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSource);
  // 두 셰이더를 링크하여 프로그램 생성
  const program = createProgram(vertexShader, fragmentShader);

  // ------------------------------------------------------------------
  // 풀스크린 사각형 (Full-screen quad) 데이터 준비
  // - TRIANGLE_STRIP으로 그릴 4개의 정점 (2D 좌표, x,y)
  // - 좌표 범위: -1 ~ 1 (NDC: Normalized Device Coordinates)
  //   순서: 좌하(-1,-1), 우하(1,-1), 좌상(-1,1), 우상(1,1)
  // ------------------------------------------------------------------
  const positions = new Float32Array([
    -1, -1,  // 0: 좌하
     1, -1,  // 1: 우하
    -1,  1,  // 2: 좌상
     1,  1   // 3: 우상
  ]);

  // 버퍼 객체 생성 (GPU 메모리에 데이터 저장)
  const positionBuffer = gl.createBuffer();
  // ARRAY_BUFFER 타입으로 바인딩 (정점 속성 데이터)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // 버퍼에 데이터 업로드 (STATIC_DRAW: 한 번 쓰고 여러 번 읽음)
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // VAO(Vertex Array Object) 생성 - 정점 속성 상태를 묶어둠
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao); // 현재 VAO로 활성화

  // 프로그램에서 'a_position' 속성의 위치(index)를 가져옴
  const a_position = gl.getAttribLocation(program, "a_position");
  // 해당 속성을 활성화 (사용하겠다고 표시)
  gl.enableVertexAttribArray(a_position);
  // 속성의 데이터 형식 지정: (index, size, type, normalized, stride, offset)
  // size=2 (x,y), type=FLOAT, stride=0 (데이터가 연속), offset=0
  gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

  // ------------------------------------------------------------------
  // 유니폼 변수 위치 가져오기 (셰이더에서 uniform으로 선언된 변수)
  // ------------------------------------------------------------------
  const u_resolution = gl.getUniformLocation(program, "u_resolution");
  const u_time = gl.getUniformLocation(program, "u_time");

  // ------------------------------------------------------------------
  // 렌더 루프 (애니메이션)
  // ------------------------------------------------------------------
  const startTime = Date.now(); // 시작 시간 (밀리초)

  /**
   * 매 프레임 호출되는 렌더링 함수
   * - requestAnimationFrame에 의해 반복 실행 (재귀적 호출이 아님)
   *   (브라우저가 다음 화면 갱신 시점에 콜백을 호출)
   */
  function render() {
    // 경과 시간 계산 (초 단위)
    const time = (Date.now() - startTime) * 0.001;

    // 배경색 설정 (검정) 및 버퍼 지우기
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 현재 프로그램 사용
    gl.useProgram(program);
    // 유니폼 값 전달: 해상도(캔버스 크기)와 시간
    gl.uniform2f(u_resolution, canvas.width, canvas.height);
    gl.uniform1f(u_time, time);

    // VAO 바인딩 (정점 버퍼와 속성 설정 복원)
    gl.bindVertexArray(vao);
    // TRIANGLE_STRIP으로 4개 정점을 그리기 (0번부터 4개)
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    // 다음 프레임 요청 (브라우저가 repaint 직전에 render 다시 호출)
    // ※ 이는 재귀 함수가 아니라, 이벤트 루프에 의한 반복 호출입니다.
    requestAnimationFrame(render);
  }

  // 첫 렌더링 시작
  render();
}

// 모든 초기화 실행 (비동기 함수이므로 then/catch 또는 await 사용 가능)
init();

shaders/vert.glsl
shaders/frag.glsl

📝 vert.glsl

#version 300 es
precision highp float;

in vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
}

📝 frag.glsl

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

out vec4 fragColor;

void main() {
    // 정규화된 좌표 (0.0 ~ 1.0)
    vec2 uv = gl_FragCoord.xy / u_resolution;

    // 시간에 따라 변하는 색상
    vec3 color = vec3(
        0.5 + 0.5 * sin(u_time),
        0.5 + 0.5 * sin(u_time + 2.0),
        0.5 + 0.5 * sin(u_time + 4.0)
    );

    fragColor = vec4(color, 1.0);
}

BamgasiJM

Coding Art with Blender / oF / Processing / p5.js / nannou

이전 포스트

🧱 Boilerplate : Simple Geometry

다음 포스트

🧱 Boilerplate : Shader Art

WebGL

📝 index.html

📝 style.css

📝 app.js

📝 vert.glsl

📝 frag.glsl

🧱 Boilerplate : Simple Geometry

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

0개의 댓글