WebGL - 사각형 그리기

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 WebGL의 세계로 여행을 떠나, 사각형(또는 짧게 'quad'라고 부르는)을 그리는 방법을 배우겠습니다. 프로그래밍에 새로운 분이라면 걱정하지 마세요 - 저는 여러분을 단계별로 친절히 안내해 드릴 경험이 풍부한 교사입니다.

WebGL - Drawing a Quad

WebGL이란?

사각형을 그리기 전에 잠시 WebGL에 대해 이해해 보겠습니다. WebGL(Web Graphics Library)는 강력한 JavaScript API로, 웹 브라우저에서 훌륭한 2D와 3D 그래픽을 만들 수 있게 해줍니다. 마치 마법의 그림笔을 손에 들고 상상력을 웹 페이지에 실현할 수 있는 것과 같습니다!

사각형 그리는 단계

이제 사각형을 그리는 과정을 단계별로 쉽게 나누어 설명하겠습니다. 이를 집 짓는 것에 비유하면, 우리는 기초를 다지고 점진적으로 올라갑니다.

단계 1: HTML 캔버스 설정

먼저 그림을 그릴 캔버스가 필요합니다. HTML에서는 <canvas> 엘리먼트를 사용합니다. 마치 그림을 그리기 위한 에asel을 설정하는 것과 같습니다.

<canvas id="myCanvas" width="600" height="400">
    Your browser does not support the HTML5 canvas tag.
</canvas>

단계 2: WebGL 컨텍스트 초기화

다음으로, 우리는 WebGL 컨텍스트를 얻어야 합니다. 마치 마법의 WebGL 그림笔을 들는 것과 같습니다.

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
    console.log('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
    alert('Your browser does not support WebGL');
}

단계 3: 베릭스 셰이더 생성

이제 베릭스 셰이더를 만들어 보겠습니다. 이는 WebGL에 우리의 사각형의 모서리를 어디에 그릴지 알려줍니다.

const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

단계 4: 프래그먼트 셰이더 생성

프래그먼트 셰이더는 우리의 사각형이 어떤 색깔로 그릴지 결정합니다. 기분 좋은 파랑색으로 만들어 보겠습니다!

const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
    }
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

단계 5: 프로그램 생성 및 셰이더 연결

이제 프로그램을 만들고 셰이더를 연결하겠습니다. 마치 그림笔과 페인트를 함께 사용하는 것과 같습니다.

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

단계 6: 버퍼 생성 및顶点 데이터 로드

이제 우리의 사각형의 모서리를 정의할 차례입니다!

const positions = [
    -0.7, -0.5,
     0.7, -0.5,
     0.7,  0.5,
    -0.7,  0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

단계 7: 위치 버퍼를 속성에 연결

WebGL이 위치 데이터를 어떻게 읽을지 알려야 합니다.

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

단계 8: 사각형 그리기

마침내 기다렸던 순간 - 우리의 사각형을 그리겠습니다!

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

사각형 그리는 예제

이제 모든 것을 하나의 완전한 예제로 통합해 보겠습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Quad</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="400">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const gl = canvas.getContext('webgl');

        if (!gl) {
            alert('Your browser does not support WebGL');
        }

        const vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            void main() {
                gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
            }
        `;

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);

        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);

        const positions = [
            -0.7, -0.5,
             0.7, -0.5,
             0.7,  0.5,
            -0.7,  0.5
        ];

        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

        gl.useProgram(program);
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    </script>
</body>
</html>

이제 브라우저에서 이 HTML 파일을 엽니다면, 캔버스에 아름다운 파란 사각형을 볼 수 있을 것입니다.

결론

첫 WebGL 사각형을 그리신 축하드립니다! 오늘 우리는 캔버스 설정에서 셰이더 생성과 링크, 그리고 마침내 도형을 그리는 것까지 많은 내용을 다루었습니다. WebGL을 배우는 것은 그림을 그리는 것처럼, 연습과 인내가 필요합니다. 바로 이해가 되지 않더라도 낙담하지 마세요. 계속 실험하고, 곧 웹에서 놀라운 3D 그래픽을 만들 수 있을 것입니다!

다음 강의에서는 우리의 WebGL 창작물에 상호작용성을 추가하는 방법을 탐구할 것입니다. 그때까지 즐거운 코딩을!

Credits: Image by storyset