1. 3D Graphics 101
dalinaum@gmail.com

2. Who am I?

5. 22 years ago

8. 13 years later

12. Polygon. 폐곡선 도형.
a polygon /ˈpɒlɪɡɒn/ is a plane figure that is bounded
by a finite chain of straight line segments closing in a
loop to form a closed chain or circuit.

13. Triangles…

14. Quadrangles? Old style

15. TriangleFan

16. TriangleStrip

17. Winding Order:시계방향 등의 그려질 방향.
Curling:방향이 안 맞는 경우는 그리지 않음.

19. Goroud shading

21. Phong shading

22. • Ambient: 주변의 물체들로 부터 받는 색상 값. 빛을
직접 하지 않고 추정을 담음.
• Diffuse: 물체 고유의 색
• Specular: 하이라이트 색

23. Transform and Lightning
• GPU Transform and Lightning of vertices (1999)
• Forced the use of Gouraud / Phong lightning.

25. Shader
• 필요한 기능을 하드웨어에 내장하지 않고 소프트웨어 적으
로 구현.
• GLSL등의 언어를 사용함.
• 기본형은 버텍스 쉐이더와 프래그먼트(픽셀) 쉐이더.

26. Shader
• Vertex shader: 꼭지점 정보를 받아 그것을 가공하는 쉐이
더.
• Fragment(pixel) shader: 각 픽셀을 가공하는 쉐이더.

27. uniform mat4 u_mvpMatrix;
attribute vec4 a_position;
attribute vec4 a_color;
varying vec4 v_color;
void main()
{
gl_Position = u_mvpMatrix * a_position;
v_color = a_color;
}
Simple vertex shader

28. varying vec4 v_color;
void main()
{
gl_FragColor = v_color;
}
Simple fragment shader

29. varying vec4 vColor;
varying vec2 vTexCoord;
//declare uniforms
uniform sampler2D u_texture;
uniform float resolution;
uniform float radius;
uniform vec2 dir;
void main() {
vec4 sum = vec4(0.0);
vec2 tc = vTexCoord;
float blur = radius/resolution;
float hstep = dir.x;
float vstep = dir.y;
sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y

30. sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y
- 4.0*blur*vstep)) * 0.0162162162;
sum += texture2D(u_texture, vec2(tc.x - 3.0*blur*hstep, tc.y
- 3.0*blur*vstep)) * 0.0540540541;
sum += texture2D(u_texture, vec2(tc.x - 2.0*blur*hstep, tc.y
- 2.0*blur*vstep)) * 0.1216216216;
sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y
- 1.0*blur*vstep)) * 0.1945945946;
sum += texture2D(u_texture, vec2(tc.x, tc.y)) *
0.2270270270;
sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y
+ 1.0*blur*vstep)) * 0.1945945946;
sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y
+ 2.0*blur*vstep)) * 0.1216216216;
sum += texture2D(u_texture, vec2(tc.x + 3.0*blur*hstep, tc.y
+ 3.0*blur*vstep)) * 0.0540540541;

31. - 2.0*blur*vstep)) * 0.1216216216;
sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y
- 1.0*blur*vstep)) * 0.1945945946;
sum += texture2D(u_texture, vec2(tc.x, tc.y)) *
0.2270270270;
sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y
+ 1.0*blur*vstep)) * 0.1945945946;
sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y
+ 2.0*blur*vstep)) * 0.1216216216;
sum += texture2D(u_texture, vec2(tc.x + 3.0*blur*hstep, tc.y
+ 3.0*blur*vstep)) * 0.0540540541;
sum += texture2D(u_texture, vec2(tc.x + 4.0*blur*hstep, tc.y
+ 4.0*blur*vstep)) * 0.0162162162;
gl_FragColor = vColor * vec4(sum.rgb, 1.0);
}

32. • 음악의 필터에 프래그먼트 쉐이더를 사용하기도 합니다.
• 사진의 필터에 프래그먼트 쉐이더를 사용하기도 합니다.
• 정확하지 않은 대량의 연산에 프래그먼트 쉐이더를 사용하
기도 합니다.

33. Q & A