01 418382 ...

01418382 สภาพแวดลอมการทำางานคอมพวเตอรกราฟกส

การบรรยายครงท 1

ประมข ขนเงนpramook@gmail.com

วชานสอน...

• ใหคณสามารถเขยนโปรแกรมทางคอมพวเตอรกราฟกสสามมตของตวเองได– ใชภาษา C++– ควบคมการดจอดวย OpenGL และ GLSL

• ใหคณมความรทางเทคนคพนฐานเกยวกบคอมพวเตอรกราฟกส

• เราไมไดสอนเกยวกบการสรางงานศลปะหรอสเปเชยลเอฟเฟกต

ผสอน• ประมข ขนเงน– อเมล: pramook@gmail.com, fscipmk@ku.ac.th– โทรศพท: 08-5453-5857– ออฟฟศ: หองไมมเบอรเยองสำานกงานภาค– เวลาเขาพบ: พธและศกร เวลา 13.00 น. ถง 16.00 น.

หรอนดหมายลวงหนา

การใหคะแนน• การบาน 40%– เขยนโปรแกรม มประมาณ 4 ครง

• สอบกลางภาค 30%• สอบปลายภาค 30%• เกณฑการใหคะแนนอานเปลยนแปลงไดในอนาคต• ตดคะแนนองกลม• ตดคะแนนรวมหม 1 และ 200 ( หม 200 มคนเรยน

นอย)

ความรพนฐาน• รภาษา C++• เขยนโปรแกรมไดด– วชานมเขยนโปรแกรมเยอะ

• ความรพชคณตเชงเสน– เวกเตอรในปรภมสามมต– พหนาม– มทวนให

หนงสอ• David Shreiner et al. OpenGL Programming Guide:

The Official Guide to Learning OpenGL.– ดาวนโหลดไดท http://fly.cc.fer.hr/~unreal/theredbook/

• เวบไซตสอน OpenGL และ GLSL ตางๆ– http://www.lighthouse3d.com/opengl/index.shtml– http://nehe.gamedev.net/

เวบเพจ• http://access.cs.sci.ku.ac.th/~pramook/382• เชคบอยๆ• การบานจะใหไวในเวบเพจนเทานน• ไมพมพมาให

นโยบาย• การบานทกการบาน คณตองทำเอง– เขยนโปรแกรมตองพมพเอง– การบานขอเขยนตองเขยนเอง ดวยลายมอของตวเอง

• หมลอก– ถาลอกจะไมไดคะแนนสำาหรบการบานนน ทงคนลอกและคนใหลอก

– หามลอกโปรแกรมจากในอนเตอรเนตหรอหนงสอดวย• ถามเพอนได อานจากอนเตอรเนตหรอหนงสอได– บอกดวยวาทำางานกบใคร– บอกแหลงอางองดวย

คอมพวเตอรกรฟกส

คอมพวเตอรกราฟกส• การใชคอมพวเตอรเพอสรางและจดการสอวทศน• ประโยชน– ความบนเทง: ภาพยนตร, เกมส– การศกษา: ซมเลชน, สอประสม– อตสาหกรรม: CAD/CAM

ภาพยนตร

Monster Inc. Final Fantasy: The Spirit Within

การแสดงภาพทางวทยาศาสตร

การแสดงภาพทางวทยาศาสตร (ตอ)

Airflow around a Harrier Jet (NASA Ames)

การแสดงภาพทางการแพทย

MIT: Image-Guided Surgery Project

The Visible Hum

an Project

Computer Aided Design (CAD)

เกมส

Crytek: Crysis

เกมส

Kloonigames: Crayon Physics

ปญหาสำาคญ• การจดการแบบจำาลอง (modeling)– วธเกบขอมลวตถจรงในคอมพวเตอร

• การใหแสงและเงา (rendering)– นำาแบบจำาลองมาสรางเปนรปทสวยงาม

• การจดการความเคลอนไหว (animation)– วธสรางและเกบขอมลความเคลอนไหว– การจำาลองปรากฏการณธรรมชาต

การจดการแบบจำาลอง• แบบจำาลองสำาหรบ:– รปราง รปทรง– พนผว– สมบตการสะทอนและดดซบแสงของวตถ

• ปญหา– เกบขอมลอะไร?– จะดงขอมลจากวตถจรงๆ ไดอยางไร?

แบบจำาลองรปราง• สามเหลยมและหลายเหลยม

http://amber.rc.arizona.edu/dx/vtkDecimateDX.html

แบบจำาลองรปราง (ตอ)

• เสนโคงพหนาม

http://en.wikipedia.org/wiki/Nurbs

• Subdivision Surface

http://en.wikipedia.org/wiki/Subdivision_surface

• Pixar’s Geri’s Game

http://www.pixar.com/shorts/gg/index.html

แบบจำาลองพนผว• Texture Mapping

http://www.siggraph.org/education/materials/HyperGraph/mapping/r_wolfe/

แบบจำาลองพนผว (ตอ)

• Bump Mapping

การสรางแบบจำาลอง• สแกนเขามา• สรางเอาจากซอฟตแวร

การใหแสงและเงา• สรางรปภาพจากแบบจำาลองทางคณตศาสตร

http://en.wikipedia.org/wiki/Global_illumination

Physically Based Rendering

• ใหแสงเงาใหสมจรงตามหลกฟสกส

http://en.wikipedia.org/wiki/Rendering

Non-Photorealistic Rendering

• ใหสไมตรงกบความเปนจรงเพอความสวยงาม

The Legend of Zelda: The Wind Wakerhttp://en.wikipedia.org/wiki/Toon_shading

การจดการความเคลอนไหว• ขอมลความเคลอนไหวหนาตาเปนอยางไร?– โครงกระดก– การหมนของขอ

Ilya Baran and Jovan Popovic. Automatic Rigging and Animation of 3D Characters. SIGGRAPH 2007.

การจดการความเคลอนไหว• เกบขอมลอยางไร: Motion capture

การจำาลองปรากฏการณธรรมชาต• จำาลองอะไร?– ไฟ, นำา, ผา, ของแตก, ของนม, ควน, ฯลฯ

• แกสมการเชงอนพนธ• ไมตองถกตอง 100% แคสวยกพอ

ระบบคอมพวเตอรกรฟกสในเครองคอมพวเตอรสวนบคคล

ในเครองคอมของคณ...

รปทแลวมอะไรบาง?

• CPU, Memory, Bus– เรารดอยแลววามนทำาอะไร

• GPU– ทำางานเกยวกบกราฟกส– ขอมลเขา

• โมเดลรปทรง ( ตำาแหนงของจด ความเชอมโยงกนของจด และสของจด)• จตรกรรมฝาผนง

– ขอมลออก• รปบนหนาจอ

ภาพ• ตารางสเหลยมผนผา แตละชองมสหนงส• แตละชองเรยกวา พกเซล (pixel)

http://en.wikipedia.org/wiki/Pixels

ส• ส = เวกเตอร (R, G, B) เลขแตละตวมคาตงแต 0

ถง 1– R บอกระดบความเขมของแสงสแดง– G บอกระดบความเขมของแสงสเขยว– B บอกระดบความเขมของแสงสนำาเงน

Trichromatic Theory of Vision

• สทมนษยมองเหนแบงออกเปนสามสวน– แดง เขยว นำาเงน– ประสาทสมผสของมนษยของแตละสเปนอสระจากกน– สอนๆ เกดจาก การนำาสทงสามนมาประกอบกน

• หลกฐาน– เซลลโคนในเรตนามสามชนด– แตละชนดไวตอ สแดง สเขยว สนำาเงน ตามลำาดบ

สหลกๆ(1,0,0) (0,1,0)

(0,0,1)

(1,1,0)

(1,0,1) (0,1,1)

(1,1,1)

(0,0,0)

Graphics Pipeline

Graphics Pipeline (ตอ)

OPENGL และ GLUT

OpenGL

• Application Programming Interface (API) สำาหรบควบคม GPU

• ผใช OpenGL ระบรปทรงและรปรางพนฐาน ( จด เสน และรปหลายเหลยม) ผานทาง OpenGL

• OpenGL จะทำาหนาทสรางภาพไวบน framebuffer ให

• ใชสรางโปรแกรมทมการตอบสนองตอผใชแบบ ทนททนควน (interactive) และโปรแกรมทมภาพ

เคลอนไหว• ทำาหนาทเดยวกบ Direct3D และเปนคแขงทางการ

คากนอย

กายวภาคของโปรแกรมทางคอมพวเตอรกราฟฟกส

Direct3D 10OpenGL 2.1

GeForce 8800

web application

Radeon 9600

Unreal engine

Gears of War

graphics API

scene graph

application

คำาศพท• Bitplane– เนอทในหนวยความจำาทเกบขอมล 1 บทของทกพกเซลทอยบน

จอภาพ• Framebuffer– Bitplane หลายๆ bitplane ทเกบขอมลทงหมดทใชควบคมหนาจอ

• Buffer– Bitplane กลมหนงทใชเกบขอมลบางอยาง

• Application Programming Interface (API)– ฟงกชนและ object อนๆ ในภาษาระดบสงทใหโปรแกรมประยกตใช

สำาหรบตดตอกบระบบฮารดแวรหรอซอฟตแวรตางๆ

สงท OpenGL ไมทำา• จดการการตดตอกบผใช• จดการวนโดวส• วาดและจดการรปทรงทซบซอน เชน รถถง ตนไม

ฯลฯ– ถงแมวาคณจะสามารถใชรปทรงงายๆ ของ OpenGL

สรางมนไดกตาม– สวนใหญคณตองเขยน library ขนมาจดการกบพวกน

เอง• จดการ framebuffer– เปนความรบผดชอบของคณทตองเตรยม

framebuffer ให OpenGL

• OpenGL Utility Toolkit• ใชสำาหรบจดการการตดตอกบผใชและจดการ

วนโดวส– ทำาสงท OpenGL ไมทำา

• เอาไปใชเขยนโปรแกรมประยกตจรงๆ คงยาก– ไมม GUI Widget ใหใชเลย– ตองรบขอมลจากผใชตามท GLUT กำาหนด

• แตทำาใหการเรยนร OpenGL งายขนมาก

ตวอยางvoid draw() { glClearColor(0.0, 0.0, 0.0, 0.0) glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glBegin(GL_POLYGON); glVertex3f(-0.5, -0.5, 0.0); glVertex3f( 0.5, -0.5, 0.0); glVertex3f( 0.5, 0.5, 0.0); glVertex3f(-0.5, 0.5, 0.0); glEnd(); glFlush();}

int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); glutCreateWindow("whitesquare"); glutDisplayFunc(draw); glutMainLoop();}

OpenGL

เฉพาะสวนของ OpenGLglClearColor(0.0, 0.0, 0.0, 0.0)glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0, 1.0, 1.0);glBegin(GL_POLYGON); glVertex3f(-0.5, -0.5, 0.0); glVertex3f( 0.5, -0.5, 0.0); glVertex3f( 0.5, 0.5, 0.0); glVertex3f(-0.5, 0.5, 0.0);glEnd();glFlush();

ทละคำาสง• glClearColor(0.0, 0.0, 0.0, 0.0)– เปลยนสทจะใชลางหนาจอเปนสดำา

• glClear(GL_COLOR_BUFFER_BIT)– ลาง bitplane ทเกบสดวยสทกำาหนดใน glClearColor

• glColor3f(1.0, 1.0, 1.0)– เปลยนสเปนสขาว– จดทวาดตอจากนไปจะเปนสขาว

ทละคำาสง (ตอ)

• glBegin(GL_POLYGON)– บอกวาตอไปเราจะวาดรปหลายเหลยม

• glVertex3f(x, y, z)– กำาหนดจด

• glEnd()– บอกวาสงทเรมไปตงแต glBegin ทแลวไดเสรจสนแลว– ในทนคอบอกวากำาหนดรปหลายเหลยมเสรจแลว

• glFlush()– ทำาใหคำาสง OpenGL ทเคยสงมาถกนำาไปปฏบตงาน แทนทจะถก

เกบไวในหนวยความจำาเพอรอคำาสงอน

คำาสง OpenGL

• ขนตนดวย gl• ตามดวยชอคำาสง เชน Vertex หรอ Color• บางคำาสงอาจมจำานวนและชนด ของ argument– 3f บอกวาตองการ argument เปน float 3 ตว

• glVertex3f(1.0f, 3.0f, 4.0f);– 2i บอกวาตองการ argument เปน int 2 ตว

• glVertex2i(-1, 5);– 3fv บอกวาตองการ argument เปน pointer ไปยง float 3 ตว

• float colorArray[] = {1.0f, 0.0f, 0.0f}• glColor3fv(colorArray);

ชนดของ argument ในชอคำาสงSuffix Data Type Typical Corresponding

C-Language TypeOpenGL Type

Definition

b 8-bit integer signed char GLbytes 16-bit integer short GLshorti 32-bit integer long GLint, GLsizeif 32-bit floating-point float GLfloat, GLclampf

d 64-bit floating-point double GLdouble, GLclampd

ub 8-bit unsigned integer

unsigned char GLubyte, GLboolean

us 16-bit unsigned integer

unsigned short GLushort

ui 32-bit unsigned integer

unsigned long GLuint, GLenum, GLbitfield

OpenGL เปน State Machine

• OpenGL จะจำาคาตางๆ ทผใชกำาหนดไดเอาไว• เมอผใชกำาหนดคา คานนจะถกใชตอไปเรอยๆ จนกวาจะ

เปลยน• คาทจำาไว เชน– สทใชลางหนาจอ– สของจด– ทศทางและตำาแหนงของกลองถายรป

• ยกตวอยางเชน เวลาเราเรยก glColor3f(1,1,1) แลวสของ จดทกำาหนดดวย glVertex จะเปนสขาวไปจนกวาจะเรยก

glColor ใหมอกครง

โคดตวอยางเฉพาะสวนของ GLUT

int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); glutCreateWindow("whitesquare"); glutDisplayFunc(draw); glutMainLoop();}

glutInit

• glutInit(int *argc, char **argv)– ทำาการตงคาเรมตนหลายๆ คาของ GLUT– สงทตองสงใหคอ pointer ไปยงจำานวน argument

ของโปรแกรม และ argument อนๆ– ตองเรยกเปนคำาสงแรกกอนคำาสงอนของ GLUT

ทงหมด– ความจรงไมมอะไรมาก ปกตเราเขยน

int main(int argc, char ** argv)– กแคใหเรยก glutInit(&argc, argv) เปนคำาสงแรกใน

main กพอ

glutInitDisplay

• glutInitDisplay(unsigned int mode)– เลอกวาสของ pixel ในโปรแกรมของเราจะเปนแบบใด

• มใหเลอกสองแบบคอ RGB กบ Indexed Color• เราจะไมใช Indexed Color เลย

– เลอกวาจะใช single buffer หรอ double buffer• ใช double buffer จะทำาให animation ดลนไหลกวา

– เลอกวาจะใหม buffer อนๆ นอกจาก buffer สอะไรบาง• ปกตจะใชแค depth buffer สำาหรบเกบความลกของจดแตละจด

– คา mode เกดจากการเอาคาคงทของตวเลอกตางๆ มา or กน• ปกตเราจะใช GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH• กรณของ code ตวอยางใช GLUT_SINGLE | GLUT_RGBA

คำาสงสำาหรบจดการวนโดวส• glutCreateWindow(char *string)– สรางวนโดวทม title เปน string ทให

• glutInitWindowPosition(int x, int y)– กำาหนดตำาแหนงขอบบนของวนโดว

• glutInitWindowSize(int width, int height)– กำาหนดขนาดของวนโดว

glutDisplayFunc

• glutDisplayFunc(void (*func)(void))– กำาหนดฟงกชนท GLUT จะเรยกทกครงเมอมนตอง

วาดหนาจอใหม– ฟงกชนทจะสงให glutDisplayFunc ตองม prototype

void <ชอฟงกชน>(void)– ยกตวอยางเชนฟงกชน void draw() ในโคดตวอยาง– ฟงกชนนสวนมากจะเตมไปดวยคำาสง OpenGL

glutMainLoop

• glutMainLoop()– ฟงกชนสดทายทเราเรยกในโปรแกรม– สงให GLUT ไปทำางานของมน– งานของ GLUT• รบ input จากผใช• เรยกฟงกชนทใหใน glutDisplayFunc• เรมตนใหมอกครง

– ระวง: ตองสราง windows และกำาหนด displayFunc ใหเรยบรอยกอนเรยก glutMainLoop

กรยอขยยขนดวนโดว

เมอยอขยายวนโดว

ตองการอยางนมากกวา

glutReshapeFunc

• glutReshapeFunc(void (*func) (int width, int height))– ใหฟงกชนทรบ int สองตว– ฟงกชนทใหไปจะถกเรยกทกครงทวนโดวเปลยนขนาด– Argument ทเปน int สองตว• ตวแรกคอความกวางของหนาตางหลงถกเปลยนความ

กวาง หนวยเปนพกเซล• ตวทสองคอความสงของหนาตางหลงถกเปลยนความกวาง

หนวยเปนพกเซล– เราสามารถใชฟงกชนทให glutReshapeFunc ไปเปนตว

ปรบอตราสวนของรปทแสดงออกมาได

ตวอยางการใช glutReshapeFuncvoid reshape(int w, int h){

.........}

void draw(){

.........}

int main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGBA | GLUT_SINGLE);glutCreateWindow("window");glutReshapeFunc(reshape);glutDisplayFunc(draw);glutMainLoop();

Aspect Ratio

• อตราสวนระหวางความกวางของรปตอความสงของรป

• Aspect ratio ของรปสเหลยมสขาว = 1• เวลายอขยายหนาจอ aspect ratio เปลยนแมเราจะ

วาดรปทจดเดมกตาม• นเปนเพราะจดตางๆ ยายท

heightwidthratioaspect

Aspect Ratio (ตอ)(1,1)

(1,-1)(-1,-1)

(-1,1)

Aspect Ratio (ตอ)(1,1)(-1,1)

(-1,-1) (1,-1)

Aspect Ratio (ตอ)(1,1)(-1,1)

(1,-1)(-1,-1)

สงทเราตองการ• เวลายอหรอขยายวนโดว aspect ratio ของรปควร

จะมคาคงท แมวา aspect ratio ของวนโดวจะเปลยน

• แตเราไมตองการวาดรปใหม– ไมตองการเปลยนฟงกชน draw

• เราสามารถทำาไดโดยเปลยนระบบพกด(coordinate system) ของพนททเราจะวาดรปเสยใหม

กรณความกวางมากกวาความสง(1,1)

(1,-1)

(-1,1)

(-1,-1)

กรณความสงมากกวาความกวาง(1,1)

(1,-1)

(-1,1)

(-1,-1)

gluOrtho2D

• gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)

– ใชเปลยน projection matrix ใหเปนการฉายแบบ orthogonal projection• เราจะไปพดถงคำาศพทเหลานในอกประมาณสองอาทตยหนา

– ตอนนเขาใจวาเปนการเซตพกดของจดมมของบรเวณทเราจะวาดรป• มมลางซายเปน (left, bottom)• มมลางขวาเปน (right, bottom)• มมบนซายเปน (left, top)• มมบนขวาเปน (right, top)

gluOrtho2D (ตอ)

gluOrtho2D(-1,1,-1,1) gluOrtho2D(-2,2,-2,2)

gluOrtho2D(-1,1,-2,2)gluOrtho2D(-2,2,-1,1)

กรณความกวางมากกวาความสง (ตอ)

(1,-1)

(-1,1)

(-1,-1)

(right,top)

(right,bottom)

(left,top)

(left,bottom)

• bottom = -1• top = 1• left = ???, right = ???• แตเรารวา left = -right• สงเกตวา

เมอ w และ h คอความกวางและความสงของ วนโดว ตามลำาดบ

bottomtopleftright

• นนคอ

• ดงนน– left = w/h– right = -w/h

leftleftleftlefthw

)1(1)(

กรณความสงมากกวาความกวาง (ตอ)

(1,-1)

(-1,1)

(-1,-1)

(right,top)

(right,bottom)

(left,top)

(left,bottom)

กรณความสงมากกวาความกวาง(ตอ)

• left = -1• right = 1• top = ???, bottom = ???• เรารวา bottom = -top

• ดงนน top = h/w และ bottom = -h/w

toptoptoptopbottomtopleftright

)()1(1

Callback สำาหรบเวลาวนโดวเปลยนขนาด

void reshape(int w, int h){

glViewport(0,0,w,h);