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

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

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à

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ư

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

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

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

- 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() để

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

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ý,

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

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

6 Tài liệu tham khảo

WebGL - OpenGL ES 2.0 for the Web http://get.webgl.org/

PhantomJS http://phantomjs.org

FFMPEG http://www.ffmpeg.org/

H264 codex http://vi.wikipedia.org/wiki/H.264/MPEG-4_AVC

PHP http://php.net/

Ý 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)