Giáo Trình Lập Trình Webgl - Đại Học Thủy Lợi.pdf

TRƯỜNG ĐẠI HỌC THUỶ LỢI KHOA CÔNG NGHỆ THÔNG TIN GIÁO TRÌNH LẬP TRÌNH WebGL Hà Nội MỤC LỤC LỜI NÓI ĐẦU 8 Chương 1 TỔNG QUAN VỀ WEBGL 11 ƯU ĐIỂM CỦA WEBGL 12 Bắt đầu phát triển các ứng dụng đồ họa 3D v[.]

TRƯỜNG ĐẠI HỌC THUỶ LỢI KHOA CÔNG NGHỆ THÔNG TIN GIÁO TRÌNH LẬP TRÌNH WebGL Hà Nội MỤC LỤC LỜI NÓI ĐẦU Chương TỔNG QUAN VỀ WEBGL 11 ƯU ĐIỂM CỦA WEBGL 12 Bắt đầu phát triển ứng dụng đồ họa 3D với việc cần trình soạn thảo văn 12 Xuất ứng dụng đồ hoạ 3D bạn thật dễ dàng 13 Bạn tận dụng chức đầy đủ trình duyệt 14 Học sử dụng WebGL dễ dàng 14 BÀN CHẤT CỦA WEBGL 14 CẤU TRÚC ÚNG DỤNG WEBGL 15 Chương BẲT ĐÀU VỚI WEBGL 17 CANVAS LÀ GÌ ? 17 Sử dụng thẻ 18 DrawRectangle.js 20 CHƯƠNG TRÌNH WEBGL NGẮN NHẤT THẾ GIĨI: XĨA VÙNG VẼ 23 Tệp HTML (HelloCanvas.html) 23 Chương trình JavaScript (HelloCanvas.js) 24 Thử nghiệm với chương trình mẫu 28 VẼ MỘT DIÊM (PHIÊN BẢN 1) 29 HelloPointl.html 30 HelloPointl.js .30 Shader gì? 32 Cấu trúc chương trình WebGL sử dụng Shader 33 Khởi tạo Shaders 35 Vertex Shader .37 Fragment shader 39 Thao tác vẽ 40 Hệ thống tọa độ WebGL 41 Thử nghiệm với chương trình mẫu 43 VẼ MỘT ĐIỂM (PHIÊN BẢN 2) 44 Sử dụng biến thuộc tính 44 Chương trình mẫu (HelloPoint2.js) 44 Lấy vị trí lưu trữ cùa biến thuộc tính 46 Gán giá trị cho biến thuộc tính 47 Họ phương thức gl.vertexAttrib3f() 49 Thử nghiệm với chương trình mẫu 51 VẼ MỘT ĐIỂM BẰNG KÍCH CHUỘT 52 Chương trình mẫu (ClickedPoints.js) 52 Đăng ký trình xử lí kiện 54 Xử lý kiện nhấp chuột 55 Thí nghiệm với chương trình mẫu 59 THAY ĐỔI MÀU ĐIỂM 60 Chương trình mẫu (ColoredPoints.js) 61 Biến đồng (Uniform variable ) 63 Lấy lại vị trí lưu trữ (storage location) biến đồng 64 Gán giá trị cho biến đồng 65 Họ phương thức gl.uniform4f() 66 Chương VẼ VÀ BIẾN ĐỔI CÁC TAM GIÁC 68 VẼ NHIỀU ĐIỂM 68 Chương trình mẫu (MultiPoint.js) 70 Sử dụng đệm đối tượng 72 Tạo Buffer Object (gl.createBufferQ) 74 Gắn đệm đối tượng vào target (gl.bindBufferO) 75 Viết liệu vào đệm đối tượng (gl buf f erData () ) 76 Mảng định kiểu (Typed array) 77 Gán đệm đối tượng cho biến thuộc tính (Gl.vertexAttribPointerO) 79 Kích hoạt phép gán cho biến thuộc tính (gl enable Vertex AttribArrayO) 80 Các tham số thứ hai thứ ba gl drawArray s() 81 Thí nghiệm với chương trình mẫu 83 HELLO TRIANGLE 83 Chương trình mẫu (Hello Triangle.js) .83 Shapes sở .85 Thí nghiệm với chương trình mẫu 87 Hello Rectangle (HelioQuad) 88 Thử nghiệm với chương trình mẫu 89 DI CHUYỂN, XOAY VÀ co DÃN 89 Tịnh tiến 90 Chương trình mẫu (TranslatedTriangle.js) 91 Phép quay 94 Chương trình mẫu (RotatedTriangle.js) 96 Ma trận biến đổi: Phép quay 99 Matrix biến đổi: Tịnh tiến 102 Ma trận phép quay, lần 103 Chương trình mẫu (RotatedTriangle_Matrix.js) 103 Sử dụng phương pháp tương tự cho tịnh tiến 107 Ma trận biến đối: co dãn 108 Chương BIẾN ĐỔI KÉT HỢP VÀ HOẠT CÀNH BẢN 110 TỊNH TIẾN VÀ SAU ĐÓ XOAY 110 Thư viện ma trận biến đồi: cuon-matrix.js 110 Thư viện ma trận biến đối: cuon-matrix.js 110 Chương trình mẫu (RotatedTriangle_Matrix4.js) 111 Kết hợp nhiều chuyển đối 114 Chương trình mẫu (RotatedTranslatedTriangle.js) 116 Thí nghiệm với chương trình mẫu 117 HOẠT CẢNH 118 Các vấn đề hoạt cảnh 119 Chương trình mẫu (RotatingTriangle.js) .119 Lời gọi liên tục hàm vẽ (tick () ) 123 Vẽ tam giác với góc xoay cụ (draw()) 123 Yêu cầu để gọi lại (requestAnimationFrame()) 124 Cập nhật góc xoay (animateO) 126 Thí nghiệm với chương trình mẫu 127 Chương SỪ DỤNG MÀU SẮC VÀ HÌNH ẢNH KẾT CẤU 130 TRUYỀN CÁC KIỂU THÔNG TIN KHÁC ĐẾN VERTEX SHADER 130 Chương trình mẫu (MultiAttributeSize.js) 131 Tạo nhiều đệm đối tượng (Buffer Objects) 133 gl.vertexAttribPointerO Stride tham so Offset 134 Chương trình mẫu (MultiAttributeSize_Interleaved.js) 134 Chỉnh sửa màu (Varying Variable) 138 Chương trình mẫu (MultiAttributeColor.js) 139 Thí nghiệm với chương trình mẫu 142 TAM GIÁC MÀU (COLOREDTRIANGLE.JS) 142 Kết hợp shape hình học phân hóa điểm 143 Lời gọi fragment shader 146 Thí nghiệm với chương trình mẫu 147 Chức biến thay đổi trình nội suy 149 DÁN ẢNH VÀO MỘT HÌNH CHỮ NHẬT 151 Tọa độ kết cấu 153 Dán hình ảnh lên shape hình học 154 Chương trình mẫu (TexturedQuad.js) 154 Sử dụng tọa độ kết cấu (initVertexBuffers()) 157 Thiết lập tải hình ảnh (initTexturesO) .158 Làm cho Texture sẵn sàng sử dụng hệ thống WebGL (loadTextureO) 161 Đảo trục y Image 161 Kích hoạt đơn vị kết cấu (gl.activeTextureO) 162 Gắn đối tượng Texture vào Target (gl.bindTextureQ) 163 Thiết lập tham số Texture đối tượng kết cấu (gl.texParameteriO) 164 Gán ảnh kết cấu cho đối tượng (gl.texImage2D()) 167 Truyền đơn vị kết cấu tới fragment shader (gl.uniformliO) 169 Truyền tọa độ kết cấu từ vertex shader đến fragment shader 170 Lấy màu Texel fragment shader (texture2D()) 170 Thí nghiệm với chương trình mẫu 171 DÁN NHIỀU KẾT CẤU VÀO MỘT SHAPE 173 Chương trình mẫu (MultiTexture.js) 174 Chương HƯỚNG TỚI THẾ GIỚI 3D 180 NHỮNG GÌ TỐT CHO TAM GIÁC LÀ TỐT CHO KHỐI LẬP PHƯƠNG 180 CHỈ ĐỊNH HƯỚNG QUAN SÁT 181 Điểm mắt, điểm nhìn và, hướng đỉnh 181 Chương trình mẫu (LookAtTriangles.js) .183 So sánh LookAtTriangles.js với RotatedTriangle_Matrix4.js 186 Nhìn tam giác xoay từ vị trí cụ thể 187 Chương trình mẫu (LookAtRotatedTriangles.js) 189 Thí nghiệm với chương trình mẫu 190 Thay đối điếm mắt bàn phím 192 Chương trình mẫu (LookAtTrianglesWithKeys.js) 192 Những phần thiếu 194 PHẠM VI QUAN SÁT DẠNG HÌNH HỘP 195 Chỉ định khối quan sát 196 Định nghĩa khối quan sát dạng-hộp 197 Chương trình mẫu (OrthoView.html) 198 Chương trình mẫu (OrthoView.js) 199 Sửa đồi phần tử HTML sử dụng Javascript 200 Luồng xử lí Vertex Shader 201 Thay đổi near far 203 Khôi phục phần cắt tam giác (LookAtTrianglesWithKeyS-ViewVolume.js) 204 Thử nghiệm với chương trình mẫu 206 PHẠM VI QUAN SÁT LÀ MỘT HÌNH CHĨP TỨ GIÁC 207 Thiết lập khối quan sát hình chóp tứ giác 208 Chương trình mẫu (PerspectiveView.js) 209 Vai trò ma trận phép chiếu 212 Sử dụng tất ma trận (Model Matrix, Matrix View, Projection Matrix) 213 Chương trình mẫu (PerspectiveView_mvp.js) 215 Thử nghiệm với chương trình mẫu 218 XỬ LÍ ĐÚNG CÁC ĐỐI TƯỢNG MẶT TRƯỚC VÀ MẶT SAU 219 Khử mặt khuất 221 Chương trình mẫu (DepthBuffer.js) 223 Xung đột z 224 HELLO CUBE 227 Vẽ đối tượng với số tọa độ đỉnh 229 Chương trình mẫu (HelloCube.js) 230 Viết tọa độ đỉnh, màu sắc, số cho đệm đối tượng 233 Thêm màu cho mặt khối lập phương 236 Chương trình mẫu (ColoredCube.js) 237 Thử nghiệm với chương trình mẫu 239 Chương ĐỐI TƯỢNG CHIẾU SÁNG .242 ÁNH SÁNG ĐỐI TƯỢNG 3D 242 Các loại nguồn sáng 243 Các kiểu ánh sáng phản chiếu 244 Tơ bóng ánh sáng hướng phản chiếu khuếch tán 246 Tính tốn phản chiếu khuếch tán ánh sáng hướng hướng bề mặt 247 Hướng bề mặt: Pháp tuyến gì? 248 Chương trình mẫu (LightedCube.js) 250 Thêm tơ bóng với ánh sáng xung quanh 255 Chương trình mẫu (LightedCube_ambient.js) 257 ÁNH SÁNG ĐỐI TƯỢNG ĐƯỢC TỊNH TIẾN-XOAY 258 Ma trận kì diệu: ma trận biến đổi ngược 260 Chương trình mẫu (LightedTranslatedRotatedCube.js) 261 SỬ DỤNG MỘT ĐỐI TƯỢNG ÁNH SÁNG ĐIỂM 263 Chương trình mẫu (PointLightedCube.js) 264 Tô bóng thực hơn: tính tốn màu cho mảnh 267 Chương trình mẫu (PointLightedCube_perFragment.js) 267 LỜI NĨI ĐẦU WebGL cơng nghệ cho phép vẽ, hiển thị, tương tác với đồ họa máy tính ba chiều phức tạp ("đồ họa 3D") từ trình duyệt web Theo truyền thống, đồ họa 3D bị hạn chế với máy vi tính hay bảng điều khiển game phải lập trình phức tạp Tuy nhiên, máy tính cá nhân trình duyệt web trở nên tinh vi hơn, tạo hiển thị đồ hoạ 3D việc sử dụng công nghệ web tiếng Tài liệu cung cấp nhìn tổng quan ve WebGL bước mang đến cho người đọc thông qua ứng dụng WebGL Không giống công nghệ đồ họa 3D OpenGL Direct3D, ứng dụng WebGL xây dựng trang web để chúng chạy trực tiếp trình duyệt mà khơng cần cài đặt plug-in thư viện đặc biệt Do đó, bạn phát triển nhanh chóng thử chương trình mẫu với mơi trường PC chuẩn; thứ dựa web, bạn dễ dàng xuất chương trình xây dựng web Một lời hứa WebGL là, ứng dụng WebGL xây dựng dạng web, chương trình chạy loạt thiết bị, điện thoại thơng minh, máy tính bảng trị chơi bảng điều khiển, thơng qua trình duyệt Mơ hình mạnh mẽ có nghĩa WebGL có tác động đáng kể đến cộng đồng nhà phát triển trở thành công cụ ưu tiên cho lập trình đồ họa Cuốn sách dành cho Có có hai đối tượng sử dụng sách này: nhà phát triển web tìm kiếm để bổ sung đồ họa 3D vào trang web ứng dụng họ nhà lập trình đồ họa 3D muốn áp dụng kiến thức vào mơi trường web Đối với nhà phát trien web quen thuộc với công nghệ web chuẩn HTML JavaScript người tìm cách kết hợp đồ họa 3D vào trang web ứng dụng web họ, WebGL cung cấp giải pháp đơn giản mạnh mẽ Nó bố sung đồ họa 3D đê cải thiện trang web, cách sử dụng giao diện 3D chí phát triển ứng dụng trị chơi 3D phức tạp trình duyệt Đối tượng mục tiêu thứ hai lập trình viên làm việc với giao diện lập trình ứng dụng (API) 3D chù yếu, Direct3D OpenGL quan tâm đến việc áp dụng kiến thức họ vào môi trường web Chúng hy vọng lập trình viên quan tâm đến ứng dụng 3D phức tạp mà phát triển trình duyệt web đại Tuy nhiên, sách thiết kế để tiếp cận với nhiều đối tượng khác cách bước giới thiệu tính WebGL, khơng cần tảng đồ họa 2D 3D Như vậy, quan tâm với vấn đề sau: • Các lập trình viên tìm kiếm hiểu biết cách phát triển cơng nghệ web lĩnh vực đồ họa • Sinh viên học đồ họa 2D 3D cung câp cách đơn giản đê thử nghiệm đồ họa thơng qua trình duyệt web thay cài đặt mơi trường lập trình đầy đủ • Các nhà phát triển web khám phá “tiềm năng” thiết bị di động Android iPhone trình duyệt web di động Tài liệu dùng làm tài liệu giảng dạy thức cho mơn học Lập trình đồ họa 3D ngành học cơng nghệ thơng tin làm tài liệu tham khảo cho môn học Kỹ thuật đồ họa ngành học Công nghệ thông tin đại học Thủy Lợi Tài liệu gồm Cuốn sách bao gồm API WebGL 1.0 với tất hàm JavaScript có liên quan Bạn tìm hiểu mối liên quan HTML, JavaScript WebGL, cách thiết lập chạy ứng dụng WebGL, cách kết họp chương trình 3D “tơ bóng” tinh vi kiểm soát JavaScript Cuốn sách chi tiết tơ bóng đỉnh mảnh, cách triển khai kỹ thuật dựng hình nâng cao chiếu sáng in bóng điềm ảnh, kỹ thuật tương tác việc lựa chọn đối tượng 3D Mỗi chương bao gồm số ứng dụng WebGL đầy đủ chức giải thích đặc điểm cúa WebGL thơng qua ví dụ Sau kết thúc sách, bạn viết ứng dụng WebGL mà tận dụng toàn chức web tảng phần cứng đồ họa Cấu trúc tài liệu Chương — Tổng quan WebGL Chương giới thiệu ngắn gọn ve WebGL, phác thảo số đặc điểm lợi cũa WebGL, trình bày chất Ngồi ra, giải thích mơi quan hệ WebGL đên HTML5 JavaScript cấu trúc chương trình WebGL Chương — Bước bạn với WebGL Chương giải thích phần tử hàm cốt lõi WebGL cách cho bạn bước, thông qua việc xây dựng số chương trình ví dụ Mỗi ví dụ viết bang JavaScript sử dụng WebGL để hiển thị tương tác với hình dạng đơn giản trang web Các ứng dụng WebGL nồi bật số điểm chính, bao gồm (1) cách WebGL sử dụng phần tử làm đế vẽ nó; (2) liên kết HTML WebGL việc sử dụng JavaScript; (3) hàm vẽ WebGL đơn giản (4) vai trò chương trình tơ bóng WebGL Chương - Vẽ biến đổi tam giác Chương tiếp tục phát triển để vẽ hình phức tạp thao tác hình 3D Chương bao gồm (1) vai trị quan trọng tam giác đô họa 3D hỗ trợ WebGL cho việc vẽ tam giác; (2) sử dụng nhiều tam giác để vẽ hình khác; (3) biến đổi sở di chuyển, xoay co dãn tam giác phương trình đơn giản (4) cách đế thao tác ma trận đế tạo phép biến đối Chương — Biến đổi kết hợp hoạt cảnh Hình 7.13 LightedCube_ambient Chương trình mẫu (LightedCube_ambient.js) Danh sách 7.2 mơ tả chương trình mẫu Bởi giống với sửa đổi hiển thị Danh sách 7.2 LightedCube_ambient.js // LightedCube_ambient.js // Chương trình vertex shader 'uniform vec3 u_LightColor;\n' + // màu ánh sáng 'uniform vec3 u_LightDirection;\n' + // Tọa độ giới thực, chuẩn hóa 10 'uniform vec3 u_AmbientLight;\n' + // Màu ánh sáng xung quanh 11 'varying vec4 v_Color;\n' + 12 'void main() {\n' + 16 // The dot product of the light direction and the normal 17 ' float nDotL = max(dot(lightDirection, normal), 0.0);\n' + 18 // Tính màu phản chiếu khuếch tán 19 ' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' + 20 // Tính màu phản chiếu xung quanh 21' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + 22 // Bổ sung màu bề mặt phản chiếu khuếch tán xung quanh 23 ' v_Color = vec4(diffuse + ambient, a_Color.a);\n' + 24 '}\n'; 36 function main() { 64 // Lấy vị trí lưu trữ biến đồng 257 LightedCube, có phần 68 var U-AmbientLight = gl.getUniformLocation(gl.program, 'U-AmbientLight'); 80 // Thiết lập ánh sáng xung quanh 81 gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2); 95} u_AmbientLight dòng 10 thêm vào vertex shader để truyền màu ánh sáng xung quanh Sau Phương trình 7.2 tính cách sử dụng màu bề mặt kết lưu trữ biến ambient (dòng 21) Bây hai diffuse (a_Color), ambient ra, màu bề mặt tính tốn dịng 23 Phương trình 7.3 Kết truyền cho v Coĩor, giống LightedCube, bề mặt sơn màu Như bạn thấy, chương trình đơn giản thêm ambient dịng 23, làm cho tồn khối lập phương trở nên sáng Nó cài đặt hiệu ứng ánh sáng xung quanh chiếu đến đối tượng với hướng Các ví dụ xử lý đối tượng tĩnh Tuy nhiên, đối tượng có khả di chuyển cảnh, điểm nhìn thay đơi, bạn phải có khả đế xử lý biến đối Trong Chương 4, ’’Biến đổi kết hợp hoạt cảnh bản", đối tượng tịnh tiến, co dãn, xoay phép biến đổi tọa độ Những biến đổi có thề thay đổi hướng pháp tuyến u cầu tính tốn lại ánh sáng cảnh thay đổi Chúng ta xem làm để đạt điều ÁNH SÁNG ĐỐI TƯỢNG ĐƯỢC TỊNH TIÉN-XOAY Chương trình LightedTranslatedRotatedCube sử dụng nguồn sáng hướng đề làm sáng khối lập phương, đối tượng xoay 90 độ theo chiều kim đồng hồ quanh trục z tịnh tiến 0.9 đơn vị theo trục y Một phần ánh sáng hướng mô tả phần trước, mẫu, LightedCube_ambient, sử dụng phản chiếu khuếch tán phản chiếu xung quanh xoay tịnh tiến khối lập phương Kết thể Hình 7.14 258 Hình 7.14 LightedTranslatedRotatedCube Bạn thấy phần trước hướng pháp tuyến thay đổi biến đổi tọa độ áp dụng Hình 7.15 minh hoạ số ví dụ Ảnh bên trái Hình 7.15 cho thấy khối sử dụng chương trình mẫu nhìn theo hướng âm trục z Chỉ có pháp tuyến (1,0, 0), theo hướng dương trục X, hiển thị Hãy thực số biến đối tọa độ minh họa này, chúng ba hình bên phải Hình 7.15 Sự thay đổi hướng pháp tuyến biến đổi tọa độ Bạn thấy sau từ Hình 7.15: • Hướng pháp tuyến khơng thay đối hướng đối tượng khơng thay đổi • Hướng pháp tuyến thay đổi phép quay theo hướng đối tượng • Co dãn có ảnh hưởng phức tạp đến pháp tuyến Như bạn thấy, đối tượng hình bên phải quay i sau dãn hai lần theo trục y Trong trường họp này, hướng pháp tuyến bị thay đổi hướng bề mặt thay đổi Mặt khác, đối tượng thu nhỏ trục, hướng pháp tuyến không thay đối Cuối cùng, đối tượng co dãn không đều, hướng pháp tuyến có thề khơng thay đổi Ví dụ, hình bên trái (pháp tuyến ban đầu) dãn hai lần theo trục y, hướng pháp tuyến khồng thay đối Rõ ràng, việc tính pháp tuyến biến đối khác phức tạp, đặc biệt giải với co dãn Tuy nhiên, kỹ thuật tốn học trợ giúp điều 259 Ma trận kì diệu: ma trận biến đối ngược Như mồ tả Chưong 4, ma trận thực biến đổi tọa độ trến đối tượng gọi ma trận mơ hình Hướng pháp tuyến tính băng cách nhân pháp tuyên với ma trận chuyên vị nghịch đảo ma trận mơ hình Ma trận chuyển vị nghịch đảo ma trận chuyển vị ma trận nghịch đảo Nghịch đảo ma trận M ma trận R, R * M M * R trở thành ma trận đơn vị Thuật ngữ chuyến vị nghĩa phép toán đổi chỗ hàng cột ma trận Chi tiết điều giải thích Phụ lục E, "Ma trận chuyển đổi ngược" Trong mục đích chúng ta, tóm tắt đơn giản cách sử dụng quy tắc sau đây: Quy tắc: Bạn tính hướng pháp tuyến bạn nhân pháp tuyến vói nghịch đảo chuyển vị ma trận mơ hình Ma trận chuyến vị nghịch đảo tính saư: Đảo ngược ma trận gốc Chuyển vị ma trận kết Điều thực cách sử dụng phương thức tiện ích hỗ trợ đối tượng Matrix4 (xem Bảng 7.1) Bảng 7.1 Phương thức Matrix4 cho ma trận chuyển vị nghịch đảo Phương thức Mơ tả Matrix4 setlnverseOf (m) Tính tốn nghịch đảo ma trận lưu trữ m lưu trữ kết đối tượng Matrix4, m đối tượng Matrix4 Ma trix4 transpose Chuyển ma trận lưu trữ đối tượng Matrix4 ghi kết trở lại đối tượng Matrix4 Giả sử ma trận mơ hình lưu trữ modelMatrix, chúng đối tượng Matrix4, đoạn mã sau có ma trận chuyển vị nghịch đảo Ket lưu trữ biến tên NormaĩMatrix, thực phép biến đồi tọa độ pháp tuyến: Matrix4 normalMatrix = new Matrix4(); //Tính ma trận mơ hình // Tính ma trận để biến đổi pháp tuyến theo ma trận mơ hình normalMatrix.setlnverseOf(modelMatrix); normal Matrix.transposeO; Bây xem chương trình LightedTransĩatedRotatedCube.js chiếu sáng khối lập phương, chúng xoay 90 độ theo chiều kim đồng hồ quanh trục z dịch 0.9 dọc theo trục 260 y, tất sử dụng ánh sáng hướng Bạn sử dụng khối lập phương biến đổi ma trận mơ hình LightedCube_ambient từ phần trước Chương trình mẫu (LightedTranslatedRotatedCube.js) Danh sách 7.3 cho thấy chương trình mẫu Những thay đổi từ u_NormalMatrỉx LightedCube_ambient thêm vào (dòng 8) để truyền ma trận biến đổi tọa độ pháp tuyến đến vertex shader, pháp tuyến biến đối dòng 16 sử dụng ma trận tính tốn JavaScript Danh sách 7.3 LightedTranslatedRotatedCube.js // LightedTranslatedRotatedCube.js // Chương trình vertex shader var VSHADER_SOURCE = 'attribute vec4 a_Normal;\n' + 'uniform mat4 u_MvpMatrix;\n' + 'uniform mat4 u_NormalMatrix;\n'+ // Ma trận biến đổi pháp tuyến 'uniform vec3 u_LightColor;\n' + // Màu ánh sáng 10 'uniform vec3 u_LightDirection;\n' + // Tọa độ giới thực, chuẩn hóa 11 'uniform vec3 u_AmbientLight;\n' + // Màu ánh sáng xung quanh 12 'varying vec4 v_Color;\n' + 13 'void main() {\n' + 14 ' gl_Position = u_MvpMatrix * a_Position;\n' + 15 // Tính lại pháp tuyến với ma trận pháp tuyến tạo cho độ dài 1.0 16 ' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + 17 // Tích vơ hướng hướng ánh sáng pháp tuyến 18 ' float nDotL = max(dot(u_LightDirection, normal), 0.0);\n' + 19 // Tính màu phản chiếu khuếch tán 20 ' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' + 21 // Tính màu phản chiếu xung quanh 22 ' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + 23 // Bổ sung màu bề mặt phản chiếu khuếch tán phản chiếu xung quanh 24 ' v_Color = vec4(diffuse + ambient, a_Color.a);\n' + 25 '}\n'; 37 function main() { 65 // Lấy vị trí lưu trữ biến đồng 66 var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); 67 var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix'); 85 var modelMatrix = new Matrix4(); // Ma trận mơ hình 261 u_NormalMatrỉx 86 var mvpMatrix = new Matrix4(); // Tính ma trận phép chiếu quan sát mơ hình 87 var normalMatrix = new Matrix4(); // Ma trận biến đổi cho pháp tuyến 88 89 // Tính ma trận mơ hình 90 modelMatrix.setTranslate(0,1, 0); // Dịch chuyển theo trục y 91 modelMatrix.rotate(90, 0, 0,1); // Quay quanh trục z 92 // Tính ma trận phép chiếu quan sát 93 mvpMatrix.setPerspective(30, canvas.width/canvas.height, 1,100); 94 mvpMatrix.lookAt(-7, 2.5, 6, 0, 0, 0, 0, 1, 0); 95 mvpMatrix.multiplyfmodelMatrix); 96 // Truyền ma trận phép chiếu quan sát mơ hình cho u_MvpMatrix 97 gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 98 99 // Tính ma trận để biến đổi pháp tuyến dựa ma trận mô hình 100 normalMatrix.setlnverseOf(modelMatrix); 101 normalMatrix.transposeO; 102 // Truyền ma trận biến đối cho pháp tuyến đến u_NormalMatrix 103 gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements); 110} Việc xử lý vertex shader giống LightedCube_ambient Sự khác biệt, phù hợp với quy tắc trước đó, nhân a_Normal với nghịch đảo chuyển vị ma trận mơ hình dịng 16: 15 // Tính lại pháp tuyến với ma trận pháp tuyến biến đổi có độ dài 1.0 16 ' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + Bởi bạn truyền a_Normaĩ dạng vec4, bạn nhân với U-NormaĩMatrix, chúng kiều mat4 Bạn cần thành phần X, y, z kết phép nhân, đó, kết chuyển đổi thành kiểu vec3 với vec3() Nó sử dụng (u_NormalMatrix * a_Normal) xyz Tuy nhiên, xyz trước, viết sử dụng để đơn giản Bây vec3 bạn hiểu làm shader tính theo hướng pháp tuyến từ việc quay dịch chuyển đối tượng, tiếp tục giải thích chương trình JavaScript Điểm mấu chốt cách tính ma trận, mà chúng truyền cho u_NormalMatrix U-NormaĩMatrix phần vertex shader chuyên vị nghịch đảo ma trận mơ hình, ma trận mơ hình tính dịng 90 91 Do chương trình quay đối tượng quanh trục z dịch theo trục y, bạn sử dụng phương thức setTransĩate rotate đối tượng Matrix4 mô tả Chương Tại dòng 100 101 ma trận chuyển vị nghịch đảo thực tính tốn Nó truyền cho U-NormaĩMatrix 262 vertex shader dòng 103, giống mvpMatrix dòng 97 Đối số thứ hai gi uniformMatrix4f () định có chuyển đổi ma trận hay khồng (Chương 3): 99 // Tính ma trận để biến đổi pháp tuyến dựa ma trận mơ hình 100 normalMatrix.setlnverseOf(modelMatrix); 101 normalMatrix.transpose(); 102 //Truyền ma trận biến đổi pháp tuyến đến u_NormalMatrix 103 gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements); Khi chạy, đầu tương tự Hình 7.14 Như bạn thấy, tơ bóng giống LightedCube_ambient với khối lập phương dịch chuyển theo trục y Đó (1) tịnh tiến không thay đổi theo hướng pháp tuyến, (2) khơng quay 90 độ, phép quay đơn giản chuyển bề mặt khối lập phương, (3) hướng ánh sáng ánh sáng hướng không thay đối bất kế vị trí đối tượng, (4) phản chiếu khuếch tán phản xạ ánh sáng theo hướng với cường độ Bây bạn có hiểu biết cách cài đặt ánh sáng tơ bóng đồ họa 3D Hãy xây dựng điều cách tìm hiểu kiểu khác nguồn sáng: ánh sáng điếm SỬ DỤNG MỘT ĐỐI TƯỢNG ÁNH SÁNG ĐIẺM Ngược với ánh sáng hướng , hướng ánh sáng từ nguồn sáng điếm khác vị trí cảnh 3D (xem Hình 7.16) Vì vậy, tính tốn tơ bóng, bạn cần tính tốn hướng ánh sáng vị trí cụ bề mặt nơi mà ánh sáng chiếu đến Hình 7.16 Hướng ánh sáng điếm thay đối theo vị trí Trong chương trình mẫu trước, bạn tính màu đỉnh cách truyền pháp tuyến hướng ánh sáng cho đỉnh Bạn sử dụng cách tiếp cận đây, hướng ánh sáng thay đối, bạn cần phải truyền vị trí nguồn sáng sau tính hướng ánh sáng đỉnh Ở đây, bạn xây dựng chương trình mẫu PointLightedCube hiến thị khối lập phương đỏ chiếu nguồn sáng điểm màu trắng Chúng ta lại sử dụng phản chiếu khuếch tán phản chiếu xung quanh Ket minh họa Hình 7.17, phiên LightedCube_ambient từ phần trước chiếu sáng với ánh sáng điểm 263 Hình 7.17 PointLightedCube Chương trình mẫu (PointLightedCube.js) Danh sách 7.4 cho thấy chương trình mẫu biến đối vertex shader LightedCube_ambient Biến u_ModelMatrix truyền ma trận mơ hình biến u_LightPosition biểu diễn vị trí ánh sáng thêm vào Lưu ý sử dụng ánh sáng điếm chương trình này, bạn dùng vị trí ánh sáng thay hướng ánh sáng Ngồi ra, để hiệu ứng dề xem hơn, phóng to khối lập phương Danh sách 7.4 PointLightedCube.js // PointLightedCube.js // Chương trình vertex shader var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'uniform mat4 u_ModelMatrix;\n' + // Ma trận mơ hình 'uniform mat4 u_NormalMatrix;\n' + // Ma trận biến đổi pháp tuyến 10 'uniform vec3 u_LightColor;\n' + // Màu ánh sáng 11 'uniform vec3 u_LightPosition;\n' + // VỊ trí nguồn sáng (theo tọa độ giới ^thực) 12 'uniform vec3 u_AmbientLight;\n' + // Màu ánh sáng xung quanh 13 'varying vec4 v_Color;\n' + 14 'void main() {\n' + 15 ' gl_Position = u_MvpMatrix * a_Position;\n' + 16 // Tính lại pháp tuyến với ma trận pháp tuyến cho độ dài 1.0 17 ' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + 18 // Tính tọa độ giới thực đỉnh 19 ' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' + 264 20 // Tính hướng ánh sáng biến đổi có độ dài 1.0 21' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' + 22 // Tích vơ hướng hướng ánh sáng pháp tuyến 23 ' float nDotL = max(dot( lightDirection, normal), 0.0);\n' + 24 // Tính màu phản chiếu khuếch tán 25 ' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' + 26 // Tính màu phản chiếu xung quanh 27 ' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + 28 // Bố sung màu bề mặt phản chiếu khuếch tán xung quanh 29 ' v_Color = vec4(diffuse + ambient, a_Color.a);\n' + 30 '}\n'; 42 function main() { 70 // Lấy vị trí lưu trữ biến đồng 71 var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 74 var u_LightColor = gl.getUniformLocation(gl.program,'u_LightColor'); 75 var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition'); 82 // Thiết lập màu ánh sáng (Trắng) 83 gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0); 84 // Thiết lập vị trí nguồn sáng (theo tọa độ giới thực) 85 gl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0); 89 var modelMatrix = new Matrix4(); // Ma trận mơ hình 90 var mvpMatrix = new Matrix4(); // Tính ma trận phép chiếu quan sát mơ hình 91 var normalMatrix = new Matrix4(); // Ma trận biến đổi cho pháp tuyến 92 93 // Tính ma trận mơ hình 94 modelMatrix.setRotate(90, 0,1, 0); // Quay quanh trục y 95 // Truyền ma trận mơ hình cho u_ModelMatrix 96 gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); Sự khác biệt chủ yếu trình xử lý vertex shader dòng 19 21 Tại dòng 19, bạn biến đổi tọa độ đỉnh sang tọa độ thực để tính tốn hướng ánh sáng tọa độ đỉnh Bởi ánh sáng điểm phát ánh sáng theo hướng từ vị trí nó, hướng ánh sáng đỉnh kết việc trừ vị trí đỉnh từ vị trí nguồn sáng Bởi vị trí ánh sáng truyền cho biến U-LightPosition mà sử dụng tọa độ thực dòng 11, bạn phải chuyển đổi tọa độ đỉnh thành tọa độ thực để tính tốn hướng ánh sáng Hướng ánh sáng sau tính dịng 21 Lưu ý chuẩn hố với normalize () cho độ dài 1.0 Sử dụng kết hướng ánh sáng 265 (light Di recti on), tích vơ hướng tính dịng 23 sau màu bề mặt đỉnh tính toán dựa hướng ánh sáng Neu bạn chạy chương trình này, bạn thấy kết thực hơn, minh họa Hình 7.17 Mặc dù kết thực tế hơn, nhìn gần giả: Các đường nét không tự nhiên bề mặt hình khối (xem Hình 7.18) Bạn thấy rõ hơn khối lập phương xoay bạn nạp PointLightedCube_animation Hình 7.18 Hình ảnh khơng tự nhiên xử lý ánh sáng điểm đỉnh Điều xảy trình nội suy trình bày Chương 5, "Sử dụng màu sắc hình ảnh kết cấu Như bạn nhớ lại, hệ thống WebGL nội suy màu đỉnh dựa màu mà bạn cung cấp cho đỉnh Tuy nhiên, hướng chiếu ánh sáng từ nguồn sáng điểm thay đổi theo vị trí để tơ bóng tự nhiên, bạn phải tính màu vị trí mà ánh sáng chiếu tới thay đỉnh Bạn thấy vấn đề rõ cách sử dụng cầu chiếu sáng ánh sáng điểm, minh họa Hình 7.19 Tính tốn đỉnh Tính tốn vị trí Hình 7.19 Khối cầu đưọc chiếu sáng bói ánh sáng điểm 266 Như bạn thấy, ranh giới phần sáng phần tối không tự nhiên hình trái Nếu hiệu ứng khó phân biệt giấy, hình bên trái PointLightedSphere, bên phải PointLightedSphere_perf ragment Chúng ta mô tả cách vẽ xác phần Tơ bóng thực hơn: tính tốn màu cho mảnh Thoạt nhìn, khó khăn phải tính tốn màu vị trí bề mặt hình khối, nơi ánh sáng chiếu tới Tuy nhiên, có nghĩa tính màu mảnh, sức mạnh fragment shader sử dụng Chương trình mẫu bạn sử dụng PointLightedCube_per fragment, kết minh họa Hình 7.20 Hình 7.20 PointLightedCube_perFragment Chương trình mẫu (PointLightedCube_perFragment.js) Chương trình mẫu, mà dựa PointLightedCube j s, hiển thị Danh sách 7.5 Chỉ đoạn lệnh tơ bóng sửa đổi và, bạn thấy, có xử lí vertex shader xử lý nhiều fragment shader Danh sách 7.5 PointLightedCube_perFragment.js // PointLightedCube_perFragment.js // Chương trình vertex shader var VSHADER-SOURCE = 'attribute vec4 a_Position;\n' + 'uniform mat4 u_ModelMatrix;\n' + // Ma trận mơ hình 'uniform mat4 u_NormalMatrix;\n' + // Ma trận biến đổi pháp tuyến 10 'varying vec4 v_Color;\n' + 11 'varying vec3 v_Normal;\n' + 12 'varying vec3 v_Position;\n' + 267 13 'void main() {\n' + 14 ' gl_Position = u_MvpMatrix * a_Position;\nl + 15 // Tính vị trí đỉnh theo tọa độ thực 16 ' v_Position = vec3(u_ModelMatrix * a_Position);\n' + 17 ' v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + 18 ' v_Color = a_Color;\n' + 19 '}\n'; 20 21 // Chương trình fragment shader 22 var FSHADER_SOURCE = 26 'uniform vec3 u_LightColor;\n' + // Màu ánh sáng 27 'uniform vec3 u_LightPosition;\n' + // Vị trí nguồn sáng 28 'uniform vec3 u_AmbientLight;\n' + // Màu ánh sáng xung quanh 29 'varying vec3 v_Normal;\n' + 30 'varying vec3 v_Position;\n' + 31 'varying vec4 v_Color;\n' + 32 'void main() {\n' + 33 // Chuẩn hóa pháp tuyến nội suy khác 1.0 (chiều dài) 34 ' vec3 normal = normalize(v_Normal);\n' + 35 // Tính hướng ánh sáng biến đổi có độ dài 1.0 36 ' vec3 lightDirection = normalize(u_LightPosition - v_Position);\n' + 37 // Tích vơ hướng hướng ánh sáng pháp tuyến 38 ' float nDotL = max(dot( lightDirection, normal), 0.0);\n' + 39 // Tính màu cuối từ phản xạ khuếch tán xung quanh 40 ' vec3 diffuse = u_LightColor * v_Color.rgb * nDotL;\n' + 41' vec3 ambient = u_AmbientLight * v_Color.rgb;\n' + 42 ' gl_FragColor = vec4(diffuse + ambient, v_Color.a);\n' + 43 '}\n'; Đe tính màu cho mảnh ánh sáng chạm tới, bạn cần (1) vị trí mảnh hệ tọa độ thực (2) hướng pháp tuyến vị trí mảnh Bạn sử dụng nội suy (Chương 5) để có giá trị mảnh cách tính chúng đỉnh vertex shader truyền chúng qua biến thay đổi đến fragment shader Các phép tính thực dịng 16 17, cách tương ứng, vertex shader Tại dịng 16, vị trí đỉnh tọa độ thực tính cách nhân tọa độ đỉnh với ma trận mơ hình Sau gán vị trí đỉnh cho biến thay đối v_Position, nội suy đỉnh truyền cho biến tương ứng(v_Position) fragment shader tọa độ thực mảnh Việc tính pháp tuyến dòng 17 thực với mục đích.10 Bằng cách gán kết cho 268 v_Normai, nội suy truyền cho biến tưong ứng (v_Normal) fragment shader pháp tuyến mảnh Trong chương trình mẫu này, chuẩn hố khơng cần thiết tất pháp tuyến truyền cho a_Normal với chiều dài 1.0 Tuy nhiên, chúng tơi chuấn hóa chúng với mục đích để hiểu mã lệnh tồng thể Việc xử lý fragment shader giống vertex shader PointLightedCube j s Thứ nhất, dòng 34, pháp tuyến nội suy truyền từ vertex shader chuẩn hóa Độ dài khác 1.0 nội suy Tiếp theo, dịng 36, hướng ánh sáng tính tốn chuấn hóa Sử dụng kết này, tích vơ hướng hướng ánh sáng pháp tuyến tính dịng 38 Các màu phản chiếu khuếch tán phản chiếu xung quanh tính tốn dịng 40 41 cộng lại để có màu mảnh, chúng gán cho gl_FragCoior dịng 42 Neu bạn có nhiều nguồn sáng, sau tính màu phản chiếu khuếch tán phản chiếu xung quanh cho nguồn sáng, bạn có màu cuối mảnh cách cộng tất màu Nói cách khác, bạn phải tính Phương trình 7.3 nhiều lần số lượng nguồn sáng 269 Tổng kết Chương khám phá cách chiếu sáng cảnh 3D, loại ánh sáng khác sử dụng làm ánh sáng phản chiếu khuếch tán thông qua cảnh Sử dụng kiến thức này, sau bạn cài đặt hiệu ứng nguồn sáng khác để chiếu sáng đối tượng 3D kiểm tra kỹ thuật tồ bóng khác để cải thiện tính thực đối tượng Như bạn thấy, việc làm chủ chiếu sáng điều cần thiết để bổ sung tính thực cho cảnh 3D, chúng xuất phẳng không thú vị không chiếu sáng xác 270 TÀI LIỆU THAM KHẢO [1] Kouichi Matsuda, Rodger Lea WebGL Programming Guide (June 2013) [2] Bowman, Doug A., Ernst Kruijff, Joseph J LaViola Jr, and Ivan Poupyrev 3D User Interfaces: Theory and Practice [3] Addison-Wesley Professional (July 26, 2004) Dunn, Fletcher, and Ian Parberry 3D Math Primer for Graphics and Game Development, 2nd Edition A K Peters/CRC Press (November 2, 2011) [4] Foley, James D., Andries van Dam, Steven K Feiner, and John F Hughes Computer Graphics: Principles and Practice in c , 2nd Edition Addison-Wesley Professional (August 4, 1995) [5] Munshi, Aaftab, Dan Ginsburg, and Dave Shreiner OpenGL ES 2.0 Programming Guide Addison-Wesley Professional (July 24, 2008) [6] Shreiner, Dave The Khronos OpenGL ARB Working Group OpenGL Programming Guide: The Official Guide to Learning OpenGL, Versions 3.0 and 3.1 , 7th Edition Addison-Wesley Professional (July 21, 2009) 271