Nghiên cứu cơ chế render WebGL tại phía máy chủ và xây dựng module thử nghiệm

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ - ĐHQGHN
KHOA CÔNG NGHỆ THÔNG TIN

Niên Luận
Tên đề tài
Nghiên cứu cơ chế render WebGL tại phía máy
chủ và xây dựng module thử nghiệm

Sinh viên thực hiện :
Nguyễn Tiến Trung

Giảng viên hướng dẫn :
PGS.TS. Nguyễn Việt Hà

Hà Nội 12/2013


Contents

1. Đặt vấn đề
1.1 Thực trạng
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…) hay như cả HTML5 – một chuẩn ngôn ngữ mới.
2


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 thứ 3
nào. 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, không phải trình duyệt nào cũng hỗ trợ WebGL nhất là các trình duyệt cũ như
Internet Explorer 6 hay 7, đông thời việc sử dụng WebGL trên các trình duyệt 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 cho máy client
khi chạy. Do đặc tính của server là có cấu hình, khả năng xử lý mạnh so với client nên ta
có thể chuyển phần việc render từ client lên server.
Nội dung đề tài: “Nghiên cứu cơ chế render WebGL tại phía máy chủ và xây dựng
module thử nghiệm” là tìm ra cơ chế để render WebGL thành các frame ở phía máy chủ
rồi từ các frame ta có thể ghép chúng lại kết hợp cùng khả năng tương tác đồ họa như
trong WebGL (zoom, di chuyển…) để rồi hiển thị trên client dưới dạng một video. Áp
dụng cơ chế đó để xây dựng một module thử nghiệm.
Nội dung Niên luận này gồm 4 phần :
Phần 1 - Đặt vấn đề : Nêu thực trạng, phát biểu bài toán cùng cấu trúc cơ bản của
chương trình.
Phần 2 - Cơ sở lý thuyết, công nghệ tìm hiểu được: Những kết quả trong các lần tìm hiểu
nhằm phục vụ cho chương trình này.

3


Phần 3 – Hướng giải quyết : Từ những cơ sở lý thuyết ở trên, đưa ra những phương pháp
giải quyết bài toán.
Phần 4 - Kết quả hiện tại : Những kết quả đạt được tới thời điểm hiện tại.
Phần 5 - Kết luận và hướng phát triển.
1.2 Phát biểu bài toán
Nội dung bài toán hướng đến việc Server side rendering nghĩa là tất cả các công việc
liên quan đến đồ họa render đều được thực hiện trên server. Bài toán có nội dung như

sau:
- Từ mã WebGL tiến hành render đồ họa mà không qua trình duyệt như client.
- Client nhận kết quả mà server đã render và hiển thị chúng trên trình duyệt.

1.3 Mô hình cơ bản

Mô hình minh họa việc render trên server
Mô tả:
- Server: Nhận yêu cầu từ client và xử lý trả về dữ liệu sau khi render mã WebGL.
- Client: nhận và hiển thị kết quả render từ server.

4


2. Cơ sở lý thuyết và công nghệ đã tìm hiểu
2.1 WebGL
WebGL [ ], được phát triển dựa trên OpenGL ES 2.0, là API Javascript hỗ trợ dựng
hình, xử lý đồ họa 2D và 3D trên trình duyệt web mà không cần sử dụng các phần mềm
bên thứ 3. WebGL tương thích với chuẩn web và trình duyệt, cho phép sử dụng GPU
(Graphics Processing Unit) để tăng tốc xử lý đồ họa. WebGL có thể biểu diễn trên thành
phần Canvas của HTML5, vì vậy có thể kết hợp với các thành phần khác trên một trang
HTML. Các thành phần,khái niệm cơ bản của WebGL: canvas, vertices, texture, frame,
scene.
Trong đó:
-

Frame là các ảnh tĩnh biểu diễn hình ảnh đồ họa tại một thời điểm và trong một
ngữ cảnh, khung nhìn xác định.

Ví dụ minh họa về frame

5


-

Texture là kết cấu của vật của vật tạo bởi các đỉnh (vertices) cùng màu sắc (color),
ánh sáng (light), độ bóng (shadows).

2.2 PhantomJS
PhantomJS là một headless Webkit scriptable với một API javascript. Nó nhanh và có
hỗ trợ nhiều chuẩn Web khác nhau : DOM, CSS, Json, Canvas, SVG. Nó có khả năng
capture nội dung của web như dạng chụp ảnh màn hình. Nó có thể xử lý các thành phần
khác nhau của web từ HTML, CSS cho đến Canvas và SVG. Sử dụng PhantomJS ta hy
vọng sẽ capture được các nội dung mà WebGL render được dưới dạng ảnh.
PhantomJS có hàm render() để

6


Minh họa PhantomJS có thể capture một trang Web

Kết quả tìm hiểu : tuy PhantomJS hỗ trợ nhiều thành phần của một trang Web nhưng
nó không thể capture được một số thành phần như Ajax, X3DOM hay mã WebGL.

7


Minh họa PhantomJS không thể Capture được WebGL.

2.3 H264 codex và FFMPEG.

H264 là chuẩn mã hóa giải mã video phổ biến dưới nhiều định dạng khác nhau, cho
phép nén video kỹ thuật số với bit-rate thấp mà vẫn cho chất lượng cao.
FFMPEG là một framework hỗ trợ việc thực hiện mã hóa cũng như giải mã theo chuẩn
H264 trên nhiều nền tảng khác nhau Window, Linux, MacOS.

2.4 Javascript
Javascript là ngôn ngữ kịch bản dựa trên prototype, là ngôn ngữ đơn giản, hiệu quả để
mở rộng tính năng cho web. Javascript được chạy ở phía client nhờ vậy có tốc độ xử lý,

8


phản hồi nhanh, giảm đáng kể băng thông mạng. Ngoài ra javascript không yêu cầu cài
đặt thêm plugin để có thể sử dụng.
2.5 PHP
PHP là một ngôn ngữ kịch bản trên server. Nó là một công cụ mạnh mẽ giúp tăng khả
năng tương tác và tính động của trang web. PHP có thể sử dụng kết hợp với FFMPEG để
tạo video từ các ảnh và mã hóa video dưới chuẩn H264.

3. Hướng giải quyết
Hướng giải quyết bài toán được đề xuất theo mô hình sau:

Mô hình render WebGL trên server
-

Từ mã WebGL tách được các frame dưới dạng ảnh.
Phân tích, lọc các frame cần thiết. Cụ thể, với các frame giống nhau liên tiếp sẽ
được loại bỏ nhằm giảm việc phải lưu trữ nhiều frame. Các frame tách được sẽ
được phân biệt với nhau theo hành động tương tác điều khiển, được gán các định

-

danh cũng như các thuộc tính khác (timestamp, size).
Xây dựng các tương tác với các frame ứng với các tương tác như trong webgl như

-

zoom, xoay (rotate), di chuyển bẳng Javascript.
Ghép các frame cùng các tương tác thành video dưới dạng mã H264 và chạy lên
trên client bằng PHP.
9


Minh họa về ghép các frame theo các tương tác với nhau.

4. Kết quả hiện tại
Khó khăn trong việc tách các frame từ mã WebGL nghiên cứu về PhantomJS để
tách các frame từ mã WebGL nhưng không thành công.
Chưa có demo về các phần còn lại.

5. Hướng phát triển
PhantomJS không thể sử dụng để tách các frame từ mã WebGL nên hiện tại tôi
đang tìm hiểu về texture trong WebGL và xem có cách để lấy texture từ WebGL và
chuyển nó sang thành frame tương ứng.
Thử xây dựng chương trình Web thực hiện việc ghép các frame (giả sử có sẵn)
thành video mã hóa dưới dạng H264 cùng với việc xử lý các tương tác.

10

6. Tài liệu tham khảo
WebGL - OpenGL ES 2.0 for the Web />PhantomJS
FFMPEG />H264 codex />PHP />
11


Ý kiến đánh giá :
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.................................................................................................................................................
Điểm số: ……… Điểm chữ: ………..

Xác nhận của Khoa CNTT
Chủ nhiệm Khoa

Hà Nội, ngày tháng năm 2013
Giáo viên đánh giá
(Ký và ghi rõ họ tên)

12