WebGL - Shader

vertex/fragment shader

• Shader : 렌더링 효과를 계산하는 명령어.
  • VertexShader : 각 정점의 위치를 계산하는 Shader
  • FragmentShader : 정점들을 이어 선으로 만들었을시 생성되는 면들의 색을 채울 색을 계산하는 Shader. 즉, pixel 그리는 Shader

Vertex Shader. (출처 : https://webglfundamentals.org/webgl/lessons/ko/webgl-how-it-works.html)

위 이미지는 Vertex Shader 의 예제이고 아래는 Fragment Shader이다. 

Fragment Shader (출처 : https://webglfundamentals.org/webgl/lessons/ko/webgl-how-it-works.html)

위 이미지들을 보면 알겠지만,
Vertex Shader의 gl_Position은 정점의 위치를 결정하는 변수,
Fragment Shader는 gl_FragmentColor는 면의 색상을 결정하는 변수라는 것을 알 수 있다. 

즉, Vertex Shader 와 Fragment Shader의 궁극적인 목적은 gl_Position과 gl_FragmentColor에 원하는 값을 전달하는 것이다. (덤. 둘 모두 vec4 type의 데이터를 받는다.)

Shader는 GLSL로 작성되어 있다.

 

* GLSL(Graphics Library Shader Language) : C 언어를 기초로 한 상위 레벨 셰이딩 언어. (꽤나 전문적인 수학적 계산이 가능하고,  type에 굉장히 엄격하다는 특징이 있음)

---

https://ko.wikipedia.org/wiki/GLSL

GLSL - 위키백과, 우리 모두의 백과사전

https://webglfundamentals.org/webgl/lessons/resources/webgl-state-diagram.html?exampleId=smallest-glsl#no-help

WebGLFundamentals WebGL State Diagram

https://webglfundamentals.org/webgl/lessons/ko/webgl-how-it-works.html

WebGL 작동 원리

https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html

WebGL 기초