GLSL 기초

GLSL 참고 사이트

GLSL의 코드는 화면의 모든 픽셀에 동일하게 적용된다.

문서

https://thebookofshaders.com/

웹 에디터

http://editor.thebookofshaders.com/

GLSL에는 자체 내장 변수, 함수가 있다!

ex) abs(), sin() 등...
https://thebookofshaders.com/glossary
위 링크에서 확인 가능

GLSL의 데이터 타입

float, int, bool,
vec2(float 2개), vec3(float 3개), vec4(float 4개)

vec4(R, G, B, A)
R, G, B, A : 0 ~ 1 의 숫자만 표현 가능.
ex) (200, 0.9, 31, 1) 입력 시 (1, 0.9, 1, 1)로 출력

형변환에 엄격

void main(){
	float f = 1;
    // 1이라는 정수(integer)를 f라는 float변수(실수)에 실수화 하여 할당.
    // 오류 발생.
    
    float f = 1.;
    // glsl은 형변환에 엄격하기 때문에 1이 아니라 1.을 입력해주어야 함.
}

이런 식으로도 코딩 가능

vec3 red(){
    return vec3(1., 0., 0.);
}

void main() {
	gl_FragColor = vec4(red(),1);
}

void main2() {
	gl_FragColor = vec4(vec3(1., 1., 1.),1);
}

uniform

CPU에서 GPU로 정보를 넘겨주는 변수

uniform float u_time;
	// u_time : 애플리케이션이 경과되어가는 시간을 나타내줌

void main(){
	gl_FragColor = vec4(abs(sin(u_time)), 0.0, 0.0, 1.0);
    
    // gl_FragColor : 색을 지정하는 변수
    // sin() : -1과 1 사이를 오가는 싸인 곡선을 그려주는 함수
    // abs() : 절대값을 그려주는 함수    
}

gl_FragCoord

해당 픽셀이 갖고있는 좌표
좌표는 좌측 하단을 기준으로 양의방향으로 x축, y축이 증가

GLSL의 코드는 화면의 모든 픽셀에 동일하게 적용된다.
-> 같은 코드를 집어넣었는데 픽셀의 색이 각각 다르다?
-> 각 픽셀들이 다른 위치에 있기 때문에 자기의 위치 정보를 기준으로 해석함으로써 동일한 코드로 다른 결과물(픽셀)이 나온다.

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
	vec2 st = gl_FragCoord.xy / u_resolution;
    // 픽셀의 x좌표와 y좌표 두 개의 값을 필요로 하기 때문에 vec2(float 2개)로 선언
  	gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
    
  	// 화면 해상도가 500x500이라고 할 때
  	// 화면 중앙의 픽셀을 기준이라고 치면
  	vec2 st = vec2(250./500., 250./500.);
  	vec2 st = vec2(.5, .5);
  	gl_FragColor = vec4(.5, .5, 0., 1.);
  	// 해당 픽셀에는 Red 50%, Green 50% 섞인 Yellow 컬러가 표현됨.
  
  	// 화면 최하단 우측 픽셀을 기준이라고 치면
  	vec2 st = vec2(500./500., 0./500.);
  	vec2 st = vec2(1., 0.);
  	gl_FragColor = vec4(1., 0., 0., 1.);
  	// 해당 픽셀에는 Red 100%이므로 Red 컬러가 표현됨.
}

오늘은 여기까지....
눈이 감긴다..