Bài giảng Đồ họa máy tính - Chương 1: Giới thiệu đồ họa máy tính - Trường Đại học Bách Khoa TP Hồ Chí Minh

361 trang Hùng Dũng 04/01/2024 1090

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Đồ họa máy tính - Chương 1: Giới thiệu đồ họa máy tính - Trường Đại học Bách Khoa TP Hồ Chí Minh", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

bai_giang_do_hoa_may_tinh_chuong_1_gioi_thieu_do_hoa_may_tin.pdf

Nội dung text: Bài giảng Đồ họa máy tính - Chương 1: Giới thiệu đồ họa máy tính - Trường Đại học Bách Khoa TP Hồ Chí Minh

Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 1: GIỚI THIỆU ĐỒ HỌA MÁY TÍNH
NỘI DUNG TRÌNH BÀY  Giới thiệu tổng quan về đồ họa máy tính  Đối tƣợng cơ bản trong đồ họa máy tính  Thiết bị hiển thị đồ họa Faculty of Computer Science and Engineering - HCMUT Slide 2
CHƢƠNG TRÌNH Nội dung Chƣơng 1-Giới thiệu đồ họa máy tính Chƣơng 2-Bƣớc đầu tạo dựng hình ảnh Chƣơng 3-Xây dựng cơng cụ vẽ hình ảnh Chƣơng 4-Vector trong đồ họa máy tính Chƣơng 5-Biến đổi hình Chƣơng 6-Mơ hình hĩa đối tƣợng 3 D bằng lƣới đa giác Chƣơng 7-Phép nhìn trong khơng gian ba chiều Chƣơng 8-Tơ màu vật thể ba chiều Chƣơng 9-Kỹ thuật lặp đệ quy, ứng dụng tạo hoa văn Chƣơng 10-Đồ họa raster Faculty of Computer Science and Engineering - HCMUT Slide 3
TÀI LIỆU MƠN HỌC  [1] Francis S. Hill, Jr, Computer Graphics, Macmillan Publishing Company, 1990.  [2] Foley, van Dam, Feiner, Hughes, Computer Graphics principles and practice, Addison-Wesley Publishing Company, 1996.  [3] Nguyễn Hữu Lộc, Đồ họa máy tính và mơ hình hĩa hình học, Nhà xuất bản thành phố Hồ Chí Minh, 2000.  [4] Hồng Kiếm, Dƣơng Anh Đức, Lê Đình Huy, Vũ Hải Quân, Cơ sở đồ họa máy tính, Nhà xuất bản giáo dục, 2000.  [5] Nguyễn Quốc Cƣờng, Hồng Đức Hải, Đồ họa vi tính, Nhà xuất bản giáo dục, 1998.  [6] Tống Nghĩa, Hồng Đức Hải, Đồ họa máy tính trong ngơn ngữ C, Nhà xuất bản giáo dục, 1999.  [7] Nguyễn Tiến, Ngơ Quốc Việt, Giáo trình đồ họa máy tính, Nhà xuất bản thống kê, 2001.  [8] Lê Tấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ họa, Nhà xuất bản Khoa học và Kỹ thuật, 2004  Graphics Faculty of Computer Science and Engineering - HCMUT Slide 4
ĐỊNH NGHĨA ĐỒ HỌA MÁY TÍNH  Dùng máy tính để tạo ra hình ảnh  Đồ họa máy tính và xử lý ảnh – Đồ họa máy tính: tạo hình ảnh dựa trên đặc tả hoặc mơ hình – Xử lý ảnh: nâng cao chất lƣợng hoặc chỉnh sửa hình ảnh. Faculty of Computer Science and Engineering - HCMUT Slide 5
ỨNG DỤNG CỦA ĐỒ HỌA MÁY TÍNH  Ứng dụng trong giải trí, xuất bản và nghệ thuật – Sản xuất phim hoạt hình, tạo hiệu ứng cho phim nhựa – Trị chơi máy tính – Duyệt Web – Chế bản điện tử  Xử lý ảnh  Ứng dụng trong tự động hĩa và điều khiển  Mơ phỏng  Máy tính hỗ trợ thiết kế – Hỗ trợ thiết kế kiến trúc – Hỗ trợ thiết kế mạch điện tử  Hình ảnh hĩa số liệu khoa học Faculty of Computer Science and Engineering - HCMUT Slide 6
ĐỐI TƢỢNG CƠ BẢN TRONG ĐHMT  Đƣờng gấp khúc (polyline)  Văn bản (text)  Vùng tơ (filled region)  Ảnh ma trận điểm hay ảnh raster (raster image) Faculty of Computer Science and Engineering - HCMUT Slide 7
ĐƢỜNG GẤP KHƯC  Đƣờng gấp khúc là một tập các đoạn thẳng đƣợc nối với nhau.  Đƣờng gấp khúc đƣợc dùng mơ phỏng đƣờng cong.  Các hàm liên quan – Vẽ điểm: drawDot(x1, y1) – Vẽ đoạn thẳng: drawLine(x1, y1, x2, y2) – Vẽ đƣờng gấp khúc: drawPolyline(poly) Faculty of Computer Science and Engineering - HCMUT Slide 8
ĐƢỜNG GẤP KHƯC  Khi đỉnh đầu và đỉnh cuối đƣợc nối bằng một đoạn thẳng thì đƣờng gấp khúc trở thành đa giác Faculty of Computer Science and Engineering - HCMUT Slide 9
ĐƢỜNG GẤP KHƯC  Thuộc tính – Màu sắc – Độ dày – Kiểu đƣờng (liền nét, đứt nét) – Cách nối hai cạnh dày  Thiết lập thuộc tính: setDash (dash7) hoặc setLineThickness(thickness). Faculty of Computer Science and Engineering - HCMUT Slide 10
VĂN BẢN  Một số thiết bị cĩ hai chế độ hiển thị – Chế độ hiển thị văn bản – Chế độ hiển thị đồ họa  Thủ tục hiển thị chuỗi – drawString(x, y, string);  Thuộc tính – Font – Màu sắc – Kích thƣớc – Hƣớng – Khoảng cách giữa các ký tự trong chuỗi Faculty of Computer Science and Engineering - HCMUT Slide 11
VĂN BẢN Faculty of Computer Science and Engineering - HCMUT Slide 12
VÙNG TƠ  Hình đƣợc tơ bởi màu hoặc mẫu tơ. Đƣờng biên thƣờng là hình đa giác.  Thủ tục : fillPolygon(poly, pattern); Faculty of Computer Science and Engineering - HCMUT Slide 13
VÙNG TƠ  Dùng vùng tơ để mơ phỏng các mặt khác nhau của vật thể tơ màu Faculty of Computer Science and Engineering - HCMUT Slide 14
ẢNH RASTER  Đƣợc tạo bởi các pixel  Lƣu trữ dƣới dạng mảng các giá trị  Phƣơng pháp tạo ảnh raster – Thiết kế thủ cơng – Tạo bằng thuật tốn – Quét  Ảnh raster cĩ thể tiến hành xử lý Faculty of Computer Science and Engineering - HCMUT Slide 15
THIẾT BỊ HIỂN THỊ ĐỒ HỌA  Thiết bị đồ họa vector: tạo hình ảnh từ những đoạn thẳng – Ƣu điểm: nhanh – Khuyết điểm: khơng tơ màu cho vùng đƣợc  Các loại thiết bị vector thƣờng gặp – Máy vẽ: • Máy vẽ flatbed • Máy vẽ dạng trống – Màn hình vector Faculty of Computer Science and Engineering - HCMUT Slide 16
THIẾT BỊ HIỂN THỊ ĐỒ HỌA  Thiết bị raster: Tạo hình ảnh từ ma trận điểm  Phân loại: – Màn hình video – Màn hình tấm phẳng – Các thiết bị sao chép cứng • Máy in film (film recorder) • Máy in laser • Máy in phun Faculty of Computer Science and Engineering - HCMUT Slide 17
THIẾT BỊ RASTER  Các vấn đề cần tìm hiểu – Bề mặt hiển thị – Bộ đệm frame – Quá trình quét dịng  Bề mặt hiển thị (display surface) Faculty of Computer Science and Engineering - HCMUT Slide 18
THIẾT BỊ RASTER  Bộ đệm frame Bộ điều khiển quét dịng CPU Bộ nhớ hệ Bộ đệm thống Bộ chuyển đổi Bề mặt hiển thị Bus hệ thống Faculty of Computer Science and Engineering - HCMUT Slide 19
THIẾT BỊ RASTER  Quá trình quét dịng Faculty of Computer Science and Engineering - HCMUT Slide 20
THIẾT BỊ RASTER  Màn hình video màu Faculty of Computer Science and Engineering - HCMUT Slide 21
THIẾT BỊ RASTER  Màu chỉ mục và bảng tìm kiếm Faculty of Computer Science and Engineering - HCMUT Slide 22
THIẾT BỊ RASTER  Màu chỉ mục và bảng tìm kiếm Faculty of Computer Science and Engineering - HCMUT Slide 23
THIẾT BỊ RASTER  Màn hình tấm phẳng Faculty of Computer Science and Engineering - HCMUT Slide 24
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính CHƢƠNG 2: BƢỚC ĐẦU TẠO HÌNH ẢNH
NỘI DUNG TRÌNH BÀY  Xây dựng chƣơng trình đồ họa.  Thành phần cơ bản trong một chƣơng trình sử dụng OpenGL.  Vẽ điểm, vẽ đoạn thẳng, vẽ đƣờng gấp khúc, vẽ hình chữ nhật.  Giao tiếp với chuột và bàn phím.  Một số ứng dụng. Faculty of Computer Science and Engineering - HCMUT Slide 26
XÂY DỰNG CHƢƠNG TRÌNH ĐỒ HỌA  Mơi trƣờng lập trình – Phần cứng: màn hình, card đồ họa. – Phần mềm: hệ điều hành (Window), ngơn ngữ lập trình (MS Visual C++), thƣ viện đồ họa (OpenGL, Direct X).  Trình tự xây dựng chƣơng trình đồ họa – Thiết lập chế độ hiển thị (văn bản, đồ họa) – Thiết lập hệ trục tọa độ – Sử dụng các hàm của mơi trƣờng lập trình để tạo dựng hình ảnh. Faculty of Computer Science and Engineering - HCMUT Slide 27
THIẾT LẬP TRỤC TỌA ĐỘ  Mơi trƣờng lập trình DOS (100, 50) (150, 80) (0, 290)  Mơi trƣờng lập trình Window Faculty of Computer Science and Engineering - HCMUT Slide 28
SỬ DỤNG CÁC HÀM ĐỂ XÂY DỰNG HÌNH ẢNH  Hàm do hệ điều hành và ngơn ngữ lập trình cung cấp: – setPixel(x, y, color) tên khác: putPixel(), SetPixel() hoặc drawPoint() – line(100, 50, 150, 80); line(150, 80, 0, 290);  Hàm do thƣ viện đồ họa cung cấp.  Hàm tự xây dựng. Faculty of Computer Science and Engineering - HCMUT Slide 29
THÀNH PHẦN CƠ BẢN CỦA CT SỬ DỤNG OpenGL  OpenGL là thƣ viện lập trình đồ họa độc lập thiết bị – Khơng phụ thuộc vào phần cứng và hệ điều hành – Cách làm thống nhất cho cả đồ họa 2D và 3D  Lập trình Window – Lập trình sự kiện là gì? – Hàng đợi sự kiện (event queue). – Callback function. – Đăng ký hàm xử lý sự kiện: • glutDisplayFunc(myDisplay) • glutReshapeFunc(myReshape) • glutMouseFunc(myMouse) • glutKeyboardFunc(myKeyboard) Faculty of Computer Science and Engineering - HCMUT Slide 30
THÀNH PHẦN CƠ BẢN CỦA CT SỬ DỤNG OpenGL // phần #include những file header cần thiết - xem phụ lục 1 void main(int argc, char argv) { glutInit(&argc, argv); //initialize the tool kit glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB);//set the display mode glutInitWindowSize(640, 480); //set window size glutInitWindowPosition(100, 150); // set window position on screen glutCreateWindow("My first program"); // open the screen window // register the callback function glutDisplayFunc(myDisplay); myInit(); //additional initialization as necessary glutMainLoop(); } Faculty of Computer Science and Engineering - HCMUT Slide 31
THÀNH PHẦN CƠ BẢN CỦA CT SỬ DỤNG OpenGL  Thiết lập hệ trục tọa độ void myInit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 640.0, 0.0,480.0); } Faculty of Computer Science and Engineering - HCMUT Slide 32
VẼ ĐIỂM glBegin(GL_POINTS); glVertex2i(100, 50); My first program glVertex2i(100, 130); glVertex2i(150, 130); glEnd(); glVertex2i( ) thư phần cơ số lượng kiểu của viện bản của đối số đối số gl tên hàm Faculty of Computer Science and Engineering - HCMUT Slide 33
VẼ ĐIỂM  Trạng thái trong OpenGL – glColor3f(1.0, 0.0, 0.0); // đổi màu vẽ thành màu đỏ – glClearColor(1.0,1.0,1.0,0.0);// set white background color – glPointSize(4.0); – glLineWidth(2.0); Faculty of Computer Science and Engineering - HCMUT Slide 34
VẼ ĐIỂM  Một chƣơng trình hồn chỉnh int main(int argc, char* argv[]) { glutInit(&argc, argv); //initialize the tool kit glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB);//set the display mode glutInitWindowSize(640, 480); //set window size glutInitWindowPosition(100, 150); // set window position on screen glutCreateWindow("My first program"); // open the screen window glutDisplayFunc(myDisplay);// register redraw funtion myInit(); glutMainLoop();// go into a perpetual loop return 0; } Faculty of Computer Science and Engineering - HCMUT Slide 35
VẼ ĐIỂM void myInit() { glClearColor(1.0,1.0,1.0,0.0);// set white background color glColor3f(0.0f, 0.0f, 0.0f); // set the drawing color glPointSize(4.0); // a ‘dot’ is 4 x 4 pixels glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 640.0, 0.0, 480.0); } Faculty of Computer Science and Engineering - HCMUT Slide 36
VẼ ĐIỂM void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); // clear the screen glBegin(GL_POINTS); glVertex2i(100, 50); // draw three points glVertex2i(100, 130); glVertex2i(150, 130); glEnd(); glFlush(); // send all output to display } Faculty of Computer Science and Engineering - HCMUT Slide 37
MỘT SỐ VÍ DỤ  Vẽ chịm sao Đại Hùng: {Dubhe, 289, 190}, {Merak, 320, 128}, {Phecda, 239, 67}, {Megrez, 194, 101}, {Alioth, 129, 83}, {Mizar, 75, 73}, {Alcor, 74, 74}, {Alkaid, 20, 10} Faculty of Computer Science and Engineering - HCMUT Slide 38
MỘT SỐ VÍ DỤ  Vẽ Sierpinski gasket T0 P1 P2 P3 T2 T1 Faculty of Computer Science and Engineering - HCMUT Slide 39
MỘT SỐ VÍ DỤ  Vẽ Sierpinski gasket 1. Chọn 3 điểm cố định T0, T1, T2 để tạo nên một tam giác. Lƣu ý rằng chúng ta khơng vẽ 3 điểm này lên màn hình 2. Chọn điểm khởi đầu p0. Điểm p0 đƣợc chọn ngẫu nhiên trong số 3 điểm T0, T1, T2. Sau đĩ vẽ p0. Lặp lại những bƣớc sau cho đến khi đạt đƣợc một kết quả vừa ý 3. Chọn một điểm bất kỳ trong số 3 điểm T0, T1, T2. Gọi điểm đĩ là T. 4. Tạo điểm tiếp theo (pk ) bằng cách lấy điểm trung điểm của đoạn thẳng nối T và điểm trƣớc đĩ (pk-1 ). Tức là : pk = điểm giữa của pk-1 và T 5. Dùng hàm drawDot() để vẽ pk. Faculty of Computer Science and Engineering - HCMUT Slide 40
MỘT SỐ VÍ DỤ  Vẽ Sierpinski gasket void Sierpinski() { GLintPoint T[3]={{10, 10}, {300, 30}, {200, 300}} ; int index = random(3) ; GLintPoint point = T[index] ; glClear(GL_COLOR_BUFFER_BIT); drawDot(point.x, point.y) ; for(int i=0; i<1000;i++) { index = random(3); point.x = (point.x + T[index].x) / 2; point.y = (point.y + T[index].y) / 2; drawDot(point.x, point.y) ; } glFlush(); } Faculty of Computer Science and Engineering - HCMUT Slide 41
MỘT SỐ VÍ DỤ class GLintPoint{ public : GLint x, y ; } ; int random(int m) { return rand() % m ; } void drawDot(GLint x, GLint y) { //vẽ một điểm ở tọa độ (x, y) glBegin(GL_POINTS); glVertex2i(x, y); glEnd(); } Faculty of Computer Science and Engineering - HCMUT Slide 42
VẼ ĐOẠN THẲNG  glBegin(GL_LINES); glVertex2i(40, 100); glVertex2i(202, 96); glEnd();  void drawLineInt(GLint x1, GLint y1, GLint x2, GLint y2) { glBegin(GL_LINES); glVertex2i(x1, y1); glVertex2i(x2, y2); glEnd(); } a) đoạn thẳng mỏng b) đoạn thẳng dày c) đoạn thẳng đứt nét  glBegin(GL_LINES); glVertex2i(10, 20);// vẽ đoạn thẳng thứ nhất glVertex2i(40, 20); glVertex2i(20, 10);// vẽ đoạn thẳng thứ hai glVertex2i(20, 40); thêm 4 lời gọi hàm glVertex2i()để vẽ hai đoạn thẳng cịn lại glEnd(); Faculty of Computer Science and Engineering - HCMUT Slide 43
VẼ ĐƢỜNG GẤP KHƯC  p0 = (x0, y0), p1 = (x1, y1), , pn = (xn, yn)  glBegin(GL_LINE_STRIP); //vẽ đường gấp khúc mở glVertex2i(20, 10); glVertex2i(50, 10); glVertex2i(20, 80); glVertex2i(50, 80); glEnd();  GL_LINE_LOOP a) b) vẽ đường gấp khúc khép kín Faculty of Computer Science and Engineering - HCMUT Slide 44
VÍ DỤ  void hardwirededHouse() { glBegin(GL_LINE_LOOP);//vẽ khung ngơi nhà 120 glVertex2i(40, 40); glVertex2i(40, 90); glVertex2i(70, 120); glVertex2i(100, 90); glVertex2i(100, 40); 40 glEnd(); glBegin(GL_LINE_STRIP);//vẽ ống khĩi 40 120 glVertex2i(50, 100); glVertex2i(50, 120); glVertex2i(60, 120); glVertex2i(60, 110); glEnd(); . . . // vẽ cửa ra vào . . . // vẽ cửa sổ } Faculty of Computer Science and Engineering - HCMUT Slide 45
VÍ DỤ  void parameterizedHouse(GLintPoint peak,GLint width,GLint height) // tọa độ của nĩc nhà là peak, // chiều cao, chiều rộng của ngơi nhà là height và width { glBegin(GL_LINE_LOOP); glVertex2i(peak.x, peak.y); glVertex2i(peak.x + width/2,peak.y – 3*height/8); glVertex2i(peak.x + width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – 3*height/8); glEnd(); vẽ ống khĩi vẽ cửa ra vào vẽ cửa sổ } Faculty of Computer Science and Engineering - HCMUT Slide 46
VÍ DỤ Faculty of Computer Science and Engineering - HCMUT Slide 47
VẼ ĐƢỜNG GẤP KHƯC  class GLintPointArray { const int MAX_NUM = 100; public: int num ; GLintPoint pt[MAX_NUM] ; };  void drawPolyLine(GLintPointArray poly,int closed) { glBegin(closed ? GL_LINE_LOOP : GL_LINE_STRIP); for(int i=0;i<poly.num;i++) glVertex2i(poly.pt[i].x, poly.pt[i].y); glEnd(); glFlush(); } Faculty of Computer Science and Engineering - HCMUT Slide 48
VẼ ĐOẠN THẲNG DÙNG moveto(), lineto()  GLintPoint CP; //global current position void moveto(GLint x, GLint y) { CP.x = x; CP.y = y; //update CP } void lineto(GLint x, GLint y) { glBegin(GL_LINES); //draw the line glVertex2i(CP.x, CP.y); glVertex2i(x, y); glEnd(); glFlush(); CP.x = x; CP.y = y; //update CP } Faculty of Computer Science and Engineering - HCMUT Slide 49
VẼ HÌNH CHỮ NHẬT  Cú pháp glRecti(GLint x1, GLint y1, GLint x2, GLint y2); // vẽ một hình chữ nhật mà hai gĩc đối diện cĩ tọa độ là (x1, y1) và (x2, y2) // hình chữ nhật sẽ được tơ bằng màu vẽ hiện hành (current color)  Ví dụ glClearColor(1.0, 1.0, 1.0, 0.0); // nền màu trắng glClear(GL_COLOR_BUFFER_BIT);// xĩa cửa sổ glColor3f(0.6, 0.6, 0.6); // bright gray glRecti(20, 20, 100, 70); glColor3f(0.2, 0.2, 0.2); // dark gray glRecti(20, 20, 100, 70); glFlush(); Faculty of Computer Science and Engineering - HCMUT Slide 50
HỆ SỐ TỶ LỆ CỦA HÌNH CHỮ NHẬT width aspect ratio height  =1.618034 A B C 11/8.5 4/3  golden landscape tv screen rectangle F E D 8.5/11 1 1/ portrait square Faculty of Computer Science and Engineering - HCMUT Slide 51
NHỮNG ĐỐI TƢỢNG ĐỒ HỌA CƠ BẢN KHÁC TRONG OpenGL GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN v2 v1 v2 v 0 v4 v3 v0 v1 v3 v4 GL_QUADS GL_QUAD_STRIP v0 v4 v2 v6 v1 v7 v3 v5 Faculty of Computer Science and Engineering - HCMUT Slide 52
GIAO TIẾP VỚI CHUỘT Thao tác bấm chuột  glutMouseFunc(myMouse)  void myMouse(int button, int state, int x, int y); button: GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON và GLUT_RIGHT_BUTTON state: GLUT_UP và GLUT_DOWN x, y: tọa độ màn hình, trục x chạy từ trái sang phải, trục y chạy từ trên xuống dƣới  void myMouse(int button, int state, int x, int y) { if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) drawDot(x, screenHeight - y); else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) exit(-1); } Faculty of Computer Science and Engineering - HCMUT Slide 53
GIAO TIẾP VỚI CHUỘT Thao tác di chuyển chuột  glutMotionFunc(myMovedMouse)  void myMovedMouse(int x, int y)  void myMovedMouse(int mouseX, int mouseY) { GLint x = mouseX; GLint y = mouseY; GLint brushSize = 20; glRecti(x, y, x + brushSize, y + brushSize); glFlush(); } Faculty of Computer Science and Engineering - HCMUT Slide 54
GIAO TIẾP VỚI BÀN PHÍM  glutKeyboardFunc(myKeyboard)  void myKeyboard(unsigned int key, int x, int y); – key: mã ASCII của phím bị nhấn – x, y: vị trí chuột  void myKeyboard(unsigned char theKey, int mouseX, int mouseY){ GLint x = mouseX; GLint y = screenHeight – mouseY; switch(theKey) { case ‘p’: drawDot(x, y); // vẽ một điểm ở vị trí con chuột break; case GLUT_KEY_LEFT: List[++last].x = x ; List[last].y = y;//thêm điểm break; case ‘E’: exit(-1); default: break; }} Faculty of Computer Science and Engineering - HCMUT Slide 55
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính CHƢƠNG 3: XÂY DỰNG CƠNG CỤ VẼ HÌNH ẢNH
NỘI DUNG TRÌNH BÀY  Cửa sổ và khung nhìn  Phép biến đổi từ cửa sổ sang khung nhìn  Giải thuật cắt xén  Xây dựng lớp Canvas phục vụ cho việc vẽ hình ảnh  Vẽ tƣơng đối và đồ hoạ con rùa  Tạo hình ảnh từ đa giác đều  Vẽ đƣờng trịn và cung trịn  Biểu diễn và vẽ đƣờng cong theo dạng tham số Faculty of Computer Science and Engineering - HCMUT Slide 57
CỬA SỔ VÀ KHUNG NHÌN  Hệ trục toạ độ thế giới: hệ trục miêu tả đối tƣợng, khơng quan tâm đến đơn vị đo.  Cửa sổ: hình chữ nhật trong hệ trục toạ độ thế giới. Phần nằm trong cửa sổ sẽ đƣợc vẽ, phần nằm ngồi bị loại bỏ.  Khung nhìn: hình chữ nhật trong cửa sổ màn hình, cho phép hiển thị hình ảnh ở đâu trên màn hình. màn hình khung nhìn cửa sổ cửa sổ ứng dụng Faculty of Computer Science and Engineering - HCMUT Slide 58
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN y sy W.t V.t W.r W.l x V.b W.b V.l V.r sx  Cửa sổ là hình chữ nhật cĩ vị trí và kích thƣớc bất kỳ  Khung nhìn cùng là hình chữ nhật cĩ vị trí và kích thƣớc bất kỳ, nhƣng phải nằm trong cửa sổ ứng dụng  Hệ số tỷ lệ của cửa sổ và khung nhìn khơng nhất thiết bằng nhau. Khi hai giá trị này khác nhau, hình ảnh sẽ bị biến dạng Faculty of Computer Science and Engineering - HCMUT Slide 59
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN y sy khung nhìn W.t W.r V.t W.l x V.b sx W.b V.l V.r cửa sổ cửa sổ ứng dụng  (x, y) nằm trong cửa sổ tìm (sx, sy) thuộc khung nhìn  Phép biến đổi phải bảo tồn tỷ lệ khoảng cách  sx phụ thuộc tuyến tính vào x, sy phụ thuộc tuyến tính vào y: sx = Ax + C sy = By + D Faculty of Computer Science and Engineering - HCMUT Slide 60
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN x sx W.l W.r V.l V.r sx V.l x W.l V.r V.l V.r V.l sx x V.l W.l V.r V.l W.r W.l W.r W.l W.r W.l V.r V.l V.r V.l A C V.l W.l V.l AW.l W.r W.l W.r W.l V.t V.b V.t V.b B D V.b W.b V.b BW.b W.t W.b W.t W.b Faculty of Computer Science and Engineering - HCMUT Slide 61
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Hiện thực trong OpenGL void setWindow(float left, float right, float bottom, float top) { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(left, right, bottom, top); } void setViewport(int left, int right, int bottom, int top) { glViewport(left, bottom, right - left, top - bottom); } Faculty of Computer Science and Engineering - HCMUT Slide 62
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Ví dụ sin( x) sinc(x) x void myDisplay() { setWindow(-5.0, 5.0, -0.3, 1.0); setViewport(0, 640, 0, 480); glBegin(GL_LINE_STRIP); for(GLfloat x = -4.0; x< 4.0; x+=0.1) { GLfloat y = sin(3.14159 * x) / (3.14159 * x); GLVertex2f(x, y); } glEnd(); glFlush(); } Faculty of Computer Science and Engineering - HCMUT Slide 63
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Ứng dụng  Cắt xén một phần của hình ảnh  Phĩng to, thu nhỏ và dạo trong khung cảnh Faculty of Computer Science and Engineering - HCMUT Slide 64
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Thiết lập cửa sổ và khung nhìn tự động Thiết lập cửa sổ -Thực hiện thủ tục vẽ hình nhƣng khơng thực hiện thao tác vẽ mà chỉ để tính đƣờng bao. Sau đĩ, thiết lập cửa sổ. - Thực hiện thủ tục vẽ hình một lần nữa. Nhƣng lần này thực hiện thao tác vẽ. y (0.36, -1.75) đường bao x (3.44, -0.51) Faculty of Computer Science and Engineering - HCMUT Slide 65
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Thiết lập cửa sổ và khung nhìn tự động  Thiết lập khung nhìn bảo tồn tỷ lệ khoảng cách – R > W/H : setViewport(0, W, 0, W/R); – R W/H b) R < W/H Faculty of Computer Science and Engineering - HCMUT Slide 66
PHÉP ÁNH XẠ TỪ CỬA SỔ SANG KHUNG NHÌN Thiết lập cửa sổ và khung nhìn tự động  Sự kiện Resize – glutReshapeFunc(myReshape); – void myReshape(GLsizei W, GLsizei H); – void myReshape(GLsizei W, GLsizei H) { if(R > W/H) // R là biến tồn cục, R=hệ số tỷ lệ của cửa sổ setViewport(0, W, 0, W/R); else setViewport(0, H*R, 0, H); } Faculty of Computer Science and Engineering - HCMUT Slide 67
GIẢI THUẬT CẮT XÉN Cắt xén đoạn thẳng Xây dựng hàm clipSegment(p1, p2, A B window) trả về 0 nếu đoạn thẳng nằm cửa sổ ngồi cửa sổ, trả về 1 trong các trƣờng hợp cịn lại. E C – Nằm trong cửa sổ (CD), trả về 1. D – Nằm ngồi cửa sổ (AB), trả về 0. – Một đầu mút nằm trong cửa sổ, một đầu mút nằm ngồi (ED), cắt bỏ phần nằm ngồi và trả về 1. – Hai đầu mút nằm ngồi, một phần đoạn thẳng nằm bên trong (EA), cắt bỏ phần nằm ngồi và trả về 1. Faculty of Computer Science and Engineering - HCMUT Slide 68
GIẢI THUẬT CẮT XÉN Giải thuật Cohen-Sutherland  Mã trong ngồi của điểm: mã hĩa vị trí của điểm so với cửa sổ P P nằm bên trái W? P nằm dưới W? cửa sổ (W) mã của P T T F F P nằm trên W? P nằm bên phải W? TTFF FTFF FTTF TTFF FFFF FFTF cửa sổ TFFT FFFT FFTT Faculty of Computer Science and Engineering - HCMUT Slide 69
GIẢI THUẬT CẮT XÉN Giải thuật Cohen-Sutherland  Trƣờng hợp chấp nhận đơn giản và loại bỏ đơn giản – Chấp nhận đơn giản (AB), dùng cửa sổ lớn. Mã của hai đầu mút đều là FFFF. – Loại bỏ đơn giản (CD), dùng cửa sổ nhỏ. Mã hai đầu mút đều cĩ cùng giá trị T ở một trƣờng cửa sổ (W) C B D A Faculty of Computer Science and Engineering - HCMUT Slide 70
GIẢI THUẬT CẮT XÉN Giải thuật Cohen-Sutherland  Các trƣờng hợp cịn lại: p1 cửa sổ d e top d A dely dely delx e p2 bottom delx e = p1.x - W.right; delx = p2.x - p1.x; dely = p2.y - p1.y; left right p1.y = p1.y + (W.right - p1.x)*dely/delx Faculty of Computer Science and Engineering - HCMUT Slide 71
GIẢI THUẬT CẮT XÉN int clipSegment(Point2& p1, Point2& p2, RealRect W) { do{ if (trivial accept) return 1; if (trivial reject) return 0; if (p1 nằm ngồi) { p2 if (p1 nằm bên trái) cắt xén p1 với cạnh trái C else if (p1 nằm bên phải) cắt xén p1 với cạnh phải D else if (p1 nằm dƣới) cắt xén p1 với cạnh dƣới else if (p1 nằm trên) cắt xén p1 với cạnh trên } B else //p2 nằm ngồi A { p1 if (p2 nằm bên trái) cắt xén p2 với cạnh trái else if (p2 nằm bên phải) cắt xén p2 với cạnh phải else if (p2 nằm dƣới) cắt xén p2 với cạnh dƣới else if (p2 nằm trên) cắt xén p2 với cạnh trên } }while(1); } Faculty of Computer Science and Engineering - HCMUT Slide 72
XÂY DỰNG LỚP CANVAS Mục đích: - Cung cấp những tiện ích để vẽ các đối tƣợng nhƣ đƣờng thẳng, đa giác v.v - Cung cấp cách làm đơn giản để tạo cửa sổ ứng dụng, thiết lập cửa sổ khung nhìn, thiết lập ánh xạ biến đổi từ cửa sổ sang khung nhìn, cùng với những tiện ích trong đồ họa con rùa Faculty of Computer Science and Engineering - HCMUT Slide 73
XÂY DỰNG LỚP CANVAS Các lớp hỗ trợ class Point2 { public: Point2() { x = y = 0.0f; } // constructor Point2(float xx, float yy) { x = xx; y = yy; } void set(float xx, float yy) { x = xx; y = yy; } float getX() { return x;} float getY() { return y;} void draw() { glBegin(GL_POINTS); glVertex2f((GLfloat)x, (GLfloat)y); glEnd(); } private: float x, y; }; Faculty of Computer Science and Engineering - HCMUT Slide 74
XÂY DỰNG LỚP CANVAS Các lớp hỗ trợ class IntRect { public: IntRect() { l = 0; r = 100; b = 0; t = 100; } IntRect( int left, int right, int bottom, int top) { l = left; r = right; b = bottom; t = top; } void set( int left, int right, int bottom, int top) { l = left; r = right; b = bottom; t = top; } void draw(); // draw this rectangle using OpenGL private: int l, r, b, t; }; class RealRect { giống như lớp intRect ngoại trừ dùng float thay cho int }; Faculty of Computer Science and Engineering - HCMUT Slide 75
XÂY DỰNG LỚP CANVAS class Canvas{ public: Canvas(int width, int height, char* windowTitle); void setWindow(float l, float r, float b, float t); void setViewport(int l, int r, int b, int t); IntRect getViewport(); RealRect getWindow(); float getWindowAspectRatio(); void clearScreen(); void setBackgroundColor(float r, float g, float b); void setColor(float r, float g, float b); void lineTo(float x, float y); void lineTo(Point2 p); void moveTo(float x, float y); void moveTo(Point2 p); những phương thức khác sẽ được định nghĩa sau private: Point2 CP; //current position in the world IntRect viewport; // the current viewport RealRect window;// the current window những biến thành viên khác sẽ được định nghĩa sau }; Faculty of Computer Science and Engineering - HCMUT Slide 76
XÂY DỰNG LỚP CANVAS Canvas::Canvas(int width, int height, char* windowTitle) { char* argv[1]; char dummyString[8]; argv[0] = dummyString; int argc = 1; glutInit(&argc, argv); //initialize the tool kit glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB); //set the display mode glutInitWindowSize(width, height); //set window size glutInitWindowPosition(20, 20); // set window position on screen glutCreateWindow(windowTitle); // open the screen window setWindow(0, (float)width, 0, (float)height);//default window setViewport(0, width, 0, height); //default viewport CP.set(0.0f, 0.0f); //initialize the CP to (0, 0) }; Faculty of Computer Science and Engineering - HCMUT Slide 77
XÂY DỰNG LỚP CANVAS void Canvas::moveTo(float x, float y) { CP.set(x, y); } void Canvas::lineTo(float x, float y) { glBegin(GL_LINE); glVertex2f((GLfloat) CP.getX(), (GLfloat) CP.getY()); glVertex2f((GLfloat) x, (GLfloat) y); glEnd(); CP.set(x, y); glFlush(); } void Canvas::setWindow(float l, float r, float b, float t) { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D((GLdouble)l,(GLdouble)r,(GLdouble)b,(GLdouble)t); window.set(l, r, b, t); } Faculty of Computer Science and Engineering - HCMUT Slide 78
XÂY DỰNG LỚP CANVAS Canvas cvs(640, 480, "try out Canvas"); void display() { cvs.clearScreen(); //xĩa màn hình cvs.setWindow(-10.0, 10.0, -10.0, 10.0); cvs.setViewport(10, 460, 10, 460); cvs.moveTo(0, -10.0);// vẽ đoạn thẳng cvs.lineTo(0, 10.0); RealRect box(-2.0, 2.0, -1.0, 1.0);//tạo hình chữ nhật box.draw(); } void main() { cvs.setBackgroundColor(1.0, 1.0, 1.0); cvs.setColor(0.0, 0.0, 0.0); glutDisplayFunc(myDisplay); glutMainLoop(); } Faculty of Computer Science and Engineering - HCMUT Slide 79
VẼ TƢƠNG ĐỐI moveTo(first data point); drawMarker(); for(each remaining data point) { lineTo(the next point); drawMarker(); } Faculty of Computer Science and Engineering - HCMUT Slide 80
VẼ TƢƠNG ĐỐI void Canvas::moveRel(float dx, float dy) { CP.set(CP.getX() + dx, CP.getY() + dy); } void Canvas::lineRel(float dx, float dy) { float x =CP.getX() + dx; float y =CP.getY() + dy; lineTo(x, y); CP.set(x, y); } Faculty of Computer Science and Engineering - HCMUT Slide 81
VẼ TƢƠNG ĐỐI void arrow(float f,float h, float t,float w) CP { f cvs.lineRel(-w-t/2, -f); cvs.lineRel(w, 0); h cvs.lineRel(0, -h); cvs.lineRel(t, 0); w t w cvs.lineRel(0, h); cvs.lineRel(w, 0); cvs.lineRel(-w-t/2, f); } Faculty of Computer Science and Engineering - HCMUT Slide 82
ĐỒ HỌA CON RÙA Thêm vào lớp Canvas: CP mới dist  Biến CD chứa hƣớng hiện hành  turnTo(float angle) CD = angle;  turn(float angle) CD CD += angle; (CCW) CP cũ  forward(float dist,int isVisible) void Canvas::forward(float dist, int isVisible) { const float RadPerDeg=0.017453393; float x = CP.getX() + dist*cos(RadPerDeg *CD); float y = CP.getY() + dist*sin(RadPerDeg *CD); if( isVisible) lineTo(x, y); else moveTo(x, y); } Faculty of Computer Science and Engineering - HCMUT Slide 83
ĐỒ HỌA CON RÙA Ví dụ: for(some number of iteration){ //draw a line in current Vẽ polyspirals forward(length, 1); //turn through angle degreee directionturn(angle); a) b) // increment the line length length += increment; } c) d) (a) 600 (b) 89.50 (c) -1440 (d) 1700 Faculty of Computer Science and Engineering - HCMUT Slide 84
TẠO HÌNH ẢNH TỪ ĐA GIÁC ĐỀU Đa giác đều  Định nghĩa: đa giác đơn, các cạnh bằng nhau, hai cạnh kề nhau hợp với nhau một gĩc bằng nhau. n: 3 4 5 6 40 Faculty of Computer Science and Engineering - HCMUT Slide 85
TẠO HÌNH ẢNH TỪ ĐA GIÁC ĐỀU Vẽ đa giác đều Pi = (Rcos(2 i/n), Rsin(2 i/n)) với i = 0, 1, , n-1. void ngon(int n, y float cx, float cy, float r, float rotA){ P P1= (Rcos(ia), Rsin(ia)) 2 if (n < 3) return; double angle = rotA*PI/180; a x double angleInc = 2*PI/n; R P0 cvs.moveTo(r*cos(angle)+cx, r*sin(angle)+cy); for(int k=0;k<n;k++) { angle += angleInc; cvs.lineTo(r*cos(angle)+cx, r*sin(angle)+cy); } } Faculty of Computer Science and Engineering - HCMUT Slide 86
TẠO HÌNH ẢNH TỪ ĐA GIÁC ĐỀU Vẽ đa giác bằng đồ họa con rùa for(i=0;i<6;i++) { 360/n cvs.forward(L, 1); R cvs.turn(60); } L Biến thể của đa giác đều a) b) c) Faculty of Computer Science and Engineering - HCMUT Slide 87
VẼ ĐƢỜNG TRÕN VÀ CUNG TRÕN  Vẽ đƣờng trịn void drawCircle(Point2 center, float radius) { const int numVerts = 50; ngon(numVerts,center.getX(),center.getY(),radius,0); }  Cách chỉ định một đƣờng trịn – Tâm và bán kính – Tâm và một điểm nằm trên đƣờng trịn – Ba điểm nằm trên đƣờng trịn Faculty of Computer Science and Engineering - HCMUT Slide 88
VẼ ĐƢỜNG TRÕN VÀ CUNG TRÕN  Vẽ cung trịn void drawArc(Point2 center, float r, y float rotA, float sweep) R { b const int n=30; //number segments a float angle = rotA*PI/180; c float angleInc = 2*PI/n; x float cx=center.getX(), cy=center.getY(); cvs.moveTo(r*cos(angle)+cx, r*sin(angle)+cy); for(int k=1;k<n;k++) { angle += angleInc; cvs.lineTo(r*cos(angle)+cx, r*sin(angle)+cy); } } Faculty of Computer Science and Engineering - HCMUT Slide 89
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG  Dạng ẩn: mơ tả đƣờng cong bằng hàm F(x, y). Hàm này cho biết mối quan hệ giữa x và y: điểm (x, y) nằm trên đƣờng cong nếu và chỉ nếu F(x, y) = 0. – F(x, y) = (y - Ay)(Bx - Ax) - (x - Ax)(By - Ay) (đthẳng) – F(x, y) = x2 + y2 – R2 (đtrịn)  Hàm trong ngồi – F(x, y) = 0, nếu (x, y) nằm trên đƣờng cong – F(x, y) > 0, nếu (x, y) nằm ngồi đƣờng cong – F(x, y) < 0, nếu (x, y) nằm trong đƣờng cong  Nhƣợc điểm của dạng ẩn – Đối với hàm đa trị, khơng thể suy ra y=g(x) từ F(x, y), chẳng hạn từ dạng ẩn của đƣờng trịn, ta cĩ: y R2 x2 Faculty of Computer Science and Engineering - HCMUT Slide 90
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Dạng biểu diễn tham số – Ví dụ 1: Đoạn thẳng cĩ hai đầu mút là A và B. Ở thời điểm t = 0, đi qua điểm A; ở thời điểm t = 1 qua điểm B. x(t) = Ax + (Bx - Ax)t y(t) = Ay + (By - Ay)t @ t = 1 B (Bx, By) @ t = 0 A (Ax, Ay) Faculty of Computer Science and Engineering - HCMUT Slide 91
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Dạng biểu diễn tham số - Ví dụ 2: Đƣờng ellipse cĩ các t= /2 y y(t) (x(t), y(t)) bán kính là W và H H H x(t) = Wcos(t) W 2 -c c x t y(t) = Hsin(t) t= -H với ( 0 t 2 ) -W W x(t) 2 t Faculty of Computer Science and Engineering - HCMUT Slide 92
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Dạng biểu diễn tham số – dạng ẩn và dạng tham số cĩ cùng biểu diễn một đƣờng cong hay khơng? – từ dạng tham số tìm dạng ẩn? • Ví dụ: đối với hình ellipse x(t) = Wcos(t) cos(t) = x/W y(t) = Hsin(t) sin(t) = y/H 2 2 x y cos2(t) + sin2(t) = 1 1 W H Faculty of Computer Science and Engineering - HCMUT Slide 93
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Vẽ đƣờng cong biểu diễn dƣới dạng tham số a) t = T b) Pm P2 t = 0 P P(t) = (x(t), y(t)) 1 //draw the curve (x(t), t(t)) using //the array t[0], , t[n-1] of “sample-times” glBegin(GL_LINES); for(int i=0;i<n;i++) glVertex2f(x(t[i]), y(t[i])); glEnd() ; Faculty of Computer Science and Engineering - HCMUT Slide 94
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Superellipse – Dạng ẩn n n x y 1 W H – Dạng tham số x(t) W cos(t)cos2/ n 1(t) y(t) H sin(t)sin 2/ n 1(t) n = 2m/(2n+1) n 1 phình ra n = 1 hình vuơng Faculty of Computer Science and Engineering - HCMUT Slide 95
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Superhyperbola – Dạng biểu diễn tham số 2/ n 1 x(t) W sec(t)sec (t) y(t) H tan(t) tan2/ n 1(t) n = 2m/(2n+1) n 1 phình ra n = 1 đƣờng thẳng Faculty of Computer Science and Engineering - HCMUT Slide 96
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Đƣờng cong trong hệ tọa độ cực y x(t)=r(t)cos((t)) y(t)=r(t)sin((t)) (r,  ) r x = f()cos()  x y = f()sin() Ví dụ cardioid f() = K(1 + cos()) rose f() = Kcos(n) Archimedean spiral f() = K Faculty of Computer Science and Engineering - HCMUT Slide 97
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Đƣờng cong trong hệ tọa độ cực – Mặt cắt nĩn (conic section) 1 a=1 parabola f () 1 a cos() 0 a 1 hyperbola – Đƣờng xoắn ốc logarit f() = Kea a = cot() a) b) Faculty of Computer Science and Engineering - HCMUT Slide 98
DẠNG BIỂU DIỄN THAM SỐ CỦA ĐƢỜNG CONG Đƣờng cong 3D P(t) = (x(t), y(t), z(t)) Đƣờng helix x(t) = cos(t) y(t) = sin(t) z(t) = bt Đƣờng toroidal spiral x(t) = (asin(ct) + b)cos(t), y(t) = (asin(ct) + b)sin(t), z(t) = acos(ct) Faculty of Computer Science and Engineering - HCMUT Slide 99
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 4: VECTOR TRONG ĐỒ HỌA MÁY TÍNH
NỘI DUNG TRÌNH BÀY  Giới thiệu  Ơn tập kiến thức về vector  Tích vơ hƣớng  Tích cĩ hƣớng  Biểu diễn đối tƣợng hình học  Giao của hai đoạn thẳng  Đƣờng trịn đi qua ba điểm  Giao của đƣờng thẳng và mặt phẳng  Bài tốn liên quan đến đa giác Faculty of Computer Science and Engineering - HCMUT Slide 101
GIỚI THIỆU  Tại sao vector lại quan trọng trong đồ họa máy tính Faculty of Computer Science and Engineering - HCMUT Slide 102
GIỚI THIỆU  Hệ trục tọa độ – Hệ trục tọa độ bàn tay phải (dùng trong tốn học v.v) – Hệ trục tọa độ bàn tay trái (trong đồ họa) – Đơn vị của trục tọa độ khơng quan trọng Faculty of Computer Science and Engineering - HCMUT Slide 103
ƠN TẬP KIẾN THỨC VỀ VECTOR  Định nghĩa: Vector là đại lƣợng cĩ độ dài và hƣớng. Nĩ thƣờng đƣợc dùng để biểu diễn các đại lƣợng vật lý nhƣ lực, vận tốc. Lưu ý: - Điểm đặt của vector khơng quan trọng - Vector vị trí Faculty of Computer Science and Engineering - HCMUT Slide 104
ƠN TẬP KIẾN THỨC VỀ VECTOR a = (2, 5, 6), b = (-2, 7, 1)  Phép cộng: a + b = (0, 12, 7)  Phép nhân tỷ lệ: 6a = (12, 30, 39)  Phép trừ: a - b = a + (-b) = (4, -2, 5) Faculty of Computer Science and Engineering - HCMUT Slide 105
ƠN TẬP KIẾN THỨC VỀ VECTOR Faculty of Computer Science and Engineering - HCMUT Slide 106
ƠN TẬP KIẾN THỨC VỀ VECTOR  Tổ hợp tuyến tính của m vector v1,v2, ,vm là vector w = a1v1 + a2v2 + + amvm (với a1, a2, ,am là các đại lƣợng vơ hƣớng)  Tổ hợp affine là tổ hợp tuyến tính với a1+ a2+ +am = 1  Tổ hợp lồi là tổ hợp tuyến tính với a1+ a2+ +am = 1 và aj >=0, với i=1, ,m 2 2 2  Độ lớn của vector: w w1 w2 wn a  Vector đơn vị: u a a Faculty of Computer Science and Engineering - HCMUT Slide 107
TÍCH VƠ HƢỚNG  Định nghĩa: Tích vơ hƣớng d của hai vector n chiều v = (v1, v2, , vn) và w = (w1, w2, , wn) và đƣợc ký hiệu là v w và cĩ giá trị n d v w vi wi i 1  Tính chất: – Tính đối xứng (symmetry): a b = b a – Tính tuyến tính (linearity): (a + c) b = a b + c b – Tính đồng nhất (homogeneity): (sa) b = s(a b) – |b|2 = b b Faculty of Computer Science and Engineering - HCMUT Slide 108
TÍCH VƠ HƢỚNG  Gĩc giữa hai vector: b c = |b||c| cos() cos(θ) ub uc Faculty of Computer Science and Engineering - HCMUT Slide 109
TÍCH VƠ HƢỚNG  Vector vuơng gĩc với vector 2 chiều Cho a = (ax, ay). Thì a  = (-ay, ax) là vector vuơng gĩc ngƣợc chiều kim đồng hồ với a. Vector này thƣờng đƣợc gọi là vector "perp" (viết tắt của perpendicular). Faculty of Computer Science and Engineering - HCMUT Slide 110
TÍCH VƠ HƢỚNG  Phép chiếu trực giao và khoảng cách từ một điểm đến đt c = Kv + Mv (cần xác định K và M) c v c v c v = Kv v + Mv v K M v v v v    v c v c  v c v c c v v distance v 2 2 2 v v v v Faculty of Computer Science and Engineering - HCMUT Slide 111
TÍCH VƠ HƢỚNG  Tìm tia phản xạ r = e – m, e = a - m r = a - 2m a n m n (a un )un n 2 r = a - 2(a un )un Faculty of Computer Science and Engineering - HCMUT Slide 112
TÍCH CĨ HƢỚNG  Tích cĩ hƣớng của hai vector là một vector  Tích cĩ hƣớng chỉ đƣợc định nghĩa cho vector 3 chiều  Cho hai vector 3 chiều a = (ax, ay, az) và b = (bx, by, bz), thì tích cĩ hƣớng của chúng nhƣ sau a b = (aybz – azby)i + (azbx – axbz)j + (axby – aybx)k i j k a b ax a y az bx by bz |a b| = |a||b|sin() Faculty of Computer Science and Engineering - HCMUT Slide 113
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Hệ tọa độ và khung tọa độ – (3, 2, 7) là điểm hay là vector? – Khung tọa độ: gốc  và 3 trục a, b, c – Biểu diễn vector v bằng cách tìm (v1, v2, v3) sao cho v = v1a + v2b + v3c - Biểu diễn điểm P -  = p1a + p2b + p3c P =  + p1a + p2b + p3c Faculty of Computer Science and Engineering - HCMUT Slide 114
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Biểu diễn đồng nhất v 1 P1 v2 P v a, b, c,  2 P a, b, c,  v3 P3 0 1 – Hệ tọa độ thơng thƣờng hệ tọa độ đồng nhất điểm: thêm 1; vector : thêm 0 - Hệ tọa độ đồng nhất hệ tọa độ thơng thƣờng điểm: xĩa 1; vector : xĩa 0. Faculty of Computer Science and Engineering - HCMUT Slide 115
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Điểm – điểm = vector;(x, y, z, 1) - (u, v, w, 1) = (x - u,y - v,z - w, 0).  Điểm + vector = điểm; (x, y, z, 1) + (d, e, f, 0) = (x + d, y + e, z + f, 1).  Vector + vector = vector; (d, e, f, 0) + (m, n, r, 0) = (d + m, e + n, f + r, 0)  Đại lƣợng vơ hƣớng x Vector = Vector; 3(d, e, f, 0) = (3d, 3e, 3f, 0)  Tổ hợp tuyến tính của vector là vector; v = (v1, v2, v3, 0) và w = (w1, w2, w3, 0) , a, b là hai đại lƣợng vơ hƣớng thì av + bw = (av1 + bw1, av2 + bw2, av3 + bw3, 0) Faculty of Computer Science and Engineering - HCMUT Slide 116
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Tổ hợp affine các điểm: là một điểm. P = (P1, P2, P3, 1) và R = (R1, R2, R3, 1), gọi f và g là hai giá trị vơ hƣớng: fP + gR = (fP1 + gR1, fP2 + gR2, fP3 + gR3, f + g) .  Điểm cộng vector là tổ hợp affine các điểm – P = A + t(B - A) – P = tB + (1 - t)A  Tổ hợp tuyến tính phụ thuộc hệ tọa độ Faculty of Computer Science and Engineering - HCMUT Slide 117
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Nội suy tuyến tính hai điểm: P = A(1 - t) + Bt  float lerp(float a, float b, float t) { return a + (b - a) * t; }  Point2 Canvas::Tween(Point2 A, Point2 B, float t)  Sử dụng tweening trong nghệ thuật, hoạt hình – Pi (t) = (1 - t)Ai + tBi. Faculty of Computer Science and Engineering - HCMUT Slide 118
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Nội suy bậc 2, bậc 3 – P(t) = (1 - t)2A + 2(1 - t)tB + t2C 1 = ((1 – t) + t)2 Faculty of Computer Science and Engineering - HCMUT Slide 119
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Biểu diễn đƣờng thẳng: đoạn thẳng, tia, đƣờng thẳng  Biểu diễn tham số – L(t) = C + bt – Đoạn thẳng, 0 t 1 – Tia, 0 t – Đƣờng thẳng, - t Faculty of Computer Science and Engineering - HCMUT Slide 120
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Dạng biểu diễn điểm pháp tuyến: n (R - C) = 0  Chuyển đổi giữa những cách biểu diễn khác nhau Faculty of Computer Science and Engineering - HCMUT Slide 121
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Biểu diễn mặt phẳng dƣới dạng tham số: P(s, t) = C + sa + tb  Chuyển đổi giữa những cách biểu diễn khác nhau Faculty of Computer Science and Engineering - HCMUT Slide 122
BIỂU DIỄN ĐỐI TƢỢNG HÌNH HỌC  Mảnh phẳng: P(s, t) = C + as + bt P(0, 0) = C; P(1, 0) = C + a P(0, 1) = C + b P(1, 1) = C + a + b Faculty of Computer Science and Engineering - HCMUT Slide 123
GIAO ĐIỂM CỦA 2 ĐOẠN THẲNG AB(t) = A + bt ; CD(u) = C + du Giao điểm: tìm t và u sao cho A + bt = C + du bt = c + du với c = C - A d bt = d c  d b 0. d c t d b b c u d b  d b = 0 Faculty of Computer Science and Engineering - HCMUT Slide 124
ĐƢỜNG TRÕN ĐI QUA 3 ĐIỂM 1  Đƣờng trung trực L(t) (A B) (B A) t 2  Đặt a = B - A; b = C - B; c = A - C;  Trung trực của AB; A + a/2 + at ; của CD; A - c/2 + cu  at = b/2 + cu 1 b c 1 b c  t S A a a 2 a c 2 a c Faculty of Computer Science and Engineering - HCMUT Slide 125
GIAO CỦA ĐƢỜNG THẲNG VÀ MẶT PHẲNG  n (A + cthit - B) = 0 n (A - B) + n cthit = 0 n B A t hit n c  điểm cắt Phit = A + cthit Faculty of Computer Science and Engineering - HCMUT Slide 126
GIAO CỦA ĐƢỜNG THẲNG VÀ MẶT PHẲNG  n c > 0, tia đi "dọc theo" hƣớng pháp tuyến của đƣờng thẳng  n c = 0, tia song song với đƣờng thẳng  n c < 0, tia đi "ngƣợc với" hƣớng pháp tuyến của đƣờng thẳng Faculty of Computer Science and Engineering - HCMUT Slide 127
BÀI TỐN LIÊN QUAN ĐẾN ĐA GIÁC  Định nghĩa đa giác và đa diện  Các bài tốn liên quan – Điểm P cho trƣớc nằm trong hay nằm ngồi đa giác (hoặc khối đa diện) – Giao điểm đầu tiên tia R với đa giác (hoặc khối đa diện) – Phần nào của đƣờng thẳng L sẽ nằm trong đa giác (hoặc khối đa diện), phần nào nằm ngồi. Faculty of Computer Science and Engineering - HCMUT Slide 128
BÀI TỐN LIÊN QUAN ĐẾN ĐA GIÁC  Bài tốn tìm giao điểm  Đa giác (đa diện) lồi đƣợc mơ tả bởi các đƣờng thẳng (mặt phẳng) bao tìm giao điểm với đƣờng thẳng chẳng qua tìm giao điểm của đƣờng thẳng với tập các đƣờng thẳng (mặt phẳng) bao Faculty of Computer Science and Engineering - HCMUT Slide 129
BÀI TỐN LIÊN QUAN ĐẾN ĐA GIÁC  Tìm giao điểm của tia với đa giác – Điểm cắt vào = A + ctin ; – Điểm cắt ra = A + ctout ; – Nằm trong đa giác[tin, tout ].  Cắt xén tia A' = A + c max(0, tin) C' = A + c min(1, tout) Faculty of Computer Science and Engineering - HCMUT Slide 130
BÀI TỐN LIÊN QUAN ĐẾN ĐA GIÁC  Xác định tia đi vào hay đi ra khỏi đa giác – Nếu n c > 0, tia đi ra khỏi P – Nếu n c = 0, tia song song với đƣờng thẳng – Nếu n c < 0, tia đi vào P  Với mỗi đƣờng bao, chúng ta sẽ phải xác định: - Thời gian cắt của tia với đƣờng bao. - Tia đi vào hay đi ra khỏi đa giác ở đƣờng bao. Faculty of Computer Science and Engineering - HCMUT Slide 131
BÀI TỐN LIÊN QUAN ĐẾN ĐA GIÁC Gọi đoạn [tin, tout ] là đoạn dự tuyển  Khởi gán giá trị ban đầu [0, 1] cho đoạn dự tuyển  Với mỗi đƣờng bao, xác định thit và xác định tia đi vào hay đi ra khỏi đa giác: – Nếu tia đi vào đa giác, thì tin = max(tin, thit ). – Nếu tia đi ra khỏi đa giác, thì tout = min(tout, thit ).  Nếu tin > tout thì tia khơng cắt đa giác, và chƣơng trình kết thúc.  Nếu đoạn dự tuyển khơng trống, thì đoạn thẳng từ A + ctin đến A + ctout nằm trong P. Faculty of Computer Science and Engineering - HCMUT Slide 132
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 5: BIẾN ĐỔI HÌNH
NỘI DUNG TRÌNH BÀY  Giới thiệu những khái niệm cơ bản của phép biến đổi affine.  Phép biến đổi hình 2D  Phép biến đổi hình 3D  Biến đổi hệ trục tọa độ  Sử dụng phép biến đổi affine trong chƣơng trình  Vẽ khung cảnh 3D với OpenGL Faculty of Computer Science and Engineering - HCMUT Slide 134
CÁC KHÁI NIỆM CƠ BẢN  Phép biến đổi affine là khái niệm cơ bản nhất của đồ họa máy tính, là trọng tâm của OpenGL.  Dùng khung tọa độ và hệ tọa độ đồng nhất.  Phép biến đổi affine tổng thể là hợp của 3 phép biến đổi affine cơ bản: phép biến đổi tỷ lệ, phép quay và phép tịnh tiến. a) b) y sau khi sau khi y biến đổi trước khi biến đổi biến đổi trước khi biến đổi x z x Faculty of Computer Science and Engineering - HCMUT Slide 135
CÁC KHÁI NIỆM CƠ BẢN  Ứng dụng của phép biến đổi Tạo khung cảnh 3D từ những đối tƣợng đơn giản Tạo đối tƣợng dùng hình mẫu phức tạp từ đối 12 lần tƣợng đơn giản Faculty of Computer Science and Engineering - HCMUT Slide 136
CÁC KHÁI NIỆM CƠ BẢN  Ứng dụng của phép biến đổi Nhìn khung cảnh ở # những gĩc nhìn khác nhau bằng cách thay đổi hƣớng, vị trí của camera # Tạo hoạt hình bằng cách di chuyển và quay hệ tọa độ riêng của từng đối tƣợng Faculty of Computer Science and Engineering - HCMUT Slide 137
CÁC KHÁI NIỆM CƠ BẢN  Sử dụng phép biến đổi trong OpenGL P , P , Q , Q , Xử lý & Đƣờng ống đồ 1 2 CT 1 2 hiển thị họa: là một loạt những thao tác P y 3 y đƣợc áp dụng cho P2 các điểm gửi P xuống đƣờng ống. z 1 x z x glBegin(GL_LINES); glVertex3f(. . .); //gửi P1 đến đƣờng ống glVertex3f(. . .); //gửi P2 đến đƣờng ống glVertex3f(. . .); //gửi P3 đến đƣờng ống glEnd(); Faculty of Computer Science and Engineering - HCMUT Slide 138
CÁC KHÁI NIỆM CƠ BẢN  Biến đổi đối tƣợng và biến đổi hệ trục tọa độ – Biến đổi đối tƣợng: hệ trục tọa độ giữ nguyên, biến đổi đối tƣợng. – Biến đổi hệ trục tọa độ: biến đổi hệ trục tọa độ, biểu diễn đối tƣợng trong hệ trục mới. Faculty of Computer Science and Engineering - HCMUT Slide 139
CÁC KHÁI NIỆM CƠ BẢN  Định nghĩa phép biến đổi tổng quát – Phép biến đổi làm thay đổi điểm P trong khơng gian 2D (hoặc 3D) thành một điểm Q bằng một cơng thức hay thuật tốn T nào đĩ. P = (Px, Py, 1); Q = (Qx, Qy, 1) (Q - ảnh) (Qx, Qy, 1) = T (Px, Py, 1) (T – phép biến đổi) Q = T(P). a) b) y Q y T Q P 0 P x x z Faculty of Computer Science and Engineering - HCMUT Slide 140
CÁC KHÁI NIỆM CƠ BẢN  Phép biến đổi affine – Là phép biến đổi thơng dụng trong đồ họa máy tính – Cĩ dạng đơn giản: tọa độ của Q là tổ hợp tuyến tính các tọa độ của P. Qx = m11Px +m12Py +m13 Qy = m21Px +m22Py +m23 Q m m m P x 11 12 13 x Qy m21 m22 m23 Py 1 0 0 1 1 hàng thứ 3 luơn là T (0, 0, 1) Faculty of Computer Science and Engineering - HCMUT Slide 141
PHÉP BIẾN ĐỔI HÌNH 2D Phép tịnh tiến Q 1 0 m P Q = P + m x 13 x x x 13 Q 0 1 m P Q = P + m y 23 y y y 23 1 0 0 1 1 y 1 0 2 y 0 1 1 0 0 1 1 x x 2 Faculty of Computer Science and Engineering - HCMUT Slide 142
PHÉP BIẾN ĐỔI HÌNH 2D  Phép biến đổi tỷ lệ Q S 0 0 P x x x Q = S P x x x Qy 0 S y 0 Py Q = S P y y y 1 0 0 1 1 y Phép biến 1.3 0 0 đổi tỷ lệ y 0 1.3 0 đều 0 0 1 x y 1.5 0 0 Phép biến x 0 0.5 0 đổi tỷ lệ khơng đều 0 0 1 x Faculty of Computer Science and Engineering - HCMUT Slide 143
PHÉP BIẾN ĐỔI HÌNH 2D  Phép biến đổi tỷ lệ (phép đối xứng) y 1 0 0 1 0 0 0 1 0 0 1 0 0 0 1 y 0 0 1 x y x 1 0 0 x 0 1 0 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 144
PHÉP BIẾN ĐỔI HÌNH 2D  Phép biến đổi tỷ lệ (phép đối xứng) y x 1 0 0 0 2 0 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 145
PHÉP BIẾN ĐỔI HÌNH 2D  Phép quay cos() sin() 0 Qx = Px cos() – Py sin() sin() cos() 0 Q = P sin() + P cos() y x y 0 0 1 0.5 3 / 2 0 y 3 / 2 0.5 0 y 0 0 1 x 600 x Faculty of Computer Science and Engineering - HCMUT Slide 146
PHÉP BIẾN ĐỔI HÌNH 2D  Phép quay (chứng minh) y Q R P  x Qx R cos( ) Qy Rsin( ) Qx R cos cos Rsin sin Px cos Py sin Qy Rsin cos R cos sin Px sin Py cos Faculty of Computer Science and Engineering - HCMUT Slide 147
PHÉP BIẾN ĐỔI HÌNH 2D y  Phép trƣợt 1 h 0 0 1 0 0 0 1 x y y 1 0 0 g 1 0 x 0 0 1 x 1 h 0 y g 1 0 0 0 1 x Faculty of Computer Science and Engineering - HCMUT Slide 148
PHÉP BIẾN ĐỔI HÌNH 2D  Nghịch đảo của phép biến đổi affine y a) b) T Q y T Q T’ P P T’ 0 x x z P = T„Q = M-1Q đa số các trƣờng hợp cột thứ 3 là (0, 0, 1) 1 1 m22 m12 M det M m21 m11 det M = m11 m22 – m12 m21 Faculty of Computer Science and Engineering - HCMUT Slide 149
PHÉP BIẾN ĐỔI HÌNH 2D  Nghịch đảo của phép biến đổi affine Phép biến đổi tỷ lệ Phép quay 1 0 0 cos() sin() 0 S x 1 1 M sin() cos() 0 M 1 0 0 S y 0 0 1 0 0 1 Phép tịnh tiến Phép trƣợt 1 0 m 1 h 0 13 1 1 M 0 1 0 M 0 1 m23 0 0 1 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 150
PHÉP BIẾN ĐỔI HÌNH 2D  Hợp các phép biến đổi T (T P) = (T T )P y Q 2 1 2 1 T1() T2() P • Tịnh tiến điểm P với vector v = (- Vx, -Vy) • Quay xung quanh gốc tọa độ gĩc . W T() • Tịnh tiến điểm P về vị trí cũ. x 1 0 V cos( ) sin( ) 0 1 0 V x x 0 1 Vy sin( ) cos( ) 0 0 1 Vy Q 0 0 1 0 0 1 0 0 1 Q’  P cos( ) sin( ) d V x sin( ) cos( ) d  y P’ 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 151
PHÉP BIẾN ĐỔI HÌNH 2D Tính chất của phép biến đổi affine  Bảo tồn tổ hợp affine của các điểm T(a1P1 + a2P2) = a1T(P1) + a2T(P2) với a1 + a2 = 1  Bảo tồn đƣờng thẳng và mặt phẳng  Bảo tồn tính song song  Ảnh hƣởng đến diện tích : area after transformation B det M 1 - t area before transformation T  Bảo tồn tỷ lệ khoảng cách t P t A 1 - t T(A) T(P) T(B) Faculty of Computer Science and Engineering - HCMUT Slide 152
PHÉP BIẾN ĐỔI HÌNH 2D Tính chất của phép biến đổi affine  Cột của ma trận M là khung tọa độ sau khi biến đổi y Phép quay xung m 2 (-2, 3) quanh điểm (-2, 3) m1 với gĩc quay 300 m j 3 0.866 0.5 1.232  i x 0.5 0.866 1.402 0 0 1 m m m 11 12 13 M m21 m22 m23 m1 m2 m3 m1 = Mi, m2 = Mj, m = M 0 0 1 3   Mỗi PBĐ affine là hợp của những PBĐ affine đơn giản M = (tịnh tiến)(trƣợt)(tỷ lệ)(quay) Faculty of Computer Science and Engineering - HCMUT Slide 153
PHÉP BIẾN ĐỔI HÌNH 3D  Cơng thức tổng quát m m m m 11 12 13 14 m21 m22 m23 m24 M m31 m32 m33 m34 0 0 0 1 Q P x x Qy Py M Qz Pz 1 1 Faculty of Computer Science and Engineering - HCMUT Slide 154
PHÉP BIẾN ĐỔI HÌNH 3D  Phép tịnh tiến 1 0 0 m 14 0 1 0 m24 0 0 1 m34 0 0 0 1  Phép biến đổi tỷ lệ y y S 0 0 0 x 0 S y 0 0 0 0 Sz 0 z x z x 0 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 155
PHÉP BIẾN ĐỔI HÌNH 3D  Phép trƣợt 1 0 0 0 f 1 0 0 Q = (Px, fPx + Py, Pz ) 0 0 1 0 0 0 0 1  Phép quay y  x-roll, y-roll, z-roll  khi gĩc quay là 900: P’ Q’ z-roll: x y Q’’ Q P x-roll: y z P’’ z x y-roll: z x Faculty of Computer Science and Engineering - HCMUT Slide 156
PHÉP BIẾN ĐỔI HÌNH 3D  Phép quay 1 0 0 0 c 0 s 0 c s 0 0 0 c s 0 0 1 0 0 s c 0 0 Rx ( ) R ( ) R ( ) 0 s c 0 y z s 0 c 0 0 0 1 0 0 0 0 1 0 0 0 1 0 0 0 1 a) ngơi b) quay quanh trục c) quay quanh trục d) quay quanh trục nhà x (- 700) y (300) z (- 900) y y y y z x z x z x z x Faculty of Computer Science and Engineering - HCMUT Slide 157
PHÉP BIẾN ĐỔI HÌNH 3D  Hợp các phép biến đổi – Phép quay xung quanh một trục bất kỳ y u  u x.  Quay xung quanh trục x với gĩc Q  quay . P  Khơi phục u.   z x Ru()=Ry(-)Rz()Rx()Rz(-)Ry() c (1 c)u2 (1 c)u u su (1 c)u u su 0 x y x z z x y 2 (1 c)uxuy suz c (1 c)uy (1 c)uzuy sux 0 (1 c)u u su (1 c)u u su c (1 c)u2 0 x z y y z x z 0 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 158
BIẾN ĐỔI HỆ TRỤC TỌA ĐỘ P x y (P , P , 1)T x y Py P b 1 d c j’ j i’ a c ’ x b M d  i a 1 1 Faculty of Computer Science and Engineering - HCMUT Slide 159
BIẾN ĐỔI HỆ TRỤC TỌA ĐỘ  Hợp của nhiều phép biến đổi hệ trục tọa độ y P b Hệ tọa độ #3 f a c e e d Hệ tọa độ #2 T2 b M1 d M1M 2 f c T1 1 1 1 Hệ tọa độ #1 a x Faculty of Computer Science and Engineering - HCMUT Slide 160
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH y glBegin(GL_LINES); glVertex2d(V[0].x, V[0].y); #2 glVertex2d(V[1].x, V[1].y); glVertex2d(V[2].x, V[2].y); 25 // những điểm cịn lại #1 glEnd(); x 32 cvs.moveTo(V[0]); cvs.lineTo(V[1]); Cĩ 2 cách vẽ cvs.lineTo(V[2]); ngơi nhà #1 // những điểm cịn lại Vẽ ngơi nhà cvs.setWindow( ); #2 ??? cvs.setViewport( ); Faculty of Computer Science and Engineering - HCMUT Slide 161
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Cách làm phức tạp – Q = transform2D(M, P); – cvs.moveTo(transform2D(M, V[0])); cvs.lineTo(transform2D(M, V[1])); cvs.lineTo(transform2D(M, V[2])); // những điểm cịn lại - Vấn đề là khĩ tìm ra ma trận M Faculty of Computer Science and Engineering - HCMUT Slide 162
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Cách làm đơn giản khung S y nhìn V Q S S CT W V V Sx Q cửa sổ CT đƣợc khởi gán là ma trận đơn vị: glScaled(sx, sy, 1.0) glTranslated(dx, dy, 0) CT = CT*M glRotated(angle, 0, 0, 1) Faculty of Computer Science and Engineering - HCMUT Slide 163
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Cách làm đơn giản cvs.setWindow( ); //thiết lập cửa sổ cvs.setViewport( );// thiết lập khung nhìn cvs.initCT(); //bắt đầu với biến đổi đồng nhất house(); // vẽ ngơi nhà số #1 cvs.translate2D(32, 25); //CT bây giờ là phép biến đổi tịnh tiến cvs.rotate2D(-30); //CT bây giờ bao gồm phép tịnh tiến và phép quay house();// vẽ ngơi nhà số #2 Faculty of Computer Science and Engineering - HCMUT Slide 164
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH void Canvas::initCT(void){ glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void Canvas::scale2D(double sx, double sy){ glMatrixMode(GL_MODELVIEW); glScaled(sx, sy, 1.0); } void Canvas::translate2D(double dx, double dy){ glMatrixMode(GL_MODELVIEW); glTranslated(dx, dy, 0); } void Canvas::rotate2D(double angle){ glMatrixMode(GL_MODELVIEW); glRotated(angle, 0, 0, 1.0); } Faculty of Computer Science and Engineering - HCMUT Slide 165
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Ví dụ for(count=0; count<5; count++) a) b) { starMotif(); cvs.rotate2D(72.0); } void drawFlake(){ for(count=0; count<6;count++) { a) b) flakeMotif(); cvs.scale2D(1.0, -1.0); đường thẳng 300 flakeMotif(); cvs.scale2D(1.0, -1.0); cvs.rotate2D(60.0); } } Faculty of Computer Science and Engineering - HCMUT Slide 166
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Lƣu giữ CT để sau này dùng đến a) trước b) sau khi pushCT() c) sau khi rotate2D() d) sau khi CT3.rotate popCT() CT4 CT4 CT3 CT3 CT3 CT3 CT2 CT2 CT2 CT2 CT1 CT1 CT1 CT1 void Canvas::pushCT(){ glMatrixMode(GL_MODELVIEW); glPushMatrix(); } void Canvas::popCT(){ glMatrixMode(GL_MODELVIEW); glPopMatrix(); } Faculty of Computer Science and Engineering - HCMUT Slide 167
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƢƠNG TRÌNH  Ví dụ a) b) D H W L cvs.pushCT(); // so we can return here cvs.translate2D(W, H); // position for the first motif for(row = 0; row < 3; row++){ // draw each row pushCT(); for(col = 0 ; col < 3; col++){ motif(); cvs.translate2D(L, 0);} //move to the right cvs.popCT(); // back to the start of this row cvs.translate2D(0, D); }//move up to the next row cvs.popCT(); //back to where we started Faculty of Computer Science and Engineering - HCMUT Slide 168
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 6: MƠ HÌNH HĨA ĐỐI TƢỢNG 3D BẰNG LƢỚI ĐA GIÁC
NỘI DUNG TRÌNH BÀY  Lƣới đa giác  Khối đa diện  Khối quét  Lƣới xấp xỉ mặt cong  Mặt chứa cạnh thẳng  Mặt trịn xoay  Mặt bậc hai  Mặt siêu bậc hai  Mặt biểu diễn bởi hàm tƣờng minh Faculty of Computer Science and Engineering - HCMUT Slide 170
LƢỚI ĐA GIÁC  Lƣới đa giác là tập hợp các đa giác phẳng (các mặt) tạo nên bề mặt đối tƣợng, là phƣơng pháp chuẩn để biểu diễn đối tƣợng.  Lý do sử dụng lƣới đa giác: dễ biểu diễn (tập hợp các đỉnh), ít thuộc tính (đỉnh, vector pháp tuyến), dễ biến đổi, dễ hiển thị. biểu diễn gần đúng biểu diễn chính xác Faculty of Computer Science and Engineering - HCMUT Slide 171
MƠ HÌNH HĨA KHỐI RẮN BẰNG LƢỚI  Khối rắn:các mặt xếp khít với nhau đĩng kín một phần khơng gian  “Bề mặt” mỏng: các mặt khơng đĩng kín một phần kg  Lƣới đa giác: – là tập hợp các đa giác – đƣợc biểu diễn bởi danh sách các đa giác và thơng tin hƣớng hƣớng cho biết mặt nhận đƣợc bao nhiêu ánh sáng và thƣờng đƣợc dùng trong quá trình tơ màu Faculty of Computer Science and Engineering - HCMUT Slide 172
MƠ HÌNH HĨA KHỐI RẮN BẰNG LƢỚI  Pháp tuyến đỉnh và pháp tuyến mặt – gán mỗi đỉnh thuộc mặt một vector pháp tuyến – V1 và V5 tuy cùng 1 điểm nhƣng dùng pháp tuyến khác nhau (tơ màu phẳng) – V1 và V5 dùng pháp tuyến giống nhau (tơ màu trơn). Vector pháp tuyến này vuơng gĩc với mặt cong tại điểm đang xét Faculty of Computer Science and Engineering - HCMUT Slide 173
ĐỊNH NGHĨA LƢỚI ĐA GIÁC  Lƣới đa giác là tập hợp các đa giác mà mỗi đỉnh của từng mặt đƣợc gán một vector pháp tuyến  Cách làm hiệu quả: tổ chức thành ba danh sách. Danh sách đỉnh (thơng tin vị trí), danh sách pháp tuyến (thơng tin hƣớng), danh sách mặt (thơng tin liên kết) Faculty of Computer Science and Engineering - HCMUT Slide 174
ĐỊNH NGHĨA LƢỚI ĐA GIÁC  Tìm vector pháp tuyến: – nếu mặt là phẳng pháp tuyến mặt là pháp tuyến đỉnh. – dùng tích vơ hƣớng tính pháp tuyến m = (V1 – V2) x (V3 – V4). – hai vấn đề: (1) khi hai vector gần song song với nhau (2) đa giác khơng thực sự phẳng N 1 mx (yi ynext(i) )(zi znext(i) ) i 0 - next(j) = (j + 1) mod N N 1 my (zi znext(i) )(xi xnext(i) ) - các đỉnh duyệt theo CCW i 0 N 1 - m chỉ ra phía ngồi mz (xi xnext(i) )(yi ynext(i) ) i 0 Faculty of Computer Science and Engineering - HCMUT Slide 175
TÍNH CHẤT CỦA LƢỚI ĐA GIÁC  Tính đặc; nếu đĩng kín một phần khơng gian  Tính liên thơng: giữa hai đỉnh bất kỳ cĩ 1 đƣờng dẫn  Tính đơn giản: khơng cĩ lỗ hổng  Tính phẳng: các mặt đều là đa giác phẳng (e.g tam giác)  Tính lồi PYRAMID DONUT IMPOSSIBLE BARN Faculty of Computer Science and Engineering - HCMUT Slide 176
MƠ HÌNH HĨA ĐT KHƠNG ĐẶC  Đối tƣợng khơng đặc đƣợc coi là “cái vỏ” cĩ chiều dày vơ cùng bé. Faculty of Computer Science and Engineering - HCMUT Slide 177
LƢỚI ĐA GIÁC TRONG CT class VertexID{ public: int vertIndex; //index of this vertex in the vertex list int normIndex; // index of this vertex's normal }; class Face{ public: int nVerts; // number of vertice in this face VertexID* vert; // the list of vertex and normal index Face() { nVerts = 0; vert = NULL; } ~Face() { delete[] vert; nVerts = 0; } }; Faculty of Computer Science and Engineering - HCMUT Slide 178
LƢỚI ĐA GIÁC TRONG CT class Mesh { private: int numVerts; // number of vertices in the mesh Point3* pt; // array of 3D vertices int numNormals; // number of normal vectors for the mesh Vector3* norm; // array of normals int numFaces; // number of faces in the mesh Face* face; // array of face data // others to be added later public: Mesh(); ~Mesh(); int readFile(char* fileName); // others }; Faculty of Computer Science and Engineering - HCMUT Slide 179
LƢỚI ĐA GIÁC TRONG CT void Mesh::draw() { for (int f = 0; f < numFaces; f++) { glBegin(GL_POLYGON); for (int v = 0; v < face[f].nVerts; v++) { int in = face[f].vert[v].normIndex; int iv = face[f].vert[v].vertIndex; glNormal3f(norm[in].x, norm[in].y, norm[in].z); glVertex3f(pt[iv].x, pt[iv].y, pt[iv].z); } glEnd() ; } } Faculty of Computer Science and Engineering - HCMUT Slide 180
LƢỚI ĐA GIÁC TRONG CT  Ví dụ Faculty of Computer Science and Engineering - HCMUT Slide 181
KHỐI ĐA DIỆN  Định nghĩa: là lƣới liên thơng của các đa giác phẳng đơn giản. Các đa giác này bao bọc một kg giới hạn.  Tính chất: (1) mỗi cạnh thuộc 2 mặt, (2) đỉnh là giao điểm của ít nhất 3 cạnh, (3) các mặt khơng xuyên qua nhau.  Cơng thức Euler: (1) V + F – E = 2 (cube V=8,F=6,E=12), (2) V + F – E = 2 + H – 2G (H: tổng lỗ hổng nằm trên các mặt, G: tổng lỗ hỗng xuyên qua đa diện) Faculty of Computer Science and Engineering - HCMUT Slide 182
HÌNH LĂNG TRỤ VÀ PHẢN LĂNG TRỤ  Hình lăng trụ: quét đa giác dọc theo đoạn thẳng. Khi d vuơng gĩc với đa giác thì lăng trụ là lăng trụ đứng  Lăng trụ đều: đa giác là đa giác đều  Phản lăng trụ: đa giác đỉnh quay 180/n độ so với đáy Faculty of Computer Science and Engineering - HCMUT Slide 183
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Định nghĩa: các mặt bằng nhau và đều là đa giác đều số cạnh của mặt số mặt ở đỉnh Faculty of Computer Science and Engineering - HCMUT Slide 184
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Khối đa diện đều đối ngẫu: D là đối ngẫu của P thì đỉnh của D là tâm của P D nối tâm hai mặt kề nhau của P.  D cĩ số cạnh bằng số đỉnh của P và số đỉnh bằng số cạnh của P. Nếu P cĩ giá trị Schlafli là (p, q) thì D cĩ giá trị Schlafli là (q, p) Faculty of Computer Science and Engineering - HCMUT Slide 185
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Mơ hình của khối đa diện đều -mặt 4 của lập phƣơng gồm 1,5,6,2 đỉnh 4 của (c) là giao của các mặt 1,5,6,2 -tứ diện tự đối ngẫu danh sách các đỉnh của mặt k sẽ trùng với danh sách các mặt giao nhau tại k. Faculty of Computer Science and Engineering - HCMUT Slide 186
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Pháp tuyến của khối Platonic V V V m 1 2 3 3 Faculty of Computer Science and Engineering - HCMUT Slide 187
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Khối tứ diện đều: cĩ thể nội tiếp trong khối lập phƣơng sao cho các đỉnh trùng với các đỉnh của lập phƣơng, các cạnh nằm trên các mặt. Giả sử khối lập phƣơng cĩ các đỉnh là ( 1, 1, 1), một đỉnh của tứ diện là (1, 1, 1) Faculty of Computer Science and Engineering - HCMUT Slide 188
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Khối Platonic 20 mặt: xây dựng bằng dùng 3 hình chữ nhật vàng cĩ cạnh dài bằng 1, cạnh ngắn là  ( 5 1)/ 2 0.618 Faculty of Computer Science and Engineering - HCMUT Slide 189
KHỐI ĐA DIỆN ĐỀU (PLATONIC)  Khối Platonic 12 mặt: là khối đối ngẫu của khối Platonic 20 mặt đỉnh k của khối này nằm ở tâm mặt k của khối 20 mặt Faculty of Computer Science and Engineering - HCMUT Slide 190
KHỐI ĐA DIỆN NỬA ĐỀU  Các mặt vẫn là đa giác đều nhƣng cĩ nhiều loại mặt khác nhau: – hình lập phƣơng vát gĩc – khối cầu bucky – khối vịm geodesic Faculty of Computer Science and Engineering - HCMUT Slide 191
KHỐI QUÉT  Đƣợc tạo bằng cách quét một hình 2D trong khơng gian  Hình lăng trụ: pháp tuyến đỉnh là pháp tuyến mặt Xây dựng lƣới đa giác: -xây dựng ds đỉnh -xây dựng ds mặt -pháp tuyến mặt đƣợc tính bằng phƣơng pháp Newell Faculty of Computer Science and Engineering - HCMUT Slide 192
KHỐI QUÉT  Mảng các hình lăng trụ: một số thƣ viện đồ họa khơng vẽ đƣợc đa giác lõm khi đa giác là lõm thì cần phải tách nĩ thành tập đa giác lồi Faculty of Computer Science and Engineering - HCMUT Slide 193
KHỐI QUÉT  Quét kết hợp với xoắn: P = {p0, p1 , , pN-1 } (đáy) P‟ = {Mp0, Mp1 , , MpN-1 } (đỉnh) 0.7 0 0 0 0 0.7 0 0 M 0 0 1 H 0 0 0 1 cos( ) sin( ) 0 0 sin( ) cos( ) 0 0 M 0 0 1 H 0 0 0 1 ds mặt giữ nguyên, đỉnh và pháp tuyến thay đổi Faculty of Computer Science and Engineering - HCMUT Slide 194
KHỐI QUÉT  Xây dựng khối quét phân đoạn: gồm nhiều đoạn, mỗi đoạn cĩ ma trận biến đổi riêng. Thiết kế hình ống dựa trên đƣờng cong 3D C(t) = (cos(t), sin(t), bt) Faculty of Computer Science and Engineering - HCMUT Slide 195
KHỐI QUÉT  Lấy mẫu C(t) ở {t0, t1 }, xây dựng đa giác eo nằm trong mặt phẳng vuơng gĩc với đƣờng cong ở C(ti). Xây dựng hệ trục tọa độ sao cho trục z tiếp tuyến với đƣờng cong  Dùng C(t) để xác định hệ tọa độ cục bộ - T(ti) tiếp tuyến đc, N(ti), B(ti) vuơng gĩc với T(ti) - Ma trận Mi biến đổi đa giác đáy thành đa giác eo - Mi = (N(ti) | B(ti) | T(ti) | C(ti)) Faculty of Computer Science and Engineering - HCMUT Slide 196
KHỐI QUÉT  Tạo khung Frenet C‟(t) = (C‟x(t), C‟y(t),C‟z (t)) T(t) là C‟(t) sau khi chuẩn hĩa C'(t) C''(t) B (t ) C'(t) C''(t) N(t) = B(t) T(t) 1 T(t) ( sin(t),cos(t),b) 1 b2 1 B(t) (bsin(t), bcos(t),1) 1 b2 N(t) (-cos(t),-sin(t), 0) Faculty of Computer Science and Engineering - HCMUT Slide 197
KHỐI QUÉT  Tạo khung Frenet bằng phƣơng pháp tính C(t ) C(t ) C(t ) 2C(t) C(t ) C'(t) C''(t) 2  2  VÍ DỤ C(t) = ((a + bcos(qt))cos(pt), (a + bcos(qt))sin(pt), csin(qt)) Faculty of Computer Science and Engineering - HCMUT Slide 198
KHỐI QUÉT  VÍ DỤ g(t) 0 0 0 0 g(t) 0 0 M ' M 0 0 1 0 0 0 0 1 Faculty of Computer Science and Engineering - HCMUT Slide 199
KHỐI QUÉT  Dùng khối quét xấp xỉ mặt trịn xoay: phép biến đổi affine là phép quay, đc xƣơng sống ở gốc tọa độ cos( ) 0 sin( ) 0 i i các điểm nằm trên đƣờng 0 1 0 0 M i gấp khúc thứ i là sin(i ) 0 cos(i ) 0 0 0 0 1 (xjcos(i ), yj, xjsin(i)) Faculty of Computer Science and Engineering - HCMUT Slide 200
LƢỚI XẤP XỈ MẶT CONG  Phƣơng pháp chung: “đa giác hĩa” mặt cong, đỉnh và pháp tuyến đƣợc tính từ cơng thức của mặt cong.  Biểu diễn mặt cong: – dạng tham số: P(u, v) = (X(u, v), Y(u, v), Z(u, v)), – dạng ẩn: F(x, y, z) = 0 – hàm trong ngồi: điểm (x, y, z) • nằm trên mặt cong nếu F(x, y, z) = 0 • nằm bên trong nếu F(x, y, z) 0 Faculty of Computer Science and Engineering - HCMUT Slide 201
LƢỚI XẤP XỈ MẶT CONG  Tìm vector pháp tuyến Faculty of Computer Science and Engineering - HCMUT Slide 202
LƢỚI XẤP XỈ MẶT CONG  Mặt cong đƣợc biểu diễn dƣới dạng tham số p p n(u0 ,v0 ) u v u u0 ,v v0 (n cĩ thể đƣợc chuẩn hĩa nếu muốn) Ví dụ: mặt phẳng P(u, v) = C + au + bv n(u, v) = a b Faculty of Computer Science and Engineering - HCMUT Slide 203
LƢỚI XẤP XỈ MẶT CONG  Mặt cong đƣợc biểu diễn dƣới dạng ẩn F F F n(x , y , z ) F , , 0 0 0 x x ,y y ,z z 0 0 0 x y z x x0 ,y y0 ,z z0 Ví dụ: dạng ẩn của mặt phẳng là: F(x, y, z) = n ((x, y, z) – A) = 0 hay: nxx + nyy + nzz - n A =0 pháp tuyến là (nx, ny, nz) Faculty of Computer Science and Engineering - HCMUT Slide 204
CÁC MẶT CƠ SỞ  Mặt cầu cơ sở: dạng ẩn F(x, y, z) = x2 + y2 + z2 – 1 pháp tuyến (2x, 2y, 2z) dạng tham số P(u, v) = (cos(v)cos(u), cos(v)sin(u), sin(v)) pháp tuyến n(u, v) = -cos(u, v)p(u, v) Faculty of Computer Science and Engineering - HCMUT Slide 205
CÁC MẶT CƠ SỞ  Mặt trụ cơ sở: – dạng ẩn F(x, y, z) = x2 + y2 – (1 + (s – 1)z)2 0< z<1 n(x, y, z) = (x, y, -(s – 1)(1 + (s -1)z)) – dạng tham số P(u, v) = ((1 + (s – 1)v)cos(u), (1 + (s – 1)v)sin(u), v) n(u, v) = (cos(u), sin(u), 1-s) Faculty of Computer Science and Engineering - HCMUT Slide 206
CÁC MẶT CƠ SỞ  Mặt nĩn cơ sở - dạng ẩn: F(x, y, z) = x2 + y2 – (1 – z)2 = 0 0 < z < 1 n = (x, y, 1 – z) - dạng tham số P(u, v) = ((1 – v) cos(u), (1 – v)sin(u), v) n(u, v) = (cos(u), sin(u), 1) Faculty of Computer Science and Engineering - HCMUT Slide 207
XÂY DỰNG LƢỚI ĐA GIÁC  Xây dựng lƣới đa giác cho hình cầu: – chia thành nhiều lát(stack) và múi(slice) – ui = 2 i/nSlices với i = 0, 1, , nSlices -1 – vj = /2 - j/nStacks, với j = 0, 1, , nStacks – pháp tuyến norm[k] chính là pt[k] Faculty of Computer Science and Engineering - HCMUT Slide 208
MẶT CHỨA CẠNH THẲNG  Tồn tại ít nhất một đt thuộc mặt đi qua mỗi điểm  Dạng biểu diễn tham số P(u, v) = (1-v)P0(u)+ vP1(u)  P(u, v) = (1-v)P0+ vP1  Mỗi hàm cho bởi 3 thành phần P0 (u) = (X0(u), Y0(u), Z0(u)) Faculty of Computer Science and Engineering - HCMUT Slide 209
MẶT CHỨA CẠNH THẲNG  Mặt nĩn: P(u, v) = (1-v)P0 + vP1(u)  P0 là đỉnh của mặt nĩn  Ví dụ: P1(u) = (r(u)cos(u), r(u)sin(u), 1) r(u) = 0.5 + 0.2cos(5u) Faculty of Computer Science and Engineering - HCMUT Slide 210
MẶT CHỨA CẠNH THẲNG  Mặt trụ: – P1(u) = P0(u) + d – biểu diễn tham số: P(u, v) = P0(u) + dv Faculty of Computer Science and Engineering - HCMUT Slide 211
MẶT CHỨA CẠNH THẲNG  Mảnh tuyến tính đơi – P0(u) = (1 - u)P00 + uP01 – P(u, v) = (1 - v)(1 - u)P00 + (1 - v)uP01 + v(1 - u)P10 + uvP11 Faculty of Computer Science and Engineering - HCMUT Slide 212
MẶT CHỨA CẠNH THẲNG  Một số mặt chứa cạnh thẳng khác Faculty of Computer Science and Engineering - HCMUT Slide 213
MẶT CHỨA CẠNH THẲNG  Mảnh trộn tuyến tính đối: mảnh Coons – tổng quát hĩa của mặt chứa cạnh thẳng là mặt đƣợc tạo bởi 4 đƣờng cong biên pu0(u), pu1(u), p0v(v) và p1v(v), với u và v nhận giá trị trong đoạn [0, 1] Faculty of Computer Science and Engineering - HCMUT Slide 214
MẶT CHỨA CẠNH THẲNG  Mảnh trộn tuyến tính đơi: cách xây dựng Cơng thức: P(u, v) = [p0v(v)(1 - u) + p1v(v)u] + [pu0(u)(1 - v) + pu1(u)v] - [(1 - u)(1 - v)p0v(0) + u(1 - v)p1v(0) + v(1 - u)p0v(1) + uvp1v(1)] Faculty of Computer Science and Engineering - HCMUT Slide 215
MẶT TRÕN XOAY  Mặt trịn xoay đƣợc tạo bởi quét đc phẳng C (profile) xung quanh một trục  Profile cĩ phƣơng trình C(v) = (X(v), Z(v)) khi quay quanh trục z gĩc u (X(v)cos(u), X(v)sin(u), Z(v))  Kinh tuyến: đc profile ở một thời điểm nào đĩ. Vĩ tuyến: một điểm bất kỳ thuộc đƣờng cong khi quay một vịng.  Phƣơng trình tham số: P(u, v) = (X(v)cos(u), X(v)sin(u), Z(v))  Tiếp tuyến: n(u, v) = X(v)(Z'(v)cos(u), Z'(v)sin(u), -X'(v)) Faculty of Computer Science and Engineering - HCMUT Slide 216
MẶT TRÕN XOAY  Ví dụ: – đc profile: C(v) = (D + Acos(v), Asin(v)) – P(u, v) = ((D + Acos(v))cos(u), (D + Acos(v))sin(u), Asin(v)) Faculty of Computer Science and Engineering - HCMUT Slide 217
MẶT BẬC HAI Faculty of Computer Science and Engineering - HCMUT Slide 218
MẶT BẬC HAI Faculty of Computer Science and Engineering - HCMUT Slide 219
MẶT BẬC HAI  Lƣu ý: - vết cắt: là giao của mặt phẳng với mặt cong. - vết cắt chính: khi mặt phẳng song song với mặt phẳng chính. - vết cắt là thiết diện nĩn  Ellipsoid: – hai tham số bằng nhau mặt trịn xoay – ba tham số bằng nhau mặt cầu – vết cắt là ellipse  Hyperboloid một tầng – a = b mặt trịn xoay – vết cắt chính z = k là ellipse, hai vết cắt chính kia là hyperbola – là mặt chứa cạnh thẳng Faculty of Computer Science and Engineering - HCMUT Slide 220
MẶT BẬC HAI  Hyperboloid hai tầng : – a = b mặt trịn xoay – vết cắt chính x = k là ellipse, hai vết cắt chính kia là hyperbola  Elliptic Cone : – a = b mặt trịn xoay – mặt nĩn cĩ đƣờng sinh tựa trên ellipse – là mặt chứa cạnh thẳng, vết cắt chính z = k là ellipse  Elliptic Paraboloid : – vết cắt chính z = k là ellipse – a = b mặt trịn xoay Faculty of Computer Science and Engineering - HCMUT Slide 221
MẶT BẬC HAI  Hyperbolic Paraboloid : – mặt yên ngựa – là mặt chứa cạnh thẳng – vết cắt với z = k là hyperbola, hai vết cắt kia là parabol  Pháp tuyến của mặt bậc hai: Ví dụ: pháp tuyến của ellipsoid - tính theo hàm ẩn F' = (2x, 2y, 2z) - thay dạng biểu diễn ẩn của x, y và z n(u, v) = (cos(v)cos(u), cos(v)sin(u), sin(v)) Faculty of Computer Science and Engineering - HCMUT Slide 222
MẶT SIÊU BẬC HAI Faculty of Computer Science and Engineering - HCMUT Slide 223
MẶT SIÊU BẬC HAI Faculty of Computer Science and Engineering - HCMUT Slide 224
MẶT BIỂU DIỄN BỞI HÀM TƢỜNG MINH  Hàm đơn trị theo một trục tọa độ nào đĩ 2 2 2 2 sin x y f (x,z) e ax bz f (x, z) x2 y2 Faculty of Computer Science and Engineering - HCMUT Slide 225
MẶT BIỂU DIỄN BỞI HÀM TƢỜNG MINH  Dạng tham số: P(u, v) = (u, f(u, v), v)  Pháp tuyến: n(u, v) = (-f / u, 1, -f / v) Faculty of Computer Science and Engineering - HCMUT Slide 226
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 7: PHÉP NHÌN TRONG KHƠNG GIAN 3 CHIỀU
NỘI DUNG TRÌNH BÀY  Ơn tập về camera  Xây dựng camera trong chƣơng trình  Hình chiếu phối cảnh  Hình chiếu phối cảnh của điểm  Hình chiếu phối cảnh của đoạn thẳng  Độ sâu giả  Sử dụng tọa độ đồng nhất  Ý nghĩa hình học của phép biến đổi phối cảnh  Thể tích nhìn chuẩn  Cắt xén với thể tích nhìn Faculty of Computer Science and Engineering - HCMUT Slide 228
GIỚI THIỆU  Xây dựng và điều khiển camera tạo hình chiếu phối cảnh  Điều khiển vị trí và hƣớng của camera  Điều khiển thể tích nhìn của camera  Cắt xén với thể tích nhìn của camera Faculty of Computer Science and Engineering - HCMUT Slide 229
ƠN TẬP VỀ CAMERA  Thể tích nhìn: một phần của hình chĩp cĩ đỉnh là mắt nhìn.  Các thành phần: mắt nhìn, gĩc nhìn (tính bằng độ), mặt phẳng gần, mặt phẳng xa, mặt phẳng nhìn (thƣờng là mặt phẳng gần) Faculty of Computer Science and Engineering - HCMUT Slide 230
ƠN TẬP VỀ CAMERA  Thiết lập thể tích nhìn: hình dạng của thể tích nhìn chứa trong ma trận phép chiếu. glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(viewAngle, aspecRatio, N, F); Faculty of Computer Science and Engineering - HCMUT Slide 231
ƠN TẬP VỀ CAMERA  Định vị trí và định hƣớng cho camera glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(eye.x,eye.y,eye.z,look.x,look.y,look.z, up.x,u p.y,up.z); Faculty of Computer Science and Engineering - HCMUT Slide 232
ƠN TẬP VỀ CAMERA  Định vị trí và định hƣớng cho camera Khi điều chỉnh hƣớng của camera ngƣời ta thƣờng dùng các thuật ngữ của ngành hàng khơng: pitch, roll, yaw a) pitch b) roll c) yaw v u n u n a) b) c) v v v u u u n Faculty of Computer Science and Engineering - HCMUT Slide 233
ƠN TẬP VỀ CAMERA  Chức năng của gluLookAt(): từ eye, look, up u, v, n n song song với eye – look u, v vuơng gĩc với n up hƣớng trên camera u chỉ phía bên camera n = eye – look. v up up u = up n, v = n u n eye eye look u look Faculty of Computer Science and Engineering - HCMUT Slide 234
ƠN TẬP VỀ CAMERA  Ma trận mơ hình-phép nhìn là tích của V và M ux u y uz d x (dx, dy, dz) = (-eye u, -eye v, -eye n) vx vy vz d y V n n n d x y z z 0 0 0 1 v n u eye 0 u 1 y x x V ey eye y 0 u y 0 V V e eye 0 u 0 z z z 1 1 0 0 x Faculty of Computer Science and Engineering - HCMUT Slide 235
XÂY DỰNG CAMERA TRONG CT class Camera { private: Point3 eye; Vector3 u, v, n; double viewAngle, aspect, nearDist, farDist; void setModelViewMatrix(); public: Camera(); void set(Point3 Eye, Point3 look, Vector3 up); void roll(float angle); void pitch(loat angle); void yaw(float angle); void slide(float delU, float delV, float delN); void setShape(float vAng,float asp,float nearD,float farD); }; Faculty of Computer Science and Engineering - HCMUT Slide 236
XÂY DỰNG CAMERA TRONG CT void Camera :: setModelViewMatrix(){ float m[16]; Vector3 eVec(eye.x, eye.y, eye.z); m[0] = u.x ; m[4] = u.y; m[8] = u.z; m[12] = -eVec.dot(u); m[1] = v.x ; m[5] = v.y; m[9] = v.z; m[13] = -eVec.dot(v); m[2] = n.x ; m[6] = n.y; m[10] = n.z; m[14] = -eVec.dot(n); m[3] = 0 ; m[7] = 0 ; m[11] = 0 ; m[15] = 1.0; glMatrixMode(GL_MODELVIEW); glLoadMatrixf(m); } void Camera :: set(Point3 Eye, Point3 look, Vector3 up){ eye.set(Eye); n.set(eye.x – look.x, eye.y – look.y, eye.z – look.z); u.set(up.cross(n)); n.normalize(); u.normalize(); v.set(n.cross(u)); setModelViewMatrix(); } Faculty of Computer Science and Engineering - HCMUT Slide 237
XÂY DỰNG CAMERA TRONG CT  Trƣợt: di chuyển camera dọc theo các trục u, v và n mà khơng quay nĩ. void Camera :: slide(float delU, float delV, float delN){ eye.x += delU*u.x + delV*v.x + delN*n.x; eye.y += delU*u.y + delV*v.y + delN*n.y; eye.z += delU*u.z + delV*v.z + delN*n.z; setModelViewMatrix(); } Faculty of Computer Science and Engineering - HCMUT Slide 238
XÂY DỰNG CAMERA TRONG CT  Quay camera: quay xung quay các trục u, v và n của nĩ – pitch (quay xung quanh u), roll (quay xung quanh n), yaw (quay xung quanh v). u‟ = cos( )u + sin( )v, v v‟ = -sin( )u + cos( )v, v’ u’ u void Camera :: roll (float angle){ float cs = cos(3.14159265/180 * angle); float sn = sin(3.14159265/180 * angle); Vector3 t = u; u.set(cs*t.x – sn*v.x, cs*t.y – sn*v.y, cs*t.z – sn*v.z); v.set(sn*t.x + cs*v.x, sn*t.y + cs*v.y, sn*t.z + cs*v.z); setModelViewMatrix();} Faculty of Computer Science and Engineering - HCMUT Slide 239
VÍ DỤ #include #include #include #include “camera.h” Camera cam; void myKeyboard(unsigned char key, int x, int y){ switch(key){ case „F‟: cam.slide(0, 0, 0.2); break; case „F‟ – 64: cam.slide(0, 0, -0.2); break; case „P‟: cam.pitch(-1.0); break; case „P‟ – 64: cam.pitch(1.0); break; } glutPostRedisplay(); } void myInit(){ glClearColor(1.0,1.0,1.0,0.0); glColor3f(0.0f, 0.0f, 0.0f); glPointSize(2.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 400.0, 0.0, 400.0); } Faculty of Computer Science and Engineering - HCMUT Slide 240
VÍ DỤ void myDisplay(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glutWireTeapot(1.0); glFlush(); glutSwapBuffers(); } int main(int argc, char* argv[]) { khởi tạo cửa sổ glutKeyboardFunc(myKeyboard); glutDisplayFunc(myDisplay); glClearColor(1.0f, 1.0f, 1.0f, 1.0f); glColor3f(0.0f, 0.0f, 0.0f); glViewport(0, 0, 640, 480); cam.set(4, 4, 4, 0, 0, 0, 0, 1, 0); cam.setShape(30.0f, 64.0f/48.0f, 0.5f, 50.0f); glutMainLoop(); return 0; } Faculty of Computer Science and Engineering - HCMUT Slide 241
HÌNH CHIẾU PHỐI CẢNH  Đƣờng ống đồ họa: – điểm sau khi thực hiện phép biến đổi mơ hình – phép nhìn sẽ cĩ tọa độ nằm trong hệ tọa độ camera. – thực hiện phép chiếu phối cảnh – thực hiện việc cắt xén với cửa sổ trên mặt phẳng nhìn Faculty of Computer Science and Engineering - HCMUT Slide 242
HÌNH CHIẾU PHỐI CẢNH CỦA ĐIỂM (Px, Py, Pz) (x*, y*) x * N P Py (x*, y*) N x , N P P Px Pz z z Faculty of Computer Science and Engineering - HCMUT Slide 243
HÌNH CHIẾU PHỐI CẢNH CỦA ĐT  Phép chiếu những đƣờng thẳng song song - đt đi qua A = (Ax, Ay, Az) cĩ hƣớng c = (cx, cy, cz) pt tham số P(t) = A + ct. Ax cxt Ay cyt - hình chiếu đt là: p(t) N ,N Az czt Az czt - khi đt song song với mặt phẳng nhìn (cz = 0), thì hình chiếu của đt là: N p(t) (Ax cxt, Ay cyt) Az - khi đt khơng song song với mặt phẳng nhìn, thì hình chiếu của một điểm nằm ở vơ cùng là (điểm biến mất) cx cx p( ) N , N cz cz Faculty of Computer Science and Engineering - HCMUT Slide 244
HÌNH CHIẾU PHỐI CẢNH CỦA ĐT  Phép chiếu những đƣờng thẳng song song Faculty of Computer Science and Engineering - HCMUT Slide 245
HÌNH CHIẾU PHỐI CẢNH CỦA ĐT  Đƣờng thẳng chạy ra phía sau mắt nhìn  Bất hợp lý khi quan sát các đt dài song song Faculty of Computer Science and Engineering - HCMUT Slide 246
ĐỘ SÂU GIẢ  Phép chiếu phối cảnh làm mất thơng tin độ sâu  Tốn tg khi tính độ sâu theo cơng thức 2 2 2 Px Py Pz  Vì Pz càng âm thì điểm càng ở xa dùng Pz tính độ sâu Px Py aPz b x*, y*,z * N ,N , Pz Pz Pz Faculty of Computer Science and Engineering - HCMUT Slide 247
ĐỘ SÂU GIẢ  a và b đƣợc chọn sao cho độ sâu giả nằm trong [-1, 1] – chọn z* = -1 khi Pz = - N – chọn z* = 1 khi Pz = - F F N 2FN a ,b F N F N Faculty of Computer Science and Engineering - HCMUT Slide 248
SỬ DỤNG TỌA ĐỘ ĐỒNG NHẤT  Biểu diễn tọa độ đồng nhất của P = (Px, Py, Pz) là P = (Px, Py, Pz, 1) của vector v = (vx, vy, vz) là v = (vx, vy, vz, 0)  Mở rộng cách biểu diễn đồng nhất P = (wPx, wPy, wPz, w), cách điểm nằm trên cùng tia, điểm ở vơ cùng cĩ w=0.  (3, 6, 2, 3) tọa độ thơng thƣờng là (1, 2, 2/3)  Cách chuyển đổi: – thơng thƣờng đồng nhất (thêm 1) – đồng nhất thơng thƣờng (chia cho thành phần tọa độ thứ 4 và bỏ đi thành phần tọa độ thứ 4) Faculty of Computer Science and Engineering - HCMUT Slide 249
SỬ DỤNG TỌA ĐỘ ĐỒNG NHẤT  Nhân với phép biến đổi affine 2 1 3 1 wPx wQx 6 .5 1 4 wPy wQy 0 4 2 3 wPz wQz 0 0 0 1 w w  Nhân với ma trận chiếu (phép biến đổi phối cảnh) N 0 0 0 wP wNP x x 0 N 0 0 wPy wNPy 0 0 a b wPz w(aPz b) 0 0 1 0 w wPz Faculty of Computer Science and Engineering - HCMUT Slide 250
SỬ DỤNG TỌA ĐỘ ĐỒNG NHẤT  Phép chia phối cảnh P P aP b N x , N y , z Pz Pz Pz  Phép biến đổi phối cảnh Px Py aPz b Px ,Py ,Pz N ,N , Pz Pz Pz  Phép chiếu trực giao Px Py aPz b Px Py N , N , N , N ,0 Pz Pz Pz Pz Pz (phép chiếu phối cảnh) = (phép biến đổi phối cảnh) + (phép chiếu trực giao) Faculty of Computer Science and Engineering - HCMUT Slide 251
Ý NGHĨA HÌNH HỌC CỦA PHÉP BĐPC  Biến đổi P P‟ (cùng trong 3D)  Bảo tồn tính thẳng, tính phẳng và tính nằm trong  Làm cong khơng gian 3D  Biến đổi thể tích nhìn thành một hình hộp Faculty of Computer Science and Engineering - HCMUT Slide 252
Ý NGHĨA HÌNH HỌC CỦA PHÉP BĐPC  Z = -1  Z = 1  y = top  y = bottom  x = left  x = right Faculty of Computer Science and Engineering - HCMUT Slide 253
THỂ TÍCH NHÌN CHUẨN  Sau khi thực hiện PBĐPC, chúng ta tịnh tiến, co dãn thể tích nhìn để đƣợc thể tích nhìn chuẩn. Ma trận là 2N right left 0 0 right left right left 2N top bott 0 0 R top bott top bott (F N ) 2FN 0 0 F N F N 0 0 1 0  Thể tích nhìn chuẩn khơng phụ thuộc và camera, dễ dàng cho cắt xén. Faculty of Computer Science and Engineering - HCMUT Slide 254
THỂ TÍCH NHÌN CHUẨN  Hàm glFrustum(left, right, bott,top,N,F) tạo ra ma trận R  Hàm gluPerspective(viewAngle, aspect,N,F) cũng tạo ra ma trận R bằng cách tính các giá trị: top N tan viewAngle /2 180 bott = -top, right = top aspect và left = -right Faculty of Computer Science and Engineering - HCMUT Slide 255
CẮT XÉN VỚI THỂ TÍCH NHÌN  Điểm đƣợc biểu diễn dƣới dạng tọa độ đồng nhất  Sau khi thực hiện quá trình cắt xén xong, một số đỉnh cĩ thể bị mất, một số đỉnh mới cĩ thể đƣợc thêm vào Faculty of Computer Science and Engineering - HCMUT Slide 256
CẮT XÉN VỚI THỂ TÍCH NHÌN  Xác định tính trong ngồi của điểm so với mặt phẳng – BC0 w + x x = -1 BC1 w – x x = 1 – BC2 w + y y = -1 BC3 w – y y = 1 – BC4 w + z z = -1 BC5 w – z z = 1  Chấp nhận đơn giản: 12 giá trị BC đều dƣơng  Loại bỏ đơn giản: cả hai đầu mút đều nằm ngồi một mp  Tìm giao điểm edge(t) = (ax + (cx – ax)t, ay + (cy – ay)t, az + (cz – az)t, aw + (cw – aw)t) với x = 1 a (c a )t a a x x x 1 t w x aw (cw aw )t (aw ax ) (cw cx ) Faculty of Computer Science and Engineering - HCMUT Slide 257
CẮT XÉN VỚI THỂ TÍCH NHÌN int clipEdge(Point4& A, Point4& C) { double tIn = 0.0, tOut = 1.0, tHit; double aBC[6], cBC[6]; int aOutcode = 0, cOutcode = 0; tìm các giá trị BC cho A và C tạo mã cho A và C if ((aOutcode & cOutcode) != 0) //loại bỏ đơn giản return 0; if ((aOutcode | cOutcode) = 0) //chấp nhận đơn giản return 1; Faculty of Computer Science and Engineering - HCMUT Slide 258
CẮT XÉN VỚI THỂ TÍCH NHÌN for(int i = 0; i tOut) return 0; // CI rỗng; kết thúc sớm } Faculty of Computer Science and Engineering - HCMUT Slide 259
CẮT XÉN VỚI THỂ TÍCH NHÌN // Cập nhật các điểm đầu mút nếu cần thiết Point4 tmp; if(aOutcode != 0) { // A nằm ngồi: tIn thay đổi tmp.x = A.x + tIn * (C.x – A.x); tmp.y = A.y + tIn * (C.y – A.y); tmp.z = A.z + tIn * (C.z – A.z); tmp.w = A.w + tIn * (C.w – A.w); } if(cOutcode != 0) {// C nằm ngồi: tOut thay đổi C.x = A.x + tOut * (C.x – A.x); C.y = A.y + tOut * (C.y – A.y); C.z = A.z + tOut * (C.z – A.z); C.w = A.w + tOut * (C.w – A.w); } A = tmp; // cập nhật A return 1;} Faculty of Computer Science and Engineering - HCMUT Slide 260
Trƣờng Đại Học Bách Khoa TP Hồ Chí Minh Khoa Khoa học & Kỹ thuật Máy tính ĐỒ HỌA MÁY TÍNH CHƢƠNG 8: TƠ MÀU VẬT THỂ 3 CHIỀU
NỘI DUNG TRÌNH BÀY  Giới thiệu  Mơ hình tơ màu  Sử dụng nguồn sáng  Tơ màu phẳng, tơ màu trơn  Dán texture lên mặt đa giác Faculty of Computer Science and Engineering - HCMUT Slide 262
GIỚI THIỆU  Tập trung vào tính tốn màu sắc cho pixel  Dựa vào mơ hình màu (mơ hình hĩa việc ánh sáng tƣơng tác với đối tƣợng)  Khơng mơ phỏng hết các nguyên lý vật lý của sự phát tán và phản xạ ánh sáng  Đƣa ra mơ hình mang tính xấp xỉ và tạo nên nhiều mức độ chân thực khác nhau Faculty of Computer Science and Engineering - HCMUT Slide 263
GIỚI THIỆU  Mơ hình khung dây (wireframe) – đơn giản, chỉ cĩ các cạnh đƣợc vẽ – nhìn xuyên qua vật thể, khĩ phân biệt đƣợc vật thể Faculty of Computer Science and Engineering - HCMUT Slide 264
GIỚI THIỆU  Line Drawing: mơ hình khung dây với các mặt khuất đƣợc loại bỏ. – chỉ cĩ các cạnh đƣợc vẽ – nhìn giống khối rắn, phân biệt đƣợc vật thể Faculty of Computer Science and Engineering - HCMUT Slide 265
GIỚI THIỆU  Tơ màu phẳng (flat shading): – ánh sáng phản xạ đƣợc tính tại một điểm bất kỳ – các điểm thuộc mặt đƣợc tơ bởi một màu – thấy rõ ranh giới giữa các mặt Faculty of Computer Science and Engineering - HCMUT Slide 266
GIỚI THIỆU  Tơ màu mƣợt (smooth shading): – màu đƣợc tính ở một số điểm, sau đĩ nội suy cho các điểm cịn lại. – ranh giới giữa các mặt biến mất a/s phản chiếu Faculty of Computer Science and Engineering - HCMUT Slide 267
GIỚI THIỆU  Tạo bĩng đổ, dán texture lên bề mặt đối tƣợng Faculty of Computer Science and Engineering - HCMUT Slide 268
MƠ HÌNH TƠ MÀU  Nguồn sáng khơng màu cĩ nhiều mức xám  Nguồn sáng điểm và nguồn sáng nền  Ánh sáng tới tƣơng tác với bề mặt theo 3 cách: (a) hấp thụ chuyển thành nhiệt, (b) phản xạ, (c) truyền vào trong  Thành phần ánh sáng phản xạ – A/s khuyếch tán: phát tán theo mọi hƣớng, tƣơng tác mạnh với bề mặt, màu sắc phụ thuộc vào màu sắc vật thể – A/s phản chiếu: tính định hƣớng cao, khơng đi vào vật thể, phản xạ ở bề mặt vật thể, tăng độ sáng bề mặt đối tƣợng, màu giống màu a/s tới Faculty of Computer Science and Engineering - HCMUT Slide 269
MƠ HÌNH TƠ MÀU  Yếu tố hình học để xác định ánh sáng phản xạ – vector pháp tuyến m của bề mặt – vector v từ P đến mắt nhìn – vector s từ P đến nguồn sáng Faculty of Computer Science and Engineering - HCMUT Slide 270
MƠ HÌNH TƠ MÀU  Thành phần ánh sáng khuyếch tán – phần ánh xạ phản xạ đến đƣợc mắt nhìn, ký hiệu Id – khuyếch tán đồng nhất theo mọi hƣớng chỉ phụ thuộc m, s. s m s m I I I I max ,0 – định luật Lambert: d s d d s d s m s m – Is: cƣờng độ n/s, ρd :h/s p/x khuyếch tán Faculty of Computer Science and Engineering - HCMUT Slide 271
MƠ HÌNH TƠ MÀU  Thành phần ánh sáng khuyếch tán – Ví dụ: hệ số p/x khuyếch tán 0, 0.2, 0.4, 0.6, 0.8, 1.0. Cƣờng độ nguồn sáng là 1, cƣờng độ a/s nền 0.4 Faculty of Computer Science and Engineering - HCMUT Slide 272
MƠ HÌNH TƠ MÀU  Thành phần ánh sáng phản chiếu – tăng độ sáng, tăng mức độ chân thực cho đối tƣợng cĩ đặc tính sáng bĩng. – lƣợng ánh sáng phản xạ lớn ở hƣớng p/x r. f s m r v r s 2 2 m I I sp s s f : [1, 200] m r v Faculty of Computer Science and Engineering - HCMUT Slide 273
MƠ HÌNH TƠ MÀU  Thành phần ánh sáng phản chiếu – f vơ cùng: tập trung chủ yếu ở hƣớng p/x Giảm tg tính tốn, dùng vector nửa đƣờng h = s + v.  = 0, nhìn thấy lƣợng a/s phản chiếu nhiều nhất f h m I I max 0, sp s s h m Faculty of Computer Science and Engineering - HCMUT Slide 274
MƠ HÌNH TƠ MÀU  Thành phần ánh sáng phản chiếu – hệ số s từ trên xuống là 0.25, 0.5, 0.75. Hệ số f từ trái sang phải là 3, 6, 9, 25, 200. Faculty of Computer Science and Engineering - HCMUT Slide 275
MƠ HÌNH TƠ MÀU  Ánh sáng nền: – khắc phục hiện tƣợng phần khơng nhận đƣợc a/s cĩ màu đen hồn tồn, thêm a/s nền. – khơng cĩ vị trí cố định, chiếu sáng đồng nhất theo mọi hƣớng – Thêm Ia: cƣờng độ, a: hệ số phản chiếu nền a : 0.0, 0.1, 0.3, 0.5, 0.7: càng lớn khung cảnh càng sáng Faculty of Computer Science and Engineering - HCMUT Slide 276
MƠ HÌNH TƠ MÀU  Tổng hợp các thành phần ánh sáng f I Ia a Id d lambert Isp s phong sm hm lambert max( 0, ) and phong max( 0, ) s m h m Thêm màu sắc f Ir Iar ar Idr dr lambert Ispr sr phong f I g Iag ag Idg dg lambert Ispg sg phong f Ib Iab ab Idb db lambert Ispb sb phong Faculty of Computer Science and Engineering - HCMUT Slide 277
MƠ HÌNH TƠ MÀU  Chỉ định camera, glBegin(GL_POLYGON); nguồn sáng, vector for(int i = 0; i< 3; i++){ pháp tuyến đỉnh glNormal3f(norm[i].x, norm[i].y, norm[i].z);  Sau khi thực hiện glVertex3f(pt[i].x, pt[i].y, pt[i].z);} phép biến đổi mơ glEnd(); hình–phép nhìn, tất cả đƣợc biểu diễn trong hệ tọa độ camera Faculty of Computer Science and Engineering - HCMUT Slide 278
SỬ DỤNG NGUỒN SÁNG  Tạo nguồn sáng - vị trí GLfloat myLightPosition[] = {3.0, 6.0, 5.0, 1.0}; glLightfv(GL_LIGHT0, GL_POSITION, myLightPosition); glEnable(GL_LIGHTING); //enable glEnable(GL_LIGHT0);//enable this particular source (x, y, z, 1) nguồn sáng điểm, (x, y, z, 0) n/s định hƣớng - màu sắc GLfloat amb0[] = {0.2, 0.4, 0.6, 1.0}; GLfloat diff0[] = {0.8, 0.9, 0.5, 1.0}; GLfloat spec0[] = {1.0, 0.8, 1.0, 1.0}; glLightfv(GL_LIGHT0, GL_AMBIENT, amb0); glLightfv(GL_LIGHT0, GL_DIFFUSE, diff0); glLightfv(GL_LIGHT0, GL_SPECULAR, spec0); Faculty of Computer Science and Engineering - HCMUT Slide 279
SỬ DỤNG NGUỒN SÁNG  Nguồn sáng dạng đèn pha glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 45.0); // gĩc cắt bằng 450 glLightf(GL_LIGHT0, GL_SPOT_EXPONENT, 4.0); //  = 4.0 GLfloat dir[] = {2.0, 1.0, -4.0}; // hƣớng của nguồn sáng glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION, dir); 1 Suy giảm ánh sáng theo khoảng cách atten k k D k D2 glLightf(GL_LIGHT0, GL_CONSTANT_ATTENUATION, 2.0); c l q GL_LINEAR_ATTENUATION và GL_QUADRATIC_ATTENUATION Faculty of Computer Science and Engineering - HCMUT Slide 280
SỬ DỤNG NGUỒN SÁNG  Chỉ định thuộc tính vật liệu GLfloat myDiffuse[] = {0.8, 0.2, 0.0, 1.0}; glMaterialfv(GL_FRONT, GL_DIFFUSE, myDiffuse); GL_BACK, GL_AMBIENT, GL_FRONT_AND_BACK GL_SPECULAR,GL_EMISSION i i i f Ir er Imr ar atteni spoti Iar ar Idr dr lamberti I spr sr phongi i Faculty of Computer Science and Engineering - HCMUT Slide 281
TƠ MÀU PHẲNG, TƠ MÀU TRƠN  Tơ màu mặt đa giác – di chuyển theo các đƣờng quét, xác định màu cho mỗi pixel. – đa giác lồi hiệu quả vì mỗi đƣờng quét chỉ cắt đa giác tối đa ở 2 điểm for (int y = ybott ; y <= ytop ; y++) { find xleft and xright; for (int x = xleft; x <= xright; x++) { find the color c for this pixel; put c into the pixel at (x, y); } } Faculty of Computer Science and Engineering - HCMUT Slide 282
TƠ MÀU PHẲNG, TƠ MÀU TRƠN  Tơ màu phẳng: – nguồn sáng ở xa, mặt là đa giác phẳng các điểm thuộc mặt cĩ cùng màu sắc – glShadeModel(GL_FLAT); for (int y = ybott ; y <= ytop ; y++) { find xleft and xright; find the color c for this scan line; for (int x = xleft; x <= xright; x++) { put c into the pixel at (x, y); } } Faculty of Computer Science and Engineering - HCMUT Slide 283
TƠ MÀU PHẲNG, TƠ MÀU TRƠN  Tơ màu Gouraud: ys ybott colorleft = lerp(color1, color4, f), f y4 ybott x x c(x) lerp color ,color , left left right xright xleft color color c(x 1) c(x) right left xright xleft for (int y = ybott ; y <= ytop ; y++){ find xleft and xright; find colorleft and colorright; colorinc = (colorright – colorleft)/ (xright – xleft) for (int x = xleft, c = colorleft; x <= xright; x++, c += colorinc ) { put c into the pixel at (x, y);}} Faculty of Computer Science and Engineering - HCMUT Slide 284
TƠ MÀU PHẲNG, TƠ MÀU TRƠN  Tơ màu Gouraud: – glShadeModel(GL_SMOOTH); Faculty of Computer Science and Engineering - HCMUT Slide 285
TƠ MÀU PHẲNG, TƠ MÀU TRƠN  Tơ màu Phong: – chậm hơn nhiều so với phƣơng pháp tơ màu Gouraud – OpenGL khơng hỗ trợ phƣơng pháp tơ màu này y y s 4 mleft lerp m4 ,m3 , y3 y4 Faculty of Computer Science and Engineering - HCMUT Slide 286
DÁN TEXTURE LÊN MẶT ĐA GIÁC Faculty of Computer Science and Engineering - HCMUT Slide 287
DÁN TEXTURE LÊN MẶT ĐA GIÁC  Cĩ hai loại texture: texture bitmap và texture đƣợc tạo bằng giải thuật Color3 texture(float s, float t){ return txtr[(int)(s*C)][(int)(t*R)];} float fakeSphere(float s, float t){ float r = sqrt((s - 0.5)*(s - 0.5) + (t - 0.5)*(t - 0.5)); if (r < 0.3) return 1- r/0.3; else return 0.2;} Faculty of Computer Science and Engineering - HCMUT Slide 288
DÁN TEXTURE LÊN MẶT ĐA GIÁC  Các bƣớc để dán texture lên bề mặt – đọc hoặc tạo dữ liệu texture vào mảng textureData – tạo đối tƣợng texture: • glGenTextures(1, &textureObject); – gán kiểu texture • glBindTexture(GL_TEXTURE_2D, textureObject); – gán số liệu cho đối tƣợng texture • glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, wid, height, 0, GL_RGB, GL_UNSIGNED_BYTE, textureData); Faculty of Computer Science and Engineering - HCMUT Slide 289
DÁN TEXTURE LÊN MẶT ĐA GIÁC  Các bƣớc để dán texture lên bề mặt – lựa chọn texture: • glBindTexture(GL_TEXTURE_2D, textureObject); – gán tọa độ texture cho các đỉnh của đa giác glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.5, 1.5); glTexCoord2f(0.0, 0.6); glVertex3f(1.0, 3.7, 1.5); glTexCoord2f(0.8, 0.6); glVertex3f(2.0, 3.7, 1.5); glTexCoord2f(0.8, 0.0); glVertex3f(2.0, 2.5, 1.5); glEnd(); Faculty of Computer Science and Engineering - HCMUT Slide 290