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

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

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ộtphá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ácthiế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 Tuynhiê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 WebGLcũ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 đốivớ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 đổiviệ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 WebGLsang 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ùngFlash để 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.

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 andWebGL technique allows web browsers can take advantages of the 3D graphics hardware withoutthe need to install additional third-party softwares public However, the enterprise environmentexists the previous systems that is not always able to updates and supports modern graphicstechnologies such as WebGL Using WebGL also requires enough strong hardware in thegraphics 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 structurethat can be supported in previous system This propose method using Flash technology that haslong 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

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ệnkhó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, anhNguyễn Hoàng Khanh đã giúp đỡ, hỗ trợ tôi trong quá trình xây dựng hệ thống và thựcnghiệ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ữngngườ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 trongcuộ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

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ộtcá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éptà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

Mục lục

Chương 4

Danh sách hình vẽ

Danh sách bảng

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 trongcá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ệnnay, 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áccô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ậndụ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ềmnà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ìnhduyệt như Chrome, FireFox, việc xử lý đồ hoạ 3D trên trình duyệt Web đang trở nênkhả 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ớinhấ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ấutrú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ộidung đề 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ápnà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 haihướng tiếp cận khác nhau để giải quyết vấn đề là phương pháp xử lý mã WebGL trênServer thông qua chạy, bóc tách các frame và phương pháp chuyển đổi WebGL dùngFlash 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ệccung 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

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 chotầ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ươngtrì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

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ìnhduyệ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ớiJavascript 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, HTMLcò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àocá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ếnthườ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ệutheo 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ạonê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ể đượcdùng để xây dựng nên những chương trình có thể chạy Javascript ngay trên Server Đồngthờ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ụngrộ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ừ PCcho đế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ácfile flash định dạng SWF hay FLV Flash Player được chạy như một phần mềm cài độclậ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

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 ProgrammingInterface – 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 đẩymạ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ựatrê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ớiJavascript 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ệulớ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ệnbởi ActionScript Virtual Machine (AVM) trong Flash Player và với Actionscript 3, cácnhà 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 ứngdụng trên Flash Player Actionscript 3 hướng tới mục tiêu an toàn, đơn giản, hiệu suấtcao Actionscript 3 bao gồm hai phần: phần ngôn ngữ cốt lõi và Flash Player API Ngônngữ 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ápcâ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à đạidiệ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 FlexFramework (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 rafile SWF chạy trên Flash Player mà ta hoàn toàn có thể nhúng trực tiếp vào trong HTMLqua Javascript

Away3D [12] là một graphic engine 3D mã nguồn mở, được viết cho nền tảngFlash, 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ọa3D Away3D có thể được sử dụng để làm cho các mô hình 3D và thực hiện khác nhautí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ấtcủ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ụ

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 chitiế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 đónggó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ớiGoogle 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ộtphần của không gian đồ họa

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 OpenLayerscà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ênnề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áttriể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ộtnguồ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 Trongmộ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ị trongmộ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ácthao 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

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ổ sungcho 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éplấ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 giaothức HTTP Geoserver hỗ trợ nhiều định dạng dữ liệu bản đồ chuẩn như: Open GeospatialConsortium (OGC) Web Feature Service (WFS) and Web Coverage Service (WCS), WebMap Service (WMS)

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ệcchuyể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ọatrê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 framenà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ênserver 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 ảnhbitmap Với dạng ảnh bitmap ta có thể chuyển đổi chúng sang định dạng mã H264 [6] –

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ốicù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ệtweb 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àusắ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ằngngô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ệtdướ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ửitớ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ướidạ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ànhphầ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ệntrê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 sẽ thực hiện việc xử lý WebGL trên server nhằm tận dụngnă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ềunà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ácframe 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 đượccá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ôngqua 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ĩnhtạ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ệuthô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àocùng với các frame để khi chuyển về cho Client thì khi bên client có hành động điềukhiể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 địnhdạ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

Kết quả chuyển đổi sang mã H264 sẽ được gửi tới Client thông qua quá trìnhstreaming 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ượngCanvasWebGL để 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àophầ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ử canvasnhư 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

+ 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 ảnhbitmap 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ùychọ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ốndung 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 filevideo 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 sangtì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

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âutrê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ạihay 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

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ươngtrì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

- 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 theochiề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 dichuyể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ườidù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ênbả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ạnhnhau để tạo thành một bản đồ có kích thước lớn

Ở 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

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ặtphẳ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