픽셀마다 계산하는데, 작업이 픽셀개수만큼 반복 ( 800*600 = 480,000이 매 프레임마다)
parallel processing.
크고 강력한 마이크로프로세서를 쓰는 대신, 작고 많은 마이크로프로세서를 동시에 병렬적으로 쓰는게 낫다. 이게 바로 Graphic Processor Unit(GPU)
GLSL = openGL Shading Language 쉐이더 프로그램 언어
왜 어려운가?
매 파이프마다 병렬적으로 돌리기 위해서, 모든 쓰레드가 독립적이어야 한다. 쓰레드는 다른 쓰레드가 뭘 하는지 모른다.
이런, blind하고 memoryless 제한이 있는 shader가 프로그래머 사이에서 인기 없게 만든다.
02/
1. shader 언어는 color를 return하는 하나의 main 함수를 갖는다.
2. 최종 픽셀 컬러는 global 변수 gl_FragColor 에 할당된다.
3. C와 비슷한 이 언어는 변수, 함수, 타입을 갖는다. 타입에는 vec2, vec3, vec4, float, int, bool 등..
4. vec4는 R, G, B, A 이고 이 값을 0.0, 1.0 사이의 값으로 정규화한다.
5. C언어의 특징과 같이 preprocessor macro가 있다. macro는 pre-compilation step중 하나다. #define으로 global변수를 선언해주고, 조건문을 실행한다. 모든 macro 문은 #로 시작한다. Pre-compilation은 컴파일 직전에 일어난다.
6. 쉐이더에서 float타입의 정확한 값은 매우 중요함. 정확도가 낮으면 렌더링이 빨라도 퀄리티가 떨어짐. precision mediump float; precision lowp float; precision highp float;
7. 젤 중요! GLSL는 변수가 알아서 casted(변환)되는걸 보장하지 않는다. float형 같은거 소수점 정확히 쓰라는 소리.
03/
uniform
GPU 가동될 때 쓰레드가 독립적이더라도 CPU로부터 받는 input은 같다. 이런 input을 uniform이라고 하고, float, vec2, vec3, vec4, vec5, mat2, mat3, mat4, smpler2D, samperCube 타입을 지원한다. default floating point precision 지정한 바로 다음에 선언된다.
gl_FragCoord
GLSL은 vec4 gl_FragColor같은 default output을 주듯이, vec4 gl_FragCoord같은 default input도 준다. 이 것은 픽셀로 화면 좌표나 쓰레드가 일하고 있는 screen fragment를 의미한다. vec4 gl_FragCoord으로 어느 쓰레드가 어느 부분에서 일하고 있는지 알 수 있다. gl_FragCoord는 쓰레드마다 값이 다르므로 uniform이라고 부르지 않고, varying이라고 부른다.
04/ Runnign your shader
three.js, processing 등 많음
05/ Algorithmic drawing
06/ Colors
GLSL에서 vector 타입으로 사용하는 좋은 이유 중 하나는, 원하는 순서로 속성을 결합할 수 있는데, 그래서 값 cast, mix가 쉽다. swizzle 이라고 부른다.
min(): 0.0 ~ 1.0 사이의 값으로 두 값을 백분율로 섞음.
07/ Shapes
Rectangle
Circles
'개발 > WebGL | Canvas' 카테고리의 다른 글
[WebGL] WebGL 개발 입문 (0) | 2017.06.06 |
---|---|
WebGL 기초 (0) | 2017.03.02 |
[threejs] material (0) | 2016.08.14 |
[three.js] light (0) | 2016.08.14 |
[three.js] camera (0) | 2016.08.14 |