Phương pháp chuyển đổi cấu trúc đồ họa webgl

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

Nguyễn Tiến Trung

PHƯƠNG PHÁP CHUYỂN ĐỔI CẤU TRÚC
ĐỒ HỌA WEBGL

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin

HÀ NỘI - 2014


ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

Nguyễn Tiến Trung

PHƯƠNG PHÁP CHUYỂN ĐỔI CẤU TRÚC
ĐỒ HỌA WEBGL

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin

Cán bộ hướng dẫn: PGS.TS Nguyễn Việt Hà

Cán bộ đồng hướng dẫn: ThS. Vũ Quang Dũng

HÀ NỘI - 2014

VIETNAM NATIONAL UNIVERSITY, HANOI
UNIVERSITY OF ENGINEERING AND TECHNOLOGY

Nguyen Tien Trung

WEBGL STRUCTURE CONVERSION

Major: Information Technology

Supervisor: Assoc. Prof. Dr Nguyen Viet Ha

Co-Supervisor: MSc. Vu Quang Dung

HA NOI - 2014


TÓM TẮT

Tóm tắt: Ngày nay, nhu cầu sử dụng đồ họa 3D trên nền web của các doanh nghiệp trong việc
hiển thị trực quan hóa dữ liệu ngày càng tăng. Cùng với đó, công nghệ đồ họa 3D cũng ngày một
phát triển điển hình là công nghệ WebGL cho phép trình duyệt web có thể tận dụng được các
thiết bị phần cứng xử lý đồ họa 3D mà không cần cài đặt thêm phần mềm nào của bên thứ 3. Tuy
nhiên, trong môi trường doanh nghiệp tồn tại những hệ thống cũ không phải lúc nào cũng có thể
cập nhật và hỗ trợ những kỹ thuật đồ họa tiên tiến như WebGL, đồng thời việc sử dụng WebGL
cũng đòi hỏi thiết bị phần cứng đủ mạnh trong việc xử lý đồ họa, điều này có thể gây quá tải đối
với những hệ thống cũ có cấu hình tương đối lạc hậu. Vì vậy một nhu cầu đặt ra là chuyển đổi
việc điều khiển, xử lý và hiển thị đồ họa trên hệ thống hiện đại sang hệ thống cũ.
Trong khóa luận này, tôi đề xuất việc chuyển đổi cấu trúc đồ họa WebGL sang một cấu trúc
đồ họa khác mà các hệ thống cũ có thể đáp ứng. Cụ thể, tôi thực hiện việc chuyển đổi WebGL

sang sử dụng công nghệ Flash kết hợp với phương pháp phân lớp dữ liệu. Mục tiêu là có thể dùng
Flash để có thể xây dựng đồ họa 3D tương ứng như đồ họa 3D trên WebGL và áp dụng triển khai
được trên các hệ thống lạc hậu.
Từ khóa: chuyển đổi, đồ họa 3D, phân lớp dữ liệu, flash.

4


ABSTRACT
Absctract: Nowadays, the demand for web-based 3D graphics of businesses in the data
visualization is increasing. Along with that, the 3D graphics technology is developing and
WebGL technique allows web browsers can take advantages of the 3D graphics hardware without
the need to install additional third-party softwares public. However, the enterprise environment
exists the previous systems that is not always able to updates and supports modern graphics
technologies such as WebGL. Using WebGL also requires enough strong hardware in the
graphics processor, this can cause overloading the old system. Thus need a solution to convert,
process and display 3D graphics from modern system to old system.
In this thesis, I propose a method which can convert the WebGL structure to other structure
that can be supported in previous system. This propose method using Flash technology that has
long been supported across browsers with data layers method. The goal is to be able to use Flash
to build 3D graphics respectively as on WebGL 3D graphics and be applied on previous system.
Keywords: convert, graphic 3D, data layers, flash.

5


Lời cảm ơn
Lời đầu tiên, tôi xin bày tỏ lòng biết ơn sâu sắc nhất tới PGS.TS. Nguyễn Việt Hà và
ThS.Vũ Quang Dũng đã tận tình hướng dẫn, giúp đỡ tôi trong suốt quá trình thực hiện
khóa luận tốt nghiệp này.

Tôi xin chân thành cảm ơn các thầy, cô đã tạo điều kiện thuân lời cho tôi trong quá
trình học tập, rèn luyện và nghiên cứu tại trường Đại học Công nghệ.
Tôi cũng xin gửi lời cảm ơn tới các anh chị và các bạn sinh viên tại phòng thí
nghiệm công nghệ phần mềm Toshiba-Coltech, đặc biệt là bạn Vũ Danh Việt, anh
Nguyễn Hoàng Khanh đã giúp đỡ, hỗ trợ tôi trong quá trình xây dựng hệ thống và thực
nghiệm.
Tôi gửi lời cảm ơn tới các bạn trong lớp K55CC và K55CLC đã ủng hộ, khích lệ,
giúp đỡ và luôn sát cánh bên tôi trong suốt quá trình học tập, rèn luyện tại trường.
Và cuối cùng, tôi xin gửi lời cảm ơn tới gia đình, người thân và bạn bè – những
người luôn ở bên tôi những lúc khó khăn nhất, luôn động viên tôi, khuyến khích tôi trong
cuộc sống cũng như học tập, công việc.
Tôi xin chân thành cảm ơn!

Sinh viên

Nguyễn Tiến Trung

6


Lời cam đoan
Tôi xin cam đoan các kết quả đạt được trong khóa luận này do tôi thực hiện dưới sự
hướng dẫn của PGS.TS. Nguyễn Việt Hà và ThS.Vũ Quang Dũng.
Tất cả các tham khảo từ những nghiên cứu liên quan đều được nêu nguồn gốc một
cách rõ ràng từ danh mục tài liệu tham khảo trong khóa luận. Khóa luận không sao chép
tài liệu, công trình nghiên cứu của người khác mà không chỉ rõ về mặt tài liệu tham khảo.
Các kết quả thực nghiệm của khóa luận đều được tiến hành thực nghiệm và thống kê
từ kết quả thực tế.
Sinh viên

Nguyễn Tiến Trung

7


Mục lục

Chương 4.

8


Danh sách hình vẽ

Danh sách bảng

9


4 MỞ ĐẦU
Ngày nay, công nghệ đồ họa đang có sự phát triển nhanh chóng và vượt bậc. Trong
đó, đồ họa 3D là một điển hình. Đồ họa 3D giúp hiển thị thông tin một cách trực quan, có
chiều sâu và chi tiết so với đồ họa 2D truyền thống. Đồ họa 3D được dùng nhiều trong
các lĩnh vực như thiết kế, xây dựng, game… cho thấy được tầm quan trọng của nó. Hiện
nay, có khá nhiều công nghệ xây dựng cũng như hỗ trợ đồ họa 3D trên trình duyệt như
X3DOM, WebGL (three.js, scenejs…) [1] hay như cả HTML5 – một chuẩn ngôn ngữ
mới. Cùng với đó là sự phát triển của Internet cũng như các trình duyệt web hỗ trợ các
công nghệ đồ họa trên. WebGL là một công nghệ web mới cho phép trình duyệt Web tận
dụng được các thiết bị phần cứng xử lý đồ hoạ 3D mà không cần cài đặt thêm phần mềm
nào của bên thứ 3. Với việc WebGL đang ngày càng được hỗ trợ phổ biến trên các trình

duyệt như Chrome, FireFox,... việc xử lý đồ hoạ 3D trên trình duyệt Web đang trở nên
khả thi hơn. Tuy nhiên, trong môi trường ở một vài doanh nghiệp vẫn tồn tại những hệ
thống cũ không phải lúc nào cũng có thể cập nhật và hỗ trợ những kỹ thuật đồ họa mới
nhất mà WebGL là một trong số đó, đồng thời việc sử dụng WebGL cũng đòi hỏi thiết bị
phần cứng đủ mạnh trong việc xử lý đồ họa, có thể gây quá tải đối với những hệ thống cũ
có cấu hình tương đối lạc hậu. Trong khi đó nhu cầu công việc sử dụng các giao diện đồ
họa ngày càng nhiều nên vấn đề cần đặt ra ở đây là cần có một kỹ thuật để có thể chuyển
đổi điều khiển, hiển thị của hệ thống hiện đại sang những hệ thống cũ ở trên để có thể đáp
ứng được với nhu cầu công việc.
Do những đặc tính như vậy, với mong muốn sử dụng đồ họa 3D trên những hệ thống
đã đề cập ở trên thì một yêu cầu được được đặt ra là tìm ra một phương chuyển đổi cấu
trúc đồ họa WebGL sang cấu trúc đồ họa khác mà có thể được hỗ trợ bên phía Client. Nội
dung đề tài: “Phương pháp chuyển đổi cấu trúc đồ họa WebGL” là nhằm hướng tới việc
có thể tìm ra phương pháp chuyển đổi cấu trúc đồ họa WebGL và dựa trên phương pháp
này xây dựng nên một chương trình thử nghiệm. Trong khóa luận này, tôi trình bày hai
hướng tiếp cận khác nhau để giải quyết vấn đề là phương pháp xử lý mã WebGL trên
Server thông qua chạy, bóc tách các frame và phương pháp chuyển đổi WebGL dùng
Flash. Bên cạnh đó tôi cũng sử dụng kết hợp phương pháp phân lớp dữ liệu chia việc
cung cấp, xử lý và hiển thị dữ liệu chia thành các tầng (layers) tách biệt với các chức năng

10


khác nhau. Sử dụng các tầng dưới làm thành phần nền cung cấp dữ liệu liên quan cho
tầng phía trên.
Các phần còn lại của Khóa luận gồm có cấu trúc như sau:
Chương 2 – Cơ sở lý thuyết và công nghệ: Giới thiệu những công nghệ, cơ sở lý
thuyết được áp dụng trong chương trình này.
Chương 3 – Phương pháp chuyển đổi đồ họa WebGL: phát biểu bài toán, trình
bày cụ thể phương pháp giải quyết theo hai hướng tiếp cận đã đề cập ở trên, đánh giá và

lựa chọn giải pháp phù hợp; nêu lên mô hình phân lớp dữ liệu.
Chương 4 – Thực nghiệm: Xây dựng chương trình dựa trên phương pháp đã chọn
từ chương trước đó: giới thiệu chương trình thực nghiệm, mô tả kiến trúc, thành phần,
phương pháp triển khai thực nghiệm. Cụ thể tại phần này, tôi sẽ dựa trên một chương
trình sử dụng WebGL đã có là chương trình “Kỹ thuật hiển thị dữ liệu trên bản đồ” [2] để
phát triển chương trình mô phỏng việc chuyển đổi. Đồng thời sử dụng dịch vụ cung cấp
dữ liệu bản đồ của nhóm bạn Vũ Danh Việt [3] để thực hiện phân lớp dữ liệu.
Chương 5 – Kết luận: Tóm lược những kết quả của Khóa luận, những gì đạt được
và hạn chế triển vọng và hướng phát triển trong tương lai.

11


Chương 5. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
5.1. Công nghệ Web, Json
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu, có cấu trúc được thiết
kế để tạo nên các trang web với các thông tin được trình bày trên World Wide Web.
Javascript là ngôn ngữ kịch bản cho nền web, được gửi đến và thực hiện ngay trên trình
duyệt khi trang web được tải. HTML là một ngôn ngữ có cấu trúc dùng kết hợp với
Javascript và CSS (Cascading Style Sheets) có thể xây dựng nên nhũng trang web động
có nội dung phong phú với hiệu ứng và giao diện người dùng tốt hơn. Ngoài ra, HTML
còn cùng với Javascript có thể hỗ trợ các file cũng như chương trình Flash được lồng vào
các thẻ cấu trúc của trang web.
Json (Javascript Object Notation) [4] là một chuẩn định dạng dữ liệu phổ biến
thường được dùng trong việc lưu trữ cũng như truyền dữ liệu trung gian giữa máy chủ và
máy khách. JSON hiện nay đã được Flash Player hỗ trợ trong việc tương tác, xử lý dữ liệu
theo cách đơn giản, không quá rườm rà.

5.2. NodeJS, chuẩn H264
NodeJS [5] là một nền tảng được xây dựng trên Chrome JavaScript runtime giúp tạo

nên những ứng dụng mạng một cách nhanh chóng và có khả năng mở rộng dễ dàng, phù
hợp với những hệ thống truyền tải dữ liệu thời gian thực như video. NodeJS có thể được
dùng để xây dựng nên những chương trình có thể chạy Javascript ngay trên Server. Đồng
thời NodeJS có nhiều module khác nhau hỗ trợ trong việc thực thi mã WebGL.
Chuẩn H264 [6] là một chuẩn mã hóa/giải mã và định dạng video được sử dụng
rộng rãi để ghi, nén, chia sẻ video. H264 có thể được sử dụng thông qua các module mà
NodeJS cung cấp.

5.3. Công nghệ Adobe Flash Player, ngôn ngữ Actionscript 3.0
Adobe Flash Player [7] là phần mềm miễn phí của Adobe, hỗ trợ đa nền tảng từ PC
cho đến mobile cho phép tương tác với nội dung và các ứng dụng trên nền web chủ yếu là
các nội dung đa phương tiện như ảnh, video, game. Flash Player tương thích và chạy các
file flash định dạng SWF hay FLV. Flash Player được chạy như một phần mềm cài độc
lập hay gần đây được tích hợp sẵn dưới dạng plug-in trong các trình duyệt web phổ biến
12


như Chrome, Firefox, Opera, Internet Explorer, Safari. Kể từ phiên bản Flash Player 11
đã cung cấp Stage 3D là một giao diện lập trình ứng dụng (Application Programming
Interface – API) có chức năng tối ưu hóa cho phần cứng trong hệ thống của người dùng,
tận dụng năng lực tính toán của vi xử lý đồ họa (Graphic Processing Unit – GPU) để tối
ưu hóa nội dung được trình diễn, áp dụng cho cả đồ họa 2D lẫn 3D. Điều này sẽ giúp đẩy
mạnh hiệu suất trình diễn và mang lại hình ảnh chi tiết hơn cho cả nội dung 2D lẫn 3D.
ActionScript 3.0 [8] [9] là một ngôn ngữ lập trình hướng đối tượng mạnh mẽ dựa
trên ECMAScript - ngôn ngữ lập trình tiêu chuẩn hóa quốc tế cho kịch bản, khá giống với
Javascript. Actionscript 3 kế thừa các phiên bản trước đó về sức mạnh và sự linh hoạt,
tiếp tục cải thiện hiệu suất, giúp dễ dàng phát triển ứng dụng phức tạp với tập hợp dữ liệu
lớn theo hướng đối tượng và tận dụng việc tái sử dụng mã. Actionscript 3 được thực hiện
bởi ActionScript Virtual Machine (AVM) trong Flash Player và với Actionscript 3, các
nhà phát triển có thể đạt được năng suất và hiệu suất tuyệt vời với nội dung và các ứng

dụng trên Flash Player. Actionscript 3 hướng tới mục tiêu an toàn, đơn giản, hiệu suất
cao. Actionscript 3 bao gồm hai phần: phần ngôn ngữ cốt lõi và Flash Player API. Ngôn
ngữ cốt lõi xác định các thành phần xây dựng cơ bản của ngôn ngữ lập trình như cú pháp
câu lệnh, biểu thức, điều kiện, vòng…. Flash Player API được tạo thành từ các lớp mà đại
diện và cung cấp truy cập chức năng Flash Player cụ thể.

5.4. Adobe Flex SDK, thư viện đồ họa Away3D
Flex SDK [10] [11] là bộ công cụ hỗ trợ lập trình miễn phí bao gồm Flex
Framework (thành phần lớp thư viện) và trình biên dịch Flex cho phép xây dựng nên các
ứng dụng trên nền web cũng như trên Desktop. Flex hiện gồm 2 thành phần chính là
MXML (Macromedia XML) và ActionScript 3.0. Sử dụng Flex SDK khi biên dịch tạo ra
file SWF chạy trên Flash Player mà ta hoàn toàn có thể nhúng trực tiếp vào trong HTML
qua Javascript.
Away3D [12] là một graphic engine 3D mã nguồn mở, được viết cho nền tảng
Flash, sử dụng ngôn ngữ AS3, chạy trên các trình duyệt có sử dụng Flash Player.
Away3D có thể kế hợp với Flex SDK để có thể tạo ra những ứng dụng web với đồ họa
3D. Away3D có thể được sử dụng để làm cho các mô hình 3D và thực hiện khác nhau
tính toán 3D khác. Phiên bản mới nhất - Away3D 4 đã được nâng cấp để hỗ trợ mới nhất
của Flash Player 11 với đầy đủ GPU tăng tốc đồ họa, giải phóng CPU cho các nhiệm vụ
13


tính toán khác. Từ đó đơn vị xử lý đồ họa có khả năng dựng hình nhiều hơn cho phép chi
tiết và chất lượng hơn. Hình dưới đây minh họa cho việc vẽ biểu đồ 3D bằng Away3D.

Hình 2.1 Ví dụ về đồ họa 3D xây dựng với Away3D

5.5. Open Street Map
Open Street Map [13] là một dự án bản đồ mở, cho phép tất cả mọi người cùng đóng
góp, tùy chỉnh, để xây dựng dữ liệu bản đồ thế giới chi tiết tới mọi vùng miền. Khác với

Google Map, Open Street Map cung cấp trực tiếp dữ liệu bản đồ dưới nhiều định dạng, và
cho phép người dùng sử dụng mà không đòi hỏi thông qua API hay ràng buộc hạn chế.
Một trong số những định dạng bản đồ mà Open Street Map cung cấp là ảnh bản đồ tĩnh
(Static Map Tile). Định dạng này phù hợp để vẽ đồ thị lên trên vì bản đồ khi đó là một
phần của không gian đồ họa.

14


Hình 2.2 Bản đồ OpenStreetMap khu vực Hà Nội

5.6. OpenLayers, Geo Server
OpenLayers [14] là một thư viện thuần Javascript hỗ trợ cho việc hiển thị dữ liệu
bản đồ trên hầu hết các trình duyệt web mà không phụ thuộc vào phía server. OpenLayers
cài đặt một tập các hàm API JavaScript hỗ trợ việc xây dựng các ứng dụng bản đồ trên
nền web, cũng tương tự như các hàm API của Google Maps và MSN MSN Virtual Earth,
nhưng với sự khác biệt quan trọng – OpenLayers là phần mềm mã nguồn mở, được phát
triển bởi cộng đồng phần mềm mã nguồn mở. Có hai khái niệm quan trong cần được hiểu
rõ khi làm việc với OpenLayers để hiện xây dựng bản đồ:
- Map: Map là nơi để lưu giữ các thông tin về hệ quy chiếu, đơn vị… của bản đồ.
- Layers: Bên trong bản đồ, dữ liệu được hiển thị thông qua Layer. Một Layer là một
nguồn dữ liệu, nó cho biết OpenLayers nên yêu cầu và hiển thị dữ liệu như thế nào. Trong
một Map có thể chứa một hoặc nhiều “Layer” chồng lên nhau. Dữ liệu được hiện thị trong
một Layer có thể là dạng raster hoặc vector.
OpenLayers cung cấp một tập các điều khiển (controls) cho lập trình viên có các
thao tác linh hoạt trên bản đồ. Các điều khiển là các lớp trong OpenLayers, chúng cho

15

phép định nghĩa các trạng thái, hành vi của bản đồ. Hoặc hiển thị các thông tin bổ sung
cho người dùng. Các điều khiển là giao diện chính cho phép tương tác với bản đồ.
Geo Server [15] là một dự án mã nguồn mở, phát triển trên ngôn ngữ Java.
Geoserver cho phép người dùng chia sẻ, sửa đổi các dữ liệu bản đồ. Geoserver cho phép
lấy nguồn dữ liệu từ nhiều nguồn, và cho phép các ứng dụng khác truy cập thông qua giao
thức HTTP. Geoserver hỗ trợ nhiều định dạng dữ liệu bản đồ chuẩn như: Open Geospatial
Consortium (OGC) Web Feature Service (WFS) and Web Coverage Service (WCS), Web
Map Service (WMS).

16


4 PHƯƠNG PHÁP CHUYỂN ĐỔI ĐỒ HỌA WEBGL
Phương pháp chuyển đổi đồ họa ở đây là việc chuyển đổi mã WebGL sang một mã
khác và việc chuyển mã là được thực hiện tại Server và việc xử lý cũng như hiển thị đồ
họa là được thực thi tại phía Client. Hình 3.1 biểu diễn cái nhìn tổng quan của việc
chuyển đổi cấu trúc mã WebGL.

Hình 3.3 Tổng quan về việc chuyển đồi mã WebGL
Cụ thể khi mã WebGL được sinh ra tại Server thì thông qua phương pháp chuyển
đổi sẽ cho ra một cấu trúc mã khác ở đây tôi gọi tạm đó là mã kết quả mà khi được gửi
đến cho Client không có hỗ trợ WebGL hoàn toàn có thể dễ dàng xử lý và hiển thị đồ họa
trên đó.
Trong quá trình tìm hiểu tôi tập trung vào hai phương pháp sau:
- Xử lý mã WebGL trên Server thông qua chạy và bóc tách các frame, chuyển các frame
này sang mã định dạng H264 và gửi về cho Client hiển thị.
- Chuyển đổi sử dụng mã WebGL sang sử dụng Flash (Actionscript 3.0). Thay vì sử dụng
mã WebGL để xây dựng đồ họa và gửi về cho Client thực thi thì ta sẽ sử dụng Flash để
viết nên chương trình đồ họa mới dựa trên thành phần cấu trúc của chương trình WebGL
và gửi về cho Client mã Actionscript (Flash) để hiển thị.

5.7. Xử lý mã WebGL trên Server
4.1.1. Mô hình hóa phương pháp
Thông thường các mã WebGL được gửi từ Server tới Client và được thực thi tại
đây. Do đó việc đầu tiên trong toàn bộ bài toán là thực hiện các mã WebGL ngay trên
server nhằm tạo ra các frame rồi từ đó có thể tiến hành trích xuất các frame dưới dạng ảnh
bitmap. Với dạng ảnh bitmap ta có thể chuyển đổi chúng sang định dạng mã H264 [6] –
17


một định dạng phổ biến đồng thời thêm vào các mã điều khiển đối với các frame. Cuối
cùng tiến hành gửi tới Client thông qua quá trình Streaming.
Như vậy đầu vào và đầu ra của bài toán được tóm tắt như sau (hình 3.1).
- Đầu vào (Input): Là các mã WebGL.
- Đầu ra (Output): Định dạng mã H264.

Hình 3.4 Mô hình tổng quát của phương pháp xủ lý mã WebGl trên Server
Trong đó:
Chạy mã WebGL trên Server
WebGL là ngôn ngữ đồ họa 3D dựa trên nền OpenGL ES 2.0 viết trên Javascript.
Trong đó WebGL API là tập các hàm Javascript được cung cấp và hỗ trợ bởi trình duyệt
web. Các hàm mà WebGL cung cấp các thành phần là các đối tượng đồ họa cùng với màu
sắc, toạ độ vị trí cùng với các góc nhìn của camera... Thông qua đó thiết lập được dữ liệu
về cấu trúc đồ họa thành các frame và gửi xuống dưới nền dưới OpenGL ES viết bằng
ngôn ngữ C trực tiếp làm việc với các phần cứng nhằm xử lý và trả về cho trình duyệt
dưới dạng các hình ảnh đồ họa. Thông thường, các mã WebGL được sinh tại và được gửi
tới Client để xử lý trên trình duyệt chứ không được xử lý trực tiếp tại Server, và chính tại
đó mã WebGL trong quá trình được xử lý thì mới tạo ra được các hình ảnh đồ họa dưới
dạng các frame. Do đó với sự phức tạp về cấu trúc của mã WebGL (gồm nhiều thành
phần dữ liệu cần xử lý) cần tới hệ thống phần cứng tốt với năng lực xử lý tính toán tốt.

Cùng với đó, như đã nói ở phần trên ở các hệ thống cũ thì việc cung cấp các điều kiện
trên là không thể, nhất là trên những trình duyệt cũ không hỗ trợ WebGL cũng như
HTML5. Tất cả những điều này khiến cho việc xử lý đồ họa bên phía Client trog hệ thống
18


là quá tải. Như vậy ở đây tôi sẽ thực hiện việc xử lý WebGL trên server nhằm tận dụng
năng lực xử lý của server và giúp giảm tải việc xử lý cho phía Client. Để làm được điều
này thì ta cũng cần một cơ chế xử lý mã WebGL tương tự như với trình duyệt nhằm sinh
ra các frame trong quá trình xử lý, render.
Bóc tách các frame
Bình thường khi mã WebGL được xử lý bên trình duyệt của client sẽ sinh ra các
frame tại framebuffer. Framebuffer sẽ chứa tât cả các dữ liệu về các đỉnh, vị trí, màu sắc,
ánh sáng cũng như góc nhìn camera của frame và sẽ được gửi xuống cho phần cứng xử lý
và hiển thị thông qua thành phần DOM của trang web. Ta hoàn toàn có thể bóc tách được
các frame từ trình duyệt thông qua thành phần DOM của trang web trên gián tiếp thông
qua việc tách nội dung thông qua thành phần DOM của trang web. Qua đó ta hoàn toàn
có thể tách được các frame mỗi khi render một frame.
Khi các mã WebGL chạy trên Server và sinh ra các frame thì việc tiếp theo cần làm
là bắt được các frame đó. Ở đây tôi hướng tới việc tạo một cấu trúc DOM và cho phép mã
WebGl có thể được thực thi trong đó. Do một frame có thể được coi là các hình ảnh tĩnh
tại một thời điểm xác định nên ta có thể bắt frame thông qua việc capture ảnh. Và để làm
được thì ta cần phải truy cập được vào phần tử DOM chứa hình ảnh đó rồi ghi lại dữ liệu
thông tin chứa trong đó thành ảnh.
Mã điều khiển
Với mỗi các frame được tách ra thì sau đó hoàn toàn có thể sau đó là các thao tác
điều khiển đồ họa được thực hiện ở phía Client. Vì vậy cần thêm các mã điều khiển vào
cùng với các frame để khi chuyển về cho Client thì khi bên client có hành động điều
khiển nào thì chương trình sẽ biết frame nào phù hợp để hiển thị ngay sau đó.
Chuyển đổi các frame thành định dạng khác

Với việc thu được các frame trong bước trên ta có thể chuyển đổi sang một định
dạng khác mà có thể dễ dàng xử lý ở phía Client, ngay cả trên những trình duyệt cũ mà
H264 là một sự lựa chọn. Việc chuyển sang mã H264 cũng như là chuyển các frame thu
được sang dạng video với việc sắp xếp các frame theo thứ tự sinh ra.
Streaming

19


Kết quả chuyển đổi sang mã H264 sẽ được gửi tới Client thông qua quá trình
streaming video. Đối với bên Client sử dụng các trình duyệt web cũ ta vẫn có thể nhận
được video được streaming tới và chạy trên flash để có thể xem được video.

5.7.1. Kỹ thuật áp dụng vào mô hình
Giải pháp mà tôi đã tìm hiểu là Nodejs [5] và các module lên quan được cung cấp.
Dưới đây là cách giải quyết bài toán.
Chạy mã WebGL trên Server
Mã WebGL được viết trên Javascript nên ở đây tôi chọn một nền tảng có thể chạy
được các chương trình viết trên Javascript là NodeJS. Cụ thể Node JS có module three,
jsdom kết hợp với nhau tạo nên môi trường có thể chạy các mã WebGL.
+ Module three chứa các thư viện 3D của three.js – một dạng mã WebGl được
dùng để tạo nên đồ họa 3D. Lúc này mã WebGL ở trên Server sẽ có thể chạy được nhờ sử
dụng các thư viện đồ họa của module three. Tại đây ta có thể sử dụng đối tượng
CanvasWebGL để tiến hành thực hiện việc render tạo nên các frame có chứa đầy đủ dữ
liệu về tọa độ, màu sắc, camera của đồ họa.
+ Module jsdom được dùng để định nghĩa các phần tử W3CDOM trong các trang
web thông thường. Jsdom sẽ tạo cho ta một phép ta định nghĩa cấu trúc, các phần tử DOM
canvas như của một trang web. Đồng thời cùng với thư viện three các mã WebGL sẽ
được tổ chức chạy trong thành phần canvas này. Điều này sẽ giúp ta có thể truy cập vào
phần tử ta muốn và có thể làm tiền đề cho việc bóc tách frame dưới đây.

Bóc tách các frame
Với Node JS, có cung cấp module canvas gồm các canvasAPI đồ họa với phần dưới
là Cairo thư viện đồ họa 2D hỗ trợ nhiều thiết bị đầu ra khác nhau trong đó có đầu ra là
ảnh bitmap. Bên cạnh đó Jsdom cũng hỗ trợ canvas để có thể mở rộng các thẻ <canvas>
với canvasAPI. Việc tách frame hoạt động theo mô tả cụ thể như sau:
+ Module Jsdom ở trên cho phép ta tạo nên cấu trúc DOM mà với phần tử canvas
như của một trang web.
+ Đối tượng CanvasWebGL sẽ thi hành mã WebGL và render ra frame ở trong phần
tử canvas đã tạo ở trên.

20


+ Module canvas sẽ gọi tới thành phần canvas thông qua phương thức DomElement
và tại đây sẽ sử dụng createpngStream và createWriteStream để ghi nội dung trong phần
tử canvas tức là frame ra file ảnh.
Chuyển đổi các frame thành định dạng khác và Streaming.
+ Chuyển đổi định dạng: Hiện tại có rất nhiều các công cụ hỗ trợ chuyển đổi ảnh
bitmap sang mã H264 một trong số đó là FFMPEG. Cùng đó Node JS có cung cấp
module fluent-ffmpeg chứa API của FFMPEG có thể chuyển đổi (convert) và streaming
video lẫn audio. fluent-ffmpeg cung cấp cho đối tượng ffmpeg cho phép ta có thể chuyển
đổi định dạng ảnh sang dạng video với việc mã hóa trên mã H264 cùng với nhiều tùy
chọn về FPS hay độ phân giải.
+ Streaming: Trong NodeJs có một framework khá mạnh trong việc phát triển web
là Express. Express cho phép ta tạo nên được server với hai đối tượng req(request) và
res(respone) cùng với fluent-ffmpeg ta sẽ tạo được dòng stream thông qua phương thức
writeToStream() và gán nó cho đối tượng response. Bên phía Client đối với những trình
duyệt cũcó thể thực hiện giải mã mã H264 thông qua một trình plugin như Flash Player.

2.1.1. Đánh giá phương pháp

Kết quả đã trích xuất được các Frame tại Server, chuyển đổi định dạng H264 và
Stream về cho Client. Tuy nhiên, trong quá trình bóc tách frame rồi chuyển đổi sang mã
H264 thì vẫn cần phải có bước trung gian là xuất ra file ảnh bitmap rồi từ đó mới có thể
sử dụng module chuyển đổi. Cùng đó, việc chuyển đổi vẫn phải xuất ra file video rồi mới
từ đó tiến hành streaming. Những điều này khiến việc xử lý tách frame chậm và gây tốn
dung lượng của server do phải lưu trữ frame dưới dạng các file ảnh cũng như các file
video. Quá trình tách frame và chuyển đổi chưa thể thực hiện song song một cách liên tục.
Một việc khác nữa là mới chỉ áp dụng được cho các chương trình WebGL đơn giản,
chưa có các tương tác điều khiển và chưa có sử dụng các dữ liệu liên quan khác như cơ sở
dữ liệu nên bị hạn chế nhiều trong tính động của chương trình. Đồng thời việc thêm các
mã điều khiển tương tác cũng là vấn đề mà tôi chưa thể tìm ra giải pháp thích hợp.
Vì những lý do trên và khó khăn trong việc thực hiện mà tôi quyết định chuyển sang
tìm hiểu hướng tiếp cận thứ hai để có thể hoàn thành bài khóa luận này của tôi.

21


5.8. Phương pháp chuyển đổi dùng Flash
Phương pháp này sử dụng Flash và dùng ngôn ngữ Actionscript. Flash có hỗ trợ
nhiều các thư viện đồ họa trong đó Away3D [12] là một thư viện đồ họa 3D tương tự như
với ThreeJS [16] (WebGL).

4.1.1. Mô hình hóa phương pháp

Hình 3.5 Mô hình chuyển đổi dùng Flash
Ở đây, sử dụng cấu trúc đồ họa trên nền Flash – là công nghệ đã được áp dụng từ lâu
trên các trình duyệt, hoàn toàn có khả năng chạy được trên các hệ thống cũ. Để xác định
rõ phương pháp chuyển đổi đồ họa WebGL ta cần hiểu rõ các bước hoạt động của hệ
thống mới (sử dụng WebGL) rồi từ đó xác định các bước sử dụng Flash thay thế WebGL
và chạy chúng trên hệ thống cũ. Để làm được điều đó yêu cầu đặt ra là ta cần phân tích hệ

thống ban đầu. Vì vậy có thể coi bài toán tìm phương pháp chuyển đổi đồ họa WebGL ở
đây là bài toán phân tích hệ thống và áp dụng các kỹ thuật Flash tương ứng để thay thế
WebGL. Phương pháp chuyển đổi WebGL sẽ có những bước sau và các bước này sẽ
được trình bày ngay sau đây:
-

Bước 1: Phân tích hệ thống sử dụng WebGL theo các thành phần thiết kế và
phương pháp thực hiện của hệ thống.
Bước 2: Với mỗi thành phần đã phân tích tại bước trên xác định việc sử dụng lại
hay sử dụng các thành phần tương đương mà Flash có thể cung cấp.
Bước 3: Tiến hành chuyển đổi theo những thành phần đã xác định ở bước 2.

22


5.8.1. Phân tích hệ thống sử dụng WebGL
Việc phân tích hệ thống có thể áp dụng có thể áp dụng đối với nhiều loại chương
trình WebGL với các loại dữ liệu khác nhau. Trong khóa luận này tôi sẽ tiến hành phân
tích hệ thống “Kỹ thuật hiển thị dữ liệu trên bản đồ” [2] và xác định cách thức thực hiện
sử dụng Flash áp dụng trên hệ thống trên với loại dữ liệu cụ thể là dữ liệu thống kê việc
sử dụng Internet và dữ liệu bản đồ.
Trong phần này tôi sẽ sử dụng tài liệu chương trình WebGL [2] đã có để phân tích.

Hình 3.6 Mô hình hệ thống sử dụng WebGL
Hệ thống mới là bài toán hiển thị dữ liệu với các yêu cầu đầu vào và đầu ra:
Đầu vào:
-

Dữ liệu biểu đồ: là dữ liệu thống kê thông thường nhưng có thêm thông tin xác
định khu vực địa lý tương ứng với số liệu đó.

Bản đồ : dữ liệu cập nhật của khu vực cần hiển thị.
Đầu ra:

-

Hiển thị biểu đồ thống kê theo từng khu vực địa lý. Cho phép thay đổi mức chi tiết
khu vực (cấp quận, cấp đường).

23


-

Hiển thị dữ liệu đa dạng: các cột biểu thị các hạng mục khác nhau, dữ liệu theo
chiều thời gian.

Biểu diễn bản đồ khớp với đồ thị, cho phép các tương tác phóng to,thu nhỏ, tăng,
giảm độ phóng dại của bản đồ, cho phép người dùng với các khung nhìn, các thao tác di
chuyển xung quanh và xem đồ thị tại các hướng khác nhau.
Hệ thống với mô hình Server – Client trong đó:
-

Server nhận yêu cầu từ Client và truy vấn tới cơ sở dữ liệu để trả về các kết quả
thống kê.
Client sau khi kết nối gửi yêu cầu tới server để lấy dữ liệu. Dữ liệu ở đây gồm mã
WebGL và dữ liệu thống kê dưới dạng file JSON. Client đọc file JSON lấy ra các
dữ liệu cần thiết và dùng mã WebGL để hiển thị biểu đồ và bản đồ cho người
dùng.

Hệ thống mới với các phương pháp giải quyết vấn đề: vẽ bản đồ, xác định vị trí trên

bản đồ và phương pháp vẽ đồ thị.
Vẽ bản đồ
Dữ liệu được lấy từ OpenStreetMap dưới dạng ảnh bản đồ tĩnh (Static- map tile) với
định dạng .png, kích thước 256x256px. Với các ô ảnh nhỏ này ta có thể xếp chúng cạnh
nhau để tạo thành một bản đồ có kích thước lớn.

Hình 3.7 Ảnh bản đồ lấy từ OpenStreetMap
Mỗi ảnh bản đồ được lấy thông qua đường dẫn (URL) được quy định như sau:
http://[abc].tile.openstreetmap.org/zoom/x/y.png
+ [abc]: subdomain (a.tile, b.tile, c.tile)
+ zoom: mức zoom (0-18)
+ x, y: tạo độ của ảnh trong mảng. Cụ thể:
24


Ở mức zoom=0, toàn bộ bản đồ
trái đất chỉ gồm 1 ô ảnh.

Hình 3.8 Ảnh bản đồ mức zoom=0
Ở mức zoom=1, mỗi chiều ô ảnh
được chia làm 2, cho 4 ô ảnh bản đồ.
Với x,y là toạ độ ô ảnh, có 4 ô xác định
bởi bộ 3 số zoom,x,y :
[1,0,0] , [1,1,0] , [1,0,1] , [1,1,1].
Tương tự với các mức zoom tiếp
theo.
Hình 3.9 Ảnh bản đồ ở mức zoom=1
Theo như tài liệu wiki của OpenStreetMap[link] thì ta hoàn toàn có thể tìm URL các
ảnh bản đồ với kinh độ, vĩ độ cho trước.
WebGL mà cụ thể là ThreeJS cho phép ta có thể tạo nên vật thể là mặt phẳng 3D

thông qua đối tượng PlaneGeometry với các tham số về kích thước của mặt phẳng.
PlaneGeometry(width, height, widthSegments, heightSegments)

Để có thể hiển thị ảnh bản đồ lên trên bề mặt mặt phẳng ta cần phủ ảnh lên trên đó.
Việc này được thực hiện qua việc phủ vật chất (material) là các ảnh bản đồ được tải theo
URL xác định lên trên đó. Như vậy để có thể hiển thị bản đồ lớn ta cần ghép các mặt
phẳng nhỏ mà được phủ ảnh bản đồ lại với nhau.
Xác định URL: xác định trước một vị trí trung tâm tại Hà Nội, lấy tọa độ kinh độ, vĩ
độ rồi thêm mức zoom phù hợp thì ta hoàn toàn có thể xác định được ảnh bản đồ nhỏ của
điểm trung tâm và các ảnh bản đồ lân cận.
Xác định vị trí trên bản đồ
Xác định kinh độ và vĩ độ của các quận, đường phố thông qua Google Geocoding
API. Từ URL của ảnh bản đồ với các thông số zoom, x, y có thể xác định được kinh độ và
vĩ độ của điểm trung tâm ảnh bản đồ.
25