418382...
-
Upload
tomasso-davock -
Category
Documents
-
view
82 -
download
0
description
Transcript of 418382...
![Page 1: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/1.jpg)
418382 สภาพแวดล้อมการทำ�างานคอมพ�วเตอร�กราฟิ�กส�การบรรยายคร��งทำ�� 3
ประม"ข ข�นเง�น[email protected]
![Page 2: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/2.jpg)
การแปลงในสามม�ติ�
![Page 3: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/3.jpg)
ในปร�ภ%ม�สามม�ต�• พ�ก�ดในสามม�ต�แทำนดวยล้�าด�บ (x,y,z)• หร'อดวย (x,y,z,w) ถ้าอย%)ในร%ป homogeneous
coordinate • homogeneous coordinate (x,y,z,w) หมายถ้*ง
พ�ก�ด (x/w, y/w, z/w) ในปร�ภ%ม�สามม�ต�
![Page 4: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/4.jpg)
ในปร�ภ%ม�สามม�ต� (ต)อ)
• พ�ก�ดในสามม�ต�สามารถ้เข�ยนไดอ�กแบบหน*�งในร%ป matrix
• ม�ความหมายเหม'อนก�บ homogeneous coordinate (x,y,z,1)
1
z
y
x
![Page 5: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/5.jpg)
การแปล้งในปร�ภ%ม�สามม�ต�• การแปล้งแอฟิไฟิน�สามชน�ดทำ��เร�ยนผ่)านมา– การเล้'�อนแกนขนาน (translation)– การย)อขยาย (scaling)– การหม"น (rotation)สามารถ้แทำนไดดวย matrix 4 ค%ณ 4
![Page 6: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/6.jpg)
การเล้'�อนแกนขนาน• ส�ญล้�กษณ�• ส)งพ�ก�ด (x,y,z) ไปย�งพ�ก�ด (x+a, y+b, z+c)• ม� matrix เป1น
cbaT ,,
1000
100
010
001
c
b
a
![Page 7: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/7.jpg)
การย)อขยายขนาด• ส�ญล้�กษณ� • ส)งพ�ก�ด (x,y,z) ไปย�งพ�ก�ด (ax, by, cz)• น��เป1นการย)อขยายรอบพ�ก�ด (0,0,0) เน'�องจาก
พ�ก�ด (0,0,0) ไม)เปล้��ยนแปล้ง• ม� matrix เป1น
cbaS ,,
1000
000
000
000
c
b
a
![Page 8: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/8.jpg)
การหม"น• เวล้าหม"นจะตองบอกสองอย)าง– แกนทำ��จะใชหม"น– ม"มทำ��จะใชหม"น
• เวล้าระบ"แกนเราจะระบ"ดวยเวกเตอร� (a,b,c)• แกนค'อเสนตรงทำ��เก�ดจากจ"ดทำ��งหมดทำ��อย%)ในร%ป (at,
bt, ct) เม'�อ t เป1นจ�านวนจร�งใดๆ• แกนจะผ่)านจ"ด (0,0,0) เสมอ• เวล้าทำ�าการหม"น จ"ดทำ��อย%)บนแกนจะไม)เคล้'�อนทำ��• ม"มทำ��จะใชหม"นส)วนใหญ)จะใชส�ญล้�กษณ� θ
![Page 9: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/9.jpg)
การหม"นรอบแกน z• แกน z ค'อเซตของพ�ก�ดต)างๆ ทำ��อย%)ในร%ป (0, 0, t)• สามารถ้ระบ"ไดดวยเวกเตอร� (0,0,1)• ส�ญล้�กษณ�• ส)งพ�ก�ด ไปย�งพ�ก�ด
1,0,0,R
1
z
y
x
1
cossin
sincos
z
yx
yx
![Page 10: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/10.jpg)
การหม"นรอบแกน z (ต)อ)
• ม� matrix เป1น
1000
0100
00cossin
00sincos
![Page 11: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/11.jpg)
การหม"นรอบแกน x• แกน x ค'อเซตของพ�ก�ดต)างๆ ทำ��อย%)ในร%ป (t, 0, 0)• สามารถ้ระบ"ไดดวยเวกเตอร� (1,0,0)• ส�ญล้�กษณ�• ส)งพ�ก�ด ไปย�งพ�ก�ด
0,0,1,R
1
z
y
x
1
cossin
sincos
zy
zy
x
![Page 12: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/12.jpg)
การหม"นรอบแกน x (ต)อ)
• ม� matrix เป1น
1000
0cossin0
0sincos0
0001
![Page 13: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/13.jpg)
การหม"นรอบแกน y• แกน z ค'อเซตของพ�ก�ดต)างๆ ทำ��อย%)ในร%ป (0, t, 0)• สามารถ้ระบ"ไดดวยเวกเตอร� (0,1,0)• ส�ญล้�กษณ�• ส)งพ�ก�ด ไปย�งพ�ก�ด
0,1,0,R
1
z
y
x
1
sincos
cossin
xz
y
xz
![Page 14: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/14.jpg)
การหม"นรอบแกน y (ต)อ)
• ม� matrix เป1น
1000
0cos0sin
0010
0sin0cos
![Page 15: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/15.jpg)
การหม"นรอบแกนใดๆ• ส�ญล้�กษณ�• ม� matrix เป1น
เม'�อ แล้ะ
cbaR ,,,
1000
0)1()1()1(
0)1()1()1(
0)1()1()1(
2
2
2
CCcaSCcbbSCca
aSCbcCCbcSCba
bSCaccSCabCCa
cosC sinS
![Page 16: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/16.jpg)
การแปล้ง affine
• การแปล้ง affine ค'อการแปล้งทำ��สามารถ้เข�ยนอย%)ในร%ป matrix
1000
nkfc
mjeb
lida
![Page 17: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/17.jpg)
ระบบพ�ก�ด• ระบบพ�ก�ดเป1นต�วก�าหนดว)าพ�ก�ดใดแทำนจ"ดใด• พ�ก�ดแล้ะจ"ด?– พ�ก�ดค'อล้�าด�บของเล้ขสามต�ว: (x,y,z)– จ"ดค'อจ"ดทำ��เราเห5นดวยตา
• ระบบพ�ก�ดในสามม�ต�ม�ส)วนประกอบอย%)สามส)วน– จ"ดออร�จ�น o: จ"ดน��จะแทำนดวยพ�ก�ด (0,0,0) ในระบบ
พ�ก�ด– เวกเตอร�สามต�ว i, j, แล้ะ k ส�าหร�บก�าหนดทำ�ศทำางแกน
x, y, แล้ะ z ตามล้�าด�บ
![Page 18: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/18.jpg)
ระบบพ�ก�ด (ต)อ)
• พ�ก�ด (x,y,z) ในระบบพ�ก�ดน��จ*งหมายถ้*งจ"ดo + xi + yj + zk
กล้)าวค'อม�นค'อจ"ดทำ��อย%)ห)างจากจ"ด oไปตามแนวเวกเตอร� i เป1นระยะ x เทำ)าของความยาวเวกเตอร� Iไปตามแนวเวกเตอร� j เป1นระยะ y เทำ)าของความยาวเวกเตอร� jไปตามแนวเวกเตอร� k เป1นระยะ z เทำ)าของความยาวเวกเตอร� k
![Page 19: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/19.jpg)
ระบบพ�ก�ด• เข�ยนไดอ�กแบบหน*�งว)าพ�ก�ด (x,y,z) หมายถ้*งจ"ด
1
z
y
x
okji
![Page 20: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/20.jpg)
ระบบพ�ก�ดก�บการแปล้ง• พ�จารณาการแปล้ง affine
1000
nkfc
mjeb
lida
M
![Page 21: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/21.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
• ม�นส)งพ�ก�ด ไปย�งพ�ก�ด
1
z
y
x
1
nkzfycx
mjzeybx
lizdyax
![Page 22: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/22.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
• พ%ดไดอ�กอย)างหน*�งค'อ M ส)งจ"ด
ไปย�งจ"ด
1
z
y
x
okji
110001
z
y
x
nkfc
mjeb
lida
nkzfycx
mjzeybx
lizdyax
okjiokji
![Page 23: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/23.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
• แต)เราอาจมองไดอ�กว)า
ม�ค)าเทำ)าก�บ
11000
z
y
x
nkfc
mjeb
lida
okji
1
z
y
x
nmlokjifedcba kjikjikjikji
![Page 24: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/24.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)• ด�งน��นการแปล้ง M จ*งสามารถ้มองไดว)าเป1นการเปล้��ยน
ระบบพ�ก�ดจากระบบพ�ก�ดทำ��– ม� o เป1นจ"ดออร�จ�น– ม� i เป1นต�วก�าหนดทำ�ศทำางแกน x– ม� j เป1นต�วก�าหนดทำ�ศทำางแกน y– ม� k เป1นต�วก�าหนดทำ�ศทำางแกน zเป1นระบบพ�ก�ดทำ��– ม� o+li+mj+nk เป1นจ"ดออร�จ�น– ม� ai+bj+ck เป1นต�วก�าหนดทำ�ศทำางแกน x– ม� di+ej+fk เป1นต�วก�าหนดทำ�ศทำางแกน y– ม� ii+jj+kk เป1นต�วก�าหนดทำ�ศทำางแกน z
![Page 25: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/25.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
• หร'อกล้)าวไดอ�กอย)างหน*�งค'อ– จ"ดออร�จ�นใหม)ค'อจ"ดทำ��ม�พ�ก�ด (l,m,n) ในระบบพ�ก�ดเด�ม– เวกเตอร�แกน x ใหม) ค'อเวกเตอร� (a,b,c) ในระบบพ�ก�ด
เด�ม– เวกเตอร�แกน y ใหม) ค'อเวกเตอร� (d,e,f) ในระบบพ�ก�ด
เด�ม– เวกเตอร�แกน z ใหม) ค'อเวกเตอร� (i,j,k) ในระบบพ�ก�ด
เด�ม
![Page 26: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/26.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
1000
nkfc
mjeb
lida
แกน x ใหม�
![Page 27: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/27.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
1000
nkfc
mjeb
lida
แกน y ใหม�
![Page 28: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/28.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
1000
nkfc
mjeb
lida
แกน z ใหม�
![Page 29: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/29.jpg)
ระบบพ�ก�ดก�บการแปล้ง (ต)อ)
1000
nkfc
mjeb
lida
จุ�ด origin ใหม�
![Page 30: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/30.jpg)
Homogeneous Coordinate ก�บเวกเตอร�
• Homogeneous coodinate สามารถ้ใชแทำนไดทำ��งจุ�ดแล้ะเวกเติอร�
• ถ้า w ใน (x,y,z,w) เป1น 1 แสดงว)าม�นแทำนจ"ด– ถ้าม�นไม)ใช) 1 ใหเอา w ไปหาทำ"กต�วเพ'�อทำ�าใหม�นเป1น 1
เส�ย• ถ้า w ใน (x,y,z,w) เป1น 0 แสดงว)าม�นแทำนเวก
เตอร� (ทำ�ศทำาง)
![Page 31: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/31.jpg)
จ"ดก�บเวกเตอร�• จ"ด ค'อ ต�าแหน)ง“ ”• เวกเตอร� ค'อ ทำ�ศทำาง“ ”• ค"ณเอาเวกเตอร�สองเวกเตอร�มาบวกก�นได
1v
2v
213 vvv
![Page 32: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/32.jpg)
จ"ดก�บเวกเตอร� (ต)อ)
• แต)ค"ณเอาจ"ดสองจ"ดมาบวกก�นไม)ได
• แต)เอาจ"ดมาบวกก�นเวกเตอร�ได จะไดจ"ดอ�กจ"ดหน*�ง
1p2p ???21 pp
1p
2pv 21 pvp
![Page 33: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/33.jpg)
จ"ดก�บเวกเตอร� (ต)อ)
• ในทำ�านองเด�ยวก�น ค"ณสามารถ้หาผ่ล้ต)างของจ"ดได ซ*�งจะไดผ่ล้ล้�พธ์�ออกมาเป1นเวกเตอร�
• ยกต�วอย)างเช)น
1p
2pv 21 pvp
0
3
2
0
1
1
2
3
1
5
4
3
![Page 34: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/34.jpg)
จ"ดก�บเวกเตอร� (ต)อ)
• การแปล้ง affine ม�ผ่ล้ต)อจ"ดแล้ะเวกเตอร�ต)างก�น
แต)
1
)(
)(
)(
11000
nkzfycx
mjzeybx
lizdyax
z
y
x
nkfc
mjeb
lida
001000
kzfycx
jzeybx
izdyax
z
y
x
nkfc
mjeb
lida
![Page 35: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/35.jpg)
จ"ดก�บเวกเตอร� (ต)อ)
• ให – M เป1นการแปล้ง affine– p เป1นจ"ด– ให v เป1นเวกเตอร�
• ไดว)า – Mp เป1นจ"ด– Mv เป1นเวกเตอร�
• ในการแปล้งจ"ดจะม�การเล้'�อนแกนขนานต�ดมาดวย• แต)ในการแปล้งเวกเตอร� จะไม)ม�การเล้'�อนแกนขนาน
ต�ดมาดวย
![Page 36: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/36.jpg)
TRANSFORMATIONS IN THE GRAPHICS PIPELINE
![Page 37: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/37.jpg)
OpenGL Vertex Transformations
• ล้�าด�บของ transform ทำ�� vertex หน*�งจะตองผ่)านไปก)อนทำ��ม�นจะถ้%กเปล้��ยนเป1น fragment
![Page 38: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/38.jpg)
OpenGL Vertex Transformation (ต)อ)
1
Transform
Model
Transform
View
Transform
Projection
Divide
ePerspectiv
Transform
Viewport
1
0 o
o
o
w
w
z
y
x
y
x
![Page 39: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/39.jpg)
Modeling Transform
• Object space ค'อระบบพ�ก�ดทำ��ศ�ล้ป�นทำ�าการข*�นโมเดล้มาให
• World space ค'อระบบพ�ก�ดกล้างของฉากทำ��โมเดล้หล้ายๆ โมเดล้มาอย%)ร )วมก�น
• Modeling transform ทำ�าหนาทำ��เปล้��ยน vertex จากทำ��อย%)ใน object space มาอย%)ใน world space
• ในขณะเด�ยวก�นม�นอาจจะเปล้��ยนแปล้งหนาตาหร'อทำ)าทำางของโมเดล้ไดดวย
![Page 40: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/40.jpg)
Modeling Transform (ต)อ)
![Page 41: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/41.jpg)
View Transform
• View transform ใชในการเซตม"มกล้อง• Eye space ค'อระบบพ�ก�ดทำ��– ตาเราอย%)ทำ��จ"ด (0,0,0)– เรามองไปในทำ�ศทำางแกน z ทำางล้บ (ในทำ�ศทำางของเวก
เตอร� –k)– ทำ�ศทำางแกน y ค'อ “ดานบน”
• View transform เปล้��ยน vertex ทำ��อย%)ใน world space มาอย%)ใน eye space
![Page 42: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/42.jpg)
View Transform (ต)อ)
![Page 43: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/43.jpg)
View Transform (ต)อ)
x
y
z
x
ylookatpoint
eyepoint
![Page 44: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/44.jpg)
Modelview Matrix
• OpenGL รวมข��นตอนการทำ�า modeling transform แล้ะ view transform เขาดวยก�นเป1นข��นตอนเด�ยว
• แทำนการแปล้งจาก object space ไปเป1น eye space ดวย modelview matrix
ModelViewModelview
![Page 45: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/45.jpg)
การจ�ดการก�บ Modelview Matrix
• เปล้��ยน mode ของ matrix เป1น modelview matrix ดวยค�าส��ง glMatrixMode(GL_MODELVIEW)
• หล้�งจากน��นใชค�าส� �งอ'�นๆ– glLoadIdentity– glTranslate[fd]– glScale[fd]– glRotate[fd]– glMultMatrix[fd]
![Page 46: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/46.jpg)
ค�าส��งเก��ยวก�บ matrix
• glLoadIdentity()– ทำ�าใหค)าของ matrix ใน mode ป:จจ"บ�นทำ�� OpenGL จ�าไว
เป1น identity matrix
• glTranslate[fd](a,b,c)– สมมต�ว)า matrix ใน mode ป:จจ"บ�นค'อ M– ค�าส��งน��จะทำ�าให matrix ป:จจ"บ�นกล้ายเป1น MTa,b,c
• glScale[fd](a,b,c)– ค�าส��งน��จะทำ�าให matrix ป:จจ"บ�นกล้ายเป1น MSa,b,c
![Page 47: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/47.jpg)
ค�าส��งเก��ยวก�บ matrix (ต)อ)
• glRotate[fd](a, x, y, z)– a ค'อ ม"มทำ��จะหม"น หน)วยเป1นองศา (ไม)ใช)เรเด�ยน!)– x, y, แล้ะ z ระบ"แกนทำ��จะหม"น– ค�าส��งน��จะทำ�าให matrix ป:จจ"บ�นกล้ายเป1น MRa,x,y,z
![Page 48: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/48.jpg)
ค�าส��งเก��ยวก�บ matrix (ต)อ)
• glMultMatrix[fd](m)– m ค'อ list ของเล้ข 16 ต�ว– สมมต�ว)าให m = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p]– ค�าส��งน��จะทำ�าให matrix ป:จจ"บ�นกล้ายเป1น
plhd
okgc
njfb
miea
M
![Page 49: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/49.jpg)
LookAt Transform
• การเซตม"มกล้องอย)างง)ายแบบหน*�ง• บอก– eye = ต�าแหน)งของตา– at = ต�าแหน)งทำ��ตามอง– up = ทำ�ศทำางดานบน
![Page 50: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/50.jpg)
การเปล้��ยนระบบพ�ก�ดของ LookAt Transform
x
y
zx
y
z
atpoint
eyepointEye Space
WorldSpace
up
![Page 51: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/51.jpg)
gluLookAt
• gluLookAt(eyeX, eyeY, eyeZ, atX, atY, atZ, upX, upY, upZ)– ค%ณ matrix ของ mode ป:จจ"บ�นดวย matrix ทำ��
transform ระบบพ�ก�ดโดยทำ�าให• จ"ด (0,0,0) ในระบบพ�ก�ดใหม)ค'อจ"ด eye• ทำ�ศทำาง –z ของระบบพ�ก�ดใหม)ค'อทำ�ศทำางจากจ"ด eye ไปย�ง
จ"ด at– กล้)าวค'อแกน z ม�ทำ�ศทำางเด�ยวก�บเวกเตอร� eye – at
• ทำ�ศทำางของแกน y จะคล้ายๆ ก�บทำ�ศทำาง up
![Page 52: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/52.jpg)
ต�วอย)าง• ตองการเซตม"มกล้องใหกล้องอย%)ทำ��จ"ด (-5,-5,-5)
แล้วมองไปทำ��จ"ด (0,0,0) แล้ะม�เวกเตอร� (1,-1,0) เป1นดานบน
glMatrixMode(GL_MODELVIEW);glLoadIdentity();gluLookAt(-5,-5,-5,0,0,0,1,-1,0);(วาดร%ปอะไรอย)างอ'�นต)อไป)
![Page 53: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/53.jpg)
Projection Transformation
• เปล้��ยน eye space เป1น clip space• พ�ก�ดใน clip space จะใชเป1นต�วบอกว)าเราจะเห5น
vertex ใดหร'อไม)เห5น vertex ใด• กระบวนการต�ดส�นใจ: vertex ทำ��เห5นจะตองม�– -1 ≤ x ≤ 1– -1 ≤ y ≤ 1– -1 ≤ z ≤ 1
• Projection transform ย�งม�ผ่ล้ต)อล้�กษณะภาพทำ��เราเห5นอ�กดวย
![Page 54: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/54.jpg)
Projection Transform ใน OpenGL
• OpenGL จะจ�า matrix ของ projection transform เอาไว
• เวล้าตองการเปล้��ยนแปล้ง projection matrix ใหเปล้��ยน mode ของ matrix เป1น GL_PROJECTION ดวยค�าส��งglMatrixMode(GL_PROJECTION);
• หล้�งจากน��นใชค�าส��งในการเปล้��ยนแปล้ง matrix อ'�นแบบเด�ม เช)น glLoadIdentity(), glMultMatrix(…), ฯล้ฯ
• ส)วนมากเราจะส��ง glLoadIdentity() ทำ�นทำ�หล้�งจากส��ง glMatrixMode(GL_PROJECTION) เสร5จแล้ว เพ'�อเคล้�ยร�ค)า projection matrix ก)อนใส)ค)าใหม)
![Page 55: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/55.jpg)
Projection Transformation ทำ��ส�าค�ญ 2 แบบ
• Orthographic Projection• Perspective Projection
![Page 56: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/56.jpg)
Orthographic Projection
• ปร�มาตรของบร�เวณทำ��เห5นเป1นปร�ซ*ม• ไม)ม� foreshortening กล้)าวค'อ ไม)ว)าว�ตถ้"จะอย%)ใกล้
ไกล้ก5เห5นขนาดเทำ)าก�นหมด• หล้�งจากฉาก เสนขนานย�งเป1นเสนขนานอย%)• ใชในโปรแกรมช)วยเข�ยนแบบ/CAD เน'�องจาก
ขนาดของว�ตถ้"เป1นเร'�องส�าค�ญ
![Page 57: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/57.jpg)
Orthographic Projection (ต)อ)
http://www2.arts.ubc.ca/TheatreDesign/crslib/drft_1/orthint.htm
![Page 58: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/58.jpg)
Orthographic Projection (ต)อ)
http://www2.arts.ubc.ca/TheatreDesign/crslib/drft_1/cad/wdstv.htm
![Page 59: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/59.jpg)
การน�ยาม Orthographic Projection
• น�ยามไดโดยการน�ยามปร�ซ*มของปร�มาตรทำ��เราตองการมองเห5น
• ปร�ซ*มน��สามารถ้น�ยามไดดวยต�วเล้ข 3 ค%)– left แล้ะ right --- ขอบเขตในแนวแกน x– top แล้ะ bottom --- ขอบเขตในแนวแกน y– near แล้ะ far --- ขอบเขตในแนวแกน -z (เพราะเรามองในแนว -z)
• ค)าทำ��งหกเป1นพ�ก�ดใน eye space• ปร�ซ*มทำ��น�ยามค'อ
{(x,y,z) : left ≤ x ≤ right, top ≤ y ≤ bottom, near ≤ -z ≤ far}
![Page 60: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/60.jpg)
ปร�ซ*มปร�มาตรทำ��มองเห5น
![Page 61: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/61.jpg)
การน�ยาม Orthographic Projection (ต)อ)
• Matrix ของ orthographic projection ตองทำ�าอะไรบา– ส)ง x = left ไป x = -1– ส)ง x = right ไป x = 1– ส)ง y = bottom ไป y = -1– ส)ง y = top ไป y = 1– ส)ง z = -far ไป z = 1– ส)ง z = -near ไป z = -1
![Page 62: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/62.jpg)
Matrix ของ Orthographic Projection
1000
200
02
0
002
nf
nf
nf
bt
bt
bt
lr
lr
lr
![Page 63: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/63.jpg)
ค�าส��ง OpenGL เก��ยวก�บ Orthographic Projection
• glOrtho(left, right, bottom, top, near, far)– ค%ณ matrix ป:จจ"บ�นดวย matrix ของ orthographic
projection ในหนาก)อน– ก)อนใชควรเร�ยก
glMatrixMode(GL_PROJECTION)glLoadIdentity()
ก)อนเพ'�อเปล้��ยน mode แล้ะเคล้�ยร�ค)า projection matrix เด�ม
• glOrtho2D(left, right, bottom, top)– เหม'อนก�บ glOrtho แต)ใหค)า near เป1น 0 แล้ะ ค)า far เป1น 1
![Page 64: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/64.jpg)
Perspective Projection
• ปร�มาตรของบร�เวณทำ��เห5นเป1น frustum (ป<ระม�ดยอดต�ด)
• ม� foreshortening กล้)าวค'อ อะไรทำ��อย%)ใกล้จะเห5นใหญ)กว)า
• หล้�งจากฉายแล้ว เสนขนานอาจจะไม)ขนานก�นเหม'อนเด�ม
• ใหความเป1นสามม�ต� เพราะเหม'อนก�บทำ��ตาคนทำ�างาน ทำ�าใหเหม'อนเขาไปอย%)ในฉากจร�งๆ
• ใชก�บโปรแกรมทำางความบ�นเทำ�ง
![Page 65: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/65.jpg)
Perspective Projection (ต)อ)
![Page 66: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/66.jpg)
Perspective Projection (cont.)
orthographic perspective
![Page 67: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/67.jpg)
การน�ยาม Perspective Projection
• น�ยามดวยเล้ข 6 ต�วเหม'อนก�บ orthographic projection
![Page 68: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/68.jpg)
การน�ยาม Perspective Projection (ต)อ)
• ปร�มาตรทำ��มองเห5นค'อป<ระม�ดยอดต�ดทำ��ม�ยอดเป1นส��เหล้��ยม{(x,y,z) : left ≤ x ≤ right, bottom ≤ y ≤ top,
z = -near}ซ*�งยอดของม�นถ้%กฉายต)อไปจนถ้*ง z = -far
![Page 69: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/69.jpg)
การน�ยาม Perspective Projection (ต)อ)
• ใหจ"ด (x,y,z) มาใน eye space แล้วม�นจะถ้%กแปล้งเป1นอะไรใน clip space?
nzeye
fzeye
1clipx
lxeye
zzeye
(0,0,0)
rxeye
1clipx
(x,y,z)
![Page 70: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/70.jpg)
การน�ยาม Perspective Projection (ต)อ)
• หา x ใน clip space
nzeye
fzeye
1clipx
lxeye
zzeye
(0,0,0)
rxeye
1clipx
(x,y,z)
???clipx
![Page 71: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/71.jpg)
การน�ยาม Perspective Projection (ต)อ)
• เร��มจากการหา x ใน eye space ของจ"ดปล้ายสองจ"ด
nzeye
fzeye
1clipx
lxeye
zzeye
(0,0,0)
rxeye
1clipx
(x,y,z)
???clipx
???, righteyex???, lefteyex
![Page 72: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/72.jpg)
การน�ยาม Perspective Projection (ต)อ)
• อาศ�ยความร% เร'�องสามเหล้��ยมคล้าย ไดว)าด�งน��น
???, righteyex
rxeye
nzeye
zzeye
(0,0,0)
n
z
r
x righteye
,
n
zrx righteye ,
![Page 73: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/73.jpg)
การน�ยาม Perspective Projection (ต)อ)
• ทำ�านองเด�ยวก�น ด�งน��น
nzeye
lxeye
zzeye
(0,0,0)
???, lefteyex
n
z
l
x lefteye
,
n
zlx lefteye ,
![Page 74: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/74.jpg)
การน�ยาม Perspective Projection (ต)อ)
• เราร% ว)า ส�าหร�บค)าคงทำ�� a แล้ะ b บางต�ว
1clipx
zzeye
(0,0,0)
1clipx
(x,y,z)
???clipx
n
zrx righteye ,
n
zlx lefteye ,
baxxclip
![Page 75: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/75.jpg)
การน�ยาม Perspective Projection (ต)อ)
• เน'�องจากถ้า x = -zl/n แล้ว xclip = -1
แล้ะถ้า x = -zr/n แล้ว xclip = 1
• ไดว)า
• เม'�อแกสมการออกมาจะไดว)า
bn
zra
bn
zla
1
1
lr
lrb
zlr
na
)(
2
![Page 76: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/76.jpg)
การน�ยาม Perspective Projection (ต)อ)
• กล้)าวค'อ
• ในทำ�านองเด�ยวก�นเราก5จะไดว)า
lr
lrxzlr
nxclip
)(
2
bt
btyzbt
nyclip
)(
2
![Page 77: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/77.jpg)
การน�ยาม Perspective Projection (ต)อ)
• แล้ว zclip ควรจะม�ค)าเทำ)าไหร)?• ค)า zclip จะถ้%กใชเป1น ความล้*ก ของ “ ” fragment
• zclip จะตองม�ค"ณสมบ�ต�สองประการ– ถ้า z นอย zclip ก5ตองนอยตามไปดวย– perspective matrix จะตองส)งเสนตรงไปย�งเสนตรง
• ต�วอย)าง zclip ทำ��ใชไม)ได– zclip=z
– 222 zyxzclip
![Page 78: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/78.jpg)
การน�ยาม Perspective Projection (ต)อ)
• zclip ทำ�� OpenGL ใชม�ร%ป
• เน'�องจาก zclip= -1 ถ้า z = -n
แล้ะ zclip= 1 ถ้า z = -f
จะไดว)า
z
BAzclip
f
BA
n
BA
1
1
![Page 79: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/79.jpg)
การน�ยาม Perspective Projection (ต)อ)
• เม'�อแกสมการออกมาแล้วจะไดว)า
• กล้)าวค'อnf
nfA
nf
fnB
2
znf
fn
nf
nfzclip )(
2
![Page 80: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/80.jpg)
การน�ยาม Perspective Projection (ต)อ)
• กล้)าวค'อ perspective projection matrix จะตองส)ง
1
z
y
x
znf
fnz
nf
nf
zbt
bty
bt
n
zlr
lrxlr
n
znf
fn
nf
nfbt
btyzbt
nlr
lrxzlr
n
2
2
2
1)(
2)(
2)(
2
ไปย�ง
![Page 81: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/81.jpg)
Matrix ของ Perspective Projection
0100
200
02
0
002
nf
fn
nf
nfbt
bt
bt
nlr
lr
lr
n
![Page 82: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/82.jpg)
ค�าส��ง OpenGL เก��ยวก�บ Perspective Projection
• glFrustum(left, right, bottom, top, near, far)– ค%ณ matrix ป:จจ"บ�นดวย matrix ของ perspective
projection ในหนาก)อน– ก)อนใชควรเร�ยก
glMatrixMode(GL_PROJECTION)glLoadIdentity()
ก)อนเพ'�อเปล้��ยน mode แล้ะเคล้�ยร�ค)า projection matrix เด�ม
![Page 83: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/83.jpg)
ค�าส��ง OpenGL เก��ยวก�บ Perspective Projection (ต)อ)
• gluPerspective(fovy, aspect, near, far)– ค%ณ matrix ป:จจ"บ�นดวย perspective projection
matrix เช)นเด�ยวก�บ glFrustrum– ม�ผ่ล้เหม'อนก�บส��ง glFrustum โดยได• top = near * tan(fovy / 2)• bottom = -top• right = aspect * top• left = -right
![Page 84: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/84.jpg)
ค�าส��ง OpenGL เก��ยวก�บ Perspective Projection (ต)อ)
– fovy ย)อมาจาก field of view Y หมายถ้*งความกวางของม"มมองตามแนวแกน y (ม�หน)วยเป1นองศา)
– aspect ค'อ aspect ratio ของหนาต�ดของป<ระม�ด– ป<ระม�ดทำ�� gluPerspective สรางม�หนาตาเป1นด�งขาง
ล้)าง
![Page 85: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/85.jpg)
ค�าส��ง OpenGL เก��ยวก�บ Perspective Projection (ต)อ)
• ส�งเกตว)าค�าส��ง glFrustum สามารถ้สรางป<ระม�ดทำ��ไม)สมมาตรรอบแกน z ได
• แต)ป<ระม�ดทำ��สรางดวย gluPerspective จะเป1นป<ระม�ดทำ��สมมาตรรอบแกน z เสมอ
![Page 86: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/86.jpg)
TRANSFORMATIONS IN MODELING
![Page 87: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/87.jpg)
การแปล้งก�บการวาดภาพ• การแปล้งสามารถ้น�ามาใชสรางภาพทำ��ม�ความซ�บ
ซอนไดมากมาย• เราจะมาด%ต�วอย)างการสราง แฟรกติ�ล (fractal)– ร%ปทำ��พอเอาแว)นขยายส)องด%แล้วเห5นเป1นล้�กษณะ
เหม'อนก�บตอนไม)ไดใชแว)นขยายด%
![Page 88: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/88.jpg)
Sierpinski Triangle
![Page 89: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/89.jpg)
Sierpinski Triangle
• เพ'�อความง)ายในการสราง เราจะแบ)ง Sierpinski triangle ออกเป1นช��นๆ
• ช��นทำ�� 0 เป1นสามเหล้��ยมดานเทำ)าธ์รรมดา
![Page 90: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/90.jpg)
Sierpinski Triangle
• ช��นทำ�� 1 เก�ดจากการเอา Sierpiński triangle ช��นทำ�� 0 ทำ��ย)อส)วนล้งสองเทำ)ามาเร�ยงก�นตามร%ปขางล้)างน��
![Page 91: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/91.jpg)
Sierpinski Triangle
• Sierpiński Triangle ช��นทำ�� 2 เก�ดจากการเอา Sierpiński triangle ช��นทำ�� 1 ทำ��ย)อส)วนล้งสองเทำ)ามาเร�ยงก�นตามร%ปขางล้)างน��
![Page 92: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/92.jpg)
Sierpinski Triangle
• Sierpiński Triangle ช��นทำ�� 3 เก�ดจากการเอา Sierpiński triangle ช��นทำ�� 2 ทำ��ย)อส)วนล้งสองเทำ)ามาเร�ยงก�นตามร%ปขางล้)างน��
![Page 93: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/93.jpg)
Sierpinski Triangle
• Sierpiński Triangle ช��นทำ�� k เก�ดจากการเอา Sierpiński triangle ช��นทำ�� k-1 ทำ��ย)อส)วนล้งสองเทำ)ามาเร�ยงก�นตามร%ปเด�ม
• ขางล้)างน��ค'อ Sierpiński triangle ประมาณช��นทำ�� 8
![Page 94: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/94.jpg)
เราจะวาด Sierpinski Triangle ไดอย)างไร?
• เข�ยนฟิ:งก�ช�น void draw_sierpinski(int k) ทำ��ทำ�าการวาด Sierpinski Triangle ช��นทำ�� k
• ม�กฎอย%)สองขอในการวาด Sierpinski Triangle– ถ้า k = 0 ใหวาดสามเหล้��ยมดานเทำ)า– ถ้า k > 0 ใหวาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
เร�ยงก�นตามร%ปทำ��เราเคยเห5นมา
![Page 95: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/95.jpg)
วาดสามเหล้��ยมดานเทำ)า• ตองการวาดสามเหล้��ยมดานเทำ)าความยาวดานล้ะ 1
หน)วย• จ"ดศ%นย�กล้าง (จ"ด centroid) อย%)ทำ��จ"ด (0,0)¡
0; 1p3
¢
¡12; 1
2p
3
¢¡¡ 1
2; 12p
3
¢
![Page 96: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/96.jpg)
วาดสามเหล้��ยมดานเทำ)าvoid draw_triangle(){glBegin(GL_LINE_LOOP);
glVertex2d( 0.0, 1.0/sqrt(3.0));glVertex2d( 0.5, -0.5/sqrt(3.0));glVertex2d(-0.5, -0.5/sqrt(3.0));
glEnd();}
![Page 97: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/97.jpg)
ผ่ล้ล้�พธ์�
![Page 98: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/98.jpg)
ฟิ:งก�ช�น draw_sierpinskivoid draw_sierpinski(int k){if (k == 0)
draw_triangle();else{
// วาด Sierpinski triangle// ช��นทำ�� k-1 สามอ�น
}}
![Page 99: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/99.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• วาดอย)างไร?– เร�ยก draw_sierpinski(k-1)
• วาดตรงไหน?centroid =
¡0; 1
2p
3
¢
centroid =¡
14; ¡ 1
4p
3
¢centroid =
¡¡ 1
4;¡ 14p
3
¢
![Page 100: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/100.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• วาด Sierpinski Triangle อ�นบน– Translate centroid ไปเป1นจ"ด – Scale ขนาดล้ดล้ง 2 เทำ)า (= ขยาย 0.5 เทำ)า)
• วาด Sierpinski Triangle อ�นล้)างขวา– Translate centroid ไปเป1นจ"ด – Scale ขนาดล้ดล้ง 2 เทำ)า (= ขยาย 0.5 เทำ)า)
• วาด Sierpinski Triangle อ�นล้)างซาย– Translate centroid ไปเป1นจ"ด – Scale ขนาดล้ดล้ง 2 เทำ)า (= ขยาย 0.5 เทำ)า)
¡0; 1
2p
3
¢
¡14; ¡ 1
4p
3
¢
¡¡ 1
4; ¡ 14p
3
¢
![Page 101: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/101.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
void draw_sierpinski(int k){
if (k == 0)draw_triangle();
else{
glLoadIdentity();glTranslated(0.0, 0.5 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);
glLoadIdentity();glTranslated(0.25, -0.25 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);
glLoadIdentity();glTranslated(-0.25, -0.25 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);
}}
![Page 102: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/102.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• draw_siepinski(0)
![Page 103: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/103.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• draw_siepinski(1)
![Page 104: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/104.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• draw_siepinski(2)
![Page 105: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/105.jpg)
วาด Sierpinski Triangle ช��นทำ�� k-1 สามอ�น
• draw_siepinski(2)
???
![Page 106: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/106.jpg)
เก�ดอะไรข*�น?
ระบบพ�ก�ดส�าหร�บวาด Siepinski triangle ระด�บ k = I
![Page 107: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/107.jpg)
เก�ดอะไรข*�น?
ระบบพ�ก�ดส�าหร�บวาด Siepinski triangle บน ค'อ TUS0.5 =MU
ระบบพ�ก�ดส�าหร�บวาด Siepinski triangle ขวา ค'อ TRS0.5 =MR
ระบบพ�ก�ดส�าหร�บวาด Siepinski triangle ซาย ค'อ TLS0.5 =ML
![Page 108: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/108.jpg)
เก�ดอะไรข*�น?
MUMU
MUMRMUML
MLMU
MLMRMLML
MRMU
MRMRMRML
![Page 109: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/109.jpg)
พ�จารณา code ใหม)อ�กคร��งMODELVIEW = M
glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1);
MODELVIEW = ???glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1);
![Page 110: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/110.jpg)
พ�จารณา code ใหม)อ�กคร��งMODELVIEW = M
glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1);
MODELVIEW = ???glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1);
ความจุร�งแล�ว MODELVIEW ควรม�ค�าเท่�าก�บ MTS!!!
![Page 111: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/111.jpg)
พ�จารณา code ใหม)อ�กคร��งMODELVIEW = M
glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1); MODELVIEW = ???
MODELVIEW = ???glLoadIdentity(); MODELVIEW = IglTranslated(...); MODELVIEW = TglScaled(...); MODELVIEW = TSdraw_sierpinski(k-1); MODELVIEW = ???
ติรงจุ�ดสองจุ�ดน�� MODELVIEW ควรม�ค�าเท่�าก�บ M
![Page 112: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/112.jpg)
แล้วจะตองทำ�าอะไร?
• ก)อนส��ง glTranslated(…) ตองม�การจ�าค)าเมตร�กซ� MODELVIEW อ�นเด�มเอาไว
• หล้�งเร�ยก draw_sierpinski(…) ตองม�การเอาค)า MODELVIEW อ�นเด�มค'นกล้�บมา
![Page 113: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/113.jpg)
glPushMatrix() แล้ะ glPopMatrix()
• glPushMatrix()– ทำ�าการ push ค)าของเมตร�กซ�ใน mode ป:จจ"บ�นล้ง
stack
• glPopMatrix()– pop stack ทำ��เก5บค)าเมตร�กซ�เอาไวแล้วน�าค)าทำ��ไดไปให
• เราสามารถ้ใชฟิ:งก�ช�นสองฟิ:งก�ช�นน��ในการ จ�า “ ”transform ได
![Page 114: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/114.jpg)
เข�ยนใหม)MODELVIEW = M
glPushMatrix(); MODELVIEW = M (จ�า)glTranslated(...); MODELVIEW = MTglScaled(...); MODELVIEW = MTSdraw_sierpinski(k-1); MODELVIEW = ???glPopMatrix(); MODELVIEW = M
glPushMatrix(); MODELVIEW = M (จ�า)glTranslated(...); MODELVIEW = MTglScaled(...); MODELVIEW = MTSdraw_sierpinski(k-1); MODELVIEW = ???glPopMatrix(); MODELVIEW = M
![Page 115: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/115.jpg)
ทำ��งฟิ:งก�ช�นvoid draw_sierpinski(int k){
if (k == 0)draw_triangle();
else{
glPushMatrix();glTranslated(0.0, 0.5 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);glPopMatrix();
glPushMatrix();glTranslated(0.25, -0.25 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);glPopMatrix();
glPushMatrix();glTranslated(-0.25, -0.25 / sqrt(3.0), 0.0);glScaled(0.5, 0.5, 0.5);draw_sierpinski(k-1);glPopMatrix();
}}
![Page 116: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/116.jpg)
ผ่ล้ล้�พธ์�• draw_sierpinski(2)
![Page 117: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/117.jpg)
ผ่ล้ล้�พธ์�• draw_sierpinski(3)
![Page 118: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/118.jpg)
ผ่ล้ล้�พธ์�• draw_sierpinski(4)
![Page 119: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/119.jpg)
ผ่ล้ล้�พธ์�• draw_sierpinski(8)
![Page 120: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/120.jpg)
HIERARCHICAL SCENE ORGANIZATION
![Page 121: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/121.jpg)
การจ�ดฉาก• ฉากประกอบดวยว�ตถ้"หล้ายๆ อย)าง• ศ�ล้ป�นสรางว�ตถ้"แต)ล้ะช��นข*�นมาใน object space
ของม�นเอง• ว�ตถ้"แต)ล้ะว�ตถ้"จะตองถ้%กแปล้งจากทำ��อย%)ใน object
space ใหมาอย%)ใน world space
![Page 122: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/122.jpg)
ต�วอย)างฉาก
ภาพจาก Durand and Cutler, 6.837 Fall 2003 Lecture Note: Transformations 2: In Modeling
![Page 123: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/123.jpg)
ฉากต�วอย)าง
(0,0)
x=0 x=2x=-2
y=0
y=-1
y=1.2
![Page 124: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/124.jpg)
ว�ตถ้"• สมมต�ว)าศ�ล้ป�นสรางว�ตถ้"ใหเรามาสองอย)าง– Circle: วงกล้มร�ศม�หน*�งหน)วยทำ��ม�จ"ดศ%นย�กล้างอย%)ทำ��
จ"ด (0,0)– Square: ส��เหล้��ยมจ�ต"ร�สทำ��ม�จ"ดม"มล้)างซายอย%)ทำ��จ"ด (-1,-
1) แล้ะม"มบนขวาอย%)ทำ�� (1,1)
• เราจะสรางฉากทำ��เห5นในสไล้ด�ทำ��แล้วอย)างไร?y
x-2
-1 12
1
2
-1
-2
y
x-2
-1 12
1
2
-1
-2
![Page 125: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/125.jpg)
การจ�ดฉากแบบเป1นล้�าด�บข*�น• เวล้าจ�ดฉากเราม�กจะแบ)งม�นเป1นล้�าด�บข��น
ฉาก
เกาอ�� โต>ะแล้ะถ้าดผ่ล้ไมโต>ะ ถ้าดผ่ล้
ไมSquare Square Square
Square Square Square Square Circle Circle
พ'�น
Square
![Page 126: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/126.jpg)
วาดเกาอ��• เราเล้'อก object space ของเกาอ��ใหม"มล้)างซาย
ของม�นอย%)ทำ��จ"ด (0,0)
(0,0)y=0
y=1
y=2
![Page 127: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/127.jpg)
วาดเกาอ��• ขาหนา
– ยายจ"ดศ%นย�กล้างไปอย%)ทำ�� (0.1, 0.35)– ขยายตามแกน x = 0.1 เทำ)า ตามแกน y = 0.35 เทำ)า– วาด Square
• พ'�น– ยายจ"ดศ%นย�กล้างไปอย%)ทำ�� (0.3, 0.8)– ขยายตามแกน x = 0.3 เทำ)า ตามแกน y = 0.1 เทำ)า– วาด Square
• ขาหล้�งแล้ะพน�ก– ยายจ"ดศ%นย�กล้างไปอย%)ทำ�� (0.7, 1.1)– ขยายตามแกน x = 0.1 เทำ)า ตามแกน y = 1.1 เทำ)า– วาด Square
![Page 128: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/128.jpg)
Scene Graph
• เราสามารถ้แทำนการแปล้งแล้ะการวาดภาพในสไล้ด�ทำ��แล้วไดดวยแผ่นภาพทำ��เร�ยกว)า scene graph
เกาอ��
Square
T0:3;0:8;0:0
S0:3;0:1;1:0
Square
T0:1;0:35;0:0
S0:1;0:35;1:0
Square
T0:7;1:1;0:0
S0:1;1:1;1:0
![Page 129: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/129.jpg)
โคด• เราสามารถ้เปล้��ยน scene graph เป1นโคดไดอย)างง)ายดายvoid draw_chair(){
glPushMatrix();glTranslated(0.1, 0.35, 0.0);glScaled(0.1, 0.35, 1.0);draw_square(...);glPopMatrix();
glPushMatrix();glTranslated(0.3, 0.8, 0.0);glScaled(0.3, 0.1, 1.0);draw_square(...);glPopMatrix();
glPushMatrix();glTranslated(0.7, 1.1, 0.0);glScaled(0.1, 1.1, 1.0);draw_square(...);glPopMatrix();
}
![Page 130: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/130.jpg)
วาดส)วนประกอบอ'�นๆ ของฉาก• สมมต�ว)าเราสรางฟิ:งก�ช�น– draw_table() เพ'�อวาดโต>ะ โดยทำ��ม"มล้)างซายของม�น
อย%)ทำ��จ"ด (0,0)– draw_tray() เพ'�อวาดถ้าดผ่ล้ไม โดยทำ��ม"มล้)างซายของ
ม�นอย%)จ"ด (0,0)– draw_floor() เพ'�อวาดพ'�น
• ฟิ:งก�ช�นพวกน��สามารถ้สรางไดเหม'อน draw_chair()
• โคดจร�งๆ ไปด%ไดในโคดต�วอย)าง
![Page 131: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/131.jpg)
วาดส)วนประกอบอ'�นๆ ของฉาก• เราสามารถ้วาดโต>ะแล้ะถ้าดผ่ล้ไมไดด�งต)อไปน��– วาดโต>ะโดยการเร�ยก draw_table()– วาดถ้าดผ่ล้ไม• ยายจ"ดม"มซายไปอย%)ทำ��จ"ด (0.8, 1.3)• แล้วเร�ยก draw_tray()
![Page 132: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/132.jpg)
Scene Graph ของโต>ะแล้ะถ้าด
โต>ะแล้ะถ้าด
ถ้าด
T0:8;1:3;0:0โต>ะ
![Page 133: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/133.jpg)
โคดvoid draw_table_and_tray(){draw_table();
glPushMatrix();glTranslated(0.8, 1.3, 0.0);draw_tray();glPopMatrix();
}
![Page 134: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/134.jpg)
Scene Graph ของฉากฉาก
โต>ะแล้ะถ้าด
ถ้าด
T0:8;1:3;0:0โต>ะ
T¡ 1:7;¡ 1:0;0:0 พ'�น
เกาอ��
Square
T0:3;0:8;0:0
S0:3;0:1;1:0
Square
T0:1;0:35;0:0
S0:1;0:35;1:0
Square
T0:7;1:1;0:0
S0:1;1:1;1:0
T0:9;¡ 1:0;0:0
![Page 135: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/135.jpg)
โคดvoid draw_scene(){
glPushMatrix();glTranslated(-1.7, -1.0, 0.0);draw_table_and_tray();glPopMatrix();
draw_floor();
glPushMatrix();glTranslated(0.9, -1.0, 0.0);draw_chair();glPopMatrix();
}
![Page 136: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/136.jpg)
ผ่ล้ล้�พธ์�
![Page 137: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/137.jpg)
บทำเร�ยน• เราสามารถ้สรางฉากทำ��ม�ความซ�บซอนไดจาก– ว�ตถ้"ง)ายๆ– การแปล้ง
• เพ'�อความสะดวกแล้ะความเขาใจง)าย เราสามารถ้จ�บกล้")มว�ตถ้"เป1นกล้")มๆ แล้วสรางฉากจากกล้")มของว�ตถ้"ได
• เราสามารถ้แทำนการจ�ดฉากไดดวยแผ่นภาพทำ��เร�ยกว)า scene graph ซ*�งประกอบดวย– กล้)องส�าหร�บแทำนว�ตถ้"– กล้)องส�าหร�บแทำนกล้")มของว�ตถ้"– กล้)องส�าหร�บแทำนการแปล้ง
![Page 138: 418382 สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 3](https://reader036.fdocuments.net/reader036/viewer/2022081721/568134c0550346895d9be24f/html5/thumbnails/138.jpg)
บทำเร�ยน• เม'�อเข�ยน scene graph แล้วเราสามารถ้เข�ยนโคด
เพ'�อวาดฉากทำ�� scene graph บรรยายไดอย)างง)ายดาย– กล้)องว�ตถ้"หร'อกล้")มของว�ตถ้" -> ฟิ:งก�ช�น– กล้)องการแปล้ง -> การเร�ยกฟิ:งก�ช�นทำ�าการแปล้ง เช)น
glTranslate, glScale หร'อ glRotate– แขนงของกล้)อง -> การเร�ยก glPushMatrix() แล้วล้ง
ไปจ�ดการแขนงน��น แล้วจ*งเร�ยก glPopMatrix()