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 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ới việc chỉ cần một trình soạn thảo văn bản 12

Xuất ứng dụng đồ hoạ 3D của bạn thật dễ dàng 13

Bạn có thể tận dụng chức năng đầy đủ của trình duyệt 14

Học và sử dụng WebGL là dễ dàng 14

BÀN CHẤT CỦA WEBGL 14

CẤU TRÚC ÚNG DỤNG WEBGL 15

Chương 2 BẲT ĐÀU VỚI WEBGL 17

CANVAS LÀ GÌ ? 17

Sử dụng thẻ <canvas> 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 là gì? 32

Cấu trúc của một 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 một biến thuộc tính 47

Họ phương thức của 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ý các trình xử lí sự kiện 54

Xử lý sự 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 nhất (Uniform variable ) 63

Lấy lại vị trí lưu trữ (storage location) của một biến đồng nhất 64

Gán giá trị cho một biến đồng nhất 65

Họ phương thức gl.uniform4f() 66

Chương 3 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 bộ đệm đối tượng 72

Tạo một Buffer Object (gl.createBufferQ) 74

Gắn một bộ đệm đối tượng vào một target (gl.bindBufferO) 75

Viết dữ liệu vào một bộ đệm đối tượng (gl buf f erData () ) 76

Mảng định kiểu (Typed array) 77

Gán các bộ đệm đối tượng cho một 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 Attrib ArrayO) 80

Các tham số thứ hai và thứ ba của gl draw Array 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 cơ 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, một lần nữa 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 4 BIẾN ĐỔI KÉT HỢP VÀ HOẠT CÀNH cơ 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

Chương trình mẫu (RotatingTriangle.js) 119

Lời gọi liên tục hàm vẽ (tick () ) 123

Vẽ một tam giác với góc xoay cụ thế (draw()) 123

Yêu cầu để được 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 5 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 bộ đệm đối tượng (Buffer Objects) 133

gl.vertexAttribPointerO Stride và 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 các shape hình học và 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 năng của biến thay đổi và quá 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 và tải hình ảnh (initTexturesO) 158

Làm cho Texture sẵn sàng sử dụng trong hệ thống WebGL (loadTextureO) 161

Đảo trục y của Image 161

Kích hoạt một đơn vị kết cấu (gl.activeTextureO) 162

Gắn một đối tượng Texture vào một Target (gl.bindTextureQ) 163

Thiết lập tham số Texture của một đối tượng kết cấu (gl.texParameteriO) 164

Gán một ảnh kết cấu cho một đố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 trong một 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 6 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ừ mộ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ằng bàn phím 192

Chương trình mẫu (LookAtTrianglesWithKeys.js) 192

Những phần cò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 một phần tử HTML sử dụng Javascript 200

Luồng xử lí của Vertex Shader 201

Khôi phục các phần cắt của tam giác (LookAtTrianglesWithKeyS-ViewVolume.js) 204

Thử nghiệm với các 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ò của ma trận phép chiếu 212

Sử dụng tất cả các ma trận (Model Matrix, Matrix View, và Projection Matrix) 213

Chương trình mẫu (PerspectiveView_mvp.js) 215

Thử nghiệm với các 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ẽ các đối tượng với chỉ số và tọa độ đỉnh 229

Chương trình mẫu (HelloCube.js) 230

Viết tọa độ đỉnh, màu sắc, và chỉ số cho bộ đệm đối tượng 233

Thêm màu cho mỗi mặt của khối lập phương 236

Chương trình mẫu (ColoredCube.js) 237

Thử nghiệm với các chương trình mẫu 239

Chương 7 ĐỐ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 do ánh sáng hướng và phản chiếu khuếch tán của nó 246

Tính toán phản chiếu khuếch tán bằng ánh sáng hướng và hướng của một bề mặt 247

Hướng của bề mặt: Pháp tuyến là 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 toán màu cho mỗi mảnh 267

Chương trình mẫu (PointLightedCube_perFragment.js) 267

LỜI NÓI ĐẦU

WebGL là một công nghệ cho phép vẽ, hiển thị, và tương tác với đồ họa máy tính ba chiều phức tạp ("đồ họa 3D") từ các 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 và phải lập trình phức tạp Tuy nhiên, khi máy tính cá nhân và trình duyệt web trở nên tinh vi hơn, nó có thể tạo ra và hiển thị đồ hoạ 3D bằng việc sử dụng các công nghệ web nổi tiếng Tài liệu này cung cấp cái nhìn tổng quan ve WebGL và từng bước mang đến cho người đọc thông qua các ứng dụng WebGL Không giống các công nghệ đồ họa 3D như OpenGL và Direct3D, các ứng dụng WebGL có thể được xây dựng như trang web để chúng có thể chạy trực tiếp trong trình duyệt mà không cần cài đặt bất kỳ plug-in hoặc thư viện đặc biệt nào

Do đó, bạn có thể phát triển nhanh chóng và thử chương trình mẫu với môi trường PC chuẩn; bởi

vì mọi thứ đều dựa trên web, bạn dễ dàng xuất các chương trình đã xây dựng trên web Một trong những lời hứa của WebGL đó là, do các ứng dụng WebGL được xây dựng dưới dạng web, chương trình có thể chạy như nhau trên một loạt các thiết bị, như điện thoại thông minh, máy tính bảng và trò chơi bảng điều khiển, thông qua trình duyệt Mô hình mạnh mẽ này có nghĩa là WebGL có một tác động đáng kể đến cộng đồng nhà phát triển và sẽ trở thành một trong những công cụ ưu tiên cho lập trình đồ họa

Cuốn sách dành cho ai

Có có hai đối tượng chính sẽ sử dụng cuốn sách này: nhà phát triển web đang tìm kiếm để bổ sung

đồ họa 3D vào trang web hoặc ứng dụng của họ và các nhà lập trình đồ họa 3D đang muốn áp dụng kiến thức của mình vào môi trường web Đối với nhà phát trien web đã quen thuộc với các công nghệ web chuẩn như HTML và JavaScript và những người đang tìm cách kết hợp đồ họa 3D vào trang web hoặc ứng dụng web của họ, WebGL cung cấp một giải pháp đơn giản nhưng mạnh

mẽ Nó bố sung đồ họa 3D đê cải thiện trang web, bằng cách sử dụng giao diện 3D và thậm chí là phát triển các ứng dụng và trò chơi 3D phức tạp hơn trên trình duyệt

Đối tượng mục tiêu thứ hai là các lập trình viên đã làm việc với các giao diện lập trình ứng dụng (API) 3D chù yếu, như Direct3D hoặc OpenGL và quan tâm đến việc áp dụng kiến thức của họ vào môi trường web Chúng tôi hy vọng các lập trình viên này sẽ quan tâm đến các ứng dụng 3D phức tạp hơn mà có thể được phát triển trong các trình duyệt web hiện đại

Tuy nhiên, cuốn sách cũng thiết kế để có thể tiếp cận với nhiều đối tượng khác bằng cách từng bước giới thiệu các tính năng của WebGL, nó không cần nền tảng đồ họa 2D hoặc 3D Như vậy,

nó cũng được quan tâm với những vấn đề sau:

• Các lập trình viên tìm kiếm sự hiểu biết về cách phát triển công nghệ web trong lĩnh vực đồ họa

• Sinh viên học đồ họa 2D và 3D vì nó cung câp một cách đơn giản đê thử nghiệm đồ họa thông qua trình duyệt web thay vì cài đặt mộ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” trên thiết bị di động như Android hoặc iPhone bằng trình duyệt web di động mới nhất.

Tài liệu này được dùng làm tài liệu giảng dạy chính thức cho môn học Lập trình đồ họa 3D ngành học công nghệ thông tin và làm tài liệu tham khảo cho môn học Kỹ thuật đồ họa các ngành học Công nghệ thông tin của đại học Thủy Lợi

Cấu trúc tài liệu

Chương 1 — Tổng quan về WebGL

Chương này giới thiệu ngắn gọn ve WebGL, phác thảo một số đặc điểm chính và lợi thế cũa WebGL, và trình bày bản chất của nó Ngoài ra, giải thích môi quan hệ của WebGL đên HTML5

và JavaScript và cấu trúc chương trình WebGL

Chương 2 — Bước đầu tiên của bạn với WebGL

Chương này giải thích phần tử <canvas> và các hàm cốt lõi của WebGL bằng cách chỉ cho bạn từng bước, thông qua việc xây dựng một số chương trình ví dụ Mỗi ví dụ được viết bang JavaScript

và sử dụng WebGL để hiển thị và tương tác với một hình dạng đơn giản trên một trang web Các ứng dụng WebGL sẽ nồi bật một số điểm chính, bao gồm (1) cách WebGL sử dụng phần tử

<canvas> và làm thế nào đế vẽ trên nó; (2) liên kết giữa HTML và WebGL bằng việc sử dụng JavaScript; (3) các hàm vẽ WebGL đơn giản và (4) vai trò của các chương trình tô bóng trong WebGL

Chương 3 - Vẽ và biến đổi tam giác

Chương này tiếp tục phát triển để vẽ các hình phức tạp hơn và thao tác các hình 3D Chương này bao gồm (1) vai trò quan trọng của tam giác trong đô họa 3D và hỗ trợ của WebGL cho việc vẽ tam giác; (2) sử dụng nhiều tam giác để vẽ các hình cơ bản khác; (3) các biến đổi cơ sở như di chuyển, xoay và co dãn tam giác bằng các phương trình đơn giản và (4) cách đế thao tác ma trận

đế tạo các phép biến đối như thế nào

Trong chương này, bạn tìm hiểu các phép biến đổi tiếp theo và bắt đầu kết hợp chúng vào hoạt cảnh Bạn: (1) được giới thiệu một thư viện biến đổi ma trận mà ẩn các chi tiết toán học cùa các thao tác ma trận; (2) sử dụng thư viện để kết hợp nhiều biến đối nhanh chóng và dễ dàng; và (3) khám phá hoạt cảnh và cách thư viện giúp bạn hoạt hóa các hình đơn giản Các kỹ thuật này cung cấp các cơ sở để xây dựng chương trình WebGL phức tạp và sẽ được sử dụng trong các chương trình mẫu ở các chương sau.

Chương 5 — Sử dụng màu sắc và hình ảnh kết cấu

Xây dựng dựa trên những mô tả cơ sở của các chương trước, bây giờ bạn sẽ tìm hiểu kỹ hơn một chút về WebGL bằng cách khám phá ba vấn đề sau: (1) truyền dữ liệu khác như thồng tin màu đến vertex shader; (2) chuyển đổi từ một shape đến các mảnh mà diễn ra giữa vertex shader và fragment shader, được gọi là quá trình phân hóa điểm; và (3) ánh xạ hình ảnh (hoặc kết cấu) lên bề mặt cùa một shape hay đối tượng Chương này là chương cuối tập trung về các chức năng chính của WebGL

Chương 6 — Hướng tới thế giới 3D

Chương này thực hiện bước đầu tiên vào thế giới 3D và khám phá ý nghĩa của việc chuyển đổi từ 2D sang 3D Cụ thể, bạn sẽ tìm hiếu: (1) Miêu tả quan sát của người dùng vào thế giới 3D; (2) điều khiển khối không gian 3D được quan sát; (3) cắt xén; (4) đối tượng mặt trước và mặt sau; và (5) vẽ một đối tượng 3D - một khối lập phương Tất cả những các vấn đề này có ảnh hưởng đáng

kể đến cảnh 3D được vẽ Việc làm chủ chúng rất quan trọng để xây dựng cảnh 3D hấp dẫn.Chương 7 - Đối tượng chiếu sáng

Chương này tập trung vào đối tượng chiếu sáng, quan sát các nguồn sáng khác nhau và hiệu ứng của chúng trên cảnh 3D Ánh sáng là cần thiết trong cảnh thực 3D bởi vì nó tạo cảm giác chiều sâu Các điểm chính được thảo luận trong chương này (1) Tô bóng (shading), bóng in (shadows)

và các loại nguồn sáng khác nhau bao gồm điểm, hướng, và xung quanh (2) Phản chiếu ánh sáng trong cảnh 3D và hai loại chính: khuếch tán và xung quanh (3) Các chi tiết của tô bóng và làm thế nào để cài đặt hiệu ứng ánh sáng cho đối tượng, chẳng hạn như khối lập phương trắng tinh khiết trong chương trước, trông giống ba chiều

Chương 1 TÔNG QUAN VÈ WEBGL

WebGL là một công nghệ cho phép vẽ, hiển thị, và tương tác với đồ họa máy tính ba chiều phức tạp ("đồ họa 3D") từ các 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 và phải lập trình phức tạp Tuy nhiên, khi máy tính cá nhân và trình duyệt web trở nên tinh vi hơn, nó có thể tạo ra và hiển thị đồ hoạ 3D bằng việc sử dụng các công nghệ web nổi tiếng WebGL, khi kết họp với HTML5 và JavaScript, làm cho đồ hoạ 3D tiếp cận được với nhà phát triển web và đóng vai trò quan trọng trong việc phát triển thế hệ tiếp theo, dễ

sử dụng và trực quan cho giao diện người dùng và nội dung web Điều này được minh họa trong Hình 1.1 Trong vài năm tới, bạn có thể hy vọng WebGL được sử dụng trên một loạt các thiết bị

từ các máy tính tiêu chuân sang điện tử gia dụng, điện thoại thông minh và máy tính bảng

Hình 1.1 Đồ họa 3D phức tạp bên trong một trình duyệt 2011 Hiromasa Horie (left), 2012 Kouỉchỉ

Matsuda (right)

HTML5, sự phát triển mới nhất của tiêu chuẩn HTML, là sự mở rộng HTML truyền thống với các tính năng bao gồm đồ họa 2D, mạng và truy cập vào bộ nhớ cục bộ Với sự ra đời của HTML5, trình duyệt đang nhanh chóng phát triển từ các công cụ trình diễn đơn giản đến nền tảng ứng dụng phức tạp Với sự phát triển này, cần có một giao diện và khả năng đồ họa nhiều hơn 2D WebGL được thiết kế cho nhu cầu đó với các ứng dụng 3D trực quan chạy trên trình duyệt

Theo truyền thống, việc tạo đồ họa 3D hấp dẫn yêu cầu bạn phải tạo một ứng dụng độc lập bằng việc sử dụng một ngôn ngữ lập trình như c hoặc C + + cùng với thư viện đồ hoạ máy tính chuyên dụng như OpenGL và Direct3D Tuy nhiên, với WebGL, bây giờ bạn có thể xem đồ họa 3D như

là một phần của trang web tiêu chuẩn bằng việc sử dụng HTML quen thuộc và với một chút mã JavaScript bổ sung cho đồ họa 3D

Quan trọng là, do WebGL được hỗ trợ như là công nghệ built-in mặc định của trình duyệt cho dựng hình đồ hoạ 3D, bạn có thể sử dụng WebGL trực tiếp mà không cần phải cài đặt các thư viện

dụng WebGL trên các nền khác nhau, từ các máy vi tính cá nhân đến các thiết bị điện tử tiêu dùng, máy tính bảng và điện thoại thông minh.

Chương này giới thiệu ngắn gọn ve WebGL, phác thảo một số đặc điểm chính và lợi thế của WebGL, và trình bày bản chất của nó Ngoài ra, giải thích mối quan hệ của WebGL đến HTML5

và JavaScript và cấu trúc chương trình WebGL

ƯU ĐIẾM CỦA WEBGL

Như HTML đã phát triên, các nhà phát triên web đã có thê tạo ra các ứng dụng dựa trên web ngày càng tinh vi Ban đầu, HTML chỉ cung cấp nội dung tĩnh, nhưng phần giới thiệu hỗ trợ kịch bản JavaScript cho phép tương tác phức tạp hơn và nội dung động HTML5 được giới thiệu phức tạp hơn nữa, bao gồm hỗ trợ đồ họa 2D thông qua thẻ canvas Điều này cho phép một loạt các phần

tử đồ họa trên một trang web, từ nhân vật hoạt hình nhảy múa đến ánh xạ hoạt cảnh, mà đáp ứng đầu vào của người dùng bằng cách cập nhật ánh xạ theo thời gian thực

WebGL mất thêm một bước nữa, cho phép hiển thị và thao tác đồ họa 3D trên các trang web bằng cách sử dụng JavaScript Việc sử dụng WebGL có thế tạo ra giao diện người dùng phong phú và các trò chơi 3D và sử dụng 3D cho việc hình dung và vận dụng đa dạng thông tin trên mạng Mặc

dù khả năng kỹ thuật của WebGL ấn tượng, nhưng nó lại dễ sử dụng so với các công nghệ khác trong khi vẫn đảm bảo tính hiệu quả Đặc biệt:

• Bạn có thể bắt đầu phát triển các ứng dụng đồ họa 3D bằng cách sử dụng một trình soạn thảo văn bản và trình duyệt

• Bạn có thể dễ dàng xuất các ứng dụng đồ hoạ 3D bằng việc sử dụng các công nghệ web chuẩn, bằng việc làm cho chúng có sẵn với bạn bè hoặc người dùng web khác

• Bạn có thể tận dụng các chức năng đầy đủ của trình duyệt

• Học tập và sử dụng WebGL rất dễ vì có rất nhiều tài liệu cho nghiên cứu và phát triển

Bắt đầu phát triển các ứng dụng đồ họa 3D vói việc chỉ cần một trình soạn thảo văn bản

Một diêm tiện lợi trong việc phát tri en ứng dụng WebGL là bạn không cần thiết lập mồi trường phát triển ứng dụng cho WebGL Như đã giải thích trước đó, bởi vì WebGL được xây dựng trong trình duyệt, không cần công cụ phát triển ứng dụng đặc biệt như trình biên dịch và các liên kết để tạo ra các ứng dụng đồ hoạ 3D Tối thiểu, để xem các chương trình mẫu được giải thích trong cuốn sách này, bạn chỉ cằn một trình duyệt hỗ trợ WebGL Neu bạn muốn chỉnh sửa hoặc tạo chúng, một trình soạn thảo văn bản chuẩn (ví dụ, Notepad hoặc TextEdit) là đủ Trong Hình 1.2, bạn có thể thấy một ứng dụng WebGL đang chạy trong Chrome và tệp HTML được mở trong Notepad Tệp JavaScript (RotateObject j s) sử dụng WebGL được tải bởi tệp HTML và có thế chỉnh sửa bằng một trình soạn thảo văn bản đơn giản

File Edit Format View Help

<canvas id="webgl" width="400" height="400">

Please use a browser that supports "canvas"

Hình 1.2 Những công cụ cần thiết duy nhất cho phát triễn úng dụng đồ họa 3D sử dụng WebGL Xuất ứng dụng đồ hoạ 3D của bạn thật dễ dàng

Theo truyền thống, các ứng dụng đồ họa 3D đã được phát triển bằng cách sử dụng một chương trình ngôn ngữ như c hoặc c ++ và sau đó biên dịch thành một tập tin nhị phân thực thi với một nền tảng cụ thể Có nghĩa là, ví dụ, phiên bản cho Macintosh sẽ không hoạt động trên Windows hay Linux Ngoài ra, người dùng thường cài đặt không chỉ ứng dụng của chính họ mà còn các thư viện được yêu cầu bởi ứng dụng để chạy, có nghĩa là một mức độ phức tạp khác khi bạn muốn chia sẻ công việc của bạn

Ngược lại, bởi vì các ứng dụng WebGL bao gồm các tệp HTML và JavaScript, chúng có thể dễ dàng chia sẻ bằng việc đặt chúng đơn giản trên một máy chù web giống như các trang web chuẩn hoặc phân bố các tệp HTML và JavaScript qua email Ví dụ, Hình 1.3 cho thấy một số ứng dụng mẫu WebGL xuất ra bởi Google và có sẵn tại http: // code.google.com/p/webglsamples/

Hình 1.3 Những ứng dụng ví dụ WebGL xuất bởi Google (với sự cho phép của Gregg Tavares, Google)

Bạn có thế tận dụng chức năng đầy đủ của trình duyệt

Bởi vì các ứng dụng WebGL được tạo ra như là một phần của một trang web, bạn có thể sử dụng đầy đủ chức năng của trình duyệt như sẳp xếp các nút, hiên thị hộp thoại, vẽ kí tự, phát video hoặc

âm thanh, và giao tiếp với các máy chủ web Những tính năng nâng cao đi kèm miễn phí, trong khi các ứng dụng đồ hoạ 3D truyền thống phải lập trình

Học và sử dụng WebGL là dễ dàng

Đặc tả WebGL dựa trên tiêu chuẩn mở miễn phí bản quyền, OpenGL, đã được sử dụng rộng rãi trong đồ họa, trò choi video và ứng dụng CAD trong nhiều năm Điều này có nghĩa, WebGL là

"OpenGL cho các trình duyệt web." Bởi vì OpenGL đã được sử dụng trong một loạt nền tảng suốt

20 năm qua, có nhiều sách tham khảo, tài liệu và các chương trình mẫu sử dụng OpenGL, cái có thể được sử dụng để hiểu rõ hơn về WebGL

Hai trong số công nghệ phố biến nhất hiển thị đồ họa 3D là Direct3D and OpenGL Direct3D, một phần công nghệ DirectX của MS, là kĩ thuật đồ họa 3D chủ yếu trên nền Windows và là giao diện chương trình ứng dụng có bản quyền cùa MS Cái còn lại, OpenGL được sử dụng rộng rãi trên nhiều nền tảng bởi vì mã nguồn mở và miễn phí của nó OpenGL là có sẵn cho Mac, Linux, và hàng loạt thiết bị như là điện thoại thông minh, máy tính bảng và thiết bị chơi game Nó cũng hỗ trợ tốt trên Windows và cung cấp luân phiên với Direct3D

OpenGl được phát triển bởi Silicon Gr Inc, và được xuất bản như một chuẩn mở rộng năm 1992 OpenGL được phát triến thông qua một số phiên bản từ năm 1992 và đã ảnh hưởng sâu đến phát triển đồ họa 3D, phát triển sản phẩm phần mềm, và thậm chí sản xuất phim trong suốt các năm Phiên bản cuối cùng cùa OpenGL là phiên bản 4.3 trên màn hình máy tính cá nhân Mặc dù WebGL xuất phát từ OpenGL, nó thực sự bắt nguồn từ phiên bản của OpenGL được thiết kế cụ thể cho máy tính nhúng như là điện thoại thông minh và các thiết bị chơi game Phiên bản này, được biết như là OpenGl ES (cho hệ thống nhúng), được phát triến lần đầu năm 2003-2004 và cập nhật năm

2007 (ES 2.0) và tiếp tục năm 2012 (ES3.0) WebGL dựa trên phiên bản ES 2.0 Trong những năm gần đây, số các thiết bị và các xử lí hỗ trợ đặc tả đã tăng nhanh, bao gồm điện thoại thông minh (iPhone và Android), máy tính bảng và bảng điều khiển trò chơi Một phần của lý do này là OpenGL ES đã bố sung các tính năng mới đồng thời loại bỏ nhiều tính năng không cần thiết hoặc lỗi thời từ OpenGL, dẫn đến việc giảm đặc tả nhưng vẫn đủ mạnh để tạo ra sự hấp dẫn cuả đồ họa 3D

Hình 1.4 cho thấy mối quan hệ giữa OpenGL, OpenGL ES 1.1 / 2.0 / 3.0 và WebGL Bởi vì chính OpenGL đã tiếp tục phát triển từ 1.5, 2.0 đến 4.3, OpenGL ES đã được chuẩn hóa như một tập con của các phiên bản cụ thế OpenGL (OpenGL 1.5 và OpenGL 2.0)

Hình 1.4 Mối quan hệ giữa OpenGL, OpenGL ES 1.1/2.0/3.0 và WebGL

Như chỉ ra trong Hình 1.4, với việc chuyền sang OpenGL 2.0, một khả năng mới đáng kể,

programmable shader functions, được giới thiệu Khả năng này đã được thực hiện thông qua OpenGL ES 2.0 và là phần cốt lõi của đặc tả WebGL 1.0

Các hàm shader hoặc shaders là các chương trình máy tính có hiệu ứng hình ảnh phức tạp bằng cách sử dụng một ngôn ngữ lập trình đặc biệt tựa như c Cuốn sách này giải thích các hàm shader theo từng bước, cho phép bạn nhanh chóng nắm vững khả năng của WebGL Ngôn ngữ lập trình được sử dụng để tạo các shader được gọi là shading language. Ngôn ngữ tồ bóng được sử dụng trong OpenGL ES 2.0 dựa trên OpenGL shading language (GLSL) và được gọi là OpenGL ES shading language (GLSL ES) Bởi vì WebGL dựa trên OpenGL ES 2.0, nó cũng sử dụng GLSL

ES để tạo shaders

Nhóm Khronos (một tổ chức phi lợi nhuận được thành lập để phát triển, xuất bản và thúc đẩy các tiêu chuẩn mở khác nhau) chịu trách nhiệm cho sự phát triển và tiêu chuẩn hóa OpenGL Trong năm 2009, Khronos thành lập nhóm làm việc WebGL và sau đó bắt đầu quy trình chuẩn hóa WebGL dựa trên OpenGL ES 2.0, phát hành phiên bản đầu tiên của WebGL trong năm 2011 Cuốn sách này được viết dựa chủ yếu vào đặc điểm kỹ thuật đó, và nếu cần, đặc tả mới nhất của WebGL được xuất bản dưới dạng biên soạn của người biên tập

Trong HTML, các trang web động có thể được tạo ra bằng cách sử dụng một sự kết hợp của HTML

và JavaScript Với sự giới thiệu của WebGL, ngôn ngữ tô bóng của GLSL ES cần được thêm để kết họp, có nghĩa là các trang web sử dụng WebGL được tạo ra bằng cách sử dụng ba ngôn ngữ: HTML5 (dưới dạng ngôn ngữ đánh dấu siêu văn bản), JavaScript và GLSL ES Hình 1.5 chỉ ra các kiến trúc phần mềm của các trang web động truyền thống (bên trái) và các trang web sử dụng WebGL (bên phải)

Hình 1.5 Kiến trúc phần mềm của các trang web động (trái) và các trang web sử dụng webGL

(phải)

Tuy nhiên, vì GLSL ES thường được viết trong JavaScript, chỉ có các tệp HTML và JavaScript thực sự cần thiết cho các ứng dụng WebGL Vì vậy, mặc dù WebGL làm phức tạp thêm cho JavaScript, nó vẫn giữ nguyên cấu trúc giống như web động chuẩn, chỉ sử dụng các tệp HTML và JavaScript

Tổng kết

Chưong này ngắn gọn tống quan ve WebGL, giải thích một số tính năng chính và vạch ra kiến trúc phần mềm của các ứng dụng WebGL Nói tóm lại, vấn đề chính của chương này là các ứng dụng WebGL được phát triển bằng cách sử dụng ba ngôn ngữ: HTML5, JavaScript, và GLSL ES Tuy nhiên, bởi vì mã lệnh shader (GLSL ES) thường được nhúng trong JavaScript, bạn có chính xác cấu trúc tập tin giống như một trang web truyên thống Chương tiếp theo giải thích làm thế nào đế tạo các ứng dụng sử dụng WebGL, giúp bạn tìm hiểu dẫn từng bước thông qua các ví dụ WebGL đơn giản

Chương 2 BẮT ĐẦU VỚI WEBGL

Như được giải thích trong chương 1 ’’Tổng quan về WebGL", các ứng dụng WebGL sử dụng cả HTML và JavaScript để tạo và vẽ đồ họa 3D trên màn hình Đe làm được điều này, WebGL sử dụng phần tử mới <canvas> được giới thiệu trong HTML5, định nghĩa một vùng vẽ trên một trang web Khi không có WebGL, phần tử <canvas>chỉ cho phép bạn vẽ đồ họa hai chiều bằng cách

sử dụng JavaScript Với WebGL, bạn có thể sử dụng phần tử đó đế vẽ đồ họa ba chiều

Chương này giải thích phần tử <canvas> và các hàm cốt lõi của WebGL bằng cách chỉ cho bạn từng bước, thông qua việc xây dựng một số chương trình ví dụ Mỗi ví dụ được viết bang JavaScript

và sử dụng WebGL để hiển thị và tương tác với một hình dạng đơn giản trên một trang web Do

đó, các chương trình JavaScript này được gọi là các ứng dụng WebGL.

Các ứng dụng WebGL điến hình sẽ làm nối bật một số điếm chính, bao gồm:

• Cách WebGL sử dụng phân tử <canvas> và làm thê nào đê vẽ trên nó

• Liên kết giữa HTML và WebGL bằng việc sử dụng JavaScript

• Các hàm vẽ WebGL đơn giản

• Vai trò của các chương trình tô bóng trong WebGL

Vào cuối chương, bạn sẽ hiểu làm thế nào để viết và tiến hành các ứng dụng WebGL cơ bản và làm thế nào để vẽ hình dạng 2D đơn giản Bạn sẽ sử dụng kiến thức này đế khám phá thêm WebGL trong chương 3, "Vẽ và biến đổi các tam giác", 4, "Biến đổi kết hợp và hoạt cảnh cơ bản," và 5,

"Sử dụng màu sắc và hình ảnh kết cấu "

Trước HTML5, nêu bạn muốn hiến thị một hình ảnh trong một trang web, cách tiếp cận HTML duy nhất là sử dụng thẻ <img> Thẻ này, mặc dù là một công cụ thuận tiện, chỉ giới hạn với ảnh tĩnh và khồng cho phép vẽ động và hiển thị ảnh bay nhảy Đây là một trong những lý do cho giải pháp như Flash Player đã được sử dụng

Tuy nhiên, HTML5, bằng cách giới thiệu thẻ <canvas>, đã thay đối tất cả, cung cấp một cách tiện lợi để vẽ đồ họa máy tính tự động bằng việc sử dụng JavaScript

Tương tự như cách các nghệ sĩ sử dụng vẽ sơn dầu, thẻ <canvas> định nghĩa một vùng vẽ trên một trang web Sau đó, thay vì sử dụng bàn chải và sơn, bạn có thể sử dụng JavaScript để vẽ bất

cứ thứ gì bạn muốn trong vùng Bạn có thể vẽ các điểm, đường thẳng, hình chữ nhật, hình tròn, V.V bằng cách sử dụng các phương thức JavaScript được cung cấp <canvas> Hình 2.1 cho thấy một ví dụ về công cụ vẽ sử dụng thẻ <canvas>.

Hình 2.1 Một công cụ vẽ có sử dụng phần tử <canvas> ( http://caimansys.com/painter/ )

Công cụ vẽ này chạy trên một trang web và cho phép bạn vẽ tương tác đường thắng, hình chữ nhật,

và hình tròn và thậm chí thay đôi màu sắc của chúng

Mặc dù bạn sẽ không tạo ra bất cứ hình nào được nêu ra, chúng ta hãy nhìn vào bản chất các hàm

chữ nhật màu xanh trên một trang web Hình 2.2 chỉ ra DrawRectangle khi nó được nạp vào một trình duyệt

Q Draw a blue rectangle (canva: X

6 </head>

7

8 <body onload="main()">

9 <canvas id="example" width="400" height="400">

10 Please use a browser that supports "canvas"

11 </canvas>

12 <script src="DrawRectangle.js"x/script>

13 </body>

14 </html>

điểm ảnh trên một trang web bằng việc sử dụng các thuộc tính widthvà heighttrong thẻ Vùng được gán một tên thông qua thuộc tính id, được sử dụng sau đây:

<canvas id="example" width="400" height="400"x/canvas>

Theo mặc định, canvas là vô hình (thực sự trong suốt) cho đến khi bạn vẽ một cái gì đó lên nó, cái

mà chúng ta sẽ làm việc với JavaScript bây giờ Đó là tất cả những gì bạn cần làm trong file HTML đê chuẩn bị một <canvas>mà chương trình WebGL có thế sử dụng Tuy nhiên, một điều cần lưu ý là dòng này chỉ làm việc trong trình duyệt có hỗ trợ <canvas>. Tuy nhiên, các trình duyệt không hỗ trợ thẻ <canvas> sẽ bỏ qua dòng này, và không có gì sẽ được hiến thị trên màn hình Để xử lý điều này, bạn có thế hiển thị một thông báo lỗi bằng cách thêm các thông báo vào thẻ như sau:

9 <canvas id="example" width="400" height="400">

10 Please use a browser that supports "canvas"

làm lối vào cho chương trình JavaScript Chúng chỉ định phần tử <body> sử dụng thuộc tính

ccanvas id="example" width="400" height="400">

Please use a browser that supports "canvas"

if (lcanvas) console.logfFailed to retrieve the <canvas> element');

return false;

} // Get the rendering context for 2DCG var ctx = canvas.getContext('2d');

// Draw a blue rectangle ctx.filIStyle = 'rgbafo, 0, 255,1.0)'; // Set color to blue ctx.fillRect(120,10,150,150); // Fill a rectangle with the color }

DrawRectangle.is

Hình 2.3 DrawRectangle.html và DrawRectangle.js DrawRectangle.js

được định nghĩa bởi phần tử <canvas>(xem Danh sách 2.2) Nó chỉ có 16 dòng, bao gồm ba bước

để vẽ đồ họa hai chiều (đồ hoạ 2D) trên khung:

(1) Lấy phần tử <canvas>.

(2) Yêu cầu dựng hình "context” 2D từ phần tử

(3) Vẽ đồ họa 2D bằng cách sử dụng các phương thức mà context hỗ trợ

Ba bước này là như nhau cho dù bạn đang vẽ đồ hoạ 2D hay 3D; ở đây, bạn đang vẽ một hình chữ nhật 2D đơn giản Neu bạn đang vẽ đồ họa 3D bang WebGL, thì dựng hình context trong bước (2) ở dòng 11 sẽ là dựng hình context 3D; tuy nhiên, xử lí mức cao sẽ như nhau

14 ctx.filistyle = 'rgba(C), 0, 255, 1.0)'; // Thiết lập màu xanh dương

15 ctx.fillRect(120,10,150,150); // Tô kín màu hình chữ nhật

16}

Chúng ta hãy quan sát thứ tự từng bước

Lời gọi lại phần tử <canvas>

Đe vẽ một cái gì đó trên <canvas>, trước tiên bạn phải gọi lại phần tử <canvas>từ file HTML trong chương trình JavaScript Bạn có thể lấy phần tử bằng cách sử dụng phương thức

chuỗi được chỉ ra trong thuộc tính id trong thẻ <canvas> trong tệp HTML Trong trường hợp này, xâu là example’ và nó được định nghĩa lại trong DrawRectangle html tại dòng 9 (xem Danh sách 2.1)

Neu giá trị trả lại của phương thức này khác null,bạn đã gọi thành công phần tử Tuy nhiên, nếu

nó là null, bạn đã thất bại Bạn có thế kiếm tra điều kiện này bằng việc sử dụng một câu lệnh if đơn giản được chỉ ra dòng 5 Trong trường hợp lỗi, dòng 6 được thực thi Nó sử dụng phương thức

Chú ý Trong Chrome, bạn có thể chỉ ra bảng điều khiển bằng cách vào Tools, JavaScript Console hoặc nhấn Ctrl+Shift+J (xem Hình 2.4 ); trong Firefox, bạn có thể chỉ ra nó bằng cách vào Tools, Web Developer, Web Console hoặc nhấn Ctrl+Shift+K

Hình 2.4 Bảng điều khiển trong FireFox

Bởi vì <canvas> được thiết kế mềm dẻo và hồ trợ cả 2D và 3D, nó không cung cấp phương thức

vẽ trực tiếp và thay vào đó cung cấp một cơ chế được gọi là context, hỗ trợ các tính năng vẽ thực

tế Dòng 11 có context đó:

Phương thức canvas getContext () có một tham số xác định kiểu đặc điểm vẽ mà bạn muốn

sử dụng Trong ví dụ này, bạn muốn vẽ một Hình 2D, vì vậy bạn phải chỉ ra 2d (trường hợp nhạy cảm)

Kết quả của lời gọi này, context, được lưu trữ trong biến ctxsẵn sàng để sử dụng Lưu ý, để ngắn gọn, chúng ta không kiểm tra các điều kiện lỗi, cái mà bạn nên làm trong chương trình riêng của mình

Bây giờ chúng ta có một cảnh vẽ, hãy nhìn vào mã lệnh vẽ hình chữ nhật màu xanh, chúng là một quá trình hai bước Trước tiên, thiết lập màu sắc được sử dụng khi vẽ Thứ hai, vẽ (hay tô) một hình chữ nhật màu

Dòng 14 và 15 xử lý các bước sau:

13 // Vẽ một hình chữ nhật màu xanh <-(3)

14 ctx.fi IIStyle = 'rgba (0, 0, 255,1.0)'; / / Thiết lập màu xanh dương

15 ctx.fillRect(120,10,150, 150); // Tô kín màu hình chữ nhật

rgbatrong chuỗi rgba (0, 0, 255, 1.0) trên dòng 14 cho biết r (đỏ), g (xanh lục), b (xanh dương)

và a (alpha: transparency), với mỗi tham số RGB lấy giá trị từ 0 (nhỏ nhất) đến 255 (lớn nhất) và tham số alpha từ 0.0 (trong suốt) đến 1.0 (đục) Nói chung, hệ máy tính biểu diễn một màu bằng cách sử dụng sự kết họp đỏ, xanh lục và xanh dương (ba màu cơ sở của ánh sáng), được gọi là

RGB format. Khi thêm alpha (trong suốt), định dạng này được gọi là RGBA format.

Dòng 15 sau đó sử dụng thuộc tính fillstyle để chỉ ra màu tô khi vẽ hình chữ nhật Tuy nhiên, trước khi đi vào chi tiết các đối số trên dòng 15, chúng ta hãy xem hệ tọa độ được sử dụng bởi phần tử <canvas> (xem Hình 2.5)

Hình 2.5 Hệ tọa độ của <canvas>

Như bạn thấy trong hình, hệ tọa độ của phần tử <canvas> có chiều ngang là trục X (hướng phải là dương) và hướng dọc là trục y (hướng xuống là dương) Lưu ý rằng gốc tọa độ được đặt ở góc trên bên trái và chiều dương của trục y là đi xuống Hình chữ nhật được vẽ bằng nét đứt là phần tử

<canvas> ban đầu trong tệp HTML của chúng ta (tham khảo Danh sách 2.1), cái mà được định nghĩa 400x400 pixel Đường chấm là hình chữ nhật mà chương trình mẫu vẽ.

Khi chúng ta sử dụng ctx f illRect () đế vẽ hình chữ nhật, các tham số đầu tiên và thứ hai của phương thức này là vị trí của góc trên bên trái hình chữ nhật bên trong <canvas>,và tham số thứ

ba và thứ tư là chiều rộng và chiều cao của hình chữ nhật (tính theo pixel):

15 ctx.fill Rects( 120, 10,150,150);// Tô kín màu hình chữ nhật

Sau khi tải DrawRectangle.htmlvào trình duyệt của bạn, bạn sẽ thấy hình chữ nhật được chỉ ra trong Hình 2.2

Cho đến giờ, chúng ta chỉ thấy đồ hoạ 2D Tuy nhiên, WebGL cũng sử dụng cùng phần tử <canvas>

để vẽ đồ họa 3D trên một trang web, cho nên giờ chúng ta hãy bước vào thế giới WebGL

Hãy bắt đầu bằng cách xây dựng chương trình WebGL ngắn nhất trên thế giới, HelloCanvas,

đơn giản chỉ cần xóa vùng vẽ được chỉ định bởi thẻ <canvas> Hình 2.6 cho thấy kết quả của việc tải chương trình, chúng xóa (bằng cách tô đen) vùng chữ nhật được định nghĩa bởi một <canvas>.

Hình 2.6 HelloCanvas Tệp HTML (HelloCanvas.html)

Hãy xem HelloCanvas html, như chỉ ra trong Hình 2.7) cấu trúc của nó là đơn giản và bắt đầu bằng việc định nghĩa vùng vẽ sử dụng phần tử <canvas> ở dòng 9 và sau đó nhập

Các dòng từ 13 đến 15 nhập một so file JavaScript khác, chúng cung cấp các hàm tiện lợi hỗ trợ chương trình WebGL Những điều này sẽ được giải thích chi tiết hơn sau Bây giờ, chỉ cần coi chúng như thư viện

8 cbody onload =" main()">

<canvas> into which

9 ccanvas id="webgl" width="400" height="400">

10 Please use the browser supporting "canvas"

11 </canvas>

12

JavaScript files containing convenient

functions for WebGL

ta hãy cùng xem chương trình WebGL được định nghĩa trong HelloCanvas j s.

Chương trình JavaScript (HelloCanvas.js)

làm theo các bước tương tự như đã giải thích cho đồ họa 2D: gọi lại <canvas>, dựng hình context

nó, và sau đó bắt đầu vẽ

Danh sách 2.3HelloCanvas.js

1 // HelloCanvas.js

2 function main() {

3 // Gọi lại phần tử <canvas>

Hình 2.8 Luồng xử lí của hàm main()

Đầu tiên, main() gọi lại phần tử <canvas> từ tệp HTML Như đã giải thích ở

idđược đặt ở thẻ <canvas>ở dòng 9:

9 <canvas id = "webgl" width = "400" height = "400">

Giá trị trả về của phương thức này được chứa trong biến canvas.

Dụng hình context cho WebGL

Trong bước tiếp theo, chương trình sử dụng biến canvas để có được cảnh vẽ cho WebGL Thông thường, chúng ta sẽ sử dụng canvas getContext () như được mô tả trước để có rendering Context cho WebGL Tuy nhiên, bởi vì đối số được chỉ ra trong canvas get Context () khác nhau giữa các trình duyệt, chúng tồi đã viết một hàm đặc biệt WebGLContext () đê giấu sự khác biệt giữa các trình duyệt:

7 var gl = getWebGLContext(canvas);

Đây là một trong những hàm tiện ích được đề cập trước đó được viết riêng cho cuốn sách này và được định nghĩa trong cuon-utils j s, được nhập ở dòng 15 trong HelloCanvas html. Các hàm được định nghĩa trong file trở nên có sẵn bằng cách chỉ ra đường dẫn đến file trong thuộc tính src trong thẻ <script>và tải file Sau đây là đặc tả của getWebGLContext ()

Dựng hình context cho WebGL, thiết lập cài đặt gỡ lỗi cho WebGL và hiến thị mọi thông báo lỗi trong bảng điều khiển trình duyệt khi có lỗi.

Parameters Element Chỉ ra phần tử <canvas> được yêu cầu

được hiển thị trong bảng điều khiển Lưu ý: Tắt sau khi gỡ lỗi; nếu không, hiệu suất sẽ bị ảnh hưởng

non-null

Return value

Dựng hình context cho WebGL

Luồng xử lý trích rút phần tử <canvas>và sử dụng phần tử để lấy dựng hình context giống như trong DrawRectangle j s được chỉ ra trước đây, nơi dựng hình context được sử dụng để vẽ đồ họa 2D trên <canvas>.

Theo cách tương tự, WebGL sử dụng dựng hình context được trả về bởi getWebGLContext() để

vẽ trên <canvas> Tuy nhiên, bây giờ context dành cho 3D thay vì 2D, vì vậy phương thức 3D (nghĩa là, WebGL) có sẵn Chương trình lưu trữ context trong biến gl tại dòng 7 Bạn có thể sử dụng tên bất kỳ cho biến Chúng tôi đã cố tình sử dụng gl trong toàn bộ cuốn sách bởi vì nó căn chỉnh tên của các phương thức liên quan đến WebGL so với OpenGL ES 2.0, là đặc điểm cơ bản của WebGL Ví dụ, gl clearColor () tại dòng 14 tương ứng với glClearColor () trong OpenGL ES 2.0 hoặc OpenGL:

Đặt màu nền cho <canvas>

Trong phần trước, DrawRectangle j s thiết lập màu vẽ trước khi vẽ hình chữ nhật Theo cách tương tự, với WebGL bạn cần thiết lập màu sắc trước khi thực sự xóa vùng vẽ Dòng 14 sử dụng

gl.clearColor (red, green, blue, alpha)

Chỉ ra màu nền cho một vùng vẽ

Parameters red

greenblue

Chỉ giá trị đỏ (từ 0.0 đến 1.0)Chỉ giá trị xanh lục (từ 0.0 đến 1.0)Chỉ giá trị xanh dương (từ 0.0 đến 1.0)

alpha Chỉ giá trị alpha (độ trong suốt) (từ 0.0 đến 1.0),

0: trong suốt và 1 là đục hoàn toànNêu giá trị các biến này nhỏ hơn 0.0 hoặc lớn hơn 1.0, nó được cắt thành 0.0 hoặc 1.0, một cách tương ứng

Return value None

Một khi bạn chỉ định màu nền, màu được duy trì trong hệ thống WebGL và không thay đổi cho đến khi một màu khác được chỉ ra bởi lời gọi đên gl clearColor ()

thay vì sử dụng nhiều bộ đệm cơ bản Một bộ đệm đó, bộ đệm màu, được sử dụng trong ví dụ này Bằng cách sử dụng gl COLOR-BUFFER-BIT, bạn đang nói với WebGL sử dụng bộ đệm màu khi xóa canvas WebGL sử dụng một số bộ đệm ngoài bộ đệm màu, bao gồm bộ đệm chiều sâu và bộ đệm stencil Các bộ đệm màu sẽ được đề cập chi tiết trong phần sau của chương này, và bạn sẽ thấy bộ đệm chiều sâu trong chương 7, "Hướng tới thế giới 3D" Bộ đệm stencil sẽ không được đề cập trong cuốn sách này bởi vì nó hiếm khi được sử dụng

Xóa bộ đệm màu sẽ thực sự khiến WebGL xóa vùng <canvas> trên trang web

Xóa bộ đệm theo giá trị thiết lập trước đó Với bộ đệm màu, giá trị (màu) được xác định bởi

gl.clearColor().

Return value None

Neu không định nghĩa màu (có nghĩa là, bạn đã không thực hiện lời gọi đến gl clearColor ()),

thì giá trị mặc định sau đây được sử dụng (xem Bảng 2.1)

Bảng 2.1 Các giá trị ngầm định để Clear Each Buffer và Associated Methods

Tên bộ đệm Giá trị ngầm định Phương thức thiết lập.

Color buffer (0.0, 0.0, 0.0, 0.0) gl.clearColor(red, green, blue, alpha)

Depth buffer 1.0 gl.clearDepth(depth)

Stencil buffer 0 gl.clearStencil(s)

Bây giờ bạn đã đọc và hiểu ví dụ WebGL đơn giản này, bạn nên nạp HelloCanvas vào trì duyệt của bạn để kiềm tra xem vùng vẽ đã được xóa thành màu đen Hãy nhớ rằng, bạn có thể chtất cả các ví dụ trong cuốn sách trên cùng trang web Tuy nhiên, nếu bạn muốn thử nghiệm khác, bạn cần phải tải về các ví dụ từ trang web của sách tới máy cá nhân của bạn Neu bạn đã làm điều

đó, để tải ví dụ, di chuyển đến vị trí đó trên đĩa của bạn và tải HelloCanvas html vào trình duyệt

Thủ’ nghiệm với chương trình mẫu

Hãy thử nghiệm một chút với các chương trình mẫu để làm quen với cách bạn định nghĩa màu trong WebGL bằng cách thừ một số màu khác cho thao tác xóa Sử dụng bộ soạn thảo yêu thích, viết lại dòng 14 cùa HelioCanvas j snhư sau và lưu sửa đồi của bạn vào file gốc:

14 gl.clearColor (0,0, 0,0,1,0, 1,0);

Sau khi tải lại HelloCanvas html vào trình duyệt của bạn, HelloCanvas j s cũng được tải lại, và sau đó main () được thực thi để xóa vùng vẽ thành màu xanh dương Hãy thử sử dụng các màu khác và kiểm tra kết quả Ví dụ, gl clearColor (0.5, 0.5, 0.5, 1.0) xóa vùng thành màu xám

VẼ MỘT ĐIÈM (PHIÊN BẢN 1)

Trong phần trước, bạn đã thấy cách khởi tạo WebGL và sử dụng một số phương thức liên quan WebGL đơn giản Trong phân này, bạn sẽ đi thêm một bước nữa và xây dựng một chương trình mẫu để vẽ hình dạng đơn giản nhất trong tất cả: một điểm Chương trình sẽ vẽ một điểm màu dở bằng cách sử dụng 10 điểm ảnh tại (0.0, 0.0, 0.0) Bởi vì WebGL liên quan đến đồ họa ba chiều, ba tọa độ là cần thiết để xác định vị trí của điểm Bạn sẽ được giới thiệu đến các tọa độ phần sau, còn bây giờ đơn giản chấp nhận rằng một điểm được vẽ tại (0.0, 0.0,0.0) được hiển thị ở giữa vùng <canvas>.

Tên chương trình mẫu là HelloPointlvà, như thể hiện trong Hình 2.9,3 nó vẽ một điểm màu đỏ (hình chữ nhật) ở trung tâm của <canvas>, vùng mà đã được xóa thành màu đen Bạn sẽ thực sự được sử dụng một hình chữ nhật tô kín là một diêm thay vì một hình tròn tô kín bởi vì hình chữ nhật vẽ nhanh hơn hình tròn (Chúng ta sẽ giải quyết làm thế nào để vẽ một điểm tròn trong Chương

9, "Các đối tượng thứ cấp.")

3Chương trình mẫu trong Chương 2 được viết theo cách đơn giản nhất để người đọc có thể tập trung vào các chức năng của shaders Cụ thể, chúng không sử dụng "bộ đệm đối tượng" (xem Chương 3), cái mà được sử dụng thường xuyên trong WebGL Mặc dù điều này giúp đơn giản hóa việc giải thích, một số trình duyệt (đặc biệt là Firefox) mong muốn bộ đệm đối tượng và có thể hiển thị không chính xác nếu không có chúng Trong các chương sau, và trong phát triển ứng dụng thực tế, điều này sẽ không xảy ra bởi bạn sẽ sử dụng "bộ đệm đối tượng” Tuy nhiên, nếu bạn đang gặp sự cố, hãy thử một trình duyệt khác Bạn có thể thay đổi lại chương kế tiếp.

Hình 2.9 HelloPointl

Giống như việc xóa màu ở phần trước, màu của một điểm phải được chỉ ra theo RGBA Đối với màu đỏ, giá trị của R là 1.0, G là 0.0, B là 0.0, và A là 1.0 Hãy nhớ lại DrawRectangle j s lúc trước chỉ định màu và sau đó vẽ một hình chữ nhật như sau:

ctx.filistyle = 'rgba (0, 0, 255,1.0)';

ctx.fillRect (120, 10, 150, 150);

gl.drawColor (1.0, 0.0, 0.0, 1.0);

gl.drawPoint (0, 0, 0, 10); //Vị trí trung tâm và kích thước của điểm

Thật khồng may, điều này là không the WebGL dựa vào một loại kiểu vẽ mới được gọi là shader,

cung cấp cơ chế linh hoạt và mạnh mẽ cho việc vẽ đối tượng 2D và 3D và phải được sử dụng bởi tất cả các ứng dụng WebGL Shaders, mặc dù mạnh, lại phức tạp hơn và bạn không thể chỉ ra bởi một lệnh vẽ đơn giản

Bởi vì shader là một cơ chế cốt lõi quan trọng trong lập trình WebGL mà bạn sẽ sử dụng trong suốt cuốn sách này, chúng ta hãy cùng xem xét từng bước một để bạn có thể hiểu nó dễ dàng

HelloPoỉnt 1 html

Ví dụ 2.4 cho thấy HeiioPointi html,có chức năng tương đương với HelioCanvas Htmi (xem Hình 2.7) Tiêu đề cùa trang web và tên file JavaScript đã thay đổi (dòng 5 và 16), nhưng mọi thứ khác vẫn giữ nguyên Từ bây giờ, ngoài file HTML trong ví dụ này, chúng tôi sẽ bỏ qua hiến thị các file HTML cho các ví dụ

9 <canvas id="webgl" width="400" height="400">

10 Please use the browser supporting "canvas".

Danh sách 2.5 cho thấy HelloPointl.js. Như bạn thấy từ các chú thích trong Danh sách, hai

"shader programs" được thêm vào trước cho JavaScript (dòng 2 đến 13) Lướt qua các shader programs, và sau đó đi đến phần tiếp theo, bạn sẽ thấy giải thích chi tiết hơn

Danh sách 2.5HelloPointl.js

1 // HelloPointl.js

2 // Chương trình Vertex shader

16 // Gọi lại phần tử <canvas>

17 var canvas = document.getElementByld('webgr);

26 // Khởi tạo các shader

27 if (!initShaders(gl, VSHADER-SOURCE, FSHADER-SOURCE))

28 console.Iog('Failed to initialize shaders.');

Shader là gì?

cập trước đây, các chương trình shader là cần thiết khi bạn muốn vẽ một cái gì đó trên màn hình WebGL về cơ bản, các chương trình shader được "nhúng" trong file JavaScript, và trong trường họp này, thiết lập ngay từ đầu Điều này dường như đã phức tạp ngay từ cái nhìn đầu tiên, nhưng hãy thực hiện nó một từng bước một

WebGL cần hai kiểu shader sau, cái mà bạn đã thấy ở dòng 2 và dòng 9:

• Vertex shader: Vertex shaders là các chương trình mô tả các tính trạng (vị trí, màu sac, V.V ) của một đỉnh, vertex là một diêm trong không gian 2D/3D, chang hạn như góc hoặc giao diêm của một shape 2D/3D

• Fragment shader:Một chương trình xử lý từng mảnh như ánh sáng (xem Chương 8, "Đối tượng chiếu sáng"), fragmentlà một thuật ngữ WebGL mà bạn có thể xem như là một loại pixel (phần

tử hình ảnh)

Bạn sẽ tìm hiểu shader chi tiết hơn sau đó, nhưng nếu đơn giản đặt trong một cảnh 3D, nó sẽ không

đủ đế vẽ đồ họa Bạn cũng phải tính đến cách chúng được quan sát như nguồn sáng chiếu vào chúng hoặc góc nhìn của người xem thay đổi shading làm điều này với một mức độ linh hoạt cao

và là một phần lý do làm đồ họa 3D ngày nay rất thực, cho phép chúng sử dụng hiệu ứng dựng hình mới để đạt được kết quả tuyệt vời

Các shaders được đọc từ JavaScript và được lưu trữ trong hệ thống WebGL đã sẵn sàng để được

sử dụng để vẽ Hình 2.10 chỉ ra luồng xử lý cơ bản từ một chương trình JavaScript vào hệ thống WebGL, áp dụng các chương trình shader để vẽ hình dạng mà trình duyệt sẽ hiển thị sau cùng

JavaScript

linckxi maMÚ) { va/gi=getWeũGL

JavaScript, vertex shader trong hệ thống WebGL được thực thi, và fragment shader được thực thi

để vẽ kết quả vào bộ đệm màu Đây là phần xóa - nghĩa là, bước 4 trong Hình 2.8, được mô tả trong ví dụ Hellocanvas ban đầu Sau đó nội dung trong bộ đệm màu được tự động hiển thị trên vùng vẽ được chỉ định bởi <canvas>trong trình duyệt

Bạn sẽ nhìn thấy hình này thường xuyên trong phần sau của cuốn sách Vì vậy, chúng tôi sẽ sử dụng một phiên bản đơn giản để tiết kiệm không gian (xem Hình 2.11) Lưu ý rằng luồng từ trái sang phải và thành phần bên phải nhất là một bộ đệm màu, không phải trình duyệt, bởi vì bộ đệm màu tự động được hiển thị trong trình duyệt

Per-vertex operation Per-fragment operation

Hình 2.11 Phiên bản đơn giản của Hình 2.9

Trở lại ví dụ của chúng ta, mục tiêu là vẽ một điểm kích cỡ 10 pixel trên màn hình Hai shaders được sử dụng như sau:

• vertex shader xác định vị trí của một điểm và kích thước của nó Trong chương trình mẫu này, vị trí là (0.0, 0.0, 0.0), và kích thước là 10.0

• fragment shader xác định màu sắc của các mảnh hiển thị điểm Trong chương trình mẫu này, màu là đỏ (1,0, 0,0, 0,0, 1,0)

Cấu trúc của một chương trình WebGL sử dụng Shader

Dựa trên những gì bạn đã học được cho đến giờ, chúng ta hãy xem lại HelloPointl j s một lần nữa (tham khảo Danh sách 2.5) Chương trình này có 40 dòng và phức tạp hơn một chút so với

JavaScript bắt đầu từ dòng 15, và các chương trình shader được đặt từ dòng 2 đến 13

2 //Vertex shader program

16 // Retrieve <canvas> element

17 var canvas = document.getElementByldCwebgl');

Hình 2.12 Cấu trúc CO ’ bản của một chương trình WebGL vói các chương trình shader đưọc nhúng.

Chương trình vertex shader nằm trong các dòng từ 4 đến 7, và phần fragment shader nằm từ dòng

11 đến 13 Những chương trình này thực sự là các chương trình ngôn ngữ shader nhưng được viết như một chuỗi JavaScript để làm cho nó có thể truyền shader vào hệ thống WebGL

// Chương trình vertex shader

Bởi vì các chương trình này phải được xem là một chuỗi duy nhất, mỗi dòng của shader là nối bằng cách sử dụng toán tử + thành một chuỗi đơn Mỗi dòng có \n vào cuối bởi vì số dòng được hiển thị khi xảy ra lỗi trong shader Hiện số dòng giúp kiểm tra vấn đề trong các mã Tuy nhiên,

\n không bắt buộc, và bạn có thể viết shader mà không có nó

Tại các dòng 3 và 10, mỗi chương trình shader được lưu trữ trong các biến VSHADER-SOURCE và

// Chương trình vertex shader

Khỏi tạo Shaders

Trước khi nhìn vào các chi tiết của mỗi shader, chúng ta hãy xem xét luồng xử lý của main 0 , được định nghĩa từ dòng 15 trong JavaScript (xem Hình 2.13) Luồng này, thể hiện trong Hình 2.13, là luồng xử lý cơ bản của hầu hết các ứng dụng WebGL Bạn sẽ thấy cùng một luồng trong toàn bộ cuốn sách này

Luồng này tương tự như trong Hình 2.8, ngoại trừ bước thứ ba ("Khởi tạo các Shader ’’) và bước thứ sáu ("Vẽ ”) được thêm vào.

Bước thứ ba "Khởi tạo các Shader " khởi tạo và thiết lập các shaders được định nghĩa tại dịng 3

và dịng 10 trong hệ thống WebGL Bước này được thực hiện bằng cách sử dụng hàm tiện ích

đặc biệt chúng tồi đã cung cấp cho cuốn sách này

initShaders(gl, vshader, fshader)

Khởi tạo các shaders và thiết lập chúng trong hệ thống WebGL sẵn sàng để sử dụng:

Return value true khởi tạo thành cơng các Shaders

Hình 2.14 cho thấy hàm tiện ích initshaders 0 xử lý các shaders như thế nào Bạn sẽ xem chi tiết các hàm này làm gì trong Chương 7 Bây giờ, bạn cần phải hiểu rằng nĩ thiết lập các shaders trong hệ thống WebGL và làm cho chúng sẵn sàng để sử dụng

JavaScript

ĩ võd main|){

■ gl-Poston = \ec4( j; !

■ gl_PoirttS(ze = 10.0; : Lỵ _■

■ voidmair»0{

í gLFragCdor = veo4( ĩ

function main() { var gtgetWebGL

"► inrtShaders(

Hình 2.14 Hoạt động của initShaders ()

Như bạn thấy trong Hình 2.14, hệ thống WebGL cĩ hai đối tượng chứa: Một cho vertex shader và một cho fragment shader Ở đây được đơn giản hĩa để thuận tiện Chúng ta sẽ xét chi tiết hơn

trong chương 10 Theo mặc định, nội dung của các đối tượng chứa này là rỗng Để thực hiện các chương trình shader, chúng được viết bằng các chuỗi JavaScript và sẵn sàng để sử dụng trong hệ thống WebGL, chúng ta cần một cái gì đó để truyền những chuỗi này đến hệ thống và sau đó đặt chúng trong các đối tượng chứa thích hợp; initshaders () thực hiện thao tác này Lưu ý rằng các chương trình shader được thực hiện trong hệ thống WebGL, không phải là chương trình JavaScript Phần dưới trong Hình 2.14 cho thấy sau khi thực thi initshaders 0, các chương trình shader được truyền như một chuỗi tới các tham số của initshaders 0 được thiết lập ở các đối tượng chứa trong hệ thống WebGL và sau đó sẵn sàng đê sử dụng Sơ đồ bên dưới minh hoạ rằng một vertex shader đang truyền gi Position và gi_Pointsize tới một fragment shader và răng chỉ sau khi gán các giá trị cho các biến này trong vertex shader, fragment shader được thực hiện Thực

tế, các fragment được tạo ra sau khi các giá trị này được truyền cho fragment shader Chương 5 giải thích chi tiết cơ chế này, nhưng bây giờ bạn có thể xem các thuộc tính được truyền

Điếm quan trọng ở đây là các ứng dụng WebGL bao gom một chương trình JavaScript được thực thi bởi trình duyệt và các chương trình shader được thực hiện trong hệ thông WebGL.

Bây giờ, đang giải thích bước thứ hai "Khởi tạo các Shader" trong Hình 2.13, bạn đã sẵn sàng để xem cách shaders được sử dụng thực sự đế vẽ một điếm đơn giản Như đã đề cập, chúng ta cần ba mục thông tin cho điểm: vị trí, kích thước, và màu của nó, được sử dụng như sau:

• vertex shader chỉ ra vị trí của một điểm và kích thước của nó Trong chương trình mẫu này, vị trí

là (0.0, 0.0, 0.0) và kích thước là 10.0

• fragment shader chỉ ra màu sắc của các mảnh hiển thị điểm Trong chương trình mẫu này, chúng

có màu đỏ (1.0, 0.0, 0.0, 1.0)

Vertex Shader

Bây giờ, hãy bắt đầu bằng cách kiếm tra chương trình vertex shader được liệt kê trong

2 // Chương trình vertex shader

Cũng giống như JavaScript, chúng ta có thể sử dụng toán tử = để gán một giá trị cho một biến

biến gi Pointsize. Hai biến này được xây dựng sẵn trong một vertex shader và có ý nghĩa đặc biệt: gi_Position xác định một vị trí của một đỉnh (trường hợp này, vị trí của điểm), và

Bảng 2.2 Biến built-In có sẵn trong một Bảng 2.2

vec4 gLPosition Chỉ vị trí của đỉnh

float gl-PointSize Chỉ ra kích cỡ của một điềm (theo pixel)

Lưu ý rang gi Position nên luôn luôn được viet Neu bạn không chỉ định nó, việc thi hành của shader là phụ thuộc và có thể không như mong đợi Ngược lại, gi Pointsizechỉ được yêu cầu khi vẽ các điếm và ngầm định điếm có kích thước là 1.0 nếu bạn không viết gì

Đối với những người quen thuộc JavaScript, bạn có thể hơi ngạc nhiên khi thấy "type” được chỉ ra trong Bảng 2.2 Không giống như JavaScript, GLSL ES là một ngôn ngữ lập trình "kiểu”; nghĩa

là, nó đòi hỏi người lập trình chỉ ra kiểu dữ liệu của biến, c và Java là những ví dụ về ngôn ngữ kiểu Bằng việc chỉ ra "kiểu" cho một biến, hệ thống có thể hiểu dễ dàng được kiểu dữ liệu nào mà biến được giữ, và sau đó nó có thế tối ưu hoá xử lý của mình dựa trên thông tin đó Bảng 2.3 tổng hợp "kiêu" của GLSL ES được sử dụng trong các shaders

Bảng 2.3 Các kiểu dữ liệu trong GLSL ES

float Chỉ ra một số dấu chấm động

vec4 Chỉ ra một vec tơ của 4 số

float float float float

Lưu ý rằng lỗi sẽ xảy ra khi kiều dữ liệu được gán cho biến khác với kiểu biến Ví dụ, kiểu

dòng 6 từ

gl_PointSize = 10.0;

thành

gl_PointSize = 10;

NÓ sẽ sinh ra một lỗi, đơn giản chỉ vì 10 được hiểu như một số nguyên, trong khi đó 10.0 là một

số dấu chấm động trong GLSL ES

Kiểu của biến gi_Position, biến built-in để chỉ ra vị trí của một điểm, là vec4; vec4 là một vector tạo bởi ba số thực Tuy nhiên, bạn chỉ có ba floats (0.0, 0.0, 0.0) đại diện cho X, Y, và z

Vì vậy, bạn cần phải chuyên đôi chúng thành một vec4 bằng cách nào đó May mắn thay, có một

hàm built-in , vec4 (), chúng làm điều này cho bạn và trả về một giá trị của kiểu vec4 chúng chính là những gì bạn cần!

vec4 vec4(v0, v1, v2, v3)

Cấu trúc một đối tượng vec4 từ vớ, vl, v2, và v3

Return value Một đối tượng vec4 được tạo từ vớ, v7, v2, và v3

Trong chương trình mẫu này, vec4 () được sử dụng tại dòng 5 như sau

0 Neu w tiến đến 0, tọa độ sẽ tiến đến vô cùng Vì vậy, chúng ta có thể diễn tả cho khái niệm vô cùng trong hệ tọa độ đồng nhất Toạ độ đồng nhất làm cho nó có thể biểu diễn các biến đổi đỉnh, được mô tả trong chương kế tiếp như là một phép nhân ma trận với các tọa độ Các tọa độ này thường được dùng để biểu diễn đỉnh trong các hệ thống đồ họa 3D

có thể thấy giống như vertex shader, một fragment shader được thực thi từ main () :

9 // Chương trình fragment shader

10 var FSHADER_SOURCE =

11 'void main() {\n' +