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 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/ 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 [...]...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/ 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 ... chuyển phần việc render từ client lên server Nội dung đề tài: Nghiên cứu chế render WebGL phía máy chủ xây dựng module thử nghiệm tìm chế để render WebGL thành frame phía máy chủ từ frame ta... frame ta ghép chúng lại kết hợp khả tương tác đồ họa WebGL (zoom, di chuyển…) để hiển thị client dạng video Áp dụng chế để xây dựng module thử nghiệm Nội dung Niên luận gồm phần : Phần - Đặt... frame từ mã WebGL nghiên cứu PhantomJS để tách frame từ mã WebGL không thành công Chưa có demo phần lại Hướng phát triển PhantomJS sử dụng để tách frame từ mã WebGL nên tìm hiểu texture WebGL xem