418341 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 10
01 418382 ...
description
Transcript of 01 418382 ...
![Page 2: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/2.jpg)
วชานสอน...
• ใหคณสามารถเขยนโปรแกรมทางคอมพวเตอรกราฟกสสามมตของตวเองได– ใชภาษา C++– ควบคมการดจอดวย OpenGL และ GLSL
• ใหคณมความรทางเทคนคพนฐานเกยวกบคอมพวเตอรกราฟกส
• เราไมไดสอนเกยวกบการสรางงานศลปะหรอสเปเชยลเอฟเฟกต
![Page 3: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/3.jpg)
ผสอน• ประมข ขนเงน– อเมล: [email protected], [email protected]– โทรศพท: 08-5453-5857– ออฟฟศ: หองไมมเบอรเยองสำานกงานภาค– เวลาเขาพบ: พธและศกร เวลา 13.00 น. ถง 16.00 น.
หรอนดหมายลวงหนา
![Page 4: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/4.jpg)
การใหคะแนน• การบาน 40%– เขยนโปรแกรม มประมาณ 4 ครง
• สอบกลางภาค 30%• สอบปลายภาค 30%• เกณฑการใหคะแนนอานเปลยนแปลงไดในอนาคต• ตดคะแนนองกลม• ตดคะแนนรวมหม 1 และ 200 ( หม 200 มคนเรยน
นอย)
![Page 5: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/5.jpg)
ความรพนฐาน• รภาษา C++• เขยนโปรแกรมไดด– วชานมเขยนโปรแกรมเยอะ
• ความรพชคณตเชงเสน– เวกเตอรในปรภมสามมต– พหนาม– มทวนให
![Page 6: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/6.jpg)
หนงสอ• 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/
![Page 7: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/7.jpg)
เวบเพจ• http://access.cs.sci.ku.ac.th/~pramook/382• เชคบอยๆ• การบานจะใหไวในเวบเพจนเทานน• ไมพมพมาให
![Page 8: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/8.jpg)
นโยบาย• การบานทกการบาน คณตองทำเอง– เขยนโปรแกรมตองพมพเอง– การบานขอเขยนตองเขยนเอง ดวยลายมอของตวเอง
• หมลอก– ถาลอกจะไมไดคะแนนสำาหรบการบานนน ทงคนลอกและคนใหลอก
– หามลอกโปรแกรมจากในอนเตอรเนตหรอหนงสอดวย• ถามเพอนได อานจากอนเตอรเนตหรอหนงสอได– บอกดวยวาทำางานกบใคร– บอกแหลงอางองดวย
![Page 9: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/9.jpg)
คอมพวเตอรกรฟกส
![Page 10: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/10.jpg)
คอมพวเตอรกราฟกส• การใชคอมพวเตอรเพอสรางและจดการสอวทศน• ประโยชน– ความบนเทง: ภาพยนตร, เกมส– การศกษา: ซมเลชน, สอประสม– อตสาหกรรม: CAD/CAM
![Page 11: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/11.jpg)
ภาพยนตร
![Page 12: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/12.jpg)
ภาพยนตร
![Page 13: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/13.jpg)
ภาพยนตร
Monster Inc. Final Fantasy: The Spirit Within
![Page 14: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/14.jpg)
การแสดงภาพทางวทยาศาสตร
![Page 15: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/15.jpg)
การแสดงภาพทางวทยาศาสตร (ตอ)
Airflow around a Harrier Jet (NASA Ames)
![Page 16: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/16.jpg)
การแสดงภาพทางการแพทย
MIT: Image-Guided Surgery Project
The Visible Hum
an Project
![Page 17: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/17.jpg)
Computer Aided Design (CAD)
![Page 18: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/18.jpg)
เกมส
Crytek: Crysis
![Page 19: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/19.jpg)
เกมส
Kloonigames: Crayon Physics
![Page 20: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/20.jpg)
ปญหาสำาคญ• การจดการแบบจำาลอง (modeling)– วธเกบขอมลวตถจรงในคอมพวเตอร
• การใหแสงและเงา (rendering)– นำาแบบจำาลองมาสรางเปนรปทสวยงาม
• การจดการความเคลอนไหว (animation)– วธสรางและเกบขอมลความเคลอนไหว– การจำาลองปรากฏการณธรรมชาต
![Page 21: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/21.jpg)
การจดการแบบจำาลอง• แบบจำาลองสำาหรบ:– รปราง รปทรง– พนผว– สมบตการสะทอนและดดซบแสงของวตถ
• ปญหา– เกบขอมลอะไร?– จะดงขอมลจากวตถจรงๆ ไดอยางไร?
![Page 22: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/22.jpg)
แบบจำาลองรปราง• สามเหลยมและหลายเหลยม
http://amber.rc.arizona.edu/dx/vtkDecimateDX.html
![Page 23: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/23.jpg)
แบบจำาลองรปราง (ตอ)
• เสนโคงพหนาม
http://en.wikipedia.org/wiki/Nurbs
![Page 24: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/24.jpg)
แบบจำาลองรปราง (ตอ)
• Subdivision Surface
http://en.wikipedia.org/wiki/Subdivision_surface
![Page 25: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/25.jpg)
แบบจำาลองรปราง (ตอ)
• Pixar’s Geri’s Game
http://www.pixar.com/shorts/gg/index.html
![Page 26: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/26.jpg)
แบบจำาลองพนผว• Texture Mapping
http://www.siggraph.org/education/materials/HyperGraph/mapping/r_wolfe/
![Page 27: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/27.jpg)
แบบจำาลองพนผว (ตอ)
• Bump Mapping
+ =
![Page 28: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/28.jpg)
การสรางแบบจำาลอง• สแกนเขามา• สรางเอาจากซอฟตแวร
![Page 29: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/29.jpg)
การใหแสงและเงา• สรางรปภาพจากแบบจำาลองทางคณตศาสตร
http://en.wikipedia.org/wiki/Global_illumination
![Page 30: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/30.jpg)
Physically Based Rendering
• ใหแสงเงาใหสมจรงตามหลกฟสกส
http://en.wikipedia.org/wiki/Rendering
![Page 31: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/31.jpg)
Non-Photorealistic Rendering
• ใหสไมตรงกบความเปนจรงเพอความสวยงาม
The Legend of Zelda: The Wind Wakerhttp://en.wikipedia.org/wiki/Toon_shading
![Page 32: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/32.jpg)
![Page 33: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/33.jpg)
![Page 34: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/34.jpg)
![Page 35: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/35.jpg)
![Page 36: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/36.jpg)
![Page 37: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/37.jpg)
![Page 38: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/38.jpg)
![Page 39: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/39.jpg)
![Page 40: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/40.jpg)
![Page 41: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/41.jpg)
การจดการความเคลอนไหว• ขอมลความเคลอนไหวหนาตาเปนอยางไร?– โครงกระดก– การหมนของขอ
Ilya Baran and Jovan Popovic. Automatic Rigging and Animation of 3D Characters. SIGGRAPH 2007.
![Page 42: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/42.jpg)
การจดการความเคลอนไหว• เกบขอมลอยางไร: Motion capture
![Page 43: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/43.jpg)
การจำาลองปรากฏการณธรรมชาต• จำาลองอะไร?– ไฟ, นำา, ผา, ของแตก, ของนม, ควน, ฯลฯ
• แกสมการเชงอนพนธ• ไมตองถกตอง 100% แคสวยกพอ
![Page 44: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/44.jpg)
ระบบคอมพวเตอรกรฟกสในเครองคอมพวเตอรสวนบคคล
![Page 45: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/45.jpg)
ในเครองคอมของคณ...
![Page 46: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/46.jpg)
รปทแลวมอะไรบาง?
• CPU, Memory, Bus– เรารดอยแลววามนทำาอะไร
• GPU– ทำางานเกยวกบกราฟกส– ขอมลเขา
• โมเดลรปทรง ( ตำาแหนงของจด ความเชอมโยงกนของจด และสของจด)• จตรกรรมฝาผนง
– ขอมลออก• รปบนหนาจอ
![Page 47: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/47.jpg)
GPU
![Page 48: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/48.jpg)
ภาพ• ตารางสเหลยมผนผา แตละชองมสหนงส• แตละชองเรยกวา พกเซล (pixel)
http://en.wikipedia.org/wiki/Pixels
![Page 49: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/49.jpg)
ส• ส = เวกเตอร (R, G, B) เลขแตละตวมคาตงแต 0
ถง 1– R บอกระดบความเขมของแสงสแดง– G บอกระดบความเขมของแสงสเขยว– B บอกระดบความเขมของแสงสนำาเงน
![Page 50: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/50.jpg)
Trichromatic Theory of Vision
• สทมนษยมองเหนแบงออกเปนสามสวน– แดง เขยว นำาเงน– ประสาทสมผสของมนษยของแตละสเปนอสระจากกน– สอนๆ เกดจาก การนำาสทงสามนมาประกอบกน
• หลกฐาน– เซลลโคนในเรตนามสามชนด– แตละชนดไวตอ สแดง สเขยว สนำาเงน ตามลำาดบ
![Page 51: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/51.jpg)
สหลกๆ(1,0,0) (0,1,0)
(0,0,1)
(1,1,0)
(1,0,1) (0,1,1)
(1,1,1)
(0,0,0)
![Page 52: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/52.jpg)
Graphics Pipeline
![Page 53: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/53.jpg)
Graphics Pipeline (ตอ)
![Page 54: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/54.jpg)
Graphics Pipeline (ตอ)
![Page 55: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/55.jpg)
Graphics Pipeline (ตอ)
![Page 56: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/56.jpg)
Graphics Pipeline (ตอ)
![Page 57: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/57.jpg)
Graphics Pipeline (ตอ)
![Page 58: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/58.jpg)
Graphics Pipeline (ตอ)
![Page 59: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/59.jpg)
Graphics Pipeline (ตอ)
![Page 60: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/60.jpg)
Graphics Pipeline (ตอ)
![Page 61: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/61.jpg)
Graphics Pipeline (ตอ)
![Page 62: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/62.jpg)
OPENGL และ GLUT
![Page 63: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/63.jpg)
OpenGL
• Application Programming Interface (API) สำาหรบควบคม GPU
• ผใช OpenGL ระบรปทรงและรปรางพนฐาน ( จด เสน และรปหลายเหลยม) ผานทาง OpenGL
• OpenGL จะทำาหนาทสรางภาพไวบน framebuffer ให
• ใชสรางโปรแกรมทมการตอบสนองตอผใชแบบ ทนททนควน (interactive) และโปรแกรมทมภาพ
เคลอนไหว• ทำาหนาทเดยวกบ Direct3D และเปนคแขงทางการ
คากนอย
![Page 64: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/64.jpg)
กายวภาคของโปรแกรมทางคอมพวเตอรกราฟฟกส
Direct3D 10OpenGL 2.1
GeForce 8800
VRML
web application
Radeon 9600
Unreal engine
Gears of War
GPU
graphics API
scene graph
application
![Page 65: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/65.jpg)
คำาศพท• Bitplane– เนอทในหนวยความจำาทเกบขอมล 1 บทของทกพกเซลทอยบน
จอภาพ• Framebuffer– Bitplane หลายๆ bitplane ทเกบขอมลทงหมดทใชควบคมหนาจอ
• Buffer– Bitplane กลมหนงทใชเกบขอมลบางอยาง
• Application Programming Interface (API)– ฟงกชนและ object อนๆ ในภาษาระดบสงทใหโปรแกรมประยกตใช
สำาหรบตดตอกบระบบฮารดแวรหรอซอฟตแวรตางๆ
![Page 66: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/66.jpg)
สงท OpenGL ไมทำา• จดการการตดตอกบผใช• จดการวนโดวส• วาดและจดการรปทรงทซบซอน เชน รถถง ตนไม
ฯลฯ– ถงแมวาคณจะสามารถใชรปทรงงายๆ ของ OpenGL
สรางมนไดกตาม– สวนใหญคณตองเขยน library ขนมาจดการกบพวกน
เอง• จดการ framebuffer– เปนความรบผดชอบของคณทตองเตรยม
framebuffer ให OpenGL
![Page 67: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/67.jpg)
GLUT
• OpenGL Utility Toolkit• ใชสำาหรบจดการการตดตอกบผใชและจดการ
วนโดวส– ทำาสงท OpenGL ไมทำา
• เอาไปใชเขยนโปรแกรมประยกตจรงๆ คงยาก– ไมม GUI Widget ใหใชเลย– ตองรบขอมลจากผใชตามท GLUT กำาหนด
• แตทำาใหการเรยนร OpenGL งายขนมาก
![Page 68: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/68.jpg)
ตวอยาง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
GLUT
![Page 69: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/69.jpg)
เฉพาะสวนของ 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();
![Page 70: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/70.jpg)
ทละคำาสง• glClearColor(0.0, 0.0, 0.0, 0.0)– เปลยนสทจะใชลางหนาจอเปนสดำา
• glClear(GL_COLOR_BUFFER_BIT)– ลาง bitplane ทเกบสดวยสทกำาหนดใน glClearColor
• glColor3f(1.0, 1.0, 1.0)– เปลยนสเปนสขาว– จดทวาดตอจากนไปจะเปนสขาว
![Page 71: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/71.jpg)
ทละคำาสง (ตอ)
• glBegin(GL_POLYGON)– บอกวาตอไปเราจะวาดรปหลายเหลยม
• glVertex3f(x, y, z)– กำาหนดจด
• glEnd()– บอกวาสงทเรมไปตงแต glBegin ทแลวไดเสรจสนแลว– ในทนคอบอกวากำาหนดรปหลายเหลยมเสรจแลว
• glFlush()– ทำาใหคำาสง OpenGL ทเคยสงมาถกนำาไปปฏบตงาน แทนทจะถก
เกบไวในหนวยความจำาเพอรอคำาสงอน
![Page 72: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/72.jpg)
คำาสง 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);
![Page 73: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/73.jpg)
ชนดของ 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
![Page 74: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/74.jpg)
OpenGL เปน State Machine
• OpenGL จะจำาคาตางๆ ทผใชกำาหนดไดเอาไว• เมอผใชกำาหนดคา คานนจะถกใชตอไปเรอยๆ จนกวาจะ
เปลยน• คาทจำาไว เชน– สทใชลางหนาจอ– สของจด– ทศทางและตำาแหนงของกลองถายรป
• ยกตวอยางเชน เวลาเราเรยก glColor3f(1,1,1) แลวสของ จดทกำาหนดดวย glVertex จะเปนสขาวไปจนกวาจะเรยก
glColor ใหมอกครง
![Page 75: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/75.jpg)
โคดตวอยางเฉพาะสวนของ GLUT
int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); glutCreateWindow("whitesquare"); glutDisplayFunc(draw); glutMainLoop();}
![Page 76: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/76.jpg)
glutInit
• glutInit(int *argc, char **argv)– ทำาการตงคาเรมตนหลายๆ คาของ GLUT– สงทตองสงใหคอ pointer ไปยงจำานวน argument
ของโปรแกรม และ argument อนๆ– ตองเรยกเปนคำาสงแรกกอนคำาสงอนของ GLUT
ทงหมด– ความจรงไมมอะไรมาก ปกตเราเขยน
int main(int argc, char ** argv)– กแคใหเรยก glutInit(&argc, argv) เปนคำาสงแรกใน
main กพอ
![Page 77: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/77.jpg)
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
![Page 78: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/78.jpg)
คำาสงสำาหรบจดการวนโดวส• glutCreateWindow(char *string)– สรางวนโดวทม title เปน string ทให
• glutInitWindowPosition(int x, int y)– กำาหนดตำาแหนงขอบบนของวนโดว
• glutInitWindowSize(int width, int height)– กำาหนดขนาดของวนโดว
![Page 79: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/79.jpg)
glutDisplayFunc
• glutDisplayFunc(void (*func)(void))– กำาหนดฟงกชนท GLUT จะเรยกทกครงเมอมนตอง
วาดหนาจอใหม– ฟงกชนทจะสงให glutDisplayFunc ตองม prototype
void <ชอฟงกชน>(void)– ยกตวอยางเชนฟงกชน void draw() ในโคดตวอยาง– ฟงกชนนสวนมากจะเตมไปดวยคำาสง OpenGL
![Page 80: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/80.jpg)
glutMainLoop
• glutMainLoop()– ฟงกชนสดทายทเราเรยกในโปรแกรม– สงให GLUT ไปทำางานของมน– งานของ GLUT• รบ input จากผใช• เรยกฟงกชนทใหใน glutDisplayFunc• เรมตนใหมอกครง
– ระวง: ตองสราง windows และกำาหนด displayFunc ใหเรยบรอยกอนเรยก glutMainLoop
![Page 81: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/81.jpg)
กรยอขยยขนดวนโดว
![Page 82: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/82.jpg)
เมอยอขยายวนโดว
![Page 83: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/83.jpg)
ตองการอยางนมากกวา
![Page 84: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/84.jpg)
glutReshapeFunc
• glutReshapeFunc(void (*func) (int width, int height))– ใหฟงกชนทรบ int สองตว– ฟงกชนทใหไปจะถกเรยกทกครงทวนโดวเปลยนขนาด– Argument ทเปน int สองตว• ตวแรกคอความกวางของหนาตางหลงถกเปลยนความ
กวาง หนวยเปนพกเซล• ตวทสองคอความสงของหนาตางหลงถกเปลยนความกวาง
หนวยเปนพกเซล– เราสามารถใชฟงกชนทให glutReshapeFunc ไปเปนตว
ปรบอตราสวนของรปทแสดงออกมาได
![Page 85: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/85.jpg)
ตวอยางการใช 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();
}
![Page 86: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/86.jpg)
Aspect Ratio
• อตราสวนระหวางความกวางของรปตอความสงของรป
• Aspect ratio ของรปสเหลยมสขาว = 1• เวลายอขยายหนาจอ aspect ratio เปลยนแมเราจะ
วาดรปทจดเดมกตาม• นเปนเพราะจดตางๆ ยายท
heightwidthratioaspect
![Page 87: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/87.jpg)
Aspect Ratio (ตอ)(1,1)
(1,-1)(-1,-1)
(-1,1)
![Page 88: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/88.jpg)
Aspect Ratio (ตอ)(1,1)(-1,1)
(-1,-1) (1,-1)
![Page 89: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/89.jpg)
Aspect Ratio (ตอ)(1,1)(-1,1)
(1,-1)(-1,-1)
![Page 90: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/90.jpg)
สงทเราตองการ• เวลายอหรอขยายวนโดว aspect ratio ของรปควร
จะมคาคงท แมวา aspect ratio ของวนโดวจะเปลยน
• แตเราไมตองการวาดรปใหม– ไมตองการเปลยนฟงกชน draw
• เราสามารถทำาไดโดยเปลยนระบบพกด(coordinate system) ของพนททเราจะวาดรปเสยใหม
![Page 91: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/91.jpg)
กรณความกวางมากกวาความสง(1,1)
(1,-1)
(-1,1)
(-1,-1)
![Page 92: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/92.jpg)
กรณความสงมากกวาความกวาง(1,1)
(1,-1)
(-1,1)
(-1,-1)
![Page 93: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/93.jpg)
gluOrtho2D
• gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)
– ใชเปลยน projection matrix ใหเปนการฉายแบบ orthogonal projection• เราจะไปพดถงคำาศพทเหลานในอกประมาณสองอาทตยหนา
– ตอนนเขาใจวาเปนการเซตพกดของจดมมของบรเวณทเราจะวาดรป• มมลางซายเปน (left, bottom)• มมลางขวาเปน (right, bottom)• มมบนซายเปน (left, top)• มมบนขวาเปน (right, top)
![Page 94: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/94.jpg)
gluOrtho2D (ตอ)
gluOrtho2D(-1,1,-1,1) gluOrtho2D(-2,2,-2,2)
gluOrtho2D(-1,1,-2,2)gluOrtho2D(-2,2,-1,1)
![Page 95: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/95.jpg)
กรณความกวางมากกวาความสง (ตอ)
(1,1)
(1,-1)
(-1,1)
(-1,-1)
(right,top)
(right,bottom)
(left,top)
(left,bottom)
![Page 96: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/96.jpg)
กรณความกวางมากกวาความสง (ตอ)
• bottom = -1• top = 1• left = ???, right = ???• แตเรารวา left = -right• สงเกตวา
เมอ w และ h คอความกวางและความสงของ วนโดว ตามลำาดบ
bottomtopleftright
hw
![Page 97: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/97.jpg)
กรณความกวางมากกวาความสง (ตอ)
• นนคอ
• ดงนน– left = w/h– right = -w/h
leftleftleftlefthw
22
)1(1)(
![Page 98: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/98.jpg)
กรณความสงมากกวาความกวาง (ตอ)
(1,1)
(1,-1)
(-1,1)
(-1,-1)
(right,top)
(right,bottom)
(left,top)
(left,bottom)
![Page 99: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/99.jpg)
กรณความสงมากกวาความกวาง(ตอ)
• left = -1• right = 1• top = ???, bottom = ???• เรารวา bottom = -top
• ดงนน top = h/w และ bottom = -h/w
toptoptoptopbottomtopleftright
hw 1
22
)()1(1
![Page 100: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/100.jpg)
Callback สำาหรบเวลาวนโดวเปลยนขนาด
void reshape(int w, int h){
glViewport(0,0,w,h);
if (w == 0) w = 1;if (h == 0) h = 1;
double aspect = w * 1.0 / h;
glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w > h)gluOrtho2D(-aspect, aspect, -1, 1);elsegluOrtho2D(-1, 1, -1/aspect, 1/aspect);
}
![Page 101: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/101.jpg)
Callback สำาหรบเวลาวนโดวเปลยน ขนาด (ตอ)
void reshape(int w, int h){
glViewport(0,0,w,h);
if (w == 0) w = 1;if (h == 0) h = 1;
double aspect = w * 1.0 / h;
glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w > h)gluOrtho2D(-aspect, aspect, -1, 1);elsegluOrtho2D(-1, 1, -1/aspect, 1/aspect);
}
กน division by zero
![Page 102: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/102.jpg)
Callback สำาหรบเวลาวนโดวเปลยน ขนาด (ตอ)
void reshape(int w, int h){
glViewport(0,0,w,h);
if (w == 0) w = 1;if (h == 0) h = 1;
double aspect = w * 1.0 / h;
glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w > h)gluOrtho2D(-aspect, aspect, -1, 1);elsegluOrtho2D(-1, 1, -1/aspect, 1/aspect);
}
คำานวณ aspect ratio ของวนโดว
![Page 103: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/103.jpg)
Callback สำาหรบเวลาวนโดวเปลยน ขนาด (ตอ)
void reshape(int w, int h){
glViewport(0,0,w,h);
if (w == 0) w = 1;if (h == 0) h = 1;
double aspect = w * 1.0 / h;
glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w > h)gluOrtho2D(-aspect, aspect, -1, 1);elsegluOrtho2D(-1, 1, -1/aspect, 1/aspect);
}
กวาง > สง
![Page 104: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/104.jpg)
Callback สำาหรบเวลาวนโดวเปลยน ขนาด (ตอ)
void reshape(int w, int h){
glViewport(0,0,w,h);
if (w == 0) w = 1;if (h == 0) h = 1;
double aspect = w * 1.0 / h;
glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w > h)gluOrtho2D(-aspect, aspect, -1, 1);elsegluOrtho2D(-1, 1, -1/aspect, 1/aspect);
}
สง > กวาง
![Page 105: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/105.jpg)
glViewport
• void glViewport(GLint x, GLint y, GLsizei width, GLsizei height )
– กำาหนดพนทในวนโดวทจะใชแสดงผลภาพท OpenGL สราง– x, y, width, height มหนวยเปนพกเซล– พกด (x,y) กำาหนดตำาแหนงมมบนซายของพนท– width กำาหนดความกวางของพนท– height กำาหนดความสงของพนท
• ในตวอยางเราใช glViewport(0,0,w,h) หมายความวาเราใชพนททงหมดของวนโดว
![Page 106: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/106.jpg)
Callback สำาหรบเวลาวนโดวเปลยน ขนาด (ตอ)
• เราเรยกglMatrixMode(GL_PROJECTION);glLoadIdentity();กอนจะเรยกglOrtho2D(…);เพอกำาหนดระบบพกด
• ทงสองฟงกชนนเกยวของกบการกำาหนด viewing transform ซงเราจะพดถงในสองสปดาหหนา
• ตอนนใหจำาไปกอนวาตองเรยนสองฟงกชนนกอนใชglOrtho2D เสมอ
![Page 107: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/107.jpg)
วตถเรขคณตใน OPENGL
![Page 108: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/108.jpg)
วตถเรขาคณตใน OpenGL
• OpenGL สามารถวาดวตถเรขาคณตงายๆ ได 3 อยาง– จด– สวนของเสนตรง– รปหลายเหลยม
• ไมสามารถวาดเสนโคงหรอพนผวโคงได• แตเราสามารถวาดเสนโคงดวยการวาดเสนตรง
สนๆ หลายเสน
![Page 109: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/109.jpg)
Vertex
• การกำาหนดวตถทางเรขาคณตใน OpenGL ทำาได โดยการกำาหนด vertex “ ” หรอ จดมม ของวตถ
นน– จดใน OpenGL ม 1 vertex– สวนของเสนตรงใน OpenGL ม 2 vertices (เพราะสวน
ของเสนตรงเกดจากการลากเสนเชอมจดสองจด)– รปหลายเหลยมมจำานวน vertex เทากบจำานวนเหลยม• สามเหลยมม 3 vertices• สเหลยมม 4 vertices• n เหลยมม n vertices
![Page 110: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/110.jpg)
glVertex
• glVertex[234][sifd][v](TYPE coords)– ใชกำาหนดตำาแหนง vertex– สามารถม argument 2, 3, หรอ 4 ตวกได
• สตวตรงกบพกดแนว x, y, z, w– เราจะพดถงพกดแนว w ในสปดาหหนาเมอเรยนเรอง homogeneous
coordinate• ถาม 3 ตว จะเขาใจวา w = 1• ถาม 2 ตว จะเขาใจวา z = 0 และ w = 1• ปกตจะใช argument แค 3 ตว
– ตวอยาง:• glVertex2i(10, 5)• glVertex3d(8, 7, 3.14153265)
![Page 111: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/111.jpg)
glVertex (ตอ)
– เตม v ถาตองการให argument เปน pointer ไปยงarray ของพกด• GLint p0[] = {1,2,3};
glVertex3iv(p0);• GLfloat *p1 = {2.0f, 3.0f, 4.0f, 5.0f};
glVertex4fv(p1)
![Page 112: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/112.jpg)
การกำาหนดวตถเรขาคณต• เรมดวย glBegin(ชนดของวตถ) • หลงจากนนใช glVertex กำาหนด vertex ของวตถนน• แลวจบดวย glEnd()• ทเคยเหนมาจากการบรรยายครงทสอง:
glBegin(GL_POLYGON);glVertex3f(-0.5f, -0.5f, 0.0f);glVertex3f(0.5f, -0.5f, 0.0f);glVertex3f(0.5f, 0.5f, 0.0f);glVertex3f(-0.5f, 0.5f, 0.0f);
glEnd();
![Page 113: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/113.jpg)
ชนดของวตถ คาทเอาไปใสใน
glBegin(…)ชนดของวตถ
GL_POINTS จดGL_LINES สวนของเสนตรงGL_LINE_STRIP สวนของเสนตรงตอกนหลาย
เสน ปลายเปดGL_LINE_LOOP สวนของเสนตรงตอกนหลาย
เสน ปลายปดGL_TRIANGLES สามเหลยมGL_TRIANGLE_STRIP สามเหลยมตอกนเปนสายGL_TRIANGLE_FAN สามเหลยมตอกนเปนรปพดGL_QUADS สเหลยมGL_QUAD_STRIP สเหลยมตอกนเปนสายGL_POLYGON รปหลายเหลยม
![Page 114: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/114.jpg)
ชนดของวตถ (ตอ)
![Page 115: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/115.jpg)
glColor
• glColor[34][fd][v](TYPE colors)– ใชกำาหนดสใหกบ vertex– กำาหนดใหแลว vertex จะมสนนไปจนกวาจะเรยน glColor เพอ
เปลยนมน– สามารถม argument 3, หรอ 4 ตวกได
• Argument คอ r (สแดง), g (สเขยว), b (สนำาเงน), a (ความโปรงแสง)• แตละตวมคาตงแต 0.0 (ไมมความเขมเลย) ถง 1.0 (เขมเตมท)• ถาม argument สามตว a จะมคาเทากบ 1.0 (ทบแสง)
– ตวอยาง• glColor3f(1.0f, 1.0f, 0.0f) = สเหลอง• glColor4d(0.5f, 0.5f, 0.5f, 0.5f) = สเทา โปรงใส 50%
![Page 116: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/116.jpg)
glColor (ตอ)
– เตม v ถาตองการให argument เปน pointer ไปยงarray ของส• GLdouble color0[] = {0,1,1};
gColor3dv(p0);• GLfloat *color1 = {0.1f, 0.9f, 0.5f, 0.75f};
glVert4fv(p1)– ความโปรงแสงจะไมมผลจนกวาเราจะบอก OpenGL ให
จดการความโปรงแสงให (เรองนเราจะไปพดกอนสอบกลางภาคเลกนอย)
![Page 117: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/117.jpg)
ตวอยางglBegin(GL_TRIANGLES);
// RedglColor3f(1.0f, 0.5f, 0.5f);glVertex3f( 0.0f, 0.5f, 0.0f);glVertex3f(-0.25f, 0.0f, 0.0f);glVertex3f( 0.25f, 0.0f, 0.0f);
// GreenglColor3f(0.5f, 1.0f, 0.5f);glVertex3f( -0.25f, 0.0f, 0.0f);glVertex3f( -0.5f, -0.5f, 0.0f);glVertex3f( 0.0f, -0.5f, 0.0f);
// BlueglColor3f(0.5f, 0.5f, 1.0f);glVertex3f( 0.25f, 0.0f, 0.0f);glVertex3f( 0.0f, -0.5f, 0.0f);glVertex3f( 0.5f, -0.5f, 0.0f);
glEnd();
![Page 118: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/118.jpg)
ตวอยาง
glBegin(GL_QUADS);
glColor3f( 1.0f, 1.0f, 0.0f);glVertex3f(-0.5f, -0.5f, 0.0f);
glColor3f( 1.0f, 0.0f, 1.0f);glVertex3f( 0.5f, -0.5f, 0.0f);
glColor3f( 1.0f, 1.0f, 1.0f);glVertex3f( 0.5f, 0.5f, 0.0f);
glColor3f( 0.0f, 1.0f, 1.0f);glVertex3f(-0.5f, 0.5f, 0.0f);
glEnd();
![Page 119: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/119.jpg)
ตวอยาง
glBegin(GL_LINE_LOOP);for(int i=0;i<256;i++){
double theta = 2*i*M_PI/256;double y = 0.75*sin(theta);double x = 0.75*cos(theta);glVertex2d(x,y);
}glEnd();
![Page 120: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/120.jpg)
เกยวกบรปหลายเหลยม• OpenGL รบประกนวาจะวาดรปหลายเหลยมทจด
ทงหมดอยในระนาบเดยวกนไดถกตอง– ถาไมเปนเชนนนจะไมรบประกนวาจะถกตองหรอไม
• ขอสงเกต: จดทกจดทอยบนรปสามเหลยมอยบนระนาบเดยวกน– แตนไมเปนจรงสำาหรบสเหลยมหรอรปหลายเหลยมอน
![Page 121: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/121.jpg)
เกยวกบรปหลายเหลยม (ตอ)
• รปหลายเหลยมทวาดไดดวยglBegin(GL_POLYGON) จะมสมบตดงน– เสนขอบของมนจะตองไมตดกน– รปหลายเหลยมนนจะตองเปนรปหลายเหลยมนน– “ ”รปหลายเหลยมนนจะตองไมม ร
![Page 122: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/122.jpg)
รปหลายเหลยมนน (convex polygon)
• สำาหรบจดสองจดใดๆ ทอยในรปหลายเหลยม เมอ ลากสวนของเสนตรงเชอมจดสองจดนน สวนของ
เสนตรงนนตองอยในรปหลายเหลยมนนดวย• ขอสงเกต: สามเหลยมเปนรปหลายเหลยมนน
เสมอ
รปหลายเหลยมนน ไมใชรปหลายเหลยมนน
![Page 123: 01 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 1](https://reader035.fdocuments.net/reader035/viewer/2022081420/568163f8550346895dd58dd3/html5/thumbnails/123.jpg)
รปหลายเหลยมใดๆ• แลวเราจะวาดรปหลายเหลยมทไมใชรปหลาย
เหลยมนน หรอรปหลายเหลยมทมรอยางไร?• แยกรปหลายเหลยมเหลานนออกเปนรปหลาย
เหลยมนนหลายๆ รป