쉐이더(Shader) 배우기

쉐이더 학습 기록하기 - 2021.07.01

강의 : 손에 잡히는 Shader
https://www.opentutorials.org/module/3659?fbclid=IwAR1vZkAtlLOHAX_cVumhJ-557ZokGPPn4tecEpbsuw26V4ZJHtEE2Ijpdvg

책 : https://thebookofshaders.com/

Unity문서 : https://docs.unity3d.com/kr/530/Manual/SL-ShaderPrograms.html

GLSL 관련 링크
1. GLSL - 프론트엔드개발자
https://velog.io/@kimbyungchan/%EC%85%B0%EC%9D%B4%EB%8D%94-%EB%B3%B4%EA%B3%A0%EB%A7%8C-%EC%9E%88%EC%9D%84-%EA%B1%B0%EC%95%BC

※비쥬얼 프로그래밍 경험 필요※

손에 잡히는 쉐이더 2강. Shader는 빠르다

💫쉐이더는 다양한 종류가 있다.
Fragment Shader : 픽셀 쉐이더(강의와 책은 Fragment 위주)
Vertex Shader : 정점 쉐이더

✨추가 설명(https://hyeonu1258.github.io/2018/06/26/OpenGL%20Shader/)
	Vertex Shader
   	3차원 좌표로 이루어진 vertex들이 2차원 화면에서 그려질 위치를 정의
       void main(void) { 
           const vec4 vertices[3] = 
               vec4[3](vec4( 0.25, -0.25, 0.5, 1.0), 
                       vec4(-0.25, -0.25, 0.5, 1.0), 
                       vec4( 0.25, 0.25, 0.5, 1.0)); 

           // 화면에 3개의 점을 그린다.
           gl_Position = vertices[gl_VertexID]; 
       }
       
   Fragment Shader
   	각각의 픽셀들이 어떤 색상으로 그려질지 정의
       #ifdef GL_ES
       precision mediump float;
       #endif
       void main() {
           // Vertex Shader 에 의해 정의된 영역을 빨간색으로 칠한다.
           gl_FragColor = vec4(1.0,0.0,0.0,1.0);
       }
       
       
     Vertex Shader -> Rasterization -> Fragment Shader
     
     Rasterization : Viertex Shader에서 처리된 값들을 Fragment Shader가 					  처리 가능한 값으로 변환하는 작업

💫CPU vs GPU
CPU : 성능이 좋은 대포 한대, 단위 스레드당 처리할 수 있는 능력이 강력하고 빠름.
순차적으로 일처리. 한번에 하나 -> 그래픽 처리 시 한계가 존재
GPU : 여러대 소총 다발, 각각 업무를 나눠 맡아서 많은 분량의 일을 나눠서 처리. 화면을 빠르게 뽑아낼 수 있음
빠른 픽셀바이픽셀 연산 처리 가능

손에 잡히는 쉐이더 3강. GLSL 기본구조

강의 페이지 : https://thebookofshaders.com/02/
실습 : editor.thebookofshaders.com/

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
//gl_FragColor : 기본 내장변수
//vec4(r,g,b,a)
//안에 들어가는 크기는 0이상 1이하
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}

Shader의 데이터타입
기본 : float, int, bool
추가 : vec2(f f), vec3(f f f), vec4(f f f f) - f는 float타입 데이터 개수

*GLSL은 형변환에 엄격
float 같은 경우 float f=1; 이라고 하면 오류가 뜸. float f=1.;이라고 해야 함
integer 넣으면 안 됨!

---

Unity Shader 강의 다시 찾아서 들어야 함
위에건 웹에서 사용되는 GLSL 같음
웹 Shader는 추후 다시 공부