CG Note

ContentsContents........................................................................................................1ครงท ๑. เปดมาน CMM236..................................................................................1

เครองมอทใชในการพฒนา................................................................................1ตดตง API OpenGL บนเครอง........................................................................1

ครงท ๒. Graphics and 2D graphics..................................................................1Homework#๑ ตอบคำาถามทวไป......................................................................1

ครงท ๓. The Graphics Programming, The animation, The Interaction.............1Homework#๒...........................................................................................1

ครงท ๔. Input and Interaction.........................................................................1Drawing a sphere....................................................................................1homework#3...........................................................................................1Coordinate and space (ระบบพกดและปรภม)..................................................1Homework#4...........................................................................................1

ครงท ๕. Repersentation and Geometric Transform (Monday, September 18, 2017) 1

Coordinate System transformation..........................................................1Drawing more than one object................................................................1Object Transformation.............................................................................1

ครงท ๖. เฉลยขอสอบ...........................................................................................1ครงท ๖. Viewing (Monday, October 16, 2017)................................................1ครงท ๗. การคำานวณ Orthographic projection (Monday, October 30, 2017)........1ครงท ๘. Light and Shading (Monday, November 6, 2017)..............................1

การหาสมการของการเรนเดอรแสง......................................................................1พนผวแบบตางๆ............................................................................................1การบานสำาหรบครงน.......................................................................................1

ครงท ๙. GLSL กบการเรนเดอรและตวอยางการใชงาน (Monday, November 13, 2017). .1Phong’s Shading formula for reflection....................................................1ตวอยางการคำานวณ........................................................................................1

ครงท ๑๐.Texture mapping/Discrete Techniques (Monday, November 20, 2017)1

Different between Pixel and Texel...........................................................1การบาน......................................................................................................1

ภาคผนวก ก. ภาพการคำานวณรปทรงตางๆ..................................................................1ภาคผนวก ข. วธการสงการบาน................................................................................1

เปดมาน CMM236

Date: Tuesday, January 16, 2018Focussing plan in Modeling and Rendering

เครองมอทใชในการพฒนา

b. Visual Studio Community 2017 C/C++ package Visual Studio Community 2015 still ok

c. OpenGL APIi. GLUT32.lib, GLUT32.dll, GLUT32.hii. ไฟลมอยใน Group ชอไฟล GLUT37bin.zip

ตดตง API OpenGL บนเครอง

1. Graphics Utility Toolkits (GLUT)การตดตงไฟลสวนหว (.h)

ตดตงไปยง $(WindowsSDK_IncludePath) ซงโดยปกตจะเปน

c:\Windows Kits\$(WindowsVersion)\include\$(SDK_Version)\umเชน ใช Windows 10 รน 10.0.16299.0 ใหสำาเนา ไฟลในโฟลเดอร GL ไปยง

c:\Windows Kits\10\include\10.0.16299.0\um\การตดตงไฟลคลงโปรแกรม (.lib)

ตดตง GLUT32.Libสำาเนาไปยง c:\Windows Kits\$(Window_Version)\lib\$(SDK_Version)\um\x86

a. นำา GLUT32.LIB ไปไวยง $(WindowsSDK_IncludePath) b. C:\programe files (x86)\$(Vcinstall)\lib

(ถาไมมใหสราง ภายใต C:\program files (x86)\vc\lib)c. นำา โฟลเดอร GL ไปวางไวใน C:\program files (x86)\$(Vcinstall)\include

(ถาไมม สราง c:\program files (x86)\vc\include)d. นำา GLUT32.DLL ไปไวยง C:\Windows\SysWow64

(ถาไมมวางไวท c:\Windows\System32)วธอยางงาย

เปนการสรางโฟลเดอร include และ lib ตางหากจากนนให VC ไปหาทโฟลเดอรดงกลาว

1. สรางโฟลเดอร include และ lib ในไดรว C:c:\includec:\lib

2. นำาไฟล glut32.lib ไปไวใน C:\lib3. นำาโฟลเดอร GL ไปไวใน C:\include 4. นำาไฟล win32\$(Wininstall)\System32\glut32.dll ไปไวใน c:\windows\

SysWow645. ปรบแกไขในหวขอ properties ของโครงงาน หวขอยอย directories รายการ include

directories และ lib directories โดยใหเพมโฟลเดอร c:\include และ c:\lib ลงไปตามลำาดบ

เพมเตม

ไฟลทใชม 3 ไฟล glut32.lib, glut32.dll, \GL\glut.h*.lib เปนจำาพวก static library ขอดเมอนำาคลงโปรแกรมไปใชผนวกเขากบไฟลทสรางได ไฟล

จะครบและใชงานไดในไฟลเดยว ขอเสยไฟลมขนาดใหญ

*.dll เปนจำาพวก dynamic linked library ขอดไฟลทพฒนาไดจะมขนาดเลกกวาและอาศยวาเครองปลายทางมไฟลคลงโปรแกรมดงกลาวอยแลว นยมใชในการสงผานทางอนเตอรเนต ขอเสยเนองจากการมหลายไฟล ทำาใหระบบมจำานวนไฟลมากโดยเฉพาะอยางยงเครองปลายทางไมมไฟลดงกลาวอยกอนหนา

*.h เปน headerทดสอบการตดตง

ลองทดสอบดวยไฟลทเขยนดวยกราฟกสสำาหรบ OpenGL เชน MotionFuncDemo.zip (ภายในม motionfunc.cpp) ใหทำาการเขยนทบเขาสไฟลตน .cpp ในโครงงาน แลวลองสงใหทำางาน ถาไดหนากราฟกสกแสดงใหเหนวาระบบพรอมรองรบการเขยนโปรแกรมกราฟกสดวย OpenGL แลว

2. Graphic Library Extension Wrangler (GLEW)a. สำาเนาไฟล glew.h ไวยงโฟลเดอร GLb. สำาเนาไฟล glew.lib ไวยงโฟลเดอร $(VcInstall\lib)c. สำาเนาไฟล glew32.dll ไวยงโฟลเดอร $(WinInstall)\SysWow64

3. Developer ImageLibrary (DevIL)a. สรางโฟลเดอร il ไวท $(VcInstall)\includeb. สำาเนา Devil.h, ilu.h และ ilut.h ไวในโฟลเดอรดงกลาวc. สำาเนา il.lib, ilu.lib และ ilut.lib ไวท $(VcInstall)\libd. สำาเนา il.dll, ilu.dll และ ilut.dll ไวท $(WinInstall) (c:\SysWow64)e. ทดสอบการใชงาน

Graphics and 2D graphicsMonday, August 21, 2017

หวขอวนน

Introduction to Computer Graphicsprinciple of graphics processcoordinate systemper vertex, per object, fragment

2D Graphics- Initialization

b. set background colorc. draw primitivesd. window limitingในการวาดวตถ พกดของวตถ (object coordinate system) (OCS)ถามการจดวางไวในตำาแหนงใหปรภม (space) เรยก world coordinate system (WCS)ปจจบนหนาจอทใชเปน LED (LED display) ซงเราบงคบไดโดยตรง

OpenGL ใชไดกบระบบทวๆไป แตในอนาคตเรมเปลยน API เปน Vulkanเนองจาก OpenGL รองรบขอมลเปน vertex ดงนนเราเรยก OpenGL วาเปน Vertex Processorในการเขยนกราฟกสจะประกอบดวยโปรแกรม 3 สวน

1. initializationa. สำาหรบการกำาหนดคาเรมตนใหกบโปรแกรม เชน background , window

size,buffer_type2. callback

a. สำาหรบการขนทะเบยนฟงกชนสำาหรบการทำางานซำาเพอตรวจจบการเปลยนแปลง

b. ในทนฟงกชนจะขนตนดวย glut3. service routine

a. เปนฟงกชนททำางานจรงเมอเกดเหตการณของ callbackb. จะตองขนทะเบยนไวกบ callback จงจะทำางานได

4. glOrtho() ใชสำาหรบกำาหนดรปแบบกราฟกสเปนแบบ Ortho Graphics

5. ในการกำาหนดคาใหกบ glOrhto() l,r,b,t,n,f = 0,10,0,10,0,-10 ทำาใหจดกำาเนดอยทมมซายลาง

6. ในการวาดวตถ รปแบบพนฐานจะใชรอบวนของ glBegin(), glEnd();7. ถามการปรบใหจำานวนจดภาพดาน กวางและสงไมเทากน จะทำาใหภาพทไดเพยน แกไขไดโดย

การหาอตราสวนภาพ

a. aspect_ratio = window_width/windows_heightHomework#๑ ตอบคำาถามทวไป

1. จงบอกถงคำาเตมและอธบายความหมายของระบบพกดตอไปน

- WCS- ECS- OCS- RCS- Framebuffer

2. ภาพทเกดขนในระบบกราฟกสมกแบบ อธบาย

3. เหตใดเราถงเรยกวา OpenGL เปน Vertex processor4. อธบายถงกระบวนการทางกราฟกสตงแตเรมตนจนไดการแสดงผลบนหนาจอ

5. บอกความแตกตางระหวาง APP (Applications) กบ API (Application Interface)6. อธบายถงลกษณะทางฮารดแวรของระบบกราฟกในปจจบน

7. ในความเปนจรงแลวในฉากกราฟกสจะมเพยงวตถเทานน เหตใดจงบอกไดวามอยสององคประกอบทเกยวของกบกราฟกสซงไดแก วตถ และผสงเกต

8. จงใหความหมายของฟงกชน glVertex2i();9. สมมตวามจดพกดดงน (-1,-1), (-0.5, -1), (0.5,-1), (1,-1), (1,1), (-1,1) เรยก

ฟงกชนทเกยวของกบการกระทำาตอไปน

- กำาหนดใหสของฉากเปนสดำา

- กำาหนดใหสของปากกาเปนสเหลอง (เกดจากการประสมสระหวางแดงและเขยว) - จงสรางสเหลยมจตรสขนาดสองหนวยจากจดพกดดงกลาว ดวยวธการอางองถงจด

ดวยรอบวน glBegin() และ glEnd() (ไมจำาเปนตองใชจำานวนจดทงหมด)- หนาตางมขนาด 5 ทงดานกวางและสง และดานลก

- ใหมมลางขวามพกด (-2.5, -2.5,0.0) จดกงกลางของหนาตางมพกดเทาใด

- กำาหนดใหหนาตางมขนาดของจดภาพตามแนวกวางและสงเปน (720, 640)

10. อธบายความหมายของฟงกชนทจดอยในกลมของฟงกชนทางกราฟกสททำางานในรปแบบทเรยกวา callback registered

11. อธบายความหมายของฟงกชนทจดในกลมของ service routine12. ฟงกชน glutMainLoop() ทำาหนาทอะไร ถาไมใสฟงกชนนในโปรแกรม จะเกดผลอ

ยางไร

The Graphics Programming, The animation, The Interaction//Monday, August 21, 2017Monday, September 4, 2017Event, Input and InteractionDraw a simple animationIdle = เปนฟงกชนททำางานในทกรอบของการทำางานของกราฟกส

ตองการเอาคอนโซลออก

- #include <windows.h>- ท main() เพม FreeConsole() ณ.ทใดทหนงในตนของ main()

วาดรป 6 เหลยม

- ปรบพารามเตอรของ glBegin() จาก GL_QUADS -> GL_POLYGON- ปรบ nSide = 4 เปน nSide = 6- หาคามมของแตละเหลยมซงเทากบ 2pi/nside- หาคา theta = i*(2pi/nside)

สรางรปหลายเหลยม

- nSide ตองปรบคาได (เชนใชคย u แทนเพม nSide และ- d แทนลด nSide- ขนทะเบยนฟงกชนของคยบอรดท glutKeyboardFunc()- สรางฟงกชนบรการของคยบอรด

void keyboard(unsigned char key, int x, int y) - สรางการทำางานเมอมการกดคย u และ d

1. Setting the background colorglClearColor(r,g,b,a);

2. Choosing the foreground colorglColor(r,g,b)

3. Understanding the transformation matrica. glMatrixMode(GL_MODELVIEW);b. glMatrixMode(GL_PROJECTION);

4. ถาอตราสวน จดภาพ/หนวย ของดานกวางและสง ไมเทากนตองปรบใหเทากนจงจะไดรปทสมจรง

a. สรางฟงกชน service routine ของ reshape callback 5. Understanding the relation between WCS and RCS

a. glViewport();b. glOrtho(left, right, bottom, top, near, far);c. glutPostRedisplay();

6. Eventsa. Mouse Event

i. mouse callback register 1. glutMouseFunc(mouse_service);

b. Keyboard Eventi. keboard callback register

1. glutKeyboardFunc(keyboard_service);c. display Event

i. event callback register1. glutDisplayFunc(display_service);7. Create a square

a. with assigned coordinate verticesb. with calculation

8. Create a Polygona. create a polygonb. create a circlec. making a simple animation with idle callback service routine

i. glutIdleFunc(idle_service);9. Create a Sphere

Homework#๒

1. การเขยน glVertex3f() ควรเขยนอย service routine ใด 2. glVertex3f() ตองการพารามเตอรมลกษณะอยางไร 3. จงสรางคลาส GL โดยทคลาสดงกลาวจะมเมธอดทจะทำาใหวตถทสรางขนจากคลาสดงกลาวมฟงกชน

glVertex() ทใชลกษณะของพารามเตอรไดหลายๆรปแบบเพอรองรบกบการเขยนกราฟกทงระบบสามมตและสองมต เชน glVertex(0.5,0.5,0.5), glVertex(1,2,3), glVertex(1,2) เปนตน และเขยนตวอยางของโปรแกรมเพอทดสอบใหเหนวาใชงานได

4. จงบอกลกษณะของโพลกอนแบบตางๆ5. ถาทานตองการใหมการตอบสนองผานคยบอรด ทานมวธการอยางไรในการเขยนโปรแกรมเพอใช

คยบอรดไดอยางไร อธบาย6. ตองการเขยนโปรแกรมใหวตถเคลอนไหวในทก 0.5 วนาท จะมวธการเขยนโปรแกรมไดอยางไร7. จงบอกถงขอดและขอเสยของรปแบบ (mode) ของการรบอนพทในแบบ request, sample และ

event8. การจำาแนกอนพตออกเปนคลาสตางๆ มกคลาสอะไรบาง9. การเขยนวตถเกบไวกอนหลายๆวตถและเรยกใชวตถผานคาประจำาตวของมน เราเรยกวธการทวาน

อยางไร10. จงอธบายถงวธการหยบ (pick) หรอเลอกวตถ11. จงอธบายความหมายขององศาอสระ และอปกรณใดทอยในเอกสารทมองศาอสระมากทสดและม

เทาใด

12. อปกรณทมลกษณะเปนตวเลอกมอะไรบาง13. จงอธบายถงความแตกตางของกราฟกสแบบตงฉาก (ortho graphics) กบ (perspective)14. ทำาไมตองมการแปลงระบบพกดของวตถหรอระบบพกดโลก (wcs) ไปเปนระบบพกดตา (ecs) หรอ

ระบบพกดผใช15. ถาขอบเขตของมมมองทมเปน (l,r,b,t,n,f) = (2,4,-3,2,2,-6) ปรมาตรของมมมองของหวง

อวกาศทปรากฏจะเปนเทาใด และจดศนยกลางหนาจออยทใด16. เหตใดเราจงตองคำานงถงคา aspect ratio เมอมการขยบหนาตางกราฟกสนนๆ17. พอรตมมมอง (viewport) คอ18. หนวยความจำากนชนกรอบแสดงผล (frame buffer) แบบ double buffer และ single

buffer มความแตกตางกนอยางไรและแตละแบบเหมาะสมกบการใชงานอยางไร19. ถาหนวยความจำากนชนกรอบแสดงผลของทานเปนแบบ double buffer โปรแกรมของทานจะมวธ

การเขยนโปรแกรมเพมเตมอยางไรเพอใหมนทำางานไดอยางถกตอง20. นอกจากรปแบบการเขยนวตถดวย glBegin() glEnd() และมรปแบบอนหรอไมทจะใชในการเขยน

วตถ อธบาย

θϕยร

Input and Interaction Monday, September 11, 2017

Drawing a sphere

4. Transformation (การแปลงวตถ)Rotation

glRotatef(angle, axisx, axisy, axisz);ex: glRotatef(10, 0, 1,0);Translation : สำาหรบการเลอนวตถ

glTranslatef(distx,disty,distz);โปรแกรมทดสอบ// CGDemo.cpp : Defines the entry point for the console application.//

#include "stdafx.h"#include <gl/glut.h>#include <cmath>#include <Windows.h>

// mouse motion function callback demonstration// created by suriyong L.// may 20, 2006// august 22, 2012// simulated object is triangle at 0,0,0// the object is moved to mouse position// it is still moved when the left key is pressed

#include <GL/glut.h> // (or others, depending on the system in use)#include <stdio.h>

#define RED 1.0,0.0,0.0 // RGB code for red color#define WHITE_A 1.0,1.0,1.0,1.0 //REG code for white and alpha

// WCS volume limitfloat left = -2;float right = 2;float bottom = -2;float top = 2;float znear = 0;float zfar = -10.0;

// RCS for window limitint win_width = 640;int win_height = 480;float win_position_x = 0;

float win_position_y = 0;

// mouse position startfloat xstart = 0;float ystart = 0;const float pi = 3.14159265;int nside = 6;float rho = 1.0;float phi = pi/3.0;bool moState = true; // use to control objectfloat deltaPhi = 0.001;

float angle = 0; float distx = 0;float disty = 0; float distz = 0; float deltaDistX = 0.001;void mouse(int button, int state, int x, int y) {

if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {moState = !moState;

}if (button == GLUT_MIDDLE_BUTTON && state == GLUT_DOWN)

deltaPhi += 0.0001;if (button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)

deltaPhi -= 0.0001;glutPostRedisplay();

}

void motion(int x, int y) {}

void init(void) {glClearColor(WHITE_A); // Set display-window color to white.

glMatrixMode(GL_PROJECTION); // Set projection parameters.glLoadIdentity();glOrtho(left, right, bottom, top, znear, zfar);

}void drawSphere(float radius, int nslice, int nstack) {

glBegin(GL_QUAD_STRIP);for (int i = 0; i < nstack; i++) {

for (int j = 0; j < nslice; j++) {float phi = pi/nstack*i;float theta = 2*pi/nslice*j; float y = radius*cos(phi);float z = radius*sin(phi)*sin(theta);float x = radius*sin(phi)*cos(theta);glVertex3f(x, y, z);

float phi_plus = pi / nstack*(i + 1);y = radius*cos(phi_plus);z = radius*sin(phi_plus)*sin(theta);x = radius*sin(phi_plus)*cos(theta);glVertex3f(x, y, z);

}}glEnd();

}void display(void) {

glClear(GL_COLOR_BUFFER_BIT); // Clear display window.glColor3f(RED); // pen color is redglMatrixMode(GL_MODELVIEW);glLoadIdentity();

glTranslatef(distx, 0, 0);

glRotatef(angle, 0, 1, 0);

glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);drawSphere(1,20,20 );

glFlush(); // Process all OpenGL routines as quickly as possible.glutSwapBuffers();glMatrixMode(GL_PROJECTION);

}void reshape(int w, int h) {

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();float aspect = (float)w / h;if (aspect >= 1.0) {

glOrtho(left*aspect, right*aspect, bottom, top, znear, zfar);}else {

glOrtho(left, right, bottom / aspect, top / aspect, znear, zfar);}glutPostRedisplay();

}void idle() {

if(moState) phi += deltaPhi;

angle += 0.001;

if (distx >= right)deltaDistX = -deltaDistX;

if (distx <= left)deltaDistX = -deltaDistX;

distx += deltaDistX;

glutPostRedisplay();}void keyboard(unsigned char key, int x, int y) {

switch (key) {case 'u':

nside++;break;

case 'd':nside--;if (nside < 3)

nside = 3;break;

case 'l':deltaDistX -= 0.001;break;

case 'r':deltaDistX += 0.001;break;

}glutPostRedisplay();

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

// initializing routineglutInit(&argc, argv); // Initialize GLUT.glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); // Set display mode.glutInitWindowPosition(win_position_x, win_position_y); //Set top-left display-window

position.glutInitWindowSize(win_width, win_height); // Set display-window width and height.glutCreateWindow("An Example OpenGL Program"); // Create display window.FreeConsole();

//user initialization routineinit();

// user initializing routine

//callback register functionglutDisplayFunc(display); // Send graphics to display window.glutMouseFunc(mouse); // callback for mouse

button and positionglutMotionFunc(motion); // callback for mouse motionglutReshapeFunc(reshape); // callback for window changeglutIdleFunc(idle); // callback for doing

graphic every roundglutKeyboardFunc(keyboard);glutMainLoop(); // Loop over

registered function

// Display everything and wait. return 0;}

homework#31. create a simple animation of a circle that move freely in space. But

user can assign force to it with force in x or y direction 2. (use glutMotionFunc()) the edge of the window is the ball movement

limit. If the ball touch either edge, the force in that direction will reverse in order to let the ball move backward

3. Bonus : if the developer make more graphics such as the circle is decorated with lines that the shape of face. That face will look nomally when it is in space but at the edge touching time, its face turn to a sad one etc.

4. เขยนโปรแกรมสรางลกบาศกขนาด 2 หนวย โดยจดศนยกลางของมนอยท (0,0,0) และทานมวธดอยางไรวาสงททานสรางมาเปนวตถสามมต (ในตอนเรมตนมมมองจะเปนการมองเขาไปตามแกนหลก ซงระนาบจะตงฉากกบแนว z ทำาใหมองเหนเปนสองมต)

5. การบานตอบคำาถาม

5. บอกหนาทของ API OpenGL6. เหตใดถงนำาวตถราสเตอรเขาใน geometric pipeline ไมได7. ถาตองการใชปม F1 ถง F12 จะมขนตอนหรอวธการอยางไร8. ขอใหทานหลกการและวธการสรางทรงกลมขนาดหนงหนวย ดวยรปแบบของการนยามวตถ

glBegin(), glEnd()9. glViewport() ใน reshape() ไวใชทำาอะไร10.ถาจดภาพไมเทากนทงสองแนวและอตราสวนจดภาพตอหนวยทงสองไมเทากนทงสองแนว

ทำาใหภาพทไดไมสมจรง ทานมวธการใดในการปรบอตราสวนดงกลาวใหใกลเคยงกน11.อธบายการทำางานของ glutPostRedisplay()12.เหตใดจงใชรปแบบของเฟรมบพเฟอรแบบ double framebuffer กบงานแอนเมชน 13.ทำาไมเวลาเราทำาการขยายภาพราสเตอรจงเกดการแตกของวตถ อธบาย แลวจะมวธการแกไข

ไดอยางไร

14.เหตการณในขอ 9 มโอกาสทจะเกดขนกบวตถเรขาคณตหรอไมอธบาย

Coordinate and space (ระบบพกดและปรภม)6. พนฐานทางคณตศาสตร (mathematic foundation)

Trigonometrysin( π4 )=√2

2

cos (π4 )=√22

tan( π4 )=1

ตวอยาง p1(3,4), p2(7,2) จงหาสมการพาราเมตรกซทลากจากจด p1 ไปยง p2

P+2v :validP−2Q :valid : point−point=vector

P+2v−2Q :validP+3v+3Q : invalid

Dot productv1=[ x1

y1] , v2=[ x2

y2]v1 ⋅v 2=x1 x2+ y1 y2

|v1||v2|cosθ

Cross product

v1=[ x1

y1

z1] , v2=[ x2

y2

z2] , v1×v2=[ y1 z2−z1 y2

z1x2−x1 z2

x1 y2− y1 x2]

v1 ×v2=|v1||v2|sinθUnit vector

v1

|v1|=

[ x2

y2

z2]

√ (x12+ y1

2+z12)

Matrix

M=[m11 m12 m13

m21 m22 m23

m31 m32 m33]

การบวกเมตรกซ เปนการนำาเอาสมาชกทตรงกนบวกกน เชน ตำาแหนงท 11 จะได m_11+n_11

การคณเมตรกซ

2 แบบ การคณดวยสเกลาร และการคณดวยเมตรกซ

การคณดวยสเกลาร

เปนการคณสมาชกทกตวดวยคาสเกลาร

a ij=α bij

การคณดวยเมตรกซ

M=[a b cd e fg h i ] ,N=[ j k l s

m n o tp q r u]

จงหา MN=[aj+bm+cp ak+bn+cq al+bo+cr as+bt+cudj+em+fp dk+en+ fq dl+eo+ fr ¿gs+ht+iu ]

MN=NM ?no

Transpose

N=[ j k l sm n o tp q r u]

จงหา NT

NT=[ j m pk n ql o rs t u ]

แบบฝกหดการวาดทรงกลม (drawing a sphere)

Homework#4 7. ตอบคำาถามทวไป

จงอธบายถงหลกของการเชอมตอประสานของกราฟกสดวยวธการ pickingCombobox, dialog box, textfield จดเปนสวนเชอมตอประสานคลาสใดจงบอกถงการจดคลาสของอปกรณการใหขอมลกบระบบ

ถาตองการสรางอกขระภาษาไทยไวใชงาน ขอใหทานบอกหลกการในการสรางอขระภาษาไทยโดยใช glNewList() มาเปนตวอยางสกหนงอกขระและการเรยกใชงานอกขระทไดสรางขนดงกลาวตองทำาอยางไรบอกขอดและขอเสยของการรบขอมลทงสามรปแบบทไดกลาวถงในชนเรยนทงสามแบบทำาไมระบบกราฟกสจงมรปแบบทคลายกบระบบเครอขายทผใชงานจะเปน client และตวกราฟกสเปน server

Repersentation and Geometric Transform (Monday, September 18, 2017)

วนสอบ ในตาราง พฤหสท 28 กนยายน 2560 13.00-16.00หลกการของทำา line หรอ planar

1. ระบบคารทเชยน a. เสนตองการ สองจด, เวกเตอร

2. ระบบพาราเมตรกซa. แทนตวแปรกลาง

3. ระนาบ a. ระบบพาราเมตรกซ และพกดคารทเชยนb. ตองการ สามจดทไมอยในแนวเดยวกน (co-linear)

4. ในทางระบบพกดคารทเชยนii. มจดสามจดบนระนาบ

1. หาเวกเตอรตงฉากกอน (cross product) 2. ทำา dot product ของเวกเตอรบนระนาบกบเวกเตอรตงฉากซงอยในฟอรม

x p⋅ xn+ y p ⋅ yn+z p⋅ zn=0

ผลทไดคอ สมการทอยในรปax+by+cz+d=0

เมอ a,b,c,d เปนคาคงท

Coordinate System transformationHomogeneous Coordinate

Drawing more than one objectObject Transformation

RotationTranslationScalingShearingConcatenate of transformationArbitrary rotationตวอยาง

ครงท 6. จงหาการแปลงตอไปน6.1. จากภาพจงหาเมตรกซของการแปลงดงกลาวและหานยามใหมของจดยอดทงสจด

x

y

1x1 x

y

2

2

size is 1x2 45o Rotation

M=T (2,2,0)R z(45 °)S (1,2,1)T (−0.5 ,−0.5,0)(0,0,0,1 ) , (0,1,0 ,1 ) , (1,0,0,1 ) , (1,1,0 ,1 )

Q=Mp

P=[0 0 1 10 1 0 10 0 0 01 1 1 1]

6.2. จงหาเมตรกซของการหมนรอบเวกเตอร (3, 2, 1) ทจดออรจนไปเปนมม 45O

Calculation of transformationM I=Rx (−90 ) S(0.25,0 .25,0 .25)

Mmoon=Ry ( θ30 )T (2,0,0 ) Ry ( θ

30 )M I E

=Rx (−90 )M E=R z (23.5 ) R y(θ)

glBegin(GL_LINE_STRIP);glVertex2f(9,15);glVertex2f(9,0);glVertex2f(3,0);glVertex2f(3,9);glVertex2f(2,11);glVertex2f(1,11);glVertex2f(0,9);...

glEnd()

เฉลยขอสอบ

วนพฤหสบดท 29 กนยายน พ.ศ. 2559

ครงท 6. Viewing (Monday, October 16, 2017)

Parallel ViewPerspective ViewProjection

Oblique projectionOrthographics projectionPerspective projection

Implement with OpenGLShadow

ครงท 7. การคำานวณ Orthographic projection (Monday, October 30, 2017)

กำาหนดงานแกตวสำาหรบขอสอบกลางภาค ภายใน 6 พ.ย. 2560 กอน 17.00

แกน เดม ใหมx R−L 2Y T−B 2z -F –(-N) 2Scale factor

S=S ( 2R−L

, 2T−B

, 2N+F )

Translation factor เดมกรอบของการแสดงผลอยท (R+L

2, T +B

2,−F+(−N )

2) => (0,0,0)

T (−R+L2

,−T +B2

,−−F+(−N )2 )

เมตรกซของการแปลงเปน Canonical View VolumeM=ST

ถาวางฉากไวท z= 0

[ xyz1 ]→[ xy01 ]⇒ P=MP where M=[1 0 0 00 1 0 00 0 0 00 0 0 1 ]

ถาวางฉากไวท z = 3

[ xyz1 ]→[ xy31 ]=¿q=Mp=[1 0 0 00 1 0 00 0 3 00 0 0 1][ xyz1 ]=M orth p

สมมตใหวตถอยท (1,2,3) กลองอยท (4,3,2) จงหาเวกเตอรตงฉาก N

N=[4321 ]−[1231]=[ 31

−10 ]

n= N|N|

vup=[0100]gluLookAt(4,3,2, 1,2,3, 0,1,0);

perspective

[ x p

y p

z p

1]=[

xz /dy

z /dd1

]=Mp=[1

z /d0 0 0

0 1z /d

0 0

0 0 d 00 0 0 1

][ xyz1 ]M=[

z /dz /d

0 0 0

0 z /dz /d

0 0

0 0 z 00 0 0 z /d

]=[1 0 0 00 1 0 00 0 z 00 0 0 z /d]=[1 0 0 0

0 1 0 00 0 1 00 0 1/d 0]

การบาน1. Not all projections are planar geometric projections. Give an example

of a projection in which the projection surface is not a plane, and another in which the projectors are not lines.

2. Consider an airplane whose position is specified by the roll, pitch, and yaw, and by the distance from an object. Find a model-view matrix in terms of these parameters.

3. Consider a satellite rotating around the earth. Its position above the earth is specified in polar coordinates. Find a model-view matrix that keeps the viewer looking at the earth. Such a matrix could be used to show the earth as it rotates.

4. Can we obtain an isometric of the cube by a single rotation about a suitably chosen axis? Explain your answer.

5. จงหาเมตรกซมมมอง (Modelview matrix) สำาหรบการฉายภาพแบบไดเมตรกซ (diametric)

6. เตมคำาลงลงในกลองทขาดหายไป

1-point

2-point

Parallel

Projection

3-point

แบบฝกหด

1. สรางโปรแกรมสำาหรบการแสดง wireCube (glutWireCube()) และ wireSphere (glutWireSphere())ขนาด 2 หนวย

ใหสรางมมมองแบบ perspective โดยใช glFrustum() และ gluPerspective() ตำาแหนงผสงเกตอยท (1,1,1) กำาหนดพารามเตอรตามตองการ

#include <iostream>//#include <stdlib.h>#include <GL/glut.h>

// This program show comparison between perspective, frustum and orthogonal projection.// the eye first is set at (2.2, 2.2, 2.2) where the closer than this value the ortho would get visual advantage // which can see all object.// gluperspective is esier to use than frustum. using namespace std;int width=500, height=500;bool polygonMode = true;int projectMode = 2; //0=ortho,1=frustum, 2=perspective

float b_left = -4.0;float b_right= 4.0;float b_bottom = -4.0;float b_top = 4.0; float b_near = 2;float b_far = 40;

GLfloat vertices[] = {-1.0,-1.0,-1.0,//01.0,-1.0,-1.0, //1-1.0,1.0,-1.0, //21.0,1.0,-1.0, //3-1.0,-1.0,1.0, //41.0,-1.0,1.0, //5-1.0,1.0,1.0, //61.0,1.0,1.0 //7

};

GLfloat colors[] = {0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,1.0,1.0,0.0,

0.0,0.0,1.0,1.0,0.0,1.0,0.0,1.0,1.0,1.0,1.0,1.0

};

GLfloat bcolors[] = {0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0, 0.0,0.0,0.0, 0.0,0.0,0.0,0.0,0.0,0.0, 0.0,0.0,0.0, 0.0,0.0,0.0

};

GLubyte cubeIndices[]={0,2,3,1,0,4,6,2,0,1,5,4,7,6,4,5,7,3,2,6,7,5,1,3};

static GLfloat theta[] = {0.0,0.0,0.0};static GLint axis = 2;float eyex = 2.2, eyey=2.2, eyez=2.2;float fovy = 55.0;

void reshape(int w, int h) {float aspect = (float) w/h;

glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity();

switch (projectMode) {case 0:

if (w >= h)glOrtho(b_left*aspect, b_right*aspect, b_bottom, b_top, b_near, b_far);

elseglOrtho(b_left, b_right, b_bottom/aspect, b_top/aspect, b_near, b_far);

break;case 1:

if (w>=h)glFrustum(b_left*aspect, b_right*aspect, b_bottom, b_top, b_near, b_far);

elseglFrustum(b_left, b_right, b_bottom/aspect, b_top/aspect, b_near, b_far);

break;case 2:

gluPerspective(fovy, aspect, b_near, b_far);break;

}

width = w;height = h;glutPostRedisplay();

}

void object() {//glTranslatef(0.0,1.0,0.0);glRotatef(theta[0], 1, 0, 0);glRotatef(theta[1], 0, 1.0, 0);glRotatef(theta[2], 0, 0, 1);glScalef(0.5,0.5,0.5);glutSolidCube(1.0);

}void scene(void) {

float xl = -10, yl=5, zl = -15; // light positionfloat m[16] = {1,0,0,0, 0,1,0,-1/yl, 0,0,1,0, 0,0,0,0};

/* display callback, clear frame buffer and z buffer,rotate cube and draw, swap buffers */

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);reshape(width, height);//glMatrixMode(GL_PROJECTION);//glLoadIdentity();//float aspect = (float)width / height;//if (projectMode == 0)// if (aspect>1)// glOrtho(b_left*aspect, b_right*aspect, b_bottom, b_top, b_near, b_far);// else// glOrtho(b_left, b_right, b_bottom / aspect, b_top / aspect, b_near, b_far);//else// if (projectMode == 1)// glFrustum(-4, 4, -4, 4, 2, 40);// else// gluPerspective(fovy, aspect, 2, 40);glMatrixMode(GL_MODELVIEW);glLoadIdentity();gluLookAt(eyex, eyey, eyez,0.0,0.0,0.0,0.0,1.0,0.0);

glPushMatrix();glTranslatef(0.0,1.0,0.0);glColor3f(0.0,1.0,0.0);object();glPopMatrix();

glPushMatrix();glTranslatef(xl, yl, zl);glMultMatrixf(m);glTranslatef(-xl, -yl, -zl);glColor3f(0.0,0.0,0.0);object();

glPopMatrix();

glBegin(GL_LINES);glColor3f(1.0,0.0,0.0); glVertex3f(-1.0,0.0,0.0); glVertex3f(1.0,0.0, 0.0);glColor3f(0.0,1.0,0.0); glVertex3f(0.0,-1.0, 0.0); glVertex3f(0.0,1.0,0.0);glColor3f(0.0,0.0,1.0); glVertex3f(0.0,0.0,-1.0); glVertex3f(0.0,0.0,1.0);

glEnd();

glFlush();glutSwapBuffers();

}

void spinCube() {

/* Idle callback, spin cube 2 degrees about selected axis */

theta[axis] += 0.1;glutPostRedisplay();

}

void mouse(int btn, int state, int x, int y) {

/* mouse callback, selects an axis about which to rotate */

if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN) axis = 0;theta[1] += 0.1;

if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN) axis = 1;theta[0] += 0.2;

if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN) axis = 2;

theta[2] += 0.3;glutPostRedisplay();

}void motion(int x, int y) {

}

void print_boundary() {cout << "l,r,b,t,n,f = " << b_left << ", " << b_right << ", " << b_bottom << ", " << b_top

<< ", " << b_near << ", " << b_far << endl;}void keyboard(unsigned char key, int x, int y) {

switch (key) {case 'l':

b_left += 0.1;print_boundary();break;

case 'L':b_left -= 0.1;print_boundary();break;

case 'r':b_right += 0.1;print_boundary();break;

case 'R':b_right -= 0.1;print_boundary();break;

case 'n':b_near += 0.1;print_boundary();break;

case 'N':b_near -= 0.1;print_boundary();break;

case 'f':b_far += 0.1;print_boundary();break;

case 'F':b_far -= 0.1;print_boundary();break;

case 'm': // polygon mode line or fillcase 'M':

polygonMode = !polygonMode;glPolygonMode(GL_FRONT_AND_BACK, (polygonMode) ? GL_FILL : GL_LINE);break;

case 'p':projectMode++;projectMode = (projectMode > 2) ? 0 : projectMode;cout << ((projectMode == 0) ? "Orthogonal " : (projectMode == 1) ? "Frustum " :

"Perspective " ) << "projection" << endl;break;

case 'P':theta[0] += 2;axis = 0;break;

case 'y':theta[1] -= 2;axis = 1;break;

case 'Y':theta[1] += 2;

axis = 1;break;

case 'w':theta[2] += 2;axis = 2;break;case 'W':

theta[2] -= 2.0;break;case 'a':

fovy += 1; cout << "fovy = " << fovy << endl; break; case 'A': fovy -= 1; cout << "fovy = " << fovy << endl; break;

case 'z': eyex += 0.05; eyey += 0.05; eyez += 0.05; cout << "eyex = "<< eyex << endl; break; case 'Z': eyex -= 0.1; eyey -= 0.1; eyez -= 0.1; cout << "eyex = " << eyex << endl; break;

}glutPostRedisplay();

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

/* need both double buffering and z buffer */

glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(width,height); int win_id = glutCreateWindow("colorcube");

reshape(width, height); glutReshapeFunc(reshape); glutDisplayFunc(scene); glutIdleFunc(spinCube); glutMouseFunc(mouse); glutKeyboardFunc(keyboard); glutMotionFunc(motion); glEnable(GL_DEPTH_TEST); /* Enable hidden--surface--removal */ glEnableClientState(GL_COLOR_ARRAY); glEnableClientState(GL_VERTEX_ARRAY); glVertexPointer(3, GL_FLOAT, 0, vertices); glColorPointer(3,GL_FLOAT, 0, colors); glClearColor(1.0,1.0,1.0,1.0); glColor3f(1.0,1.0,1.0); glutMainLoop(); return 0;}

ครงท 8. Light and Shading (Monday, November 6, 2017)

Lighting, ShadingShading using Hardware (GLSL)

ลกษณะของการเรนเดอรแสง Local Rendering – ทกำาลงจะทำาในขนนGlobal Rendering – วตถทอยในฉากจะมผลซงกน

และกนการหาเวกเตอร

l = ไดจากบอกตำาแหนงแหลงกำาเนดแสง-ตำาแหนงทสงเกต

n = ไดจากพนผv = มกจะเปนโจทยกำาหนดให เชนสงเกตอยตามแนวแกน

z (0,0,-z)r = เกดจากการคำานวณจาก l และ n

r=2 ( l . n )n−l

การหาสมการของการเรนเดอรแสง

เขาสตร L.RElements that concern with lighting

ตำาแหนง Viewerตำาแหนง วตถการจดวางตวของวตถ

พนผวแบบตางๆ

Diffuse surface (การแพร)Specular surface (มนเงา)

แหลงกำาเนดแสงองคประกอบของแสง

Ambient, diffuse, specularแหลงกำาเนดแสง

Point lightSpot lightAmbient lightSpecular lightDistance light

การหาเวกเตอรตงฉากของผวคารทเชยนพาราเมตรกซ

การทำาเรนเดอรพนผวการบานสำาหรบครงน

1.จากภาพเปนภาพดานสวนขวเหนอของทรงกลมซงมจดพกดดงแสดงในภาพ สำาหรบการสองสวางของแสงจะเปนแสงในลกษณะของ mono chromatic light (แสงสเดยว) ทศทางเปน (1, -1, -1, 0) องคประกอบของแสงคา k a , k d , ks=0.5 ,0.75 ,0.75 ตามลำาดบ สมมตวาวตถมคาวสดทางแสดงของ ambient, diffuse, specular และ shininess เปน 0,5, 0.75, 0.75, 100 ตามลำาดบ ผสงเกตอยทตำาแหนง (0,0,2,1)

(0,0.5,0)

(0, 0.42, 2) (2, 0.42, 0)(0, 0.42, -2)(-2, 0.42, 0)

รปภาพประกอบสำาหรบขอท ๓

1.1. จากขอมลดงกลาวตองการสรางการเรนเดอรโดยการใชแสงโดยใชวธการของ Interpolative Shading (Gouroud Shading) ของการสะทอน จงแสดงวธการดำาเนนการดงกลาว

1.2. จากผวของวตถดงกลาวสมมตวาวตถมความโปรงใสและไมมความหนา ดานบนของวตถอยเปนสญญากาศ ซงมคาดรรชนหกเหเปน 1.0 และดานลางมตวกลางทมคาดรรชนหกเหเปน 1.33 จงหาเวกเตอรของการหกเหน

2. จากภาพเปนพนผวทอธบายไดดวยสมการดงตอไปน

z=sin ( x ) cos ( y ) ;−π ≤x , y<π

4.1 จงหาเวกเตอรตงฉาก (n)เมอ x=-1, y=14.2 ถาแหลงกำาเนดแสงอยทตำาแหนง (10, 3, 10) ผสงเกตอยท 0,0,2 จงหาเวกเตอรสำาหรบการจดการ

เกยวกบการสะทอนของแสง (l,n,r,v) 4.3 ถาพารามเตอรของแสงขององคประกอบ ambient, diffuse,specular ของแสงเปน (k a , kd , ks )=¿(0.5,

0.5,0.75) โดยทใหถอวาแหลงกำาเนดแสงมความเขมเรมตนขององคประกอบทงสาม ( I a , I d , I s )=(1,1,1) และใหแสงเปนแสงเพยงสเดยว จงแสดงวธการคำานวณและกำาหนดระดบแสงบนพนผวทตำาแหนงทกำาหนดในขอ 4.1 และแหลงกำาเนดแสงอยทตำาแหนงทกำาหนดในขอ 4.2

4.4 ถาวตถมองคประกอบตางของสทเปนวสดของพนผวของมนเปน (r,g,b,a) = (0.2,0.1,0.5,1) และแหลงกำาเนดแสงมองคประกอบของสเปน (r,g,b,a) = (0.5,0.5,0.75,1) และคาลดทอนตามระยะทางแบบคาคงท (constant attenuation) เทานนมคาเทากบ 2 จงแสดงการกำาหนดคาตางๆเหลานในโปรแกรมดวย OpenGL เทาทจำาเปนเพอทจะใหโปรแกรมทำางานได

เพมเตม : ไมจำาเปนตองเขยนทงโปรแกรมเพยงแตเขยนถงคำาสงหรอสวนของโปรแกรมเพอทจะทำาใหมนทำางานไดเทานน

ครงท 9. GLSL กบการเรนเดอรและตวอยางการใชงาน (Monday, November 13, 2017)

Phong’s Shading formula for reflectionI total=k a I a+ ∑

i=1

¿lights

Ii (kd (n .l )+ks (v . r )α )

ตวอยางการคำานวณ

3. วตถทรงกลมขนาดหนงหนวยจำานวนสองวตถวางอยท (-2,0,0) และ (2,0,0) ตามลำาดบทรงกลมดงกลาวสรางดวยการเรยก glutSolidShpere(0.5,20,20) ใหแสงเปนแสงแบบทศทางสองและแบบจดเปน (2,2,2,0) และ (-2,2,-2,1) โดยมวสดเปน JADE และ TURQUOISE ตามลำาดบ ผสงเกตอยท (0,0,2,0) สำาหรบพารามเตอรของวสดเปนดงน#define JADE_AMBIENT 0.135,0.2225,0.1575,0.95#define JADE_DIFFUSE 0.54,0.89,0.63,0.95#define JADE_SPECULAR 0.316228,0.316228,0.316228,0.95#define JADE_SHININESS 12.8#define TURQUOISE_AMBIENT 0.1,0.18725,0.1745,0.8#define TURQUOISE_DIFFUSE 0.396,0.74151,0.69102,0.8#define TURQUOISE_SPECULAR 0.297254,0.30829,0.306678,0.8#define TURQUOISE_SHININESS 12.8

3.1. จงเขยนสวนของโปรแกรมในสวนของ OpenGL เพอกำาหนดคาดงกลาวใหกบวสดและกำาหนดพารามเตอรตางๆใหกบแหลงกำาเนดแสงทงสอง เปดใชงานแหลงกำาเนดแสงและการกำาหนดวสดใหกบวตถ ทงนแหลงกำาเนดแสงทงสองเปนแสงขาวมคา ka, kd, ks เปน 0.5, 0.75, 0.75 ตามลำาดบ สมมตวาใหแหลงกำาเนดแสงทงสองแทนดวยแหลงกำาเนดแสงใน OpenGL เปน GL_LIGHT0 และ GL_LIGHT1 ตามลำาดบ สำาหรบแหลงกำาเนดแสงแบบจดระยะทางมผลตอการลดทอนของความเขมของแสงในลกษณะของเชงเสน (linear attenuation)

หมายเหต : เขยนสวนของโปรแกรมเทาทจ ำาเปนเพอแสดงใหเหนวามการกำาหนดคาพารามเตอรตางๆ ใหกบโปรแกรมได ไมตองเขยนทงโปรแกรม

struct {float ambient[4];float diffuse[4];float specular[4];float shininess;

} material;material turquoise {

0.1,0.18725,0.1745,0.8,0.396,0.74151,0.69102,0.8,0.297254,0.30829,0.306678,0.8,

12.8

};float light0_pos[4];float light0_ambient[4];float light0_diffuse[4];float light0_specular[4];

void init() {…glLightfv(GL_AMBIENT, light0_ambient);glLightfv(GL_DIFFUSE, light0_diffuse);…glEnable(GL_LIGHT);glEnable(GL_LIGHT0);glEnable(GL_LIGHT1);

}material jade {…

};

display() {glMatrixMode(GL_MODELVIEW);glLoadIdentity();glPushMatrix();// material is placed hereglMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT, jade.ambient);glMaterialfv(… jade.diffuse);glMaterialf(… jade.shininess);glTranslatef(-2,0,0);glutSolidSphere(0.5,20,20);glPopMatrix();

}

3.2. จากขอมลในขอ ๕.๑ เขยนโปรแกรม GLSL สำาหรบ vertex shader และ fragment shader สำาหรบวตถทงสองโดยใชร ปแบบของ Phong’s shading สำาหรบแหลงกำาเนดแสงทงสองดงกลาว สมมตวาพารามเตอรในสวนของ OpenGL ไดกำาหนดไวเรยบรอยแลว

4. จากรปภาพประกอบเปนภาพของวตถรปกรวยทมรศมฐาน (radius) เทากบ 1 และความสง (height) เปน 2 หนวย โดยทคาพารามเตอรตางๆ สำาหรบการสรางวตถดงกลาวไดแสดงใหเหนอยดานขาง และวตถดงกลาวอยทจดกำาเนด (origin) (15 คะแนน)

x

y

zภาพวตถกรวยแบบมผวและสมการของวตถ

รปภาพประกอบสำาหรบขอท 4

โดยทจดทสนใจคอ u=−0.25 , v=0.5 สำาหรบแหลงกำาเนดแสงอยท (1,2,1,1) และผสงเกตอยท (0,0,1,1) คณสมบตตางๆและขอกำาหนดของแหลงกำาเนดแสง

แหลงกำาเนดแสง ambient factor k a=0.5

diffuse factor k d=0.5

specular factor k s=0.75

ระยะทางของแสงมผลตอความเขมของแสงโดยเปนการลดทอนแบบคงทเทากบ 2 คณสมบตของวตถ

shininess = 504.1. จงแสดงวธการคำานวณเวกเตอรตางๆและความเขมทคำานวณของแสงทปรากฏท

พนผวทสนใจทไดจากองคประกอบทงสาม (ambient, diffuse และ specular) ของการสะทอนตามแบบจำาลองของฟอง (Phong’s reflection model) โดยแหลงกำาเนดแสงเปนแสงในลกษณะของแสงสเดยว (monochromatic light) กำาหนดใหความเขมขน (intensity) เรมตนของแสงทแหลงกำาเนดมคาเปน 1

L=[121]−[000]=[121];|L|=√12+22+12=√6

l= L|L|

=[ .40.83.40]

V=[001]−[000]=[001];v= V

|V|=[001 ]

N=[∂ x∂u∂ y∂u∂z∂u

]×[∂x∂v∂ y∂v∂ z∂v

]=¿

แทนคาท u=−0.25 , v=0.5 ,height=2

∂x∂u

=∂ (1−v ) . radius .cos (2π .u )

∂u=−2π radius (1−v ) sinu ; ∂ x

∂v=

∂ (1−v ) . radius .cos (2π .u )∂v

=−radius ⋅cos2 πu

∂ y∂u

=∂ v .height∂u

=0 ; ∂ y∂v

=∂ ( v .height )∂v

=height

∂ z∂u

=∂ (1−v ) . radius⋅sin 2 πu∂u

=2π radius (1−v )cosu; ∂ z∂ v

=∂ ( (1−v )radius ⋅sin 2πu )

∂ v=−radius sin 2πu

หลงจากได N ใหทำาเปน 1 หนวย (n)r=2 ( n. l )n−l

4.2. เขยนสวนของโปรแกรมสำาหรบการกำาหนดคาตางๆ ดงกลาวใหกบโปรแกรมเพอใหโปรแกรมเปดการใชงานแหลงกำาเนดแสง การใชงานวสด จากขอมลทกำาหนดให (เอาเฉพาะสวนของโปรแกรมทจำาเปนเทานน และบอกเหตผลวาฟงกชนดงกลาวเพอทำาอะไร)

ครงท 10. Texture mapping/Discrete Techniques (Monday, November 20, 2017)

contentsDiscrete Techniques

MappingTexture mapping

OpenGL Texture MappingTexture Mapping using hardware

Other MappingEnvironmental Mapping

Cube MappingSphere Mapping

toolsgo to DeVeloper Image Library to download “software for Windows SDK”

Different between Pixel and Texelpixel texel

origin up-left corner lower-left cornerunit pixel texeltype int floatrange width x height 0-1 both direction

การบาน

1. สรางวตถทรงกลมตอไม (ลกษณะคลายอมยม) จากนนใหทำาการทาบหนาของผเปนเจาของเขากบทรงกลมดงกลาว สำาหรบสวนของดามทนำามาตอใหทำาลายเปนลายไม นำาวตถดงกลาวเขาใสฉากทไดรบการแตงดานตางๆตามททานตองการใหดเหมาะสม ปรมาตรมมมองทสรางขนจะตองเลอกดไดจากการเดนทองดวยคยบอรดหรอเมาส

θ

ภาคผนวก ก. ภาพการคำานวณรปทรงตางๆ

การคำานวณทรงกลม

x=r . sin ϕ cosθy=r .cos ϕz=r . sinϕ sinθ

ภาคผนวก ข. วธการสงการบาน

1. สราง google dirve a. สรางโฟลเดอร cmm330,xxx เมอ xxx คอรหสนกศกษา 3 ตวทาย

b. share ใหกบ suriyonglert@gmail.com c. ในการสงการบานใหสรางโฟลเดอรยอยภายในโฟลเดอรดงกลาว โดยใหชอเปนไปตาม

หมายเลขของงาน เชน สงจากหวขอ homework#๑ กใหสรางชอโฟลเดอรเปน homework#๑ สำาหรบชอการบาน ถามเพยงไฟลเดยวกใหตงชอตามชอของโฟลเดอรทเกบ จากนนใหนำาการบานเกบไวภายในโฟลเดอรดงกลาว ถามากกวาใหเพมตวยอยเปน a, b, c,…

d. ไฟลทไมเกยวของแตเปนไฟลเสรม ใหตงชอตามทตองการแตควรจะตองถกเชอมตอกบไฟลการบานดงกลาว

e. รปแบบของการเขยน

i. นำาโจทยมาใสในไฟล docx ตงชอตามขอกำาหนดในขอ cii. หนาแรกใหบอกรายละเอยดของงาน รหสนกศกษา และชอ-สกล ตามลำาดบ

(สำาหรบชอ-สกล ใหใสคำานำาหนาดวย)iii. ลอกโจทย

iv. การตอบคำาถาม ใหใชสของการตอบทแตกตางจากสของโจทย เชน สนำาเงน เปนตน ระมดระวงวาสการตอบดงกลาวจะตองตดกบพนสขาว

f. นำาไฟลทไดและทเกยวของใสไวในโฟลเดอรทสรางขนสำาหรบการสงการบานนนๆ

หมายเหต

การลอกการบานหรอไมไดทำาเอง ถอเปนเรองทเสยหายอยางรายแรง ถามขอสงสยเปนสทธของผตรวจทจะไมตรวจและตดคะแนนทาน