Drawing Multiple Objects

Quiz

1. VAO라는것을 아직 배우지 않았다고 하더라도, 사실 위 코드는 중복되는 명령문이 매우 많습니다. 어떻게 중복을 줄이도록 구조화 할 수 있을지 생각해 보세요.

program, array_buffer, element_array_buffer 를 구조화하여 한 값에 이들에 해당하는 값들을 저장하여 각각을 바인딩/언바인딩 하지 않고 해당 값을 바인딩/언바인딩하여 렌더링을 한다.

2. 바인딩/언바인딩이 중복적으로 이루어지고 있는데 몇몇 부분을 주석처리 한 상태에서 결과를 보시고 왜 그런 결과가 나오는 걸까 생각해 보세요.

언바인딩을 하지 않은 상태로 이후 작업에서 일부 버퍼에 대한 바인딩을 놓친다면 이전에 바인딩한 값에 영향을 받아 렌더링이 진행된다. 예를 들어 사각형을 렌더링한 후 array_buffer 부분에 대한 언바인딩/바인딩 작업을 실수로 빼먹은 경우 삼각형은 사각형을 렌더링할 때 사용한 정점 정보를 사용하게 된다.

Quiz

1. 코드를 수정해서 슬라이더가 삼각형의 색상을 바꾸고, 사각형은 초록색으로 그려지도록 만들어 보세요. (힌트: 두 물체를 그리기 위해 사용하는 셰이더를 바꾸면 되겠죠?)

# Rectangle FragmentShader
var fragmentShaderSource = `#version 300 es
    precision mediump float;
    layout(location=0) out vec4 outColor;

    uniform vec4 u_color;

    void main() {
        outColor = u_color;
    }
`;

# Triangle FragmentShader
var triangleFragmentShaderSource = `#version 300 es
    precision mediump float;
    layout(location=0) out vec4 outColor;

    uniform vec4 u_tcolor;

    void main() {
        outColor = u_tcolor;
    }
`;

...

# Draw call

    function drawScene() {
        // -- Rectangle Uniform setting
        // -- Rectangle Buffer 데이터 설명
        gl.useProgram(program);
        gl.bindVertexArray(rectangleVAO);

        var location = gl.getUniformLocation(program, 'u_color');
        gl.uniform4f(location, 0.0, 1.0, 0.0, 1.0);  // 사각형은 항상 초록색
        
        var offsetLocation = gl.getUniformLocation(program, 'u_offset');
        gl.uniform4f(offsetLocation, x_offset, 0.0, 0.0, 0.0);
        
        // -- Draw call
        // gl.drawArrays(gl.TRIANGLES, 0, 3);
        gl.drawElements(gl.TRIANGLES,
                        6,
                        gl.UNSIGNED_SHORT,
                        0);

        gl.useProgram(null);
        gl.bindVertexArray(null);

        gl.useProgram(triangleProgram);
        gl.bindVertexArray(triangleVAO);

        var location = gl.getUniformLocation(triangleProgram, 'u_tcolor');
        gl.uniform4f(location, x_offset, 0.3, 0.8, 1.0);  // 슬라이더가 R값에 영향을 줌

        // -- Triangle Draw call
        gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);

        gl.useProgram(null);
        gl.bindVertexArray(null);
    }

2. offset을 적용한 것을 응용해서, 화면에 사각형 두개와 삼각형 한개가 보이도록 코드를 수정 해보세요. 두 개의 사각형을 그리기 위해 별도의 정점 데이터를 추가하지 말고, 이미 만들어져 있는 사각형의 VAO만을 활용해야 합니다.

function drawScene() {
	...
    
    // -- Additional Rectangle Draw call
    gl.useProgram(program);
    gl.bindVertexArray(rectangleVAO);
  
    var additionalOffsetLocation = gl.getUniformLocation(program, 'u_offset');
    gl.uniform4f(additionalOffsetLocation, -x_offset, 0.2, 0.0, 0.0);
  
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  
    gl.useProgram(null);
    gl.bindVertexArray(null);
}