Day1~ 셰이더 토이 튜토리얼

Shadertoy 튜토리얼 한글번역

셰이더 토이 WebGL 기반, OpenGL 베이스로된 사이트입니다. 튜토리얼을 진행해보겠습니다.

빈화면

"main" 함수는 쉐이더 효과를 출력하기 위해서 매초 마다 수십회 호출합니다. 컴퓨터 시스템은 초당 60프레임(60FPS)를 출력하려고 노력합니다. 하지만 GLSL 스크립트가 계산이 빡세지면 이 숫자는 더 낮아질 수 있습니다.

(FPS는 화면 아래쪽 정보바에 표시됩니다.)

균일 색상

frageColor는 쉐이더의 출력입니다. 이 값은 화면에 보여지는 이미지를 결정합니다.이 쉐이더는 이 값을 노란색으로 지정합니다. vec4( r, g ,b , a); 값입니다. 뒤에 값에 넣는거에 따른 색이 바낍니다.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragColor = vec4(1.0, 1.0, 0.0 ,1.0);
}

GLSL 벡터들

"fragColor" 는 vec4 객체에 할당되어야 합니다. 0~1 사이 실수 값이 담긴 4개 짜리 배열 입니다. 앞에 3 개의 숫자는 색상을 지정 하고 4번째 숫자는 불투명도(opactiy) 를 지정 합니다. (당장은 4 번째 투명도 값은 아무런 효과도 없습니다.)

하나의 vec2 객체는 4개의 float 을 인자로 받아 생성되거나 아래처럼, vec3 와 float. 2개의 인자를 생성자 인자로 받아 생성됩니다.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	// Here we are seperating the color and transparency parts
	// of the vec4 that represents the pixels.
	vec3 color = vec3(0.0, 1.0, 1.0);
	float alpha = 1.0;
	
	vec4 pixel = vec4(color, alpha);
	fragColor = pixel;
}

현재 셰이더 토이보단 유니티 셰이더쪽을 익히는게 좋을꺼같아서 유니티 셰이더를 앞으로 연재하겠습니다.