WebGL 바닥부터 해보기

1
2
3
4
5
6
7
8
9
10
const WIDTH = 500;
const HEIGHT = 500;

function initalize() {
    // ...
}

document.addEventListener('DOMContentLoaded', function() {
    initalize();
}, false);

1
2
3
4
5
6
7
8
function initalize() {
    var $canvas = document.createElement('canvas');
    $canvas.width = WIDTH;
    $canvas.height = HEIGHT;
    document.body.appendChild($canvas);
    
    var gl = $canvas.getContext('experimental-webgl');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function initalize() {
    ...
    
    var vertexShaderSource = document.getElementById('VERTEX_SHADER').text;
    var fragmentShaderSource = document.getElementById('FRAGMENT_SHADER').text;
    
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
}

function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    
    if(success) {
        return shader;
    }
    
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function initalize() {
    ...
    
    var program = createProgram(gl, vertexShader, fragmentShader);
}

function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    
    if(success) {
        return program;
    }
    
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
function initalize() {
    ...
    
    // Canvas 엘리먼트의 크기와 같게 영역 지정
    gl.viewport(0, 0, $canvas.width, $canvas.height);
    
    // 배경을 RGBA를 모두 0으로 설정하고 기존에 있던 모든 색 버퍼를 지우기
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    // 우리가 만든 Program을 적용하기
    gl.useProgram(program);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function initalize() {
    ...
    
    var vertices = [
         0,   1,
        -1,  -1,
         1,  -1
    ];
    
    setAttribute(gl, program, 'a_position', new Float32Array(vertices), 2, gl.FLOAT, false, 0, 0);
}

/**
 * Attribute 버퍼를 설정합니다.
 *
 * @param gl		
 * @param program	
 * @param name		버퍼의 이름입니다.
 * @param data		버퍼의 데이터입니다.
 * @param size		버퍼의 데이터를 몇 개 단위로 잘라낼 것인지 정합니다.
 * @param type		버퍼의 데이터의 자료형입니다.
 * @param normalize	버퍼의 데이터를 정규화 할것 인지 정합니다.
 * @param stride	버퍼의 데이터를 읽을 때 몇 개 단위로 읽을 지 정합니다.
 * @param offset	버퍼의 데이터를 읽을 때 어디서 부터 건너뛰고 읽을 지 정합니다.
 * 
 * @return position	버퍼의 위치입니다.
 * @return buffer	버퍼 객체입니다.
 */
function setAttribute(gl, program, name, data, size, type, normalize, stride, offset) {
    var position = gl.getAttribLocation(program, name);
    var buffer = gl.createBuffer();
    
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    gl.enableVertexAttribArray(position);
    gl.vertexAttribPointer(position, size, type, normalize, stride, offset);
    
    return {
        position: position,
        buffer: buffer
    }
}

1
2
3
4
5
6
function initalize() {
    ...
    
    // 삼각형을, 0 번째 꼭짓점부터, 3 개의 꼭짓점을 그린다.
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
function initalize() {
    ...
    
    var color = [
        1, 0, 0,
        0, 1, 0,
        0, 0, 1
    ];
    
    setAttribute(gl, program, 'a_color', new Float32Array(color), 3, gl.FLOAT, false, 0, 0);
    
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}