glsl uniform

glsl 언어에는 일반적인 언어와 달리 uniform 이라는 값이 있다.

precision mediump float;

uniform vec4 u_color; // uniform

void main() {
    gl_FragColor = u_color;
}

cpu는 한번에 하나의 일을 처리하지만 gpu는 병렬로 일을 처리한다.

shader language는 gpu의 각 병렬 스레드에서 독립적으로 동작하는 언어라고 보면된다.

만약 값이 변경된다면 cpu로 부터 값을 받아와야하는데 uniform 타입이 그 역할을 수행한다.

uniform은 CPU로부터 받아온 데이터를 의미한다.

glsl에는 많은 빌트인 unfirom이 있다.

https://thebookofshaders.com/glossary/ ( 여기를 참고하자. )

자바스크립트에서 glsl의 uniform값을 수정하고 싶다면 이렇게 실행하면 된다.

// WebGL context 생성
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

// 셰이더 소스코드
var vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

var fragmentShaderSource = `
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
`;

// GLSL 프로그램 생성 및 컴파일
var program = gl.createProgram();
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
gl.attachShader(program, vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// uniform 변수 설정
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4f(colorLocation, 1.0, 0.0, 0.0, 1.0); // R, G, B, A 값 설정

// 셰이더 실행
gl.useProgram(program);

// 그리기 호출
gl.drawArrays(gl.TRIANGLES, 0, 3);

// uniform 변수 변경
gl.uniform4f(colorLocation, 0.0, 1.0, 0.0, 1.0); // R, G, B, A 값 변경

// 다시 그리기 호출
gl.drawArrays(gl.TRIANGLES, 0, 3);

getUniformLocation 함수를 통해서 uniform 값을 가져올 수 있고

uniform4f 함수를 통해서 변수 변경이 가능하다.