🧱 Boilerplate : Yellow Triangle

BamgasiJM·2026년 6월 26일

목록 보기

2/14

📝 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>WebGL2 Basic Triangle</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <canvas id="glCanvas" width="800" height="600"></canvas>
    <script src="app.js"></script>
</body>
</html>

📝 style.css

body {
    margin: 0;
    padding: 0;
    background-color: rgb(44, 44, 44);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

canvas {
    display: block;
    margin: 0 auto;
}

📝 app.js

/**
 * ============================================================================
 * [WebGL2 기초: 삼각형 렌더링 파이프라인 구현]
 * 목적: WebGL2 컨텍스트를 생성하고, Shader Program, VAO, VBO를 구성하여
 *       GPU 메모리에 정점 데이터를 전송하고 화면에 삼각형을 출력합니다.
 * ============================================================================
 */

// --- [1. 초기 설정 및 컨텍스트 획득] ---
// HTML5 Canvas 엘리먼트를 참조하고, WebGL2 그래픽 API를 사용할 수 있는 컨텍스트를 생성합니다.
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl2");

// 만약 WebGL2를 지원하지 않는 브라우저라면 에러 처리가 필요합니다.
if (!gl) {
  console.error("WebGL2를 지원하지 않는 브라우저입니다.");
}

// --- [2. 셰이더 소스 코드 정의 (GLSL 3.00 es)] ---

/**
 * [Vertex Shader]
 * 역할: 각 정점(Vertex)의 좌표를 결정하며, 클립 공간(Clip Space)으로 변환합니다.
 * - layout(location = 0): CPU에서 전달하는 정점 속성(attribute)의 인덱스를 0번으로 지정합니다.
 * - a_position: 입력받는 2차원 좌표(vec2)입니다.
 * - gl_Position: GPU 내부 내장 변수로, 최종 4차원 좌표(vec4)를 전달해야 합니다.
 */
const vsSource = `#version 300 es
layout(location = 0) in vec2 a_position;
void main() {
    // vec2 좌표를 vec4(x, y, z, w)로 변환하여 전달 (z=0.0, w=1.0)
    gl_Position = vec4(a_position, 0.0, 1.0);
}`;

/**
 * [Fragment Shader]
 * 역할: 래스터화(Rasterization)된 각 픽셀(Fragment)의 최종 색상을 결정합니다.
 * - precision mediump float: 부동 소수점 연산의 정밀도를 설정합니다.
 * - outColor: 픽셀의 색상 값을 출력할 사용자 정의 변수입니다.
 */
const fsSource = `#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
    // RGBA 값 설정: R=1.0(Full), G=0.5(Half), B=0.0(None), A=1.0(Opaque) -> 주황색
    outColor = vec4(1.0, 0.5, 0.0, 1.0);
}`;

// --- [3. 셰이더 컴파일 및 프로그램 링크 함수] ---

/**
 * @function createShader
 * @description 개별 셰이더(Vertex 또는 Fragment)를 생성하고 컴파일합니다.
 * @param {WebGL2RenderingContext} gl - WebGL 컨텍스트
 * @param {number} type - gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER 타입
 * @param {string} source - GLSL 소스 코드 문자열
 * @returns {WebGLShader} 컴파일된 셰이더 객체
 */
function createShader(gl, type, source) {
  const shader = gl.createShader(type); // 1. 셰이더 객체 생성
  gl.shaderSource(shader, source); // 2. 소스 코드 할당
  gl.compileShader(shader); // 3. GPU가 이해할 수 있는 바이너리로 컴파일

  // 컴파일 에러 체크 (실무에서 매우 중요)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error("Shader compile error:", gl.getShaderInfoLog(shader));
  }
  return shader;
}

// 셰이더 컴파일 실행
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

/**
 * [Shader Program 생성 및 링크]
 * 역할: 컴파일된 Vertex Shader와 Fragment Shader를 하나의 실행 가능한 '프로그램'으로 결합합니다.
 */
const program = gl.createProgram(); // 1. 프로그램 객체 생성
gl.attachShader(program, vertexShader); // 2. Vertex Shader 연결
gl.attachShader(program, fragmentShader); // 3. Fragment Shader 연결
gl.linkProgram(program); // 4. 두 셰이더를 연결(Link)하여 파이프라인 구성

// 링크 에러 체크
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error("Program link error:", gl.getProgramInfoLog(program));
}

// --- [4. 데이터 준비 및 버퍼 관리 (Memory Management)] ---

/**
 * [정점 데이터 정의]
 * 좌표계: Clip Space (-1.0 ~ 1.0 범위)
 * 1. (0.0, 0.5)   : 상단 중앙
 * 2. (-0.5, -0.5) : 좌하단
 * 3. (0.5, -0.5)  : 우하단
 */
const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);

/**
 * [VAO (Vertex Array Object) 설정]
 * 역할: VBO의 바인딩 상태와 정점 속성(Attribute)의 레이아웃 정보를 하나로 묶어 저장합니다.
 * 이 객체를 바인딩하면 이전의 복잡한 정점 설정 과정을 한 번에 복구할 수 있습니다.
 */
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

/**
 * [VBO (Vertex Buffer Object) 설정]
 * 역할: CPU에 있는 정점 배열 데이터를 GPU의 비디오 메모리(VRAM)로 복사합니다.
 */
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); // 1. 버퍼를 ARRAY_BUFFER 타입으로 바인딩
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 2. 데이터를 GPU 메모리에 할당 (정적 데이터)

/**
 * [Vertex Attribute Pointer 설정]
 * 역할: GPU가 VBO 내부의 데이터를 해석하는 방식을 정의합니다.
 * @param {number} index - shader의 layout(location = 0)에 지정된 인덱스
 * @param {number} size - 데이터의 구성 요소 개수 (여기서는 x, y 이므로 2)
 * @param {number} type - 데이터 자료형 (gl.FLOAT)
 * @param {boolean} normalized - 정규화 여부
 * @param {number} stride - 데이터 간의 간격 (bytes 단위, 0이면 자동으로 계산)
 * @param {number} offset - 데이터의 시작 위치 (bytes 단위)
 */
gl.enableVertexAttribArray(0); // 0번 속성(a_position) 활성화
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

// --- [5. 렌더링 실행 (Rendering Loop/Process)] ---

// 1. 화면 초기화: 배경색을 검은색(RGBA: 0,0,0,1)으로 설정하고 버퍼를 비웁니다.
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 2. 사용할 셰이더 프로그램 결정
gl.useProgram(program);

// 3. 설정된 VAO 바인딩 (정점 데이터 구조를 GPU에 알림)
gl.bindVertexArray(vao);

// 4. 그리기 명령 실행: 삼각형(TRIANGLES)을 0번 인덱스부터 3개의 정점을 사용하여 그립니다.
gl.drawArrays(gl.TRIANGLES, 0, 3);

BamgasiJM

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

이전 포스트

🧱 Boilerplate : Mint Point

다음 포스트

🧱 Boilerplate : Yellow Triangle

WebGL

📝 index.html

📝 style.css

📝 app.js

🧱 Boilerplate : Mint Point

🧱 Boilerplate : Simple Geometry

0개의 댓글