Shader Uniform Interactive

Quiz

1. gl.getUniformLocation()도 반드시 drawScene()안에서 호출되어야 할까요? 직접 확인해 보세요.

    var x_offset = 0.0;
    const slider = document.getElementById("xpositionslider");
    slider.addEventListener("input", function() {
        x_offset = slider.value;
        drawScene();
    })

    var location = gl.getUniformLocation(program, 'u_color');
    var offsetLocation = gl.getUniformLocation(program, 'u_offset');
    function drawScene() {
        gl.uniform4f(location, 0.8, 0.3, 0.8, 1.0);
    
        gl.uniform4f(offsetLocation, x_offset, 0.0, 0.0, 0.0);
        
        // gl.drawArrays(gl.TRIANGLES, 0, 3);
        gl.drawElements(gl.TRIANGLES,
                        6,
                        gl.UNSIGNED_SHORT,
                        0);
    }

gl.getUniformLocation() 을 통해 얻는 uniform 변수의 위치 정보는 변하지 않기에 drawScene() 안에서 호출되지 않고 맨 처음 drawScene() 호출 전에 호출되는 경우 정상적으로 렌더링된다.

2. 제일 처음 페이지를 로드하면(또는 새로고침하면) 슬라이더를 움직이기 전까지 화면에 아무것도 나오지 않습니다. 이를 해결해 보세요.

const slider = document.getElementById("xpositionslider");
    slider.addEventListener("input", function() {
        x_offset = slider.value;
        drawScene();
    })

drawScene();

• 제일 처음 페이지를 로드하는 경우 slider.addEventListener가 동작하지 않았기에 화면에 아무것도 렌더링되지 않는다.
• 따라서 main() 함수 호출 시 최소 한번은 drawScene()을 호출해 초기 화면에서도 렌더링이 될 수 있도록 한다.