Download - 3D Graphics 101
![Page 2: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/2.jpg)
Who am I?
![Page 3: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/3.jpg)
![Page 4: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/4.jpg)
![Page 5: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/5.jpg)
22 years ago
![Page 6: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/6.jpg)
![Page 7: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/7.jpg)
![Page 8: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/8.jpg)
13 years later
![Page 9: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/9.jpg)
![Page 10: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/10.jpg)
![Page 11: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/11.jpg)
![Page 12: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/12.jpg)
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.
![Page 13: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/13.jpg)
Triangles…
![Page 14: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/14.jpg)
Quadrangles? Old style
![Page 15: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/15.jpg)
TriangleFan
![Page 16: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/16.jpg)
TriangleStrip
![Page 17: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/17.jpg)
Winding Order:시계방향 등의 그려질 방향.
Curling:방향이 안 맞는 경우는 그리지 않음.
![Page 18: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/18.jpg)
![Page 19: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/19.jpg)
Goroud shading
![Page 20: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/20.jpg)
![Page 21: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/21.jpg)
Phong shading
![Page 22: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/22.jpg)
• Ambient: 주변의 물체들로 부터 받는 색상 값. 빛을 직접 하지 않고 추정을 담음.
• Diffuse: 물체 고유의 색 • Specular: 하이라이트 색
![Page 23: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/23.jpg)
Transform and Lightning
• GPU Transform and Lightning of vertices (1999)
• Forced the use of Gouraud / Phong lightning.
![Page 24: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/24.jpg)
![Page 25: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/25.jpg)
Shader
• 필요한 기능을 하드웨어에 내장하지 않고 소프트웨어 적으로 구현.
• GLSL등의 언어를 사용함.
• 기본형은 버텍스 쉐이더와 프래그먼트(픽셀) 쉐이더.
![Page 26: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/26.jpg)
Shader
• Vertex shader: 꼭지점 정보를 받아 그것을 가공하는 쉐이더.
• Fragment(pixel) shader: 각 픽셀을 가공하는 쉐이더.
![Page 27: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/27.jpg)
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
![Page 28: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/28.jpg)
varying vec4 v_color;
void main() { gl_FragColor = v_color; }
Simple fragment shader
![Page 29: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/29.jpg)
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 - 4.0*blur*vstep)) * 0.0162162162;
![Page 30: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/30.jpg)
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; sum += texture2D(u_texture, vec2(tc.x + 4.0*blur*hstep, tc.y
![Page 31: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/31.jpg)
- 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); }
![Page 32: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/32.jpg)
• 음악의 필터에 프래그먼트 쉐이더를 사용하기도 합니다.
• 사진의 필터에 프래그먼트 쉐이더를 사용하기도 합니다.
• 정확하지 않은 대량의 연산에 프래그먼트 쉐이더를 사용하기도 합니다.
![Page 33: 3D Graphics 101](https://reader031.vdocuments.mx/reader031/viewer/2022022414/586f89691a28ab54768b5fd1/html5/thumbnails/33.jpg)
Q & A