ĐẠI HỌC QUỐC GIA TP.

HỒ CHÍ MINH

TRƢỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

KHOÁ LUẬN/ĐỒ ÁN TỐT NGHIỆP

TÌM HIỂU WEBGL VÀ

XÂY DỰNG PHÒNG TRƢNG
BÀY ÔTÔ

Giảng viên hƣớng dẫn :

 Ths. NGUYỄN TRÁC THỨC
 CH. NGUYỄN ĐĂNG KHOA
Sinh viên thực hiện:
 NGUYỄN TRUNG LƢU 06520276
 LƢU NGUYỄN QUỐC SƠN 06520383

Lớp : CNPM01
Khoá : 2006-2011

TP. Hồ Chí Minh, tháng 3 năm 2011

 ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƢỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

KHOÁ LUẬN/ĐỒ ÁN TỐT NGHIỆP

TÌM HIỂU WEBGL VÀ

XÂY DỰNG PHÒNG TRƢNG
BÀY ÔTÔ

Giảng viên hƣớng dẫn :

 Ths. NGUYỄN TRÁC THỨC
 CH. NGUYỄN ĐĂNG KHOA
Sinh viên thực hiện:
 NGUYỄN TRUNG LƢU 06520276
 LƢU NGUYỄN QUỐC SƠN 06520383
Lớp : CNPM01
Khoá : 2006-2011

TP. Hồ Chí Minh, tháng 3 năm 2011

 LỜI MỞ ĐẦU

Trong bối cảnh hiện nay, nhu cầu sử dụng Internet cũng như việc kinh
doanh, trao đổi, mua bán, học tập, làm việc, nghiên cứu, giải trí...v...v…trên
Internet là vô hạn. Với công nghệ trước đây, chúng ta đã rất quen thuộc với
việc sử dụng các chuẩn vật thể và không gian 2D trên website.

Thế nhưng, cùng với sự phát triển của xã hội và đời sống, công nghệ
cũng có những bước phát triển nhảy vọt riêng của chính nó. Từ đó, các chuẩn
vật thể 3D được hình thành. Nó được hình thành trong môi trường học tập, giải
trí, công việc…chẳng hạn có rất nhiều trò chơi ngày nay sử dụng không gian
3D trên web. Nhưng để làm được việc đó, người ta sử dụng một công nghệ gọi
là Flash. Flash là một công nghệ được phát triển chủ yếu tập trung cho các ứng
dụng trên nền web: cho phép thêm các hiệu ứng chuyển động (animation/hoạt
hình), audio, video,... và các tương tác vào trang web một cách sinh động. Và
để sử dụng được tính năng của Flash, trình duyệt cần phải cài plug-in mang tên
Adobe Flash Player.

Ngày nay, cùng với sự lên ngôi của Web3D, sự ra đời của HTML5, đã
kéo theo sự hình thành của WebGL – một công nghệ được cho rằng sẽ mang lại
những bước đột phá cho nền tảng Web3D. WebGL xử lý đồ họa nhanh và chạy
trên nền HMLT5 nên ta không cần cài thêm bất cứ các plug in nào khác.

Vì thế, trong xu thế phát triển của Web3D, chúng tôi đã chọn WebGL
làm đề tài nghiên cứu cho luận văn tốt nghiệp cuối khóa.
 LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn Khoa Công nghệ Phần Mềm, trường
Đại học Công Nghệ Thông Tin, Đại học Quốc gia Tp. Hồ Chí Minh đã tạo điều
kiện thuận lợi và tốt nhất cho chúng em học tập trong suốt 5 năm qua và thực
hiện đề tài tốt nghiệp này.

Chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Trác Thức và
đặc biệt là thầy Nguyễn Đăng Khoa đã tận tình, nhiệt tình hướng dẫn, chỉ bảo
chúng em trong suốt quá trình thực hiện đề tài.

Chúng em xin chân thành cám ơn quý Thầy Cô trong Khoa Công nghệ
Phần Mềm đã tận tình giảng dạy, trang bị cho chúng em những kiến thức quý
báu trong những năm học vừa qua.

Chúng con xin chân thành cảm ơn Cha Mẹ đã luôn động viên, ủng hộ vật
chất lẫn tinh thần trong suốt quãng đường đại học của chúng con.

Chúng em xin cảm ơn sự quan tâm, giúp đỡ và ủng hộ của anh chị, bạn
bè trong quá trình thực hiện khóa luận.

Mặc dù đã cố gắng hoàn thành khóa luận trong phạm vi và khả năng cho
phép nhưng chắc chắn sẽ không tránh khỏi những thiếu sót. Chúng em rất
mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô và
các bạn.
 NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
TpHCM, ngày ….. tháng …… năm ……
Giáo viên hướng dẫn
[Ký tên và ghi rõ họ tên]
 NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
TpHCM, ngày ….. tháng …… năm ……
Giáo viên phản biện
[Ký tên và ghi rõ họ tên]
 ĐỀ CƢƠNG CHI TIẾT

Tên Đề Tài: Tìm hiểu WebGL và xây dựng phòng trưng bày ô tô
Giáo viên hƣớng dẫn:

Ths. Nguyễn Trác Thức

CH. Nguyễn Đăng Khoa
Thời gian thực hiện:(từ ngày nhận đề tài đến ngày 31/3/2011 )

Sinh viên thực hiện:

Nguyễn Trung Lưu – 06520276
Lưu Nguyễn Quốc Sơn – 06520383

Loại đề tài: Tìm hiểu công nghệ và xây dựng ứng dụng

Nội Dung Đề Tài:

Tìm hiểu công nghệ WebGL, các kỹ thuật lập trình 3D trên Web và xậy dựng ứng
dụng - một phòng trưng bày về xe hơi dựa trên công nghệ này. Ứng dụng phòng trưng
bày sẽ là một sản phẩm quy tụ những kỹ thuật làm việc trên WebGL.
Kế Hoạch Thực Hiện:
 15/11/2010 – 15/12/2010: Tìm hiểu về HTML5 và lên kế hoạch chi tiết.
o Nguyễn Trung Lưu: Khảo sát hiện trạng HTML và những ứng
dụng dựa trên nền tảng HTML.
o Lưu Nguyễn Quốc Sơn: Khảo sát HTML5 và những tính năng nỗi
bật của HTML5.

 Mục tiêu và kế hoạch chi tiết cho đề tài.

 28/12/2010 – 14/02/2011: Nghiên cứu xây dựng vật thể 3D và dựng không
gian 3D.
o Nguyễn Trung Lưu: Xây dựng vật thể 3D.
o Lưu Nguyễn Quốc Sơn: Dựng không gian 3D.

Dựng được vật thể và không gian ở mức cơ bản.

 15/02/2011 – 28/02/2011: sửa lỗi, phát triển thêm cho chương trình.
o Nguyễn Trung Lưu: Người dùng giao tiếp với website.
 o Lưu Nguyễn Quốc Sơn: Bổ sung các hiệu ứng cho ứng dụng.

Hiệu ứng ánh sáng, texture, … làm cho vật thể gần với thế giới thực.

 01/3/2011 – 14/3/2011: viết báo cáo và hoàn thiện.

o Nguyễn Trung Lưu: Thêm các hiệu ứng cho vật thể 3D, sửa lỗi
chương trình và viết báo cáo.
o Lưu Nguyễn Quốc Sơn: củng cố kiến trúc phần mềm , sửa lỗi
chương trình và viết báo cáo.

Sản phẩm cuối cùng và báo cáo.

Xác nhận của GVHD Ngày 28 tháng 3 năm 2011

SV Thực hiện
Contents
Chương 1: Tổng quan ................................................................................................. 2
1.1: Giới thiệu đề tài ............................................................................................... 2
1.2: Mục tiêu đề tài ................................................................................................. 4
1.3: Yêu cầu kết quả đạt được ................................................................................. 4
Chương 2: Giới thiệu về HTML5 ............................................................................... 7
2.1: Tổng quan về HTML5 ..................................................................................... 7
2.1.1: HTML5 là gì ? .......................................................................................... 7
2.1.2: Các tính năng mới trong HTML5 .............................................................. 9
2.1.3: Lợi ích mà HTML5 đem lại .................................................................... 12
2.1.4: Ứng dụng ................................................................................................ 15
2.2.1: Flash ....................................................................................................... 16
2.2.2: Silverlight ............................................................................................... 16
2.2.3: WebGL ................................................................................................... 17
2.2.4: O3D ........................................................................................................ 18
Chương 3: Giới thiệu công nghệ WebGL.................................................................. 20
3.1: Tổng quan về WebGL .................................................................................... 20
3.1.1: Thế nào là công nghệ 3D trên web .......................................................... 20
3.1.2: WebGL là gì? .......................................................................................... 22
3.1.3: Tại sao sử dụng công nghệ WebGL? ....................................................... 24
3.1.4: Lợi ích và hạn chế của WebGL ............................................................... 25
3.1.5: Ứng dụng của WebGL ............................................................................ 26
3.2: Triển khai WebGL....................................................................................... 26
3.2.1: Luồng thông tin xử lý .............................................................................. 26
3.2.2: Dựng đối tượng ....................................................................................... 28
3.2.3: Màu sắc cho vật thể ................................................................................. 31
3.2.4: Kỹ thuật Texturing .................................................................................. 32
3.2.5: Kỹ thuật Lighting .................................................................................... 33
3.2.6: Nạp vật thể từ file ngoại vi ...................................................................... 35
Chương 4: ................................................................................................................. 38
Xây dựng Demo công nghệ WebGL – Cars Showroom ............................................ 38
4.1: Giới thiệu về Cars ShowRoom ....................................................................... 38
4.2: Chức năng của chương trình .......................................................................... 38
4.2.1: Danh sách các chức năng ........................................................................ 38
4.2.2: Use-case.................................................................................................. 39
 4.3: Những kỹ thuật sử dụng trong chương trình ................................................... 41
4.4: Những lớp, thư viện trong chương trình và vai trò của nó .............................. 42
4.5: Lược đồ tuần tự.............................................................................................. 43
4.6: Một số hình ảnh trong chương trình ............................................................... 45
Chương 5: ................................................................................................................. 49
Các vấn đề thường gặp về WebGL và cách giải quyết .............................................. 49
5.1: Vấn đề về chuyển đổi định dạng Json ............................................................ 49
5.2: Vấn đề về Environment Mapping ................................................................... 51
5.3: Vấn đề về Picking .......................................................................................... 54
Chương 6: Kết luận .................................................................................................. 56
6.1: Kết quả đạt được của dự án ............................................................................ 56
6.1.1: Nhận xét chung về kết quả đạt được ........................................................ 56
6.1.2: Ưu điểm .................................................................................................. 56
6.1.3: Khuyết điểm............................................................................................ 57
6.2: Hướng phát triển ............................................................................................ 57
Phụ lục ..................................................................................................................... 58
Tài liệu tham khảo: ................................................................................................... 66
Danh mục các hình
Hình 1.1 –Xu hướng Web3D .......................................................................... 2

Hình 2.1 – HTML5 page ................................................................................ 7

Hình 2.2 –HTML5 dùng trong Apple Iphone ................................................. 9

Hình 2.3 –Tính năng mới của HTML5 ........................................................... 9

Hình 2.4 – Cấu trúc HTML5 ........................................................................ 11

Hình 2.5 – Flash Player Plugin ..................................................................... 12

Hình 2.7 – Web Browsers và HMLT5 qua các giai đoạn .............................. 15

Hình 2.8 – Duyệt ảnh Flash3D ..................................................................... 16

Hình 2.9 – Các yếu tố tạo nên WebGL ......................................................... 17

Hình 2.10 – Công nghệ O3D ........................................................................ 18

Hình 3.1 – Công nghệ Web 3 chiều .............................................................. 20

Hình 3.2 – Game 3D trên Web ..................................................................... 21

Hình 3.3 – Mô hình nhánh công nghệ của OpenGL ...................................... 22

Hình 3.4 –Thực thể tạo ra bằng WebGL ....................................................... 23

Hình 3.5 – Game Modern Warfare 2 trên nền 3D ......................................... 24

Hình 3.7 – Đối tượng 3D .............................................................................. 28

Hình 3.8 – Những công việc khi dựng đối tượng 3D .................................... 29

Hình 3.9 – Những định dạng cơ bản của Texture .......................................... 32

Hình 3.10 – Tọa độ Texture2D ..................................................................... 33

Hình 3.11 – Phong Shading .......................................................................... 33

Hình 3.12 – Hướng ánh sáng ........................................................................ 34

Hình 3.13 – Điểm ánh sáng .......................................................................... 35

Hình 4.1 – Sơ đồ Use-case cho Demo .......................................................... 39

Hình 4.2 – Sơ đồ lớp cho Demo ................................................................... 42

Hình 4.3 – Tạo đối tượng context ................................................................. 43

Hình 4.4 – Tạo đối tượng Shader .................................................................. 44

Hình 4.5 – Tạo đối tượng Texture ................................................................ 44

Hình 4.6 – Load thông tin đối tượng và lưu vào buffer ................................. 44

Hình 4.7 - Dựng đối tượng .......................................................................... 45

Hình 4.8 – Demo – Toàn cảnh phòng trưng bày. .......................................... 45

Hình 4.9 – Demo – Xe hơi trưng bày ............................................................ 46

Hình 4.10 – Demo – Thông tin 1 .................................................................. 46

Hình 4.11 - Demo – Thông tin 2 ................................................................... 47

Hình 5.1 – Phần mềm Autodesk 3ds Max 2011 ............................................ 49

Hình 5.2 – Texture cho lập phương .............................................................. 51

Hình 5.3 – Sự liên quan của texture 2D ........................................................ 51

 TÓM TẮT

Vấn đề nghiên cứu:

Tìm hiểu thư viện WebGL và các kỹ thuật lập trình 3D để hiểu rõ thư viện
lập trình 3D mới WebGL có gì đặc biệt so với các công nghệ đã có và đồng thời
để biết được khi sử dụng WebGL ta sẽ làm được những gì và khi sử dụng
WebGL ta có những thiếu sót gì.

Xây dựng một phòng trưng bày ôtô với các kỹ thuật đã tìm hiểu được.

Kết quả:

Tìm hiểu được những ưu điểm và khuyết điểm khi sử dụng WebGL cũng
như đa số các kỹ thuật dựng hình 3D cơ bản làm việc dựa vào thư viện WebGL.

Xây dựng được phòng trưng bày ôtô với các kỹ thuật đã tìm hiểu được:

 Dựng không gian 3D

 Dựng đối tượng 3D
 Dựng một camera
 Texturing
 Lighting
 Blending
 Stenciling
 Picking
 ABSTRACT
Problems:

Researching about WebGL library and the 3D techniques to know WebGL

has what especially and how to WebGL used.

Develop a car’ showroom with the techniques that studied.

Results:

Researched the advantages and disadvantage when using WebGL and the
techniques of render 3D object.

Developed a car’ showroom with some techniques:

 Render 3D Space
 Render 3D Object
 Render Camera
 Texturing
 Lighting
 Blending
 Stenciling
 Picking
Chƣơng 1

Tổng quan

Giới thiệu tổng quan về đề tài luận văn

1
Chƣơng 1: Tổng quan
1.1: Giới thiệu đề tài

Về mặt công nghệ, xã hội đang phát triển theo xu hướng nào?

Trong khi tìm hiểu về các công nghệ mới nổi lên trong thời gian gần đây về
lĩnh vực công nghệ thông tin cho đề tài khóa luận của mình, chúng tôi nhận thấy
xu hướng phát triển theo chuẩn 3D ngày càng được ưa chuộng hơn trong giới lập
trình cũng nh giới phát triển đồ họa.

Gần đây thuật ngữ “3D” trở thành một từ thông dụng trong xã hội, từ lĩnh
vực điện ảnh, y học cho đến đời sống và đặc biệt là công nghệ thông tin. Bằng
chứng là việc Game3D đổ bộ vào Việt Nam một cách ào ạc chưa từng có từ trước
đây.

Là sinh viên Công nghệ thông tin chúng tôi nhận thấy hướng đi này rất có
tiềm năng, tương lai sẽ mang lại những bước tiến nhảy vọt cho nền khoa học công
nghệ của đất nước đồng thời góp phần thúc đẩy quá trình phát triển của những
lĩnh vực khác.

Hiện tại thế giới đang chập chững những bước đầu tiên cho một công nghệ
gọi là Web3D. Công nghệ này sẽ đưa thế giới Web sang một tầm cao mới – Thế
giới Web 3.0.

Hình 1.1: Xu hƣớng Web3D

Trên thực tế, các đại gia lĩnh vực Công nghệ thông tin đã tỏ ra rất quan tâm
bằng việc chi hàng tỉ USD để phát triển theo xu hướng này, thúc đẩy một tiến
trình đổi mới nhanh chóng.

2
 Để góp tạo dựng nền móng theo xu hướng này ở nước ta, chúng tôi đã
quyết định tìm hiểu về công nghệ Web3D trong đề tại cuối khóa của mình qua
một thư viện xây dựng Web3D mới được hình thành gọi là WebGL.

WebGL là một engine mới cung cấp thư viện xây dựng đồ họa 3D trên Web
dựa trên nền tảng HTML5.0. Hiện tại WebGL vừa hình thành phiên bản 1.0 vào
cuối năm 2010 và rất được quan tâm của cộng đồng lập trình Web.

3
1.2: Mục tiêu đề tài

Thay vì phát triển website như truyền thống, Web3D mở ra một đường đi
mới giúp Web trở nên trực quan và tiện lợi hơn. Ví dụ: Khi muốn mua một căn
nhà,chúng ta có thể truy cập vào một website nhà đất sau đó xem thông tin căn
nhà mà ta muốn mua qua dạng văn bản và hình ảnh 2D. Thay vì vậy Web3D sẽ
dựng nên một căn nhà trong không gian 3 chiều, chúng ta có thể xem bao quát căn
nhà hoặc đi vào từng phòng để có cái nhìn trực quan hơn.

Web3D làm thay đổi cách nhìn về web. Một thế hệ website mới đang dần
dần được hình thành – thế hệ website 3.0, một thế hệ web gần gũi hơn với người
sử dụng, không chỉ cung cấp nhiều thông tin cho người sử dụng mà nó còn tương
tác đặc biệt với người dùng.

Hiện nay, thế giới có nhiều ngôn ngữ làm được điều này đặc biệt là Flash
nhưng các ngôn ngữ này vẫn còn tồn tại nhiều yếu điểm, điển hình là tất cả đều
xây dựng Web3D như một ứng dụng bên dưới nền sau đó mới được nhúng lên
web, phải sử dụng plugin... gây hạn chế về tốc độ hay tạo nên sự bất tiện khi sử
dụng.

Với mục đích theo đuổi xu hướng phát triển tiềm năng này và đặc biệt với
mong muốn đưa ra một phương pháp giải quyết những vấn đề trên. Chúng tôi đề
xuất ra một thư viện lập trình 3D trên web gọi là WebGL.

1.3: Yêu cầu kết quả đạt đƣợc

Xây dựng một phòng trưng bày xe hơi thể thao Car’ ShowRoom bao gồm
các chức năng sau:
 Vật thể trưng bày
 Hiển thị các kệ trưng bày.
 Hiển thị các những chiếc xe trưng bày.
 Hiển thị laptop trình bày thông tin.
 Hiển thị người đi lại.
 Hiển thị không gian trưng bày.

 Người xem di chuyển

Camera đại diện cho người xem di chuyển.
 Sử dụng phím để di chuyển camera.
 Có thể xoay camera theo nhiều hướng khác nhau.

 Xem thông tin các xe

 Người xem có thể click chuột vào những laptop trong không
gian để xem thông tin của những chiếc xe.

 Quay mô hình xe

4
  Hiển thị thông tin xe cùng với mô hình xe. Cụ thể là ta có
thể dùng chuột để quay những mô hình xe này.

Yêu cầu sử dụng những kỹ thuật sau:

 Dựng không gian 3D
 Dựng đối tượng 3D
 Dựng một camera
 Texturing
 Lighting
 Blending
 Stenciling
 Picking

5
 Chƣơng 2

Giới thiệu về HTML5

Giới thiệu HTML5 và những tính năng mới của HTML5

6
Chƣơng 2: Giới thiệu về HTML5
2.1: Tổng quan về HTML5

2.1.1: HTML5 là gì ?

HTML5 là phiên bản tiếp theo của HTML4. Nó được phát triển thêm một
số nhóm phần tử mới sẽ tối ưu hóa trang web của chúng ta hơn. Điều này sẽ
làm website của chúng ta dễ dàng được các bộ máy tìm kiếm biết đến hơn.
Ngoài ra, HTML 5 cũng sẽ bao gồm các hàm API mới nhằm hỗ trợ tốt hơn
cho tính truyền thông bởi các thao tác vẽ đồ họa trên màn hình, lưu trữ dữ
liệu ngoại tuyến, kéo và thả ..v…v……

HTML5 mang những tính chất của HTML4, HTML5 cho phép tạo ra các
trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ
thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những
trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú
hơn.

HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng
dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ
đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử
dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ
offline. Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắt
hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng
trong đầu hơn.

Hình 2.1: HTML5 Page

Ngày nay, các công nghệ phát triển thiết bị di động ngày càng tân tiến
hơn. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng
kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với
máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều

7
trình duyệt khác (Firefox, Opera…) chúng ta có thể dễ dàng lướt “net” ở bất
kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển
thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính chúng ta xem trang
web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn.
Hay chúng ta có thể xem phim rất tốt với IE nhưng với Firefox thì không.

Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên
bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin
trên internet. HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang
web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị
nào – từ MTĐB, MTXT cho đến ĐTTM. Không những vậy, HTML5 còn
đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh
hơn, tốt hơn, tài nguyên phong phú hơn.

Ngoài ra, khi nhắc đến HTML5 thì ta không thể không đề cặp tới CSS3.
HTML5 và CSS3 là một bộ đôi hoàn hảo. CSS làm cho việc thiết kế và xây
dựng một trang Web trở nên dễ dàng hơn. Trước khi có CSS, chúng ta phải
sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của
một trang Web. Mặc dù đã có một số cách khác nhưng HTML vẫn thường
xuyên được sử dụng và các nhà thiết kế Web sẽ phải thay đổi từng thành phần
riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi phong cách của một
trang Web đơn giản hơn và đỡ tốn thời gian hơn, chúng ta có thể thực hiện sự
thay đổi trên một mục nào đó và sau đó áp dụng sự thay đổi này trên toàn bộ
trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây.

CSS3 được xây dựng dựa trên các nguồn gốc của các style, selectors và
cascade dựa trên phiên bản cũ của CSS 2.0 trước đó. Nó cho phép thực thi
thêm 1 số tính năng mới, bao gồm cả mới selectors, pseudo-class và các
properties. Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày
template của chúng ta sẽ trở nên dễ dàng hơn rất nhiều.

Nhiều quan điểm cho rằng, HTML5 sẽ đặt dấu chấm hết cho công nghệ
Flash, nhưng hiện nay vẫn chưa có kết luận chính xác về vấn đề này. Trong
thực tế, các sản phẩm từ hãng Apple nổi tiếng như Iphone, Ipad không hề
được tích hợp công nghệ flash.

8
 Hình 2.2: HTML5 dùng trong Apple Iphone

HTML5 được phát triển từ năm 2004 nhưng giờ các nhà cung cấp Apple,
Opera, Mozilla và gần đây là Google mới xây dựng các thành tố tương thích
ngôn ngữ này trong trình duyệt. Cuối tháng 1, YouTube - website chia sẻ
video lớn nhất thế giới - tuyên bố thử nghiệm HTML5. Ngay cả Microsoft,
song song với việc quảng bá công nghệ Silverlight (cạnh tranh với Flash),
cũng bắt đầu quan tâm tới chuẩn web và hứa hẹn đưa HTML5 vào Internet
Explorer.

2.1.2: Các tính năng mới trong HTML5

Hình 2.3: Tính năng mới của HTML5

HTML5 vẫn giữ lại các cấu trúc cơ bản như <HEADER>, <FOOTER>,
nhưng được bổ sung các phần tử mới, chẳng hạn <CANVAS>, <AUDIO>.
Các phần tử trong cấu trúc mới:
• <HEADER>: là 1 thẻ mới, được sử dụng để chỉ ra thành phần
header của 1 tài liệu. Thông thường trong thẻ này sẽ bao gồm các thẻ định
dạng văn bản như: các thẻ từ <h1> đến <h6>, chứa thông tin giới thiệu

9
của một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu
hay tiêu đề nội dung của một bảng.
• <NAV>: chứa đường liên kết đến trang khác hoặc phần khác trên
cùng trang, không nhất thiết chứa tất cả liên kết, chỉ cần đường chuyển
hướng chính. Là 1 giải pháp mới được sử dụng để chỉ ra các thành phần
của một navigational trong website, chẳng hạn như các Menu Link.
• <SECTION>: đại diện cho một phần tài liệu hay ứng dụng, cách
thức hoạt động tương tự <DIV>. Được sử dụng biểu diễn một thành phần
văn bản của tài liệu (hay có thể hiểu là nó được sử dụng để bọc một thành
phần văn bản). Và dĩ nhiên nó cũng có thể chứa các thẻ thiết kế văn bản.
Ngoài ra chúng cũng có khả năng đặt lồng vào lẫn nhau.
• <ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu
chính hay các đoạn trích dẫn.Được sử dụng để chỉ ra khu vực sidebar của
website. Khu vưc này thông thường chứa các liên kết liên quan đến các
Chuyên mục hay các bài viết trong website.
• <FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn
mỗi phần có trong trang. Vì vậy, <FOOTER> có thể dùng nhiều lần trong
một trang. Thẻ này chỉ ra khu vực footer của website. Khu vực này thông
thường chứa các thông tin chi tiết của một website như: thông tin bản
quyền, thông kê các bài viết, các liên kết đến bài viết mới nhất ..v…v..
Nói chung còn tùy thuộc vào mục đích sử dụng của người dùng.

Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:

10
 Hình 2.4: Cấu trúc HTML5

<HEADER>, <FOOTER> không chỉ đại diện cho phần đầu, phần cuối
của trang hiện hành, mà còn là đại diện phần đầu, phần cuối của một phần tài
liệu, hơn nữa, chúng ta có thể dùng <THEAD>, <TFOOT> trong các bảng dữ
liệu. Việc sử dụng cấu trúc với các phần tử mới này giúp việc lập trình thuận
tiện hơn.

Các thẻ này được HTML 5 định nghĩa là thẻ senmantic (hiểu nôm na là
các thẻ thống kê website). Thay vì trước đây, chúng ta sử dụng các thẻ div để
làm việc này, thì nay, HTML5 đã hỗ trợ bằng việc thêm các thẻ senmantic
này để chúng ta sử dụng. Điều này sẽ rất có ích cho việc thống kê website của
chúng ta để tối ưu hóa chúng trên các công cụ tìm kiếm và giúp các công cụ
screen-readers (một ứng dụng để phân tích các thành phần trên màn hình) có
thể đọc hiểu được những gì có trong 1 website.

Một số đặc điểm mới: với sự đóng góp, cải tiến của các nhà phát triển
trình duyệt như Google (trình duyệt Chrome), Apple (Safari), Mozilla
(Firefox),…; HTML5 giờ đây đang dần hoàn thiện và có nhiều đặc tính khá
tinh tế:

 Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay
từng phần mà không cần cài đặt tính năng bổ sung (plug-in), tương tự như
Google Gears.

11
  Miền vẽ (canvas drawing) cho phép tương tác trực tiếp với hình
ảnh, biểu đồ, các đối tượng trong game (game component) thông qua các mã
lập trình và tương tác người dùng – không cần Flash hay các plug-in.
 Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực: hiện
đang trong quá trình hoàn thiện và thống nhất các chuẩn định dạng. Đến một
ngày nào đó, YouTube và Pandora có thể sẽ không cần đến Flash nhưng vẫn
đem đến những đoạn video, âm thanh hấp dẫn.
 Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị
trí của một ai đó và dùng nó để thực hiện cho một công việc nào đó, chẳng
hạn phục vụ cho các kết quả tìm kiếm, cập nhật Twitter hay dùng cho các
thiết bị định vị. HTML5 không giới hạn API của nhà cung cấp hay công cụ
trình duyệt nào.
 Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập
thông tin, vùng thông tin hợp lệ… sẽ được kiểm soát tốt hơn, ít gây phiền toái
cho người dùng khi họ điền thông tin, dữ liệu.
 Tiếp cận các ứng dụng web dễ dàng (web application focus): chẳng
hạn như việc xây dựng các trang wiki, công cụ kéo thả, bảng thảo luận, chat
thời gian thực. Việc thực hiện các ứng dụng này sẽ nhanh chóng hơn và
chúng có thể làm việc như nhau trên các trình duyệt.

2.1.3: Lợi ích mà HTML5 đem lại

Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API
(Application Programming Interface - giao diện lập trình ứng dụng) và DOM
(Document Object Model – mô hình đối tượng tài liệu hay cây cấu trúc dữ
liệu).

Hình 2.5: Flash Player Plugin

HTML5 cho phép mở rộng dễ dàng với API. Điều này sẽ giúp các nhà
phát triển tự do hơn trong việc sáng tạo các ứng dụng thân thiện hơn với
người dùng khi mà họ còn lệ thuộc vào nền tảng Flash - lưu trữ dữ liệu và
trình diễn ảnh động. Cùng với việc hỗ trợ bộ nhớ ứng dụng (application

12
cache) và khả năng offline, HTML5 sẽ mở ra nhiều cơ hội tương lai cho các
ứng dụng web. Khả năng offline có thể hình dung như việc Thunderbird,
Outlook cho phép bạn kiểm tra email ngay cả khi bạn làm việc offline nhưng
với HTML5 bạn sẽ thực hiện điều này qua trình duyệt. Đây là cầu nối quan
trọng để mối “lương duyên” giữa máy tính cá nhân và môi trường web sớm
hiện thực hơn. Google Gears cho chúng ta khả năng lưu trữ dữ liệu offline,
Flash đem đến cho người dùng những trải nghiệm về sức mạnh của bộ nhớ
ứng dụng (Pandora dùng nó để lưu trữ thông tin người dùng). Với HTML5,
những khả năng này hiện đã sẵn sàng và có thể dễ dàng mở rộng với
JavaScript.

Một lợi ích nữa, với HTML5, nhà phát triển chỉ cần lập trình một lần là có
thể dùng được trên nhiều hệ thống, không như Flash hay các plug-in khác
luôn cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng.

Mặc dù Flash, SilverLight… vẫn là các plug-in đang hoạt động tốt, nhưng
các nhà phát triển vẫn ra sức ủng hộ HTML5. Đơn giản vì:

 Thứ nhất, tuy Flash hoạt động tốt nhưng đôi khi nó gây ra
hiện tượng rò bộ nhớ (memory leak) hay làm nghẽn hệ thống (crash);
 Thứ hai, HTML5 giúp tập trung, quản lý các phần tử tương
tác trên trang web một cách tự nhiên, dựa vào các đoạn mã.
 Thứ ba, HTML5 giúp JavaScipt hiện thực dễ dàng hơn. Một
điểm nữa cho HTML5 là khả năng hỗ trợ nhà lập trình chuyển đổi từ
XHTML.

Vậy thì những của tính năng video trong HTML5 là gì? Đầu tiên, nó là
miễn phí và không cần phần mềm Adobe Flash plugin. Flash có thể làm chậm
máy tính của chúng ta (mặc dù phần mềm tăng tốc phần cứng hardware-
accelerated Flash 10.1 – đang trong phiên bản beta – có thể giúp giải quyết
vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và
chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng
sẵn trong đó.

Tính năng video mới này chắc chắn sẽ là một sự trợ giúp tuyệt vời cho
những người sử dụng Apple iPhone bởi vì Apple phải từ chối khá nhiều để
bất kỳ sự điều khiển của nó trên iPhone sẽ được chuyển giao tới cho một ứng
dụng khác (dạng điều khiển này thường được biết đến như là một chế độ
absolute monarchy). Nhưng cũng hy vọng HTML5 sẽ có lợi cho điện thoại
Blackberry, loại điện thoại mà hầu hết là không có khả năng hỗ trợ flash.
Trong thực tế, tính năng HTML5 video của Apple đã được khẳng định chắc
chắn đến mức họ có hẳn một trang làm nổi bật cái gọi là các Website “iPad-
ready”.

13
 Một điều quan trọng cần lưu ý về HTML5 video là nó vẫn còn thay đổi.
Ví dụ, Safari, Chrome, và sắp tới là Internet Exporer 9 sẽ hỗ trợ HTML5
video sử dụng định dạng H.264. Firefox, hiện thời chỉ hỗ trợ HTML5 video
sử dụng định dạng Ogg Vorbis, nhiều người sau khi dùng Firefox cho rằng
mã nguồn đóng của H.264 có thể gây ra vấn đề về bản quyền trong tương lai,
do đó nó có thể sẽ còn phải thay đổi.

Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Web dễ dàng hơn
trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần
dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3
và một ít hỗ trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT
Walker. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc
dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều
hứa hẹn trong lĩnh vực này.

Một khi có nhiều trình duyệt và nhiều nhà phát triển hỗ trợ các chuẩn
tương tác video, audio của HTML5, thì ý tưởng về một cửa hàng cung cấp
ứng dụng dùng được trên nhiều thiết bị, nền tảng – ĐTTM, MTĐB, MTXT,
Windows, Mac, Linux – sẽ trở thành hiện thực.

Các ứng dụng web đang trở nên ngày càng tinh vi, và một số tính năng
mới trong HTML5 sẽ giúp chúng tiếp tục được cải thiện. HTML5 cho phép
các ứng dụng web có khả năng lưu trữ thông tin và tiện ích Internet để sử
dụng khi chúng ta đang offline. Tính năng này sẽ cho phép lưu trữ và truy cập
dữ liệu như e-mail, lịch, và các tiện ích khác thông qua các ứng dụng Web,
ngay cả khi chúng ta đang offline, điều này làm cho các ứng dụng Web trở
nên tốt hơn và hữu dụng hơn.

Khi chúng ta đăng nhập online trở lại các ứng dụng này sẽ được load
nhanh hơn bởi vì cấu trúc của trang đã được đã được lưu trong bộ nhớ cache
của trình duyệt. Về lý thuyết, bất kỳ thay đổi nào được thực hiện cho các ứng
dụng Web trong khi offline vẫn được giữ nguyên khi chúng ta online trở lại.

Với tính năng lưu trữ offline chúng ta sẽ có thể xác định trong trình duyệt
các trang hoặc các loại trang muốn trình duyệt tiếp tục lưu trữ mà không cần
phải save riêng từng trang, nói cách khác, trước đây chúng ta phải thực hiện
“File-Save As” bất kỳ trang nào muốn save trong khi offline, còn bây giờ khi
sử dụng hệ thống mới, chúng ta sẽ có thể thiết lập trình duyệt tự động save
một loạt những trang nhất định (ví dụ như tất cả những gì của thuộc về một
Web site).

Điều này cũng sẽ tăng tốc độ load khi online bởi vì một phần của trang đã
được lưu sẵn trong bộ nhớ, do đó bạn sẽ không phải chờ đợi load toàn bộ nội
dung của trang khi refresh.

14
 Theo như Google công bố thì HTML5 sẽ bắt đầu được sử dụng cho các
ứng dụng Web vào tháng 12 năm nay thay vì chỉ sử dụng cho khuôn mẫu
Google Gears của riêng nó.

2.1.4: Ứng dụng

HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền
tảng Webkit như Palm Pre, iPhone 3Gs, Google Android. Gần đây, Google
cũng đã tích hợp sẵn HTML5 vào Wave nhằm xây dựng ứng dụng tất cả
trong một từ blog, wiki, IM (instant messaging), e-mail cho đến giao tiếp
đồng bộ. Trình duyệt Firefox 3.5 cũng đã hỗ trợ HTML5 với các thẻ
<VIDEO> và <AUDIO>, theo định dạng .ogg.

HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các
nhà phát triển trình duyệt Google, Apple, Mozilla… thì nó có khả năng
“khuynh đảo” thị trường ứng dụng web, và sớm trở thành chuẩn web chính
thức. Một số trình duyệt có hỗ trợ HTML5 (tùy mức độ): Firefox, Chrome,
Safari, Opera.

Hình 2.7: Web Browsers và HTML5 qua các giai đoạn

15
2.2: Công nghệ 3D trong HTML5
2.2.1: Flash

Hiện tại, Flash Player hiện diện trong hầu hết máy tính trên thế giới, nó
hoạt động như là một phần phụ trội của trình duyệt, cho phép người dùng
chơi game hay xem các nội dung đa phương tiện (multimedia). Website dùng
công nghệ Flash được sử dụng phổ biến nhất hiện nay là YouTube, nơi mà
người dùng có thể tải và chia sẻ video clip cá nhân.

Khi ra mắt bộ công cụ Creative Suite 5, Adobe đã cung cấp công cụ cho
các dạng ảnh động 3D trong Flash nhưng nền tảng mới sẽ mang lại nhiều trải
nghiệm 3D phong phú hơn. Nó có thể là động lực thúc đẩy số lượng các dòng
game lẫn video 3D gia tăng trên thị trường.

Tuy nhiên, không hẳn 3D Flash Player sẽ gặp nhiều suôn sẻ như người
tiền nhiệm Flash Player, vì công nghệ Flash đang gặp phải sự cạnh tranh khốc
liệt từ công nghệ Silverlight của Microsoft lẫn chuẩn web HTML5 cho phép
trình diễn nội dung video ngay trên trang web với các thẻ đơn giản. Adobe
còn gặp phải trở ngại lớn từ Apple khi hãng "trái táo" quyết không dùng
Flash cho các "siêu phẩm" của mình như iPhone hay iPad.

Trong thời gian gần sắp tới đây, Flash 3D sẽ được đưa vào ứng dụng trên
một phương diện rộng.

2.2.2: Silverlight Hình 2.8: Duyệt ảnh Flash3D

Tính đến thời điển này, Microsoft Silverlight 4 vẫn chưa được hỗ trợ 3D.
Không như Adobe Flash được hỗ trợ nền tảng 3D hoàn chỉnh, MS Silverlight
chỉ có thể mang lại cho người xem các hình ảnh có Cảm giác 3D nhưng
16
 không phải là 3D thật sự nhờ vào đặc tính mới là Perspective Transform.
Silverlight cung cấp nhiều tính năng tương tự như Flash. Nhưng hỗ trợ các
ngôn ngữ được phát triển trong môi trường .NET như Ajax, C#, VB.NET…
Vì vậy các lập trình viên có thể viết mã client-side cho silverlight cùng một
ngôn ngữ như khi họ viết trong server-side.

Điều này thật đáng tiếc. Bởi vì khi so sánh 2 công nghệ lớn Adobe Flash
và Microsoft Silverlight chúng ta phải tìm ra những tính năng mà công nghệ
này có thể làm được mà công nghệ khác không thể làm được. Và theo quan
điểm như vậy thì 3D thật sự là điểm yếu của Silverlight trong khi Flash có
đến 3,4 thư viện mã nguồn mở phục vụ tạo 3D.

2.2.3: WebGL

WebGL là một dự án được thực hiện bởi Khronos Group. Về cơ bản,

WebGL là sự kết hợp giữa ngôn ngữ JavaScript rất phổ biến trên nền tảng
web và thư viện đồ hoạ OpenGL ES (thư viện OpenGL cho các nền tảng điện
toán nhúng), cùng với HTML5. Dựa trên HTML5 nên WebGL sẽ không cần
đến các plug-in như Adobe Flash hay Adobe Reader để thể hiện nội dung của
mình. Phiên bản mới nhất của các trình duyệt Mozilla Firefox, Google
Chrome, Opera và Apple Safari hiện đã hỗ trợ WebGL 1.0.

WebGL có thể mô tả được hình ảnh đồ hoạ 3D, và mở đường cho game
3D trên các thiết bị di động như PSP,smartphone, tablet… Khác với tương
quan giữa OpenGL và DirectX trên nền tảng Windows 32-bit, các nền tảng di
động vốn không có thư viện DirectX tương ứng nên OpenGL ES sẽ không bị
cạnh tranh mạnh. Kết hợp với HTML5, WebGL có tương lai tươi sáng hơn
các đề cử đồ hoạ 3D dành cho web trước đây vì nhận được sự hỗ trợ từ nhiều
tên tuổi trong giới công nghiệp.

Hình 2.9: Các yếu tố tạo nên WebGL

17
2.2.4: O3D

Khởi đầu là một plug-in hỗ trợ đa nền tảng, nhưng Google hi vọng, cuối
cùng công nghệ này sẽ được tích hợp trực tiếp vào trong các trình duyệt. O3D
cung cấp một giao diện cho phép các chương trình JavaScript trên nền Web
của các nhà phát triển có thể kết nối trực tiếp tới vi xử lý đồ họa của máy,
giúp cho webgame cũng như các ứng dụng khác chạy mượt mà hơn.

Google không hẳn là tiên phong trong lĩnh vực Web 3D. Vào thập niên
90, một công nghệ có tên Virtual Reality Markup Language (VRML) đã được
khơi mào, tuy chưa được phát triển thành những dự án cụ thể.

Google hi vọng rằng, trong nay mai, giao diện 3D sẽ được các trình duyệt
hỗ trợ. Dự án plug-in mã nguồn mở này đã được Google đầu tư công sức
trong hai năm qua. Đối tượng hướng đến của O3D không phải là tất cả người
dùng phổ thông mà chủ yếu là các nhà lập trình, nơi họ có thể khám phá
những gì có thể của công nghệ 3D trên Web.

Google đã có các ứng dụng 3D, chẳng hạn Google Earth nhưng hãng cũng
biết, đối với giới game thủ, 3D thực sự là một công nghệ hấp dẫn.

Hình 2.10: Công nghệ O3D

18
 Chƣơng 3

Giới thiệu công nghệ

WebGL

Những kiến thức cơ bản về công nghệ WebGL

19
Chƣơng 3: Giới thiệu công nghệ WebGL
3.1: Tổng quan về WebGL

3.1.1: Thế nào là công nghệ 3D trên web

Web3D là những website cho phép mình tương tác trực tiếp lên những đối
tượng như góc nhìn, khoảng cách, âm thanh v.v...

3D trên nền web đã từng được thử nghiệm trước đây vào năm 1994 thông
qua công nghệ VRML (Virtual Reality Markup Language). Công nghệ này
cho phép đưa các hình đồ họa vector chưa được tăng tốc lên web. Tuy nhiên
vào những năm 90 hiệu năng của máy tính còn thấp và do thiếu sự đầu tư
phát triển nên công nghệ này đã dần lui vào dĩ vãng.

Thế giới Internet đã đón nhận những nội dung 3D đầu tiên cách đây
không lâu. YouTube điển hình cho những dịch vụ tiên phong với kênh video
3D khá đình đám. Thương hiệu NASCAR cũng trình diễn một số video đua
xe qua kênh video độc quyền. Tuy nhiên, dường như 3D và Web mới chỉ
dừng lại ở đó.

Hình 3.1: Web 3 chiều

Theo nhiều chuyên gia, xây dựng môi trường 3D cho website cần khoản
đầu tư rất lớn trong khi lượng người xem thường xuyên không đáng kể. Hơn
nữa, 3D website cần lựa chọn con đường ngắn nhất để bao phủ số lượng
người xem đại trà, đồng nghĩa với cắt giảm càng nhiều phụ kiện càng tốt.

3D cho web hiện nay mới dừng ở mức ý tưởng (thực tế đã có một vài đại
diện) nên lượng nội dung 3D chưa đa dạng. Người dùng cần một cú huých về
nội dung web bên cạnh những loại hình phim ảnh sẵn có. Điều này hoàn toàn
tùy thuộc vào nhà quản lí web có dám mạnh tay đầu tư hay không.

Đối với một website, điều cần thiết nhất là nội dung. 3D nhìn chung cũng
chỉ là cách thức đưa nội dung trang web đến với người dùng. Đi theo hướng
3D, nhà quản lí cần đảm bảo nội dung website đủ lôi cuốn bởi 3D có thể
nhanh chán đối với nhiều người.

Hơn nữa, muốn người xem chú ý tới website của mình, công nghệ 3D
không cần kính rất đáng xem xét. Nhất là trong bối cảnh ngày càng nhiều

20
thiết bị nghe nhìn hỗ trợ chuẩn này. Lập trình web chỉ nên gói gọn những
danh mục cần thiết để thưởng thức 3D, trong một vài phần mềm cài đặt thêm.

Một yếu tố đáng kể là màn hình 3D. 3D và Web bị ràng buộc với phần
cứng chính vì điều này, ảnh hưởng đáng kể để tốc độ phát triển. Trong bối
cảnh người tiêu dùng công nghệ đang “thắt lưng buộc bụng” như hiện nay,
web 3D không thể tiến nhanh trong ngày một ngày hai.

Hiện nay đã xuất hiện nhiều công cụ tạo ra các tính năng 3D trên vật thể
trong môi trường offline. Tuy nhiên công nghệ là một thứ không dừng lại ở
điểm điểm. Thế nên, con người đã nghĩ đến và phát triển nên các chuẩn 3D
trên website. Nổi trội hơn hẳn là công nghệ WebGL được phát triển bởi
Khronos.

Hình 3.2: Game 3D trên web

21
3.1.2: WebGL là gì?

WebGL về cơ bản là sự kết hợp giữa ngôn ngữ JavaScript (JS) rất phổ
biến trên nền tảng web, và thư viện đồ hoạ OpenGL ES, cùng với HTML5.

Hình 3.3: Mô hình nhánh công nghệ của OpenGL

Vì dựa trên HTML5, nên WebGL sẽ không cần đến các plug-in như
Adobe Flash hay Adobe Reader để thể hiện nội dung của mình, một điều mà
các trình duyệt web hiện nay không ưa thích cho lắm. Việc hỗ trợ WebGL 1.0
hiện đã được tích hợp vào các bản phát triển mới nhất của Mozilla Firefox,
Google Chrome, Opera và Apple Safari.

Do dựa trên OpenGL ES (thư viện OpenGL cho các nền tảng điện toán
nhúng), nên WebGL có thể mô tả được hình ảnh đồ hoạ 3D, và mở đường
cho game 3D trên các thiết bị di động như PSP, smartphone, tablet … Khác
với tương quan giữa OpenGL và DirectX (DX) trên nền tảng Windows x86,
các nền tảng di động vốn không có thư viện DX tương ứng nên OpenGL ES
sẽ không bị cạnh tranh mạnh. Kết hợp với ngôn ngữ web mở HTML5,
WebGL có tương lai tươi sáng hơn các đề cử đồ hoạ 3D dành cho web trước
đây, vì nó nhận được sự hỗ trợ từ nhiều tên tuổi trong giới công nghiệp.

Mặc dù vậy WebGL cũng có động lượng riêng, triển vọng của nó cũng bị
ảnh hưởng đôi chút bởi thiếu sự nhiệt tình của Microsoft. Khi được hỏi về
cảm nhận của hãng về điều này, Microsoft đã thể hiện sự ưu tiên của mình về
việc “sử dụng những chuẩn hiện tại để xât dựng 3D”, khi họ nói về ví dụ về
trang thử nghiệm Sky Beautiful.

22
 Được trợ cấp, Microsoft có rất nhiều cố gắng trong việc hiện đại hóa
Internet Explorer với IE9, nhưng WebGL được cho là một phần rất quan
trọng của nền tảng công nghệ Web. Có thể có một số nghi ngại là bởi WebGL
dựa trên giao diện đồ họa OpenGL được sử dụng trên hệ điều hành Mac OS
X, Windows, iOS và Android và cạnh tranh với DirectX của Microsoft.

Nếu các nhà lập trình Web có quan tâm, mặc dù – và những nhà lập trình
này từ lâu đã cho thấy sự yêu thích cho thay thế IE – Microsoft có thể kết
luận rằng hỗ trợ WebGL cũng quan trọng như các công nghệ khác như
Scalable Vector Graphics. WebGL là một trong những bộ công nghệ phát
triển Web hiện đang thu hút được chú ý như một nền tảng cho các ứng dụng
dựa trên Web.

Hình 3.4: Thực thể tạo ra bằng WebGl

23
3.1.3: Tại sao sử dụng công nghệ WebGL?

Vì WebGL có một số khả năng thuyết phục. Fish IE Tank của Microsoft,
được dùng để khoe khoang gia tốc phần cứng của IE9, chạy nhanh hơn rất
nhiều trong Fish IE của Jeff Muizelaar được viết lại để sử dụng WebGL –
mặc dù không sử dụng các tính năng 3D của nó.

Và Facebook đã thấy những lợi thế về khả năng thực hiện của WebGL
trong thử nghiệm tốc độ JSGameBench của hãng. "Hãy sử dụng WebGL!" là
lời kêu gọi của Bruce Rogers trên Facebook trong một bài viết về lợi ích của
WebGL. “ WebGL mở rộng mạnh mẽ không gian thiết kế cho các nhà lập
trình web và không chỉ dành cho nội dung 3D. Không nên ép các lập trình
viên và người dùng từ bỏ lựa chọn trình duyệt của họ để có được trải nghiệm
web tuyệt vời”.

Không nghi ngờ gì nữa, WebGL sẽ giúp các nhà lập trình web đẩy các
hình khối xoay gây khó chịu bấy lâu nay lên trên trang của mình. Tuy nhiên,
có rất nhiều sử dụng tiện ích khác dành cho giao diện.

Ví dụ, đồ họa 3D tăng tốc phần cứng của WebGL phù hợp với rất nhiều
trò chơi – không chỉ những tay mê bắn súng, mà còn là “món quà” tuyệt vời
dành cho khám phá mê cung, đua xe Rollercoaster. Bên cạnh đó, WebGL còn
rất tuyệt vời trong việc mang lại yếu tố 3D cho bản đồ Google hoặc Bing.

Hình 3.5: Game Modern Warfare 2 trên nền 3D

24
3.1.4: Lợi ích và hạn chế của WebGL

a. Lợi ích:

 Tính tiện lợi: vì dựa trên HTML5 nên WebGL sẽ không cần đến
các plug-in như Adobe Flash hay Adobe Reader để thể hiện nội dung của
mình. Phiên bản mới nhất của các trình duyệt Mozilla Firefox, Google
Chrome, Opera và Apple Safari hiện đã hỗ trợ WebGL 1.0.

 Tốc độ nhanh: khi sử dụng WebGL là ta lập trình 3D ngay trên

nền Web không như những công nghệ đã có(Flash, Silverlight) là lập trình
sản phẩm 3D như một ứng dụng bên dưới rồi mới được nhúng trên web
đồng thời bằng việc sử dụng ngôn ngữ cấp thấp Javascript và HTML5 làm
tốc độ của chương trình trở nên nhanh hơn nhiều. Tốc độ của một chương
trình WebGL phụ thuộc vào cách ta lập trình Shader trong chương trình.

 Tính ổn định: WebGL ổn định do nó dựa vào HTML vì HTML là

ngôn ngữ đã phổ biến và được cộng đồng phát triển tin dùng. Ngoài ra
HTML còn được sử hỗ trợ của nhiều thư viện lập trình khác như CSS…

 WebGL làm việc tốt với các thư viện hỗ trợ HTML5 đặc biệt là
CSS3. Sự kết hợp giữa WebGL và CSS3 là một sự kết hợp mong đợi của
các lập trình viên, điều này làm sẽ làm cho web không những sinh động
với WebGL mà còn có tính thẩm mỹ của CSS làm cho sản phẩm Web càng
ngày càng gần với thực tế hơn.

b. Hạn chế:

 Tuy có nhiều điểm mạnh nhưng WebGL vẫn chưa được sự ủng hộ
của Microsoft, với phiên bản gần đây nhất của IE là IE9 beta Microsoft vẫn
chưa tích hợp WebGL vào trình duyệt này. Tuy nhiên cộng đồng phát triển
đã được sự cam kết của chính hãng này là sẽ tích hợp trong thời gian gần
nhất.

 Và một hạn chế nữa là WebGL vẫn chưa thay thế được Flash, điều
này làm một thực tế rõ ràng vì đây chỉ mới là thời kỳ sơ khai của WebGL,
những đòi hỏi để thay thế một công nghệ đã lâu đời như Flash là một điều
hiện tại chưa thể làm được. Nhưng một khi WebGL có thời gian để cải
thiện mình thì việc thay thế Flash là một điều tất yếu do bản thân công
nghệ này tồn tại những thuận lợi mà Flash không thể làm được.

 Phiên bản 1.0 ra đời vẫn còn mang một số vấn đề chưa giải quyết
được. (Ví dụ: sự tương thích đồng bộ trong Firefox và Google Chrome…).

25
 3.1.5: Ứng dụng của WebGL

Chuẩn phác thảo hiếm khi bị thay đổi nhiều, và hầu hết các chi tiết quan
trọng đã được thành lập. Đã có các phiên bản sơ khai dành cho nhà phát triển
của WebGL được tích hợp vào phiên bản beta của những trình duyệt như
Firefox, Safari và Chrome, và nay với chuẩn phác thảo chúng ta có thể hi
vọng chứng kiến sự phát triển nhanh hơn về cả sự hỗ trợ đầy đủ chuẩn
WebGL trong các trình duyệt cũng như các ứng dụng có thể tận dụng được
công nghệ mới này.

Khronos nói: “Hiện đã có hệ phần mềm rất thịnh vượng xung quanh
WebGL, cung cấp cho các nhà lập trình viên khả năng dễ dàng tạo nội dung
3D hấp dẫn dành cho các trình duyệt hỗ trợ WebGL. Những công cụ này bao
gồm: C3DL, CopperLicht , EnergizeGL, GammaJS, GLGE, GTW, O3D,
OSG.JS, SceneJS, SpiderGL, TDL, Three.js và X3DOM."

WebGL, có giao diện mức độ thấp với những lập trình viên không muốn
trở thành chuyên gia, đặt biệt là trong thế giới game trực tuyến. Vui vẻ, tự do
hiện đang phát triển để tự động hóa cách sử dụng nó.

Hiện nay, WebGL đang được sự ủng hộ rất lớn từ các đại gia công nghệ
như Google, Apple, Qualcomm…Nhìn vào thực tế, WebGL rất có khả năng
sẽ làm chủ công nghệ 3D trên web trong thời gian sắp tới, cung cấp các chuẩn
3D cho nhiều ứng dụng, góp phần vào xây dựng hệ thống game 3D trên trình
duyệt như Modern Warfare 2…

Việc tiếp tục phát triển WebGL hẵn chắc sẽ tạo ra một bước tiến đột phá
trong thời đại của công nghệ ba chiều như hiện nay.

3.2: Triển khai WebGL

3.2.1: Luồng thông tin xử lý

Theo như phần giới thiệu đã nêu ở trên, ta biết được WebGL làm việc là
sự kết hợp giữa Javascript, OpenGL ES và HTML5. Vì vậy phương pháp mà
WebGL dựng một đối tượng cũng giống với cách OpenGL ES làm việc,
Javascript ở đây chỉ đóng vai trò là ngôn ngữ còn HTML5 là cái đích mà đối
tượng được dựng.

Trước khi tìm hiểu phương pháp mà WebGL dựng một đối tượng ta cần
biết luồng xử lý thông tin của WebGL. WebGL làm việc với Vertex Shader,
mọi thông tin của đối tượng như vị trí các đỉnh, chỉ mục các đỉnh, tọa độ
texture hay tọa độ pháp tuyến các đỉnh được lưu vào các biến buffer – những
biến này được sử dụng như những biến thuộc tính đưa đến Vertex Shader.
Ngoài các thông tin về các đỉnh, những thông tin khác như màu sắc, ánh sáng
thì được truyền đến Vertex Shader bằng những biến được gọi là uniform.

26
 Hình 3.6: Luồng thông tin xử lý

Vertex Shader sẽ xử lý những thông tin đến( biến đổi tọa độ các đỉnh, có
thể tính toán ánh sáng cơ bản, …) rồi xuất ra dữ liệu được lưu trữ vào biến gọi
là varying. Những biến varying này chính là những biến đầu vào của Fragment
Shader. Nhưng trước khi vào Fragment Shader những biến này sẽ tham gia
vào một quá trình gọi là Rasterization.

Nếu đã lập trình 3D thì hẵn sẽ không lạ với quá trình này. Đây là quá trình
biến đổi vật thể 3D thành 2D, ở đây những hình ảnh thừa sẽ bị cắt đi. Sau khi
kết thúc các biến varying được đưa đến Fragment Shader.

27
 Tại Fragment Shader, màu sắc, ánh sáng của vật thể sẽ được tính toán.
Những màu sắc ngoài các đỉnh sẽ được nội suy từ những đỉnh lân cận. Khi kết
thúc mọi thông tin được chuyển đến Frame buffer để dựng đối tượng.

3.2.2: Dựng đối tƣợng

Hình 3.7: Đối tƣợng 3D

Đối tượng trong lập trình 3D là một vật thể được cấu thành từ những tam
giác liền kề nhau. Dữ liệu của vật thể là tọa độ của các đỉnh, vector pháp tuyến
của những bề mặt có gốc tại các đỉnh, tọa độ texture và cuối cùng là chỉ mục
các đỉnh.

28
 Quá trình dựng một đối tượng trong WebGL gồm các bước sau:

Thiết lập
Context

Thiết lập
Shader

Thiết lập
Texture

Thiết lập
Đối Tƣợng

Vẽ

Hình 3.8: Những công việc khi dựng đối tƣợng 3D.

Đầu tiên, công việc cần làm là tìm nơi để vẽ đối tượng của chúng ta. Vấn
đề này WebGL cung cấp cho ta hai sự lựa chọn: một là thẻ canvas của HTML5
cái còn lại là đối tượng Frame buffer( thường sử dụng khi dựng đối tượng trên
texture). Ở đây ta tập trung vào việc dựng đối tượng trên Canvas. Quá trình
thiết lập Context có thể mô tả trong bước sau:

 Lấy ID thẻ canvas trong tài liệu HTML5.

 Tạo GL Context.

 Kiểm tra Context.

 Trả về Context.

29
 Thứ hai là thiết lập Shader Program. Đoạn mã Shader xử lý được viết trong
hai đoạn script tương tự như sau:

<script id="shader-fs" type="x-shader/x-fragment">

#ifdef GL_ES
precision highp float;
#endif

void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">

attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;

uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix*uMVMatrix*vec4(aVertexPosition, 1.0);
}
</script>

Khi thiết lập Shader Program ta lấy hai đoạn script này về qua thuộc tính id
và type lưu vào trong hai biến riêng biệt gọi là shader sau đó cả hai được gán
vào một biến độc lập gọi là Shader Program.

Ở đây ta nói thêm một chút về Shader. Có hai kiểu đối tượng cơ bản trong
Shader là đối tượng shader và đối tượng program. Hai đối tượng này cũng
giống như bộ compiler và linker trong lập trình C, một compiler trong C sinh ra
đối tượng code(.obj, .o) cho source code còn linker(C) liên kết những tập tin
đối tượng đó và trong một chương trình. Shader trong WebGL cũng vậy,
source code shader được chứa trong những đối tượng shader riêng biệt và đối
tượng này được biên dịch thành dạng đối tượng giống .obj trong C. Sau khi
biên dịch đối tượng được gán vào đối tượng chương trình( Shader Program).
Chú ý rằng Shader Program phải được đăng ký trước khi sử dụng nó.

Công việc cần làm thứ ba là về Texture nhưng Texture có thể có hoặc
không. Những chương trình đơn giản chúng ta có thể không sử dụng Texture.
Texture sẽ làm cho vật thể ta dựng thực tế hơn và có tính thẩm mỹ hơn. Trong
WebGL, có 4 loại Texture: canvas, image2D, video, buffer pixels. Kỹ thuật sử
dụng Texture sẽ nói đến chi tiết ở phần sau.

Thứ tư là việc tạo ra đối tượng. WebGL cũng như nhưng ngôn ngữ 3D
khác, nó làm việc với những đỉnh tam giác cấu thành vật thể. Có 4 loại dữ liệu
đối tượng cơ bản trong chương trình WebGL: vị trí đỉnh( vertex position), tọa
độ pháp tuyến( vertex normal), tọa độ texture( texture coordinate), chỉ mục
đỉnh( vertex index).

30
 Vertex Position là độ đỉnh của tam giác trong vật thể. Tọa độ này là tọa độ
trong hệ tọa độ local của vật thể. Những thông tin này giúp ta xác định được
vật thể có hình dạng như thế nào và dữ liệu này sẽ tham gia vào biến đổi tọa độ
trong không gian.

Vertex Normal là tọa độ pháp tuyến dùng để tính toán ánh sáng, màu sắc
của vật thể.

Texture Coordinate là tọa độ những vị trí có thể lợp Texture cho vật thể.
Trong WebGL texture được lợp 1x1 cũng giống như những ngôn ngữ khác.
Tưởng tượng tọa độ giống như sau:

Hình 3.9: Định dạng cơ bản của Texture

Và cuối cùng của dữ liệu trên đối tượng là Vertex Index. Đây là chỉ mục
của những đỉnh dùng để xác định các đỉnh khi dựng đối tượng.

Việc còn lại cần phải làm là vẽ đối tượng mà ra màn hình, nhưng trước khi
là điều này cần phải thiết lập các thông tin như viewport, tầm nhìn, vị trí, góc
nhìn của camera…Tiếp theo là thiết lập các biến Uniform chương trình(nếu
có), chọn Texture thích hợp và cuối cùng là dựng đối tượng.

3.2.3: Màu sắc cho vật thể

Màu sắc như đã nói ở các phần trước, màu sắc sẽ được tính toán tại
Fragment Shader. Hệ thống màu sắc sử dụng trong WebGL thông thường là
RGB hay RGBA.

Để thiết lập màu sắc cho vật thể dùng WebGL ta sử dụng một buffer chứa
màu sắc của những vertex truyền buffer này như một thuộc tính cho Shader.

31
 triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

var colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors),
gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numItems = 3;

Đoạn code cơ bản trên mô tả cách tạo ra một buffer chứa màu sắc cho
một đối tượng tam giác, với màu sắc ở ba đỉnh là đỏ, xanh lá cây và xanh
dương.

3.2.4: Kỹ thuật Texturing

Trong WebGL cũng giống như OpenGL ES tồn tại hai loại Texture:
Texture2D và Cube Map.

Texturer2D là dạng cơ bản nhất, nó là một mảng hai chiều dữ liệu hình
ảnh. Mỗi phần tử cơ bản nhất của texture người ta gọi là texel cũng giống như
pixel trong tập tin ảnh. Dữ liệu hình ảnh trong WebGL có thể được đại diện bởi
nhiều định dạng cơ bản khác nhau:

Hình 3.9: Định dạng cơ bản của Texture

Khi sử dụng Texture2D để dựng vật thể, tọa độ texture được xem như là
một chỉ mục đến dữ liệu hình ảnh. Nói tóm lại, mỗi đỉnh của vật thể có một tọa
độ texture, chúng ta sử dụng tọa độ này để lợp Texture2D cho vật thể. Tọa độ
texture cho Texture2D được xác định bằng cặp (s, t) nhưng cũng có một số tại
liệu sử dụng là ( u, v).

32
 Hình 3.10: Tọa độ Texture2D
Dưới góc trái của ảnh được chỉ định là tọa độ st (0.0, 0.0), góc trên bên
phải là tọa độ (1.0, 1.0). Ngoài ra, tọa độ ngoài đoạn [0.0, 1.0] được chỉ định
bằng chế độ Wrapping Texture.

Một kỹ thuật Texture khác là CubeMap. Kỹ thuật này sử dụng sáu

Texture2D thường được sử dụng trong kỹ thuật Environment Mapping. Đây là
một kỹ thuật khó, chúng sẽ tìm hiểu kỹ hơn ở những phần sau.

3.2.5: Kỹ thuật Lighting

Ánh sáng được chia làm 3 loại: ánh sáng khuếch, ánh sáng phản xạ và ánh
sáng tán xạ. WebGL làm việc với cả 3 loại ánh sáng này nhưng thông thường ta
chỉ sử dụng hai ánh sáng là ánh sáng khuếch và ánh sáng phản xạ.

Có rất nhiều thuật toán làm việc với ánh sáng: Phong Shading, Lambert
Shading, Gouraud Shading, Minnaert Shading... Vì không có nhiều thời gian
nên ở đây chúng tôi chỉ tìm hiểu thuật toán Phong Shading.

Nguyên tắc của Phong Shading như sau:

Hình 3.11: Phong Shading

Ánh sáng môi trường + Ánh sáng khuếch tán + Ánh sáng phản xạ = Phong

33
WebGL làm việc với 2 dạng ánh sáng là điểm sáng và hướng chiếu sáng.

 Hướng chiếu sáng: ánh sáng chỉ chiếu vào một vật thể. Cách này chỉ
được dùng ở những chương trình cơ bản còn những chương trình
phức tạp thì điểm sáng được ưu tiêng sửa dụng hơn.

Hình 3.12: Hƣớng ánh sáng.

 Điểm sáng: có thể chiếu sáng khắp mọi hướng trong môi trường.

Hình 3.13: Điểm ánh sáng

WebGL tính toán ánh sáng trên bề mặt dựa vào Vertex Normal.

34
 Hình 3.13: Điểm ánh sáng

Với:
 P(eye): là vị trí của mắt.

 P(light): vị trí ánh sáng, P(light).w = 0.

 N: vector pháp tuyến.

 H: nữa mặt phẳng vector, || P(light) + P(eye) ||.

3.2.6: Nạp vật thể từ file ngoại vi

Khi làm việc với đối tượng 3D, tao đâu chỉ làm việc với những đối tượng
như hình hộp, hình tròn, tam giác … Nếu chỉ có những hình đối xứng này thì
lập trình 3D sẽ không được đứng ở vị trí như hiện nay. Những vật thể ở thế giới
thật mới là nguồn cảm hứng của các nhà phát triển 3D. Vậy đưa một chiếc xe
vào chương trình 3D như thế nào?

Trong những ngôn ngữ đã có, việc đưa một vật thể 3D không đối xứng vào
chương trình không mấy khó khăn, hỗ trợ nhiều định dạng file 3D cho chương
trình. Nhưng đối với WebGL đây là một vấn đề, vì đây là thư viện mới nên chỉ
mới hỗ trợ file dạng .json.

File json có dạng:

{
"vertexPositions" : [5.929688,4.125,0,5.387188,4.125,2.7475,5.2971
"vertexNormals" : [-0.966742,-0.255752,0,-0.893014,-0.256345,2
"vertexTextureCoords" : [2,2,1.75,2,1.75,1.975,2,1.975,1.75,1.95,2
"indices" : [0,1,2,2,3,0,3,2,4,4,5,3,5,4,6,6,7,5,7,6,8,8,9,7,1,10,11
}

35
 Không có nhiều file 3D dạng .json trên internet, muốn có nó ta phải chuyển
các định dạng file khác thành dạng này( cách chuyển có thể xem trong phần
phụ lục).

Để load một file .json vào chương trình ta sử dụng đối tượng
XMLHttpRequest của Javascript để quản lý việc trao đổi dữ liệu giữa server và
client.

function loadTeapot() {

var request = new XMLHttpRequest();

request.open("GET", "Teapot.json");
request.onreadystatechange = function() {

if (request.readyState == 4) {

handleLoadedTeapot(JSON.parse(request.responseText));
}
}
request.send();
}

Sau file đã load về thành công, ta sẽ xử lý file để lưu thông tin vào các buffer.

36
 Chƣơng 4

Xây dựng Demo về

công nghệ WebGL
Car’ Showroom

Demo sử dụng WebGL thiết kế khu vực triển lãm xe hơi

37
Chƣơng 4:
Xây dựng Demo công nghệ WebGL – Cars Showroom
4.1: Giới thiệu về Cars ShowRoom

Những chi tiết về WebGL ở trên ít nhiều ta thấy được những tính năng nỗi
bậc và chất lượng dựa trên công nghệ mới này đối với việc phát triển 3D trên
ứng dụng Web.

Với mong muốn có thể áp dụng công nghệ này vào thực tiễn, chúng tôi xây
dựng một ứng dụng gọi là Car’ ShowRoom để minh họa cho những nghiên cứu
của mình.

Car’ ShowRoom là một chương trình ảo giả lập người xem đang đứng
trong một phòng trưng bày xe hơi thể thao. Phòng trưng bày có những chiếc xe
hơi thể thao tại những vị trí khác nhau bên trong. Người xem có thể di chuyển, đi
lại đồng thời có thể nhìn theo những hướng khác nhau. Ngoài ra người xem có
thể xem thông tin chi tiết của những chiếc xe qua những máy laptop cá nhân.
Chương trình cũng cung cấp cho người xem khả năng quay mô hình xe qua việc
sử dụng chuột để người xem có thể thuận lợi hơn trong việc tiếp cận những chiếc
xe mà mình muốn mua.

4.2: Chức năng của chƣơng trình

4.2.1: Danh sách các chức năng

Ứng dụng Cars ShowRoom có những chức năng sau:

 Hiển thị vật thể trưng bày

 Hiển thị các xe lên kệ trưng bày.

 Di chuyển của người xem

 Người sử dụng có thể dùng bàn phím để di chuyển
camera, thay đổi góc nhìn phù hợp.

 Click chuột xem thông tin các xe

 Giúp người sử dụng xem thông tin các xe: thông số
kỹ thuật, màu sắc, hình dáng, phụ tùng kèm theo…

 Sử dụng chuột để quay xe

 Khi xem chi tiết của xe, người xem có thể quay xe
theo hướng mà mình muốn xem.

38
4.2.2: Use-case

4.2.2.1. Mô hình Use-case

Hình 4.1: Sơ đồ Use-case cho Demo

4.2.2.2. Ý nghĩa Use-case

STT Use-case Ý nghĩa

1 DiChuyen Khách hàng có thể di chuyển
không gian phòng trưng bày.
2 XemThongTin Khách hàng có thể xem
thông tin của xe hơi thể thao bằng
cách click vào những máy laptop.
3 QuayVatThe Với chức năng này người
dùng sẽ có thể quay xe một cách
tùy ý theo hướng mong muốn.

4.2.2.3. Đặc tả Use-case

4.2.2.3.1. Use-case: XemThongTin
 Tóm tắt
Use-case này mô tả cách người dùng có thể xem thông
tin vật thể.

 Dòng sự kiện
Use-case này bắt đầu khi người dùng bắt đầu vào trang
web.
o Người dùng click vào laptop để xem thông tin.
39
 o Trang web sẽ bắt sự kiện từ người sử dụng và xử
lý.
o Trang web trả về thông tin xe thích hợp.

 Các yêu cầu đặc biệt

Không có.

 Điều kiện tiên quyết

Không có.

 Kết quả
Người dùng sẽ được trả về thông tin xe thích hợp.

 Điểm mở rộng
Không có.

4.2.2.3.2. Use-case: DiChuyen

 Tóm tắt
Use-case này mô tả cách người dùng có thể di chuyển
trong không gian.

 Dòng sự kiện
Use-case bắt đầu từ lúc người dùng load trang web.
o Người dùng nhấn vào các phím di chuyển của bàn
phím.
o Trang web sẽ bắt sự kiện bàn phím và xử lý di
chuyển camera.

 Các yêu cầu đặc biệt

Không có.

 Điều kiện tiên quyết

Không có.

 Kết quả
Người dùng sẽ thấy sự di chuyển của camera trên màn
hình.

 Điểm mở rộng
Không có.

4.2.2.3.3. Use-case: QuayVatThe

 Tóm tắt
Use-case mô tả sự kiện quay những vật thể trong chương
trình.

40
  Dòng sự kiện
Use-case bắt đầu từ lúc người dùng chọn xem thông tin
chi tiết vật thể.
o Người dùng chọn xem thông tin chi tiết vật thể.
o Trang web sẽ chuyển đến trang xem thông tin chi
tiết vật thể.
o Người dùng click vào vật thể và rê chuột.
o Trang web sẽ bắt sự kiện click và rê chuột của
người dùng sau đó xử lý.
o Trang web trả về những hình ảnh vật thể đã quay
cho người dùng.

 Các yêu cầu đặc biệt

Không có.

 Điều kiện tiên quyết

Không có.

 Kết quả
Hình ảnh vật thể sau khi quay được hiển thị cho người
dùng.

 Điểm mở rộng
Không có.

4.3: Những kỹ thuật sử dụng trong chƣơng trình

 Dựng không gian 3D

 Dựng đối tượng 3D
 Dựng một camera
 Texturing
 Lighting
 Picking

41
4.4: Những lớp, thƣ viện trong chƣơng trình và vai trò của nó

- Trong chương trình sử dụng những lớp và thư viện sau:

Hình 4.2: Sơ đồ lớp cho Demo

42
 S Lớp & Thƣ File Ý nghĩa
TT viện
1 Context glUtils.js Lớp khởi tạo đối tượng context cho
chương trình.
2 Shader glShaders.js Lớp tạo dựng chương trình shader cho
chương trình.
3 Texture glTextures.js Lớp tạo dựng đối tượng texture cho
chương trình.
4 Shape glShapes.js Lớp tạo dựng đối tượng xe trong
chương trình.
5 World glWorlds.js Lớp cung cấp các hàm render thế giới
trong chương trình.
6 Platform glPlatforms.js Lớp tạo dựng đối tượng bục để xe trong
chương trình.
7 Laptop glLaptops.js Lớp tạo đối tượng laptop trong chương
trình.
8 glMatrix glMatrix.js Thư viện cung cấp các phép tính ma
trận sử dụng trong chương trình.
9 Tick index.html Call back hệ thống.
10 UserData index.html Lớp tích hợp những thông tin của người
dùng và những đối tượng.
11 Lap glLaptops.js Lớp đối tượng cho lớp Laptop
12 Objs glShapes.js Lớp đối tượng cho lớp Shape.
13 glTransforms glTransforms.js Lớp tính toán ma trận.
14 Video index.js Lớp xử lý video.

4.5: Lƣợc đồ tuần tự

 Tạo đối tượng context cho chương trình

Hình 4.3: Tạo đối tƣợng context

43
 Tạo đối tượng shader

 Tạo đối tượng texture

Hình 4.4: Tạo đối tƣợng texture

 Load thông tin đối tượng và lưu vào buffer

Hình 4.5: Load thông tin đối tƣợng và lƣu vào buffer

44
  Render

Hình 4.6: Render đối tƣợng

4.6: Một số hình ảnh trong chƣơng trình

 Phòng trƣng bày

Hình 4.7: Demo – Toàn cảnh phòng trƣng bày.

45
 Xe trƣng bày

Hình 4.8: Demo – Xe hơi trƣng bày.

 Xem thông tin xe

Hình 4.9: Demo - Thông tin 1

46
Hình 4.10: Demo - Thông tin 2

47
 Chƣơng 5

Các vấn đề thƣờng gặp

về WebGL
và cách giải quyết

Những khó khăn khi nghiên cứu và xây dựng demo

48
Chƣơng 5:
Các vấn đề thƣờng gặp về WebGL và cách giải quyết
5.1: Vấn đề về chuyển đổi định dạng Json

Trong quá trình thực hiện demo của đồ án, một vấn đề mà chúng tôi đã gặp
phải, cũng như mất rất nhiều thời gian để khắc phục chính là file ảnh 3D.
WebGL cho phép ta load các file ảnh có định dạng json.

Thế nhưng, có lẽ vì công nghệ WebGL cho tới thời điểm này vẫn còn quá
mới mẽ, nên chưa có những thư viện file json để ta có thể download và dùng
trong đồ án. Thậm chí vẫn chưa có phần mềm nào có khả năng thiết kế và xuất ra
dưới định dạng json cũng như không có phần mềm chuyển đổi nào có thể chuyển
từ các định dạng file 3D phổ biến khác như *.3ds, *.max thành định dạng json.

Trong khi đó, ngày nay có rất nhiều thư viện file vật thể 3D có định dạng
là *.3ds, *.max, *.obj….được tạo ra từ các phần mềm đồ họa 3D khác nhau.

Để giải quyết vấn đề nêu trên, sau một thời gian tìm hiểu. Chúng tôi đã có
câu trả lời. Mấu chốt của vấn đề chính là phần mềm Autodesk 3ds Max và đoạn
mã chuyển đổi định dạng được viết dưới dạng file ObjToJSON.html (đoạn code
trong file này được trình bày trong phần phụ lục).

Hình 5.1: Phần mềm Autodesk 3ds Max 2011

49
 Cụ thể hơn, các bước để giải quyết vấn đề tìm kiếm file json cho chương
trình như sau:

 Chuẩn bị file có định dạng phổ biến như *.3ds, *.max

 Khởi động chương trình Autodesk 3ds Max và load file cần
chuyển đổi định dạng vào.

 Sau đó, export ra thành file *.obj. Trong khi export, ta có thể
scale vật thể lại nhỏ hoặc lớn hơn sao cho phù hợp với chương
trình.

 Dùng đoạn mã chứa trong file ObjToJSON.html để chuyển file

*.obj vừa xuất ra thành file JSON.

 Gỉa sử ta đang cần chuyển file macbook.obj thành file

macbook.json, cần sửa đúng tên file của đối tượng truyền vào hàm
loadObj(obj). Sau đó chạy file này, ta sẽ thấy browser cho ra dữ
liệu của file json. Tạo một file mới có tên macbook.json và sao
chép dữ liệu xuất ra trên browser vào. Ta có được file json mong
muốn.

<body onload="loadObj('macbook.obj');">

 Cần lưu ý một điều rằng, việc chuyển các file có định dạng phổ biến
thành file json chỉ mang tính chất tương đối vì không phải bất cứ file
nào cũng có thể chuyển và cho ra kết quả chính xác mong muốn
được.

50
5.2: Vấn đề về Environment Mapping

Ở phần trên của tài liệu chúng tôi có hướng dẫn cách dự một thế giới như
thế nào. Nhưng đó là cách dựng một môi trường chỉ có “một” texture hay nói rõ
hơn là texture ở các hướng đều như nhau, làm cho thế giới của chúng ta phần nào
không được thực tế. Vậy làm sao để giải quyết vấn đề này?Ở phần này chúng tôi
giới thiệu về việc lập ra một thế giới bằng việc sử dụng kỹ thuật Cube Map
Texture hay còn gọi là CubeTexture.

 Kỹ thuật
 Như tên gọi của nó, bản thân nó là một hình lập
phương với mỗi mặt là một texture 2D.

Hình 5.2: Texture cho lập phƣơng

 Những texture 2D có sự liên quan với nhau.

 T
a

s
ẽ

b
i
ế
n

đ
ổ
Hình 5.3: Sự liên quan của texture 2D
i
51
tọa độ camera của chúng ta vào bên trong khối lập phương.

 Code đơn giản

 Đầu tiên ta viết hàm tạo ra đối tượng cubetexture. Ở

đây ta sẽ cho 6 mặt của lập phương là 6 màu khác nhau.

var textureId;

function CreateSimpleTextureCubemap( )
{
// Face 0 - Red
var cubePixels0 = new Uint8Array([255, 0, 0]);
// Face 1 - Green,
var cubePixels1 = new Uint8Array([0, 255, 0]);
// Face 2 - Blue
var cubePixels2 = new Uint8Array([0, 0, 255]);
// Face 3 - Yellow
var cubePixels3 = new Uint8Array([255, 255, 0]);
// Face 4 - Purple
var cubePixels4 = new Uint8Array([255, 0, 255]);
// Face 5 - White
var cubePixels5 = new Uint8Array([255, 255, 255]);

// Generate a texture object

textureId = gl.createTexture ();

// Bind the texture object

gl.bindTexture ( gl.TEXTURE_CUBE_MAP, textureId );

// Load the cube face - Positive X

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGB,
1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, cubePixels0);

// Load the cube face - Negative X

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0,
gl.RGB, 1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, cubePixels1 );

// Load the cube face - Positive Y

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGB,
1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, cubePixels2 );

// Load the cube face - Negative Y

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0,
gl.RGB, 1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, cubePixels3 );

// Load the cube face - Positive Z

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGB,
1, 1, 0,

52
 gl.RGB, gl.UNSIGNED_BYTE, cubePixels4 );

// Load the cube face - Negative Z

gl.texImage2D ( gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0,
gl.RGB, 1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, cubePixels5 );

// Set the filtering mode

gl.texParameteri ( gl.TEXTURE_CUBE_MAP,
gl.TEXTURE_MIN_FILTER, gl.NEAREST );
gl.texParameteri ( gl.TEXTURE_CUBE_MAP,
gl.TEXTURE_MAG_FILTER, gl.NEAREST );
}

 Khai báo CubeTexture trong Shader.

uniform samplerCube cubeSampler;
--------------0------------
textureCube(cubeSampler,normal ); //được tính theo
vertexNormal

 Sử dụng trong chương trình

gl.activeTexture ( gl.TEXTURE0 );
gl.bindTexture ( gl.TEXTURE_CUBE_MAP, textureId );

// Set the sampler texture unit to 0

gl.uniform1i ( shaderProgram.samplerUniform, 0 );

53
5.3: Vấn đề về Picking

Nếu đã làm việc với lập trình 3D thì sẽ không lạ với kỹ thuật này. Picking
là một kỹ thuật nhận dạng được vật thể khi nhấp chuột vào vật thể đó trong
không gian 3D. Hiện tại có rất ít tài liệu nó về kỹ thuật này trong WebGL. Qua
thời gian tìm hiểu chúng tôi biết được hai phương pháp để làm được điều này.

 Sử dụng pixel color:

Quy định mỗi vật thể bên dưới sẽ có một màu sắc đơn lẻ. Ta
lấy pixel color tại vị trí nhấp chuột sau đó so sánh với màu sắc của
vật thể.
Trong WebGL hỗ trợ hàm để bạn có thể đọc pixel tại vị trí
nhấp chuột:
void readPixels(int x, int y, long width, long height,
enum format, enum type, Object pixels)
Có thể đọc thêm qua website:
http://mr-bucket.co.uk/Business/Project/OriginalPick.html

 Sử dụng tọa độ:

Bao vật thể với một không gian khác ví dụ như lập phương
hay khối cầu rồi tính toán tọa độ của trên lập phương hay khối cần
đó. Cách này chúng tôi không tìm thấy tài liệu hướng dẫn nào trên
WebGL và ngay cả OpenGL ES nhưng trong phiên bản 1.0 của
OpenGL thì có hỗ trợ những phương thức để thực hiện theo cơ chế
này.

5.4: Lựa chọn thƣ viện tính toán trên ma trận

Khi bắt đầu lập trình WebGL chúng ta sẽ gặp phải một vấn đề về tính toán
ma trận - một điều không thể thiếu khi lập trình 3D. Vì đây là một công nghệ
mới nên không có nhiều hướng dẫn cho việc này. Thực tế trong vài tháng tìm
hiểu về WebGL chúng tôi chỉ dựa vào một trang duy nhất là
http://learningwebgl.com/. Nhưng trang này có một vấn đề là khi trong hướng
dẫn và source code sử dụng hai thư viện tính toán ma trận khác nhau.

Hai thư viện được dùng trên website này là: glMatrix.js(web) và
sylvester.js(source code). Thư viện glMatrix.js có nhiều hỗ trợ và đơn giản hơn
so với sylvester.js. Đây là một vấn đề không lớn, nhưng cần chú ý để tránh nhầm
lẫn.

54
 Chƣơng 6

Kết luận

Những kết quả và kinh nghiệm đạt được.

55
Chƣơng 6: Kết luận
6.1: Kết quả đạt đƣợc của dự án

6.1.1: Nhận xét chung về kết quả đạt đƣợc

Sau những gì đã tìm hiểu và nắm bắt được về công nghệ WebGL chúng tôi
đã triển khai những chương trình từ đơn giản nhằm mục đích ví dụ cho những kỹ
thuật mà chúng tôi học được đến những chương trình phức tạp – chương trình
mô phỏng một phòng trưng bày xe hơi thể thao Car’ ShowRoom. Để tăng cường
tính năng đồ họa cho chương trình, chúng tôi cũng đã nghiên cứu rất nhiều về
các thuật toán trên Vertex Shader và Pixel Shader như per-fragment lighting,
shadow, noise … Đồng thời cũng nghiên cứu các kỹ thuật tính toán tương tác
người sử dụng như biến đổi tọa độ vertex, những thao tác quay, di chuyển vật thể
và kỹ thuật picking. Đến khi viết tài liệu này thì chúng tôi cũng đạt hơn 90% kế
hoạch ban đầu cả về các kỹ thuật dựng đối tượng và chương trình phát triển sau
cùng.

Về vấn đề ngôn ngữ, chúng tôi hiểu rõ hơn về những ngôn ngữ lập trình
HTML5, Javascript, CSS… cho đến ngôn ngữ trên shader như Shading
Language.

Sau đây là những gì mà chúng tôi đạt được và chưa đạt được trong thời
gian tìm hiểu nghiên cứu về công nghệ mới này.

6.1.2: Ƣu điểm

Tìm hiểu và nắm bắt được những kỹ thuật sau:

 Dựng không gian 3D
 Dựng đối tượng 3D
 Dựng một camera
 Texturing
 Lighting
 Blending
 Stenciling
 Picking

Xây dựng một phòng trưng bày xe hơi thể thao Car’ ShowRoom bao gồm
các chức năng sau:

 Vật thể trưng bày

o Hiển thị các kệ trưng bày.
o Hiển thị các những chiếc xe trưng bày.
o Hiển thị laptop trình bày thông tin.
o Hiển thị người đi lại.

56
 o Hiển thị không gian trưng bày.

 Người xem di chuyển

o Camera đại diện cho người xem di chuyển.
 Sử dụng phím để di chuyển camera.
 Có thể xoay camera theo nhiều hướng khác
nhau.

 Xem thông tin các xe

o Người xem có thể click chuột vào những laptop trong
không gian trưng bày để xem thông tin của những chiếc xe.

 Quay mô hình xe
o Hiển thị thông tin xe cùng với mô hình xe. Có thể dùng
chuột để quay những mô hình xe này.

6.1.3: Khuyết điểm

Vấn đề bộ nhớ: vấn đề bộ nhớ vẫn chưa giải quyết tốt, khi render quá
nhiều vật thể chương trình sẽ load chậm.

Environment Mapping: chưa load được không gian sử dụng kỹ thuật

texture CubeMap.

Chưa khai thác được hết các kỹ thuật render.

6.2: Hƣớng phát triển

Khắc phục những hạn chế còn tồn tại.

Triển khai hệ thống phức tạp hơn: phòng triển lãm, website trưng bày nội
thất, các khu đô thị mới, các dự án nhà ở cao cấp, khu vui chơi giải trí …

Phát triển Game trên Web.

Xây dựng thư viện 3D tiện lợi hơn cho phát triển 3D dựa trên HTML5.

Xây dựng website tương tác người dùng qua thiết bị thực tế ảo.

57
Phụ lục

1. Chuyển tập tin .obj sang tập tin .json.

<html>
<head>
<script type="text/javascript">
function loadObj(url)
{
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
processLoadObj(req) };
req.open("GET", url, true);
req.send(null);
}
function processLoadObj(req)
{
if (req.readyState == 4) {
doLoadObj(req.responseText);
}
}
function doLoadObj(text)
{
vertexArray = [ ];
normalArray = [ ];
textureArray = [ ];
indexArray = [ ];

var vertex = [ ];
var normal = [ ];
var texture = [ ];
var facemap = { };
var index = 0;
var lines = text.split("\n");
for (var lineIndex in lines) {
var line = lines[lineIndex].replace(/[ \t]+/g, "
").replace(/\s\s*$/, "");

// ignore comments
if (line[0] == "#")
continue;

var array = line.split(" ");

if (array[0] == "v") {
// vertex
vertex.push(parseFloat(array[1]));
vertex.push(parseFloat(array[2]));
vertex.push(parseFloat(array[3]));
}
else if (array[0] == "vt") {

58
 // normal
texture.push(parseFloat(array[1]));
texture.push(parseFloat(array[2]));
}
else if (array[0] == "vn") {
// normal
normal.push(parseFloat(array[1]));
normal.push(parseFloat(array[2]));
normal.push(parseFloat(array[3]));
}
else if (array[0] == "f") {
// face
if (array.length != 4) {
//obj.ctx.console.log("*** Error: face
'"+line+"' not handled");
continue;
}

for (var i = 1; i < 4; ++i) {

if (!(array[i] in facemap)) {
// add a new entry to the map and
arrays
var f = array[i].split("/");
var vtx, nor, tex;

if (f.length == 1) {
vtx = parseInt(f[0]) - 1;
nor = vtx;
tex = vtx;
}
else if (f.length = 3) {
vtx = parseInt(f[0]) - 1;
tex = parseInt(f[1]) - 1;
nor = parseInt(f[2]) - 1;
}
else {
//obj.ctx.console.log("***
Error: did not understand face '"+array[i]+"'");
return null;
}

// do the vertices
var x = 0;
var y = 0;
var z = 0;
if (vtx * 3 + 2 < vertex.length) {
x = vertex[vtx*3];
y = vertex[vtx*3+1];
z = vertex[vtx*3+2];
}
vertexArray.push(x);
vertexArray.push(y);
vertexArray.push(z);

// do the textures
x = 0;
y = 0;
if (tex * 2 + 1 < texture.length) {
x = texture[tex*2];
y = texture[tex*2+1];
}
textureArray.push(x);
textureArray.push(y);
// do the normals
x = 0;

59
 y = 0;
z = 1;
if (nor * 3 + 2 < normal.length) {
x = normal[nor*3];
y = normal[nor*3+1];
z = normal[nor*3+2];
}
normalArray.push(x);
normalArray.push(y);
normalArray.push(z);
facemap[array[i]] = index++;
}

indexArray.push(facemap[array[i]]);
}
}
}
result = {};
result["vertexPositions"] = vertexArray;
result["vertexNormals"] = normalArray;
result["vertexTextureCoords"] = textureArray;
result["indices"] = indexArray;;

document.write(JSON.stringify(result));
}
</script>
</head>

<body onload="loadObj('*.obj');">
</body>
</html>

2. Cài đặt WebGL

2.1. Sự tƣơng thích của WebGL trên các trình duyệt

WebGL được hỗ trợ trên nhiều trình duyệt khác nhau ngoài IE.
Ở đây, ta sẽ nói về cách kích hoạt sử dụng WebGL trên một số
trình duyệt quen thuộc. Chỉ cần download phiên bản trình duyệt
thích hợp cho hệ thống của chúng ta. Và điều quan trọng là chúng
ta đang sử dụng hệ điều hành nào?

 Windows: trước tiên ta cần có Directx runtime được

cài đặt vào hệ thống. Có thể download tại website của
microsoft. Sau đó, cài đặt Chromium hoặc Firefox, tùy vào trình
duyệt nào chúng ta thích sử dụng hơn. Opera cũng có thể thiết
đặt WebGL, thế nhưng tính ổn định không cao và chỉ hoạt động
với những card đồ họa hỗ trợ OpenGL 2.0 trở lên.

 Macintosh: nếu chúng ta đang

chạy Snow Leopard (OS X 10.6), mọi thứ sẽ tốt, nhiều
60
lời khuyên chúng ta nên sử dụng phiên bản phát
triển của WebKit, mà sẽ chạy như là một phiên bản khác
củaSafari. Nếu chúng ta đang chạy Leopard (OS X 10.5), vậy thì
chúng ta sẽ không thể sử dụng là phiên bản của WebKit, nhưng
chúng ta có thể chạy hoặc Firefox hoặc Chromium.

 Linux: trong hệ điều hành Linux, có khá nhiều card

đồ họa không làm việc tương thích với WebGL.
Nếu chúngta đã có đồhọa ATI hoặc Nvidia, và trình điều khiển
mới, hệ thống sẽ làm việc tốt với cả Firefox hoặc Chrome.

Nếu chúng ta đang sử dụng card đồ họa Intel, việc render hình
ảnh sẽ chậm hơn và chúng ta sẽ gặp nhiều rắc rối trong việc sử
dụng WebGL. Nếu sử dụng Firefox hay Chromium, có lẽ cả 2
trình duyệt này vẫn không thể chạy được với cấu hình chuẩn
ban đầu. Để sử dụngphần mềm dựng hình trên Linux, bạn cần
phải chắc chắn rằng Mesa được cài đặt (chúng ta chỉ có thể có
được phiên bản mới nhất bằng cách sử dụng distro’s package
manager) và sau đó chúng ta có thể dùng trình duyệt
Firefox mới nhất với một thiết lập thêm vài thuộc tính nữa để
có thể chạy được WebGL. Cho đến nay, nói chung đây là một
quá trình hơi rắc rối khi ta muốn sử dụng WebGL trên Linux.

Hình p.1: Đồ họa trên Linux

61
2.2. Cài đặt trên Firefox

Một phiên bản được cho là không mấy ổn định của Firefox
được gọi là Minefield. Phiên bản này được cập nhật mỗi tối và
nó thật sự trở nên tốt hơn nhiều cho đến bây giờ. Hiện tại, em
đang sử dụng phiên bản này để duyệt các website chạy WebGL
và vẫn chưa thấy xảy ra lỗi.
Để tải Minefield:
 Vào link
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-
trunk/ và chọn phiên bản phù hợp với hệ thống của mình.
Có rất nhiều phiên bản ở đây để chúng ta lựa chọn, nếu
muốn sử dụng phiên bản mới nhất thì phải tìm phiên bản có
số lớn nhất đứng sau chữ “b”. Ví dụ như firefox-4.0b11…

Hình p.2: Cài đặt trên Firefox

 Cài đặt vào máy

 Khởi động Minefield

 Đánh vào khung địa chỉ “about:config”

 Lọc cho từ “webgl”

 Thiết đặc thuộc tính “webgl.enabled_for_all_sites” về “true”

62
Từ đây, chúng ta có thể duyệt các website có WebGL trên Firefox.

Hình p.3: WebGL trên FireFox

2.3. Cài đặt trên Safari

Safari chỉ hỗ trợ WebGL trên Macs sử dụng hệ điều hành

Snow Leopard (OS X 10.6); Nếu chúng ta đang sử dụng
Leopard (10.5), Windows hay Linux, thì chúng ta sẽ phải dùng
Firefox hay Chromium.

Nếu chúng ta sử dụng Snow Leopard, để chạy được WebGL,

bạn cần:

 Chắc chắn rằng đang sử dụng phiên bản 4 của Safari.

 Download và cài đặt The WebKit nightly build.

 Khởi động một Terminal và chạy lệnh như sau:

defaults write com.apple.Safari WebKitWebGLEnabled

-bool YES

 Chạy ứng dụng WebKit

63
 Hình p.4: WebGL trên Safari

2.4. Cài đặt trên Chromium

Cách thức mà các nhà phát triển Chrome đang làm thì
khuyến khích chúng ta sử dụng WebGL trong Chrome. Nếu
chúng ta đang làm việc với WebGL thì nên sử dụng bản “nightly
build” của Chromium, đây là trình duyệt mã nguồn mở dựa trên
Chrome.
 Cài đặt cho Windows:
 Đến địa chỉ:
http://build.chromium.org/f/chromium/continuou
s/win/LATEST

 Download chrome-win32.zip, sau đó giải nén và

chạy file chrome.exe

 Cài đặt cho Macintosh:

 Đến địa chỉ:

http://build.chromium.org/f/chromium/continuou
s/mac/LATEST

 Download chrome-mac.zip, sau đó giải nén. Mở

cửa sổ Terminal, sau đó vào thư mục đã giải nén

64
  Phải chắc chắn rằng chúng ta vẫn chưa chạy
Chrome.

 Chạy dòng lệnh sau:

./Chromium.app/Contents/MacOS/Chromi

 Cài đặt cho Linux

 Nếu chúng ta đang sử dụng Linux 32bit, tới địa

chỉ
http://build.chromium.org/f/chromium/continuou
s/linux/LATEST/ và download chrome-linux.zip.

 Nếu chúng ta đang sử dụng Linux 64bit, tới địa

chỉ:
http://build.chromium.org/f/chromium/continuou
s/linux64/LATEST/ và download chrome-
linux.zip

 Giải nén, vào thư mục giải nén trong cửa sổ

Terminal

 Chắc chắn rằng chúng ta vẫn chưa chạy Chrome

 Chạy dòng lệnh sau:

./chromium

Hình p.5: WebGL trên Chromium

65
Tài liệu tham khảo:
 Ebooks:
[1]. Aaftab Munshi, Dan Ginsburg, Dave Shreiner, “OpenGL ES
2.0 Programing Guide”.
[2]. James M. Van Verth, Lars M. Bishop, “Essential Mathematics
for Games and Interactive Application”.
[3]. Khronos Group (2011), “ WebGL 1.0 API Quick Reference”.
[4]. Randi J. Rost (2006), “OpenGL Shading Language, Second
Edition”.

 Websites:
[5]. CubeMap, http://developer.nvidia.com/.
[6]. Picking,
http://mr-bucket.co.uk/Business/Project/OriginalPick.html.
[7]. The Lessons, http://learningwebgl.com/.
[8]. WebGL, http://www.scribd.com/doc/44427106/WebGL.
[9]. WebGL Application, http://www.chromeexperiments.com/.
[10]. WebGL Tutorial,
http://www.rozengain.com/blog/2010/02/22/beginning-webgl-
step-by-step-tutorial/.

66