Xử lý mã WebGL và chuyển đổi định dạng trên server

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ - ĐHQGHN KHOA CÔNG NGHỆ THÔNG TIN CÔNG TRÌNH DỰ THI GIẢI THƯỞNG “ SINH VIÊN NGHIÊN CỨU KHOA HỌC” NĂM 2014 Tên công trình: Xử lý mã WebGL và chuyển đổi định dạng trên server. Sinh viên thực hiện: Nguyễn Tiến Trung. HÀ NỘI 17-3-2014 1 Contents 2 TÓM TẮT CÔNG TRÌNH Công trình nghiên cứu này hướng tới việc đáp ứng nhu cầu của một số doanh nghiệp với nhu cầu 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ũ, cụ thể ở đây là công ty Toshiba. Trong đó bao gồm việc xử lý đồ họa 3D (WebGL) bên phía server( server side) thay vì trên Client và chuyển đổi mã đồ họa sang mã định dạng khác. Tổng quan tôi hướng tới việc tìm ra phương pháp chạy các đoạn mã WebGL trực tiếp ngay trên phía server. Qua đó, thực hiện việc trích xuất được các Frame và chuyển đổi sang định dạngkhác mà cụ thể trong chương trình của tôi là sang mã H264 – loại mã thông dụng dễ dàng chạy được trên các trình duyệt phía Client. 3 1. Đặt vấn đề 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. 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, 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 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 lớn nên vấn đề cấp thiết 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. Cụ thể ở đây là áp dụng với những hệ thống cũ ở công ty Toshiba. Do những đặc tính như vậy, với mong muốn xử lý WebGL(cụ thể đối với ThreeJS) trên những hệ thống đã đề cập ở trên mà vẫn có thể đáp ứng được nhu cầu sử dụng đồ họa hiện 4 đại, tôi đề xuất phương pháp xử lý đồ họa WebGL trên server bằng việc tiến hành bóc tách các frame từ mã WebGL và chuyển đổi sang định dạng khác mà có thể dễ dàng xử lý bên phía Client, cụ thể là với định dạng mã H264. Trong tài liệu này, tôi đề cập tới những phần chính sau: - Mô hình hóa bài toán. Các thành phần của bài toán. Các công nghệ và kỹ thuật áp dụng. Kết quả thực nghiệm và hướng phát triển 2. Giải quyết vấn đề 2.1 Mô hình hóa bài toán 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 – một định dạng dễ xử lý và 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: - Đầu vào (Input): Là các mã WebGL. - Đầu ra (Output): Định dạng mã H264. 5 Hình 1: Mô hình tổng quát của bài toán. 2.2 Các thành phần của bài toán - 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 là quá tải. Như vậy ở đây tôi 6 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. - 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 7 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 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. 2.3 Các kỹ thuật và công nghệ áp dụng Tất cả các kỹ thuật tôi áp dụng ở đây đều trên nền tảng của Hình 2: So đồ minh họa phương pháp cùng các kỹ thuật áp dụng - 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 [1]. Đây 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 8 chóng, có hỗ trợ xử lý đồ họa WebGL. Cụ thể Node JS có module three [2], jsdom [3] 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 [4] gồm các canvasAPI đồ họa với phần dưới là Cairo [5] 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ẻ 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. 9 + 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 [6] 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 [7]. 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 respone. Tất cả các module trên đều được Node js cung cấp miễn phí và có thể được cài đặt dễ dàng qua những lệnh command: npm install [ten_module]. Trong đó module fluentffmpeg để sử dụng trước đó cần cài FFMPEG cùng với thư viện libx264. 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. 10 2.4 Kết quả Hiện tại chương trình vẫn đang ở trong giai đoạn phát triển và hoàn thiện. Cho đến nay mới chỉ có những demo nhỏ đối với từng bước nhỏ trong sơ đồ tổng quát. Cấu hình áp dụng: Máy PC dùng Ubuntu 12.04 LTS RAM: 1.5GB CPU: 2 nhân 1.8Ghz 2.4.1 Chạy và bóc tách các frame Cho đến nay mới áp dụng chạy trên những chương trình WebGL đơn giản được viết trên Three JS, dạng dữ liệu tĩnh. Quá trình bóc tách frame được cài đặt với tốc độ được 30 frame trong 1s tuy nhiên việc bóc tách còn chậm. Các frame được lưu dưới dạng ảnh bitmap .PNG. 11 Hình 3 : Minh họa việc bóc tách frame qua mã WebGL được chạy trên server. 12 Hình 4: Minh họa Frame tách được dưới dạng ảnh bitmap .PNG 2.4.2 Chuyển đổi sang mã H264 và streaming Hiện tại, mới chỉ thử nghiệm chuyển đổi các frame định dạng ảnh .PNG sang video định dạng .MP4. Quá trình streaming hiện vẫn đang trong thời gian phát triển. Hinh 4: Minh họa kết quả của việc chuyển đổi các frame dạng ảnh sang dạng video. 2.4.3 Một số vấn đề, hạn chế Chương trình hiện vẫn còn một số vấn đề và hạn chế sau: - Các phần giờ vẫn đang độc lập chưa gắn kết được với nhau hoàn toàn tạo thành một luồng hoạt động trôi chảy. 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ử 13 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 do việc chuyển đổi sang mã H264 diễn ra nhanh hơn việc tách frame từ mã WebGL. - Việc streaming vẫn còn chưa thể thực hiện thành công do còn lỗi chưa thể giải quyết. 2.5.4 Hướng phát triển - Trong thời gian tới tôi sẽ xử lý vấn đề streaming đồng thời tìm ra hướng giải quyết cho những vấn đề trên. - Hướng tới loại bỏ những bước trung gian như xuất ra file ảnh và video nhằm tăng hiệu suất xử lý bằng sử dụng socket của node js. Nhờ socket của Node js sẽ giúp gửi trực tiếp các frame sau khi tách được sang cho module xử lý chuyển đổi sang dạng mã H264, qua đó giảm được thời gian xử lý. - Hướng tới quá trình tách frame và chuyển đổi có thể tiến hành cùng nhau và liên tục nhằm giúp việc stream diễn ra liên tục tới Client. 3. Kết luận Công trình tuy hiện đang trong thời gian phát triển và chưa có một kết quả hoàn thiện nhưng có thể thấy được tính áp dụng của công trình trong thực tiễn khi hoàn thiện. Kỹ thuật này đáp ứng được nhu cầu sử dụng đồ họa đối với doanh nghiệp có những hệ thống cũ khó có thể theo kịp được khả năng xử lý đồ họa 3D hiện nay. 14 4.Tài liệu tham khảo [1] http://nodejs.org [2] https://www.npmjs.org/package/three [3] https://www.npmjs.org/package/jsdom [4] https://www.npmjs.org/package/canvas [5] http://cairographics.org/ [6] https://www.npmjs.org/package/fluent-ffmpeg [7] https://www.npmjs.org/package/express 15 16 [...]... dưới dạng ảnh bitmap PNG 11 Hình 3 : Minh họa việc bóc tách frame qua mã WebGL được chạy trên server 12 Hình 4: Minh họa Frame tách được dưới dạng ảnh bitmap PNG 2.4.2 Chuyển đổi sang mã H264 và streaming Hiện tại, mới chỉ thử nghiệm chuyển đổi các frame định dạng ảnh PNG sang video định dạng MP4 Quá trình streaming hiện vẫn đang trong thời gian phát triển Hinh 4: Minh họa kết quả của việc chuyển đổi. .. 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 do việc chuyển đổi sang mã H264 diễn ra nhanh hơn việc tách frame từ mã WebGL - Việc streaming... xử lý vấn đề streaming đồng thời tìm ra hướng giải quyết cho những vấn đề trên - Hướng tới loại bỏ những bước trung gian như xuất ra file ảnh và video nhằm tăng hiệu suất xử lý bằng sử dụng socket của node js Nhờ socket của Node js sẽ giúp gửi trực tiếp các frame sau khi tách được sang cho module xử lý chuyển đổi sang dạng mã H264, qua đó giảm được thời gian xử lý - Hướng tới quá trình tách frame và. .. các frame dạng ảnh sang dạng video 2.4.3 Một số vấn đề, hạn chế Chương trình hiện vẫn còn một số vấn đề và hạn chế sau: - Các phần giờ vẫn đang độc lập chưa gắn kết được với nhau hoàn toàn tạo thành một luồng hoạt động trôi chảy 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ử 13 dụng module chuyển đổi Cùng... chương trình vẫn đang ở trong giai đoạn phát triển và hoàn thiện Cho đến nay mới chỉ có những demo nhỏ đối với từng bước nhỏ trong sơ đồ tổng quát Cấu hình áp dụng: Máy PC dùng Ubuntu 12.04 LTS RAM: 1.5GB CPU: 2 nhân 1.8Ghz 2.4.1 Chạy và bóc tách các frame Cho đến nay mới áp dụng chạy trên những chương trình WebGL đơn giản được viết trên Three JS, dạng dữ liệu tĩnh Quá trình bóc tách frame được cài... sang cho module xử lý chuyển đổi sang dạng mã H264, qua đó giảm được thời gian xử lý - Hướng tới quá trình tách frame và chuyển đổi có thể tiến hành cùng nhau và liên tục nhằm giúp việc stream diễn ra liên tục tới Client 3 Kết luận Công trình tuy hiện đang trong thời gian phát triển và chưa có một kết quả hoàn thiện nhưng có thể thấy được tính áp dụng của công trình trong thực tiễn khi hoàn thiện Kỹ... có thể thấy được tính áp dụng của công trình trong thực tiễn khi hoàn thiện Kỹ thuật này đáp ứng được nhu cầu sử dụng đồ họa đối với doanh nghiệp có những hệ thống cũ khó có thể theo kịp được khả năng xử lý đồ họa 3D hiện nay 14 4.Tài liệu tham khảo [1] http://nodejs.org [2] https://www.npmjs.org/package/three [3] https://www.npmjs.org/package/jsdom [4] https://www.npmjs.org/package/canvas [5] http://cairographics.org/ ... đề xuất phương pháp xử lý đồ họa WebGL server việc tiến hành bóc tách frame từ mã WebGL chuyển đổi sang định dạng khác mà dễ dàng xử lý bên phía Client, cụ thể với định dạng mã H264 Trong tài liệu... nhằm xử lý trả cho trình duyệt dạng hình ảnh đồ họa Thông thường, mã WebGL sinh gửi tới Client để xử lý trình duyệt không xử lý trực tiếp Server, mã WebGL trình xử lý tạo hình ảnh đồ họa dạng. .. sang định dạng mã H264 – định dạng dễ xử lý tiến hành gửi tới Client thông qua trình streaming Như đầu vào đầu toán tóm tắt sau: - Đầu vào (Input): Là mã WebGL - Đầu (Output): Định dạng mã H264