1 CHƯƠNG 1: OPENGL ES 1.1 Giới thiệu OpenGL ES OpenGL ES sản phẩm miễn phí bao gồm hàm API cho phép tạo ứng dụng 2D, 3D ứng dụng nhúng – bao gồm thiết bị cầm tay Nó định nghĩa tập openGL, tạo tính linh hoạt, mạnh mẽ giao diện cấp thấp phần mềm đồ họa OpenGL ES 1.1 nhấn mạnh tốc độ phần cứng hàm API, OpenGL ES 1.0 tập trung vào phần mềm cho phép triển khai OpenGL ES 1.1 hoàn toàn tương thích với OpenGL ES 1.0 dễ dang thêm API hai phiên Các đặc điểm OpenGL ES phát triển nhóm Khronos 1.2 Nhập liệu từ phím (Keyboard Input) Đầu tiên bạn phải xây dựng chức để xử lí liệu đưa vào từ bàn phím,chức phải chấp nhận số tham số định - Tham số thứ biến UGWindow - Tham số thứ hai phải biến nguyên (interger), đại diện cho phím bấm - Tham số thứ ba thứ tư hai biến nguyên (interger), xác định giá trị x, y trỏ thiết bị ấn void keyboard(UGWindow uwin, int key, int x, int y) { // kiểm tra nút bấm switch(key) { case 'q' : exit(0); break; // Các phím có sẵn liệt kê bảng 1 // khỏi chương trình ấn phím mũi tên lên case UG_KEY_UP : exit(0); break; } } 1.3 Dựng (Rendering) Các bước khởi tạo thiết lập OpenGL ES, vẽ hình OpenGL ES sử dụng kĩ thuật đêm kép Khi vẽ vẽ nhớ đệm Sau có tất thơng tin việc vẽ, trao đổi nhớ đệm bắt đầu vẽ nhớ đệm khác Điều để ngăn chặn ảnh hưởng việc chớp hình số xóa hình vẽ hình khác nhớ đệm Trong hàm Init(), sử dụng lời gọi glClearColor, sử dụng để xác định màu sắc cho hình thị, bao gồm tham số, tham số đại diện cho hệ màu RGBA có giá trị khoảng từ đến Ba tham số đầu màu đỏ xanh xanh da trời, tham số thứ độ sáng tối window Đoạn code đặt màu đen cho hình hiển thị Demo: void init() { glClearColor(0.0f, 0.0f, 0.0f, 0.0f); Hàm display dùng để hiển thi hình } 3 void display(UGWindow uwin) { // Bây thay đổi giá trị màu xem thử!Hàm glClear() thực xố window, có số xác định glClear(GL_COLOR_BUFFER_BIT); // Có trường hợp có hàm chưa chạy đến kết thúc chương trình, để tránh trường hợp hàm glFlush()được gọi, thực tất hàm chưa chạy kết thúc chương trình glFlush(); //lưu thơng tin sau vẽ khung, chúng trao đổi nhớ đệm bắt đầu vẽ Chức ugSwapBuffers sử dụng để thực điều ugSwapBuffers(uwin); } 1.4 Phép chiếu trực giao (Orthographic Projection) Có hai cách để hiển thị đối tượng sử dụng phép chiếu phối cảnh phép chiếu trực giao Phép chiếu trực giao, view volume định nghĩa hình hộp chữ nhật, vật thể nằm view volume chiếu trực giao lên khung nhìn phép chiếu trực giao khoảng cách từ camare đến vật thể không ảnh hưởng đến độ lớn ảnh Trong phần tìm hiểu làm để hiển thị hình lên hình, hình tạo cách xác định đỉnh, điểm khơng gian chiều cần rõ điểm hình Danh sách tham số Primitive Flag GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_TRIANGLES GL_TRIANGLE_STRIP Description Các điểm Đoạn thẳng Đường gấp khúc không khép kín Đường gấp khúc khép kín Tam giác Một dải tam giác liên kết với 5 GL_TRIANGLE_FAN Các tam giác liên kết theo hình quạt Khi vẽ điểm, chức glPointSize thay đổi kích cỡ điểm vẽ, kích cỡ mặc định Khi vẽ đường bạn sử dụng glLineWidth để xác định độ rộng đường, kích cỡ mặc định Demo code Bước xác định tọa độ hình vng đặt hình, thiết lập giá trị (float) x, y, z cho đỉnh Khởi tạo chương trình Thiết lập chế độ ma trân câu lệnh glMatrixMode(GL_PROJECTION) trước định nghĩa phép chiếu Thiết lập ma trận thời ma trận đơn vị lệnh glLoadIdentity() Ở phần đầu hướng dẫn, sử dụng phép chiếu trực giao Chức glOrthof định để xác định nhìn theo phép chiếu trực giao, bao gồm glOrthof(GLfloat left, GLfloat right, GLfloat bottom, GLfloat top,GLfloat near, GLfloat far) Đến ta thiết lập xong phép chiếu trực giao, tiếp đến ta vẽ hình cách sử dụng chức glVertexPointer, chức có tham số: 7 - GLint size: Xác định số lượng tọa độ cho đỉnh - GLenum type: Xác định kiểu liệu đỉnh mảng vi dụ GL_BYTE, GL_SHORT, GL_FLOAT v.v… - GLsizei stride: Xác định khoảng cách byte đỉnh liên tiếp, Nếu - stride đỉnh hiểu đóng gói chặt chẽ mảng , giá trị ban đầu - const GLvoid *pointer: Xác định vị trí nhớ giá trị mảng, trỏ tới mảng Chức glEnableClientState đua tham số định mảng phải kích hoạt Bây thiết lập chế độ hiển thị, nhớ bạn sử dụng thư viện Vincent, hình hiển thị chức cần phải chấp nhận tham số UGWindow Chức glDrawArray với cac tham số - GLenum mode: xác định giá trị ban đầu để vẽ - GLint first: Xác định số ban đầu mảng - GLsizei count: rõ số đỉnh để xử lý 9 11 1.5 Màu sắc đánh bóng (Color and Shading) Tất màu sắc OpenGL đại diện giá trị, giá trị màu đỏ, xanh xanh lam, cuối giá điều thể rõ ràng màu Điều nói rõ phần Ta sử dụng mảng màu 11 11 tri alpha, 13 Demo code Ta khởi tạo mảng tam giác Tiếp theo ta tạo mảng màu Chúng cung cấp cho đỉnh màu sắc khác nhau, màu đỏ, xanh va xanh lam Một biến boolean shaded tạo để theo dõi xem có đánh bóng hay khơng, chúng tơi sử dụng biến để chuyển đổi việc tơ bóng hay khơng tơ bóng hình Thiết lập phép chiếu trực giao Ta sử dụng hàm glColorPointer đê thiết lập cho mảng màu, hàm làm việc giống chức glVertexPointer, chúng có tham số tham số để xác định có float (một giá trị màu) cho đỉnh Chúng ta phải kích hoạt đỉnh mảng màu Bây ta thêm màu shading (tơ bóng) vào hình Có loại shading Điều xác định cách sử dụng chức glShadeModel, chức 13 13 15 đưa hai tham số GL_FLAT GL_SMOOTH để xác định loại shading GL_SMOOTH thiết lập theo mặc định Thiết lập chế độ hình hiển thị (như phần trước) khác lời gọi chức glDrawArrays ta sử dụng cờ GL_TRIANGLES để vẽ đỉnh tam giác 1.6 Phép biến đổi (Transformations) Phần giới thiệu cách chuyển đổi hình theo cách khác Phép tỉ lệ - glScalef Phép dịch - glTranslatef Phép quay - glRotatef Demo code Khởi tạo biến dùng để quay theo trục x y Ta khởi tạo tam giác Khởi tạo mảng màu Chức Init để gọi hàm glClearColor 15 15 17 Thiết lập chế độ hiển thi Ta vè tam giác phía bên trái hình hình vng phía bên phải, tam giác tơ bóng mịn hình vng tơ bóng Các thiết lập tam giác trước Ta thay đổi đoạn code sau Nhớ hàm reshape đặt đối tưởng hiển thi ma trận thời Ma trận sử dụng cho phép biến đổi Có phép chuyển đổi sử dụng hàm glTranslatef, glScalef glRotatef Các giá trị f cuối hàm thể biến đầu vào mang giá trị float Sau vẽ tam giác không muốn hình sau bị ảnh hưởng việc chuyển đổi Chức glPushMatrix glPopMatrix sử dụng để chép thêm ma trận thời đưa lên đỉnh ngăn xếp loại bỏ ma trận thời khỏi ngăn xếp Ví dụ: ta muốn vẽ ô tô co bánh, trình vẽ mô tả sau: vẽ thân xe, ghi nhớ bạn đâu, tịnh tiến bánh xe phải phía trước, vẽ bánh xe, quay lại vi trí bạn (đưa thân xe vị trí trước tinh tiến) ghi nhớ bạn đâu, tịnh tiến bánh xe trái phía trước… 17 17 19 Hàm glTranslatef với tham số cho truc x, y, z để dịch chuyển đối tượng (dịch sang trái 0.25 đơn vị lên 0.5 đơn vi) Hàm glScalef với tham số xác định tỉ lệ đối tượng theo trục x, y, z (giảm kích thước tam giác xuống nửa) Hàm glRotatef với tham số góc quay tham số đại diện cho trục x, y, z để quay đối tượng (quay đối tượng theo góc xrot theo trục x) Vẽ tam giác Phục hồi ma trân thời điểm ban đầu Tiếp theo chúng tơi khơng sử dụng mảng màu cho hình nên khóa chức lại Tiếp theo ta vẽ hình vng tơ bóng Chú ý khởi tạo trỏ đỉnh, sử dụng tham số đại diện cho đỉnh Thay sử dụng mảng màu ta sử dụng chức glColor4f glColor4x Việc chuyển đổi hình vng tương tự hình tam giác phía 19 19 63 Bước nạp ảnh bipmap để sử dụng cho chức phía Như nói phía trên, chất liệu OpenGL gọi thông qua tên chất liệu Để tạo định danh, cần sử dụng chức glGenTextures, chức có hai tham số, tham số để xác định có chất liệu mà bạn muốn tạo Tham số thứ hai trỏ trỏ tới mảng unsigned integers Điều giúp bạn tạo tên cho chất liệu Bây tên chất liệu tạo ra, bạn phải lựa chọn chất liệu mà bạn muốn thiết lập Điều thực cách sử dụng hàm glBindTexture Hàm có hai tham số, tham số GL_TEXTURE_2D tham số thứ hai chấp nhận chất liệu mà bạn muốn lựa chọn Sau lựa chọn chất liệu, phải thiết lập thuộc tính cho Chúng ta cần phải xác định chất liệu kết cấu 2D thuộc tính có Điều thực qua hàm glTexImage2D hàm có số tham số: - GLenum target: điều xác định đích chất liệu GL_TEXTURE_2D, OpenGL ES không hỗ trợ chất liệu 1D 3D - GLint level: dùng để xác định mức độ chi tiết, cấp độ hình ảnh bản, sử dụng cho mipmaps nơi có chất liệu khác tùy thuộc vào khoảng cách chất liệu đến người xem - GLint internalFormat: điều xác định màu sắc cho thành phần bên chất liệu Nó GL_ALPHA, GL_RGB, GL_RGBA, 63 63 65 GL_LUMINANCE GL_LUMINANCE_ALPHA thường sử dụng cờ GL_RGB GL_RGBA Cờ GL_RGBA sử dụng bạn sử dụng ảnh chứa giá trị anpha tệp tin tga - GLsizei width & GLsizei height: dùng để xác định chiều rộng chiều cao ảnh Điều lấy từ cấu truc BITMAPINFOHEADER - GLint border: điều độ rộng đường biên Nó có giá trị - GLenum format: điều đưa giá trị tham số internalFormat - GLenum type: điều dùng để xác định kiểu liệu lưu trữ ảnh ví dụ GL_UNSIGNED_BYTE GL_UNSIGNED_SHORT - const GLvoid *pixels: điều nơi mà ảnh lưu trữ Nếu bạn muốn sử dụng phần hình ảnh, chức glTexSubImage2D sử dụng Các tham số giống ngoại trừ tham số internalFormat, có hai tham số khác GLint xoffset GLint yoffset, điều để khoảng cách x, y cho ảnh Để thiết lập thuộc tính khác cho chất liệu, chức glTexParameterf sử dụng Điều thảo luận phần sau, tất bạn cần biết cần tham số Tham số GL_TEXTURE_2D.Tham số thứ hai GL_TEXTURE_MIN_FILTER GL_TEXTURE_MAG_FILTER, tham số thứ ba xác định mà bạn muốn thiết lập cho thuộc tính - GL_LINEAR 65 65 67 Các chất liệu thiết lập, phải giải phóng nhớ cấp phát cho bitmap Trong hàm Init thêm lời gọi hàm đến loadTextures Đê bật chức texture mapping, cần phải sử dụng cờ GL_TEXTURE_2D hàm glEnable Như làm vertices Chúng ta cần phải xác định vị trí texture coordinates điều thực theo cách với vertices ngoại trừ sử dụng chức glTexCoordPointer Chú ý giá trị sử dụng cho tham số texture coordinate có giá trị Bước cuối cho phép bật mảng texture coordinate thông qua cờ GL_TEXTURE_COORD_ARRAY hàm glEnableClientState Một hàm menu dùng để bât tắt ánh sáng Khi tắt ánh sáng màu sắc bạn sử dụng tạo mặt kết hợp vào chất liệu, bạn nhìn 67 67 69 thấy hình Khi ánh sáng bật ánh sáng phản xạ phạn xạ số lượng ánh sáng cho tất màu chất liệu xuất bình thường Lighting Enabled Lighting Disabled Sau chạy chương trình bạn thấy bóng màu đỏ với ánh sáng phản chiếu phía bên phải bóng, bạn tự thêm định hướng nguồn sáng vào chương trình bạn 1.14 Hàm chất liệu (Texture Functions) 69 69 71 Trong phần trước biết cách làm để nạp ảnh bitmap hiển thị chất liệu đối tượng Bạn giới thiệu ngắn gọn hàm glTexParameterf Phần thảo luận tiếp chức với nhiều khía cạnh khác Texture Filters: lọc chất liệu cho phép chất liệu thị với chất lượng khác Repeating and Clamping: chất liệu lặp lặp lại đối tượng Mipmaps: Mipmaps tạo thêm chất liệu hình ảnh Nếu bạn có ảnh cỡ 64x64 Hình ảnh thêm tạo (32x32, 16x16, , 1x1) Chất liệu xác thị tùy thuộc vào khoảng cách mảng đối tượng rõ ràng mảng đối tượng xa sử dụng lớp chất liệu nhỏ Điều tiết kiệm thời gian xử lý Demo code Chúng ta tạo chất liệu khác hướng dẫn Chúng muốn theo dõi chất liệu cách sử dụng biến filter Tọa độ chất liệu giữ nguyên ngoại trừ bề mặt bên Lưu thơng tin mà chúng tơi cho có giá trị từ đến Chúng ta sử dụng giá trị lớn Nhưng điều gây lạp lại chất liệu hay dừng đạt điều giải thích rõ phần 71 71 73 Chúng ta xây dựng hàm loadTextures nạp file bmp phần trước Chúng ta cần phải tạo tên chất liệu Chúng ta lựa chọn chất liệu thiết lập thuộc tính hướng dẫn trước Sự khác biệt dùng cờ GL_NEAREST thuộc tính lọc thay cho GL_LINEAR Bộ lọc nhanh nhìn khơng tốt 73 73 75 Trong chất liệu thứ hai sử dụng GL_LINEAR để tạo chất liệu nhìn tốt Đây sử dụng hướng dẫn trước Chất liệu thứ ba giống chất liệu thứ hai ngoại trừ hai thuộc tính thiết lập Đấy thuộc tính GL_TEXTURE_WRAP_S GL_TEXTURE_WRAP_T Điều chất liệu làm để bao bọc theo hướng ngang dọc tương ứng Thứ tư sử dụng kĩ thuật cao mipmaps Mipmaps yêu cầu nhớ nhiều làm cho chương trình bạn chạy nhanh nhiều Để tự động tạo mipmaps bạn thiết lập thuộc tính L_GENERATE_MIPMAP tới GL_TRUE lời gọi hàm glParameterf GL_TEXTURE_MAG_FILTER bạn cũ thuộc tính GL_TEXTURE_MIN_FILTER phải thay đổi 75 75 77 Bộ lọc phải thiết lập GL_X_MIPMAP_Y nơi mà X Y LINEAR NEAREST Điều dùng để xác định chất lượng chất liệu hiển thị Rõ ràng NEAREST nhìn khơng tốt LINEAR 1.15 Pha trộn (Blending) Hướng dẫn giới thiệu cách pha trộn màu Việc pha trộn màu sắc hữu ích cho hiệu ứng ví dụ như: thủy tinh, nước, hình v.v Một phần thiết yếu việc trộn màu giá trị alpha mà định cho tất màu sắc Alpha có giá trị thể bề mặt hoàn toàn suốt giá trị thể bề mặt mờ đục Khi làm việc với trộn màu phải nhớ đến màu khác Thứ giá trị màu nguồn (giá trị thêm vào) ghi giá trị màu (giá trị tồn đệm) Màu sắc làm tùy thuộc vào giá trị alpha Demo code Tong phần ta thiết lập góc nhìn theo chiếu trực giao với tham số: 77 77 79 Chúng ta đặt số lượng hình chữ nhật chồng lên hình, đỉnh cho hình chữ nhật đưa mảng Chúng ta thị kết hợp khác trộn màu Những biến tổ chức loại màu trộn thực Chức Init lựa chọn màu để xóa hình Chúng ta khơng sử dụng chiều sâu chức Đê kích hoạt chức pha màu phải sử dụng cở GL_BLEND chức glEnable Một chức quan trọng glBlendFunc sử dụng để định màu sắc việc trộn màu Chức có giá trị Xác định màu sắc tính Cả tham số chấp nhận giá trị sau: - GL_ZERO - GL_ONE - GL_SRC_COLOR - GL_ONE_MINUS_SRC_COLOR - GL_DST_COLOR - GL_ONE_MINUS_DST_COLOR - GL_SRC_ALPHA - GL_ONE_MINUS_SRC_ALPHA 79 79 81 - GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA Tham số chấp nhận giá trị GL_SRC_ALPHA_SATURATE Các mảng sử dụng để chuyển đổi ví dụ việc trộn màu Chức display nơi hình chữ nhật tạo thành hình vng 81 81 83 Chúng ta tạo thêm chức menu để xử lí lựa chọn Blending Function thay đổi việc trộn màu Sau chạy chương trình bạn thay đổi chế độ trọn màu cách nhấn phím “b” Mặc định chức trộn màu (GL_ONE, GL_ZERO) điều làm cho màu sắc không bị pha trộn (GL_ONE, GL_ZERO) Chức trôn màu (GL_ONE, GL_ONE) Điều có điểm nguồn điểm đích màu sắc chúng trộn vào với 83 83 85 Một hỗn hợp màu xanh màu đỏ tạo màu vàng nhìn thấy góc bên trái Thanh màu vàng có màu xanh giá trị Thanh màu xanh có pha trộn màu vàng nên giữ nguyên màu vàng Khi màu vàng pha trộn với màu xanh lục Giá trị màu sắc trở thành kết hiển thị màu trắng 85 85 87 (GL_ONE, GL_ONE) Tiếp theo chức (GL_ONE, GL_ONE_MINUS_DST_ALPHA) Kết hợp giá trị alpha, bạn nhìn thấy điều tạo chút minh bạch màu vàng pha trôn với màu xanh giữ nguyên màu vàng, màu vàng pha trộn với màu xanh màu trắng trước (GL_ONE, GL_ONE_MINUS_DST_ALPHA) Chức trộn (GL_SRC_ALPHA, GL_ONE), tạo hình tốt hơn, minh bạch Tất hình chữ nhật xuất minh bạch, hình chữ nhật màu vàng bị mờ có giá trị alpha 0.75 Hình chữ nhật màu xanh có giá trị alpha 0.25 87 87 89 (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) Mặc dù việc trơn màu làm việc tốt, bạn muốn hình phía rõ điều đạt (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) chức trộn màu (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) 1.16 Minh bạch đối tượng (Transparency) Trong phần hướng dẫn trước nói cách làm việc với pha màu Chúng tơi nhận thấy việc làm hữu ích cho việc làm minh bạch đối tượng, phần hướng dẫn hướng dẫn bạn làm minh bạch đối tượng 3D 89 89 91 Hướng dẫn sửa đổi từ hướng dẫn 3.13 - Texture Mapping Demo code Bước bật chức trộn màu hàm Init Chức pha trôn mà sử dụng (GL_SRC_ALPHA, GL_ONE) Chúng muốn tất đa giác vẽ vô hiệu hóa chức depth testing Có chiều sâu làm cho đa giác phía sau khơng thị Trong hàm menu Chúng ta tạo số hiệu ứng tơt Ta có lại mã kích hoạt hay vơ hiệu hóa ánh sáng hướng dẫn 15 Sự khác biệt ánh sáng bị vơ hiệu hóa thị Lighting Enabled Lighting Disabled 91 91 ... định đích chất liệu GL_TEXTURE_2D, OpenGL ES khơng hỗ trợ chất liệu 1D 3D - GLint level: dùng để xác định mức độ chi tiết, cấp độ hình ảnh bản, sử dụng cho mipmaps nơi có chất liệu khác tùy thuộc... ảnh Chúng ta tạo trỏ để trỏ đến liệu hình ảnh 61 61 63 Bước nạp ảnh bipmap để sử dụng cho chức phía Như nói phía trên, chất liệu OpenGL gọi thông qua tên chất liệu Để tạo định danh, cần sử dụng... xác định có chất liệu mà bạn muốn tạo Tham số thứ hai trỏ trỏ tới mảng unsigned integers Điều giúp bạn tạo tên cho chất liệu Bây tên chất liệu tạo ra, bạn phải lựa chọn chất liệu mà bạn muốn