Shader Attribute

Quiz

1. 프래그먼트 셰이더의 파란색 색상값을 바꾸어 다른 색상으로 그려 보세요.

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

    void main() {
        outColor = vec4(0.0, 0.0, 1.0, 1.0); // RGB 값
    }
`;

2. positions의 좌표값을 바꾸어 삼각형이 어떻게 변하는지 살펴 보세요.

    // var positions = [
    //     -0.5, -0.5,
    //     0.0, 0.5,
    //     0.5, -0.5,
    // ]

    var positions = [
        0.0, -0.5,
        0.5, 0.5,
        1.0, -0.5,
    ]

3. a_position은 vec4 타입인데, 이는 (x,y,z,w) 네 개의 float값으로 이루어진 구조체라는 뜻입니다. 여기에 값을 두 개만 전달했는데요 그러면 값이 어떻게 저장되는 걸까요?

• 필요한 값보다 적은 값을 전달 받는 경우 앞에서부터 값을 저장한 후 부족한 값들은 기본값(0.0, 1.0) 으로 설정된다.

4. positions 배열을 한 정점마다 값을 3개, 4개씩 전달하도록 수정해 보세요. 제대로 표시가 되려면 vertexAttribPointer()의 인자들을 어떻게 바꿔야 할지 생각해 보세요.

    var positions = [
        0.0, -0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        1.0, -0.5, 0.5, 1.0,
    ]
    
    gl.useProgram(program); // 컴파일 한 쉐이더를 바인딩
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0,           // location 0에
                            4,          // 4개씩
                            gl.FLOAT,   // Float 형 데이터를
                            false,      // normalize 하지 않고
                            16,          // 16 바이트(4 * Float) 씩 넘어가며
                            0);         // 처음부터 시작
    // 각 vertex들이 병렬적으로 처리되어 각각의 vertexShader가 실행된다.

    gl.drawArrays(gl.TRIANGLES, 0, 3);

Advanced

• offset과 stride 인자를 응용해서, 아래와 같은 positions 배열을 사용할 때에도 기존과 동일한 삼각형이 나타나도록 vertexAttribPointer() 함수 호출을 수정해 보세요.

var positions = [ //삼각형의 2차원 좌표 정보. 현재는 RAM에 저장되어 있는 상태
    0.0, -0.5, -0.5, 0.0, // (-0.5, -0.5) 좌표에 점 하나
    0.0, 0.0,  0.5, 0.0, // ( 0.0,  0.5) 좌표에 점 하나
    0.0, 0.5,  -0.5, 0.0// ( 0.5, -0.5) 좌표에 점 하나
];

• vertexAttribPointer()

	gl.vertexAttribPointer(0,           // location 0에
                            2,          // 2개씩
                            gl.FLOAT,   // Float 형 데이터를
                            false,      // normalize 하지 않고
                            16,         // 16 바이트(4 * Float) 씩 넘어가며
                            4);         // 4byte부터 시작
    // 각 vertex들이 병렬적으로 처리되어 각각의 vertexShader가 실행된다.