ĐẠ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 HÀ NỘI - 2014 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ột phá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ác thiế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. 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 tiên tiến như WebGL, đồ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, điều này 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. Vì vậy một nhu cầu đặt ra là 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ũ. 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 WebGL sang 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ùng Flash để 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. 4 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 and WebGL technique allows web browsers can take advantages of the 3D graphics hardware without the need to install additional third-party softwares public. However, the enterprise environment exists the previous systems that is not always able to updates and supports modern graphics technologies such as WebGL. Using WebGL also requires enough strong hardware in the graphics 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 structure that can be supported in previous system. This propose method using Flash technology that has long 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. 5 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ện khó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, anh Nguyễn Hoàng Khanh đã giúp đỡ, hỗ trợ tôi trong quá trình xây dựng hệ thống và thực nghiệ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ững ngườ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 trong cuộ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 6 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ột cá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ép tà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 7 Mục lục Chương 4. 8 Danh sách hình vẽ Danh sách bảng 9 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 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…) [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á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 nà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ì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 ở 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ớ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 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ấu trú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ội dung đề 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áp nà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 hai hướng tiếp cận khác nhau để giải quyết vấn đề là phương pháp xử lý mã WebGL trên Server thông qua chạy, bóc tách các frame và phương pháp chuyển đổi WebGL dùng Flash. 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ệc cung 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 10 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 cho tầ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ương trì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. 11 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ình duyệ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ới Javascript 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, HTML cò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ào cá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ến thườ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ệu theo 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ạo nê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ể được dùng để xây dựng nên những chương trình có thể chạy Javascript ngay trên Server. Đồng thờ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ụng rộ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ừ PC cho đế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ác file flash định dạng SWF hay FLV. Flash Player được chạy như một phần mềm cài độc lậ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 12 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 Programming Interface – 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 đẩy mạ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ựa trê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ới Javascript. 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ệu lớ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ện bởi ActionScript Virtual Machine (AVM) trong Flash Player và với Actionscript 3, các nhà 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 ứng dụng trên Flash Player. Actionscript 3 hướng tới mục tiêu an toàn, đơn giản, hiệu suất cao. Actionscript 3 bao gồm hai phần: phần ngôn ngữ cốt lõi và Flash Player API. Ngôn ngữ 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áp câ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à đại diệ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 Flex Framework (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 ra file SWF chạy trên Flash Player mà ta hoàn toàn có thể nhúng trực tiếp vào trong HTML qua Javascript. Away3D [12] là một graphic engine 3D mã nguồn mở, được viết cho nền tảng Flash, 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ọa 3D. Away3D có thể được sử dụng để làm cho các mô hình 3D và thực hiện khác nhau tí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ất củ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ụ 13 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 chi tiế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 đóng gó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ới Google 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ột phần của không gian đồ họa. 14 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. OpenLayers cà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ên nề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át triể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ột nguồ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. Trong mộ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ị trong mộ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ác thao 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 15 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ổ sung cho 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ép lấ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 giao thức HTTP. Geoserver hỗ trợ nhiều định dạng dữ liệu bản đồ chuẩn như: Open Geospatial Consortium (OGC) Web Feature Service (WFS) and Web Coverage Service (WCS), Web Map Service (WMS). 16 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ệc chuyể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ọa trê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 frame nà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ê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 [6] – 17 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ối cù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ệ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 18 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ụ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. 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ào cùng với các frame để khi chuyển về cho Client thì khi bên client có hành động điều khiể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 đị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 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 19 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. 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ượ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 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ẻ 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. 20 + 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 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. 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ố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 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 sang tì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. 21 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âu trê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ại hay 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. 22 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ương trì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 sử dụng Internet và dữ liệu bản đồ. Trong phần này tôi sẽ sử dụng tài liệu chương trình WebGL [2] đã có để phân tích. Hình 3.6 Mô hình hệ thống sử dụng WebGL Hệ thống mới là bài toán hiển thị dữ liệu với các yêu cầu đầu vào và đầu ra: Đầu vào: - Dữ liệu biểu đồ: là dữ liệu thống kê thông thường nhưng có thêm thông tin xác định khu vực địa lý tương ứng với số liệu đó. Bản đồ : dữ liệu cập nhật của khu vực cần hiển thị. Đầu ra: - Hiển thị biểu đồ thống kê theo từng khu vực địa lý. Cho phép thay đổi mức chi tiết khu vực (cấp quận, cấp đường). 23 - 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 theo chiề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 di chuyể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ười dù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ên bả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ạnh nhau để tạo thành một bản đồ có kích thước lớn. Hình 3.7 Ảnh bản đồ lấy từ OpenStreetMap Mỗi ảnh bản đồ được lấy thông qua đường dẫn (URL) được quy định như sau: http://[abc].tile.openstreetmap.org/zoom/x/y.png + [abc]: subdomain (a.tile, b.tile, c.tile) + zoom: mức zoom (0-18) + x, y: tạo độ của ảnh trong mảng. Cụ thể: 24 Ở 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 bởi bộ 3 số zoom,x,y : [1,0,0] , [1,1,0] , [1,0,1] , [1,1,1]. Tương tự với các mức zoom tiếp theo. Hình 3.9 Ảnh bản đồ ở mức zoom=1 Theo như tài liệu wiki của OpenStreetMap[link] thì ta hoàn toàn có thể tìm URL các ảnh bản đồ với kinh độ, vĩ độ cho trước. WebGL mà cụ thể là ThreeJS cho phép ta có thể tạo nên vật thể là mặt phẳng 3D thông qua đối tượng PlaneGeometry với các tham số về kích thước của mặt phẳng. 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ặt phẳ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. Xác định vị trí trên bản đồ Xác định kinh độ và vĩ độ của các quận, đường phố thông qua Google Geocoding API. Từ URL của ảnh bản đồ với các thông số zoom, x, y có thể xác định được kinh độ và vĩ độ của điểm trung tâm ảnh bản đồ. 25 Công thức tính kinh độ, vĩ độ từ ‘zoom’, ‘x’, và ‘y’: (3.3) (3.4) Trong đó: - zoom: mức zoom yêu cầu. - londeg: là kinh độ của điểm chính giữa ô ảnh bản đồ tính theo đơn vị độ. - latrad: là vĩ độ của điểm chính giữa ô ảnh bản đồ tính theo đơn vị radian. Hình 3.10 Xác định vị trí trên bản đồ Từ đó, dựa vào công thức tỷ lệ ta hoàn toàn tính được tạo độ của điểm cần vẽ trên ảnh bản đồ: - Point: tọa độ điểm cần xác định - NE: tọa độ điểm góc Đông Bắc - Center: tạo độ điểm giữa bản đồ Vẽ đồ thị 26 Tùy thuộc người dùng muốn xem thông tin gì mà truy vấn cơ sở dữ liệu tương ứng dưới dạng Json. Dữ liệu trả về gồm tọa độ kinh độ, vĩ độ của điểm cần vẽ, tên của cột cần vẽ và giá trị thống kê của cột đó. Có được kinh độ, vĩ độ của điểm cần vẽ ta hoàn toàn có thể vẽ cột biểu đồ tại đúng vị trí trên bản đồ qua các công thức tính với độ cao tỷ lệ với giá trị thống kê nhận được. ThreeJS cung cấp đối tượng CubeGeometry với các tham số cơ bản về kích thước dài, rộng, chiều cao. CubeGeometry(width, height, depth) Tương tự như đối với đối tượng mặt phẳng ta hoàn toàn có thể phủ vật chất (material) lên các cột biểu đồ cũng như tô màu lên chúng. Hình 3.11 Mô phỏng đối tượng CubeGeometry trong ThreeJS Các thành phần đồ họa và tương tác với đồ thị, bản đồ - Thành phần đồ họa: Ngoài các đối tượng để vẽ bản đồ và cột biểu đồ như trên thì ThreeJS cung cấp cho ta các thành phần cơ bản khác như WebGLRenderer, PerspectiveCamera, Scene, DirectionalLight… Trong đó: - WebGLRenderer xuất ra các Frame và hiển thị lên trình duyệt từ các thành phần Scene và PerscpectiveCamera. PerspectiveCamera là đối tượng Camera cung cấp khung nhìn chiếu phối cảnh lên các thực thể 3D. 27 - Scene là nơi chứa các thực thể 3D được tạo ra. DirectionalLight cung cấp nguồn sáng chiếu từ một hướng cụ thể với các tia sáng song song làm tăng hiệu ứng hiển thị cho các thực thể 3D. Những thành phần đồ họa trên đều được cung cấp qua file thư viện three.js và chỉ cần khai báo trong thẻ để sử dụng. - Thành phần tương tác: ThreeJS cung cấp OrbitControl cho phép ta tương tác với biểu đồ và bản đồ thông qua việc điều chỉnh đối tượng Camera mà ta đã tạo ra ở trên. OrbitControl cho phép ta có các thao tác xoay, phóng to nhỏ, di chuyển với các khung nhìn tương ứng. OrbitControl được cung cấp qua file thư viện OrbitControls.js. var controls = new THREE.OrbitControls(camera); 5.8.2. Xác định các thành phần thay thế Về cơ bản ta cũng sẽ có các phương pháp vẽ bản đồ, xác định vị trí và vẽ biểu đồ tương ứng. Trong đó ta sẽ vận dụng cơ sở lý thuyết được dùng trong hệ thống mới nhưng với việc cài đặt thực thi sử dụng các thành phần đồ họa mà Flash và Away3D cung cấp. Tất cả những cài đặt chương trình sẽ được biên dịch thành một file Flash SWF và sẽ được nhúng trong thẻ div HTML và gửi cho Client. Nhìn chung các hàm cũng như các đối tượng của Away3D cũng tương đối giống so với các hàm trong ThreeJS. Điều này sẽ giúp ta dễ hiểu và đơn giản hóa hơn trong việc chuyển đổi. Vẽ và hiển thị bản đồ Hiện tại có hai hướng đi trong việc vẽ bản đồ là vẽ bản đồ tĩnh lấy ảnh bản đồ tĩnh trực tiếp từ OpenStreetMap như hệ thống sử dụng WebGL) đã làm và lấy dữ liệu bản đồ theo hình thức phân tầng dữ liệu (Openlayers). Dưới đây tôi sẽ trình bày việc vẽ bản đồ lấy dữ liệu trực tiếp từ OpenStreetMap, còn về việc lấy dữ liệu thông qua phân lớp dữ liệu tôi sẽ trình bày trong một phần riêng trong chương này. Với việc vẽ bản đồ ảnh tĩnh, ta áp dụng phương pháp giống với hệ thống ban đầu trong việc lấy các ảnh bản đồ nhỏ và ghép chúng lại với nhau thành bản đồ lớn. Để vẽ bản đồ ta sử dụng đối tượng mặt phẳng PlaneGeometry mà Away3D cung cấp cũng với các tham số cơ bản về kích thước: PlaneGeometry(width:Number,height:Number) 28 Away3D cũng hỗ trợ ta trong việc phủ vật chất (material) là các ảnh bản bản đồ lên bề mặt mặt phẳng bằng cách sử dụng thành phần TextureMaterial. TextureMaterial(BitmapTexture(bitmapData)::BitmapTexture) Trong đó bitmapData chính là dữ liệu ảnh bitmap mà ta lấy từ ảnh bản đồ. Tuy nhiên, phương thức tải ảnh bản đồ theo URL mà Flash sử dụng có đôi chút khác biệt. Hình 3.12 Luồng hoạt động trong việc tải ảnh bản đồ trong Flash Thay vì thực hiện vòng lặp và thực hiện tải ảnh một cách đơn giản, lần lượt đồng bộ theo hàng đợi như trong WebGL thì Flash lại thực hiện việc tải ảnh không đồng bộ. Điều này có nghĩa là các ảnh sẽ không được tải lần lượt theo thứ tự ảnh này tải xong rồi mới đến ảnh tiếp theo. Cụ thể, khi ta thực hiện vòng lặp tải ảnh và vẽ bản đồ thì hàm load() của Loader sẽ không đợi ảnh của vòng lặp hiện thời tải xong mà sẽ nhảy ngay đến thực hiện vòng lặp tiếp theo. Điều này dẫn tới việc ảnh sẽ không được tải hết và sẽ gây lỗi trong khi vẽ bản đồ. Theo đó để xử lý việc không đồng bộ ta sẽ sử dụng hàm sự kiện COMPLETE. Cụ thể chi tiết hoạt động của luồng tải ảnh như sau: Khi một ảnh được tải thì khi ảnh đó được tải xong thì sẽ sự kiện COMPLETE sẽ xảy ra và gọi đến hàm loaded(). Hàm loaded() sẽ đẩy ảnh vừa tải vào một mảng đã được khởi tại từ trước đồng thời kiểm tra xem đã tải hết tất cả các ảnh bản đồ chưa; nếu đã tải hết thì sẽ thực hiện việc vẽ bản đồ còn nếu không sẽ lặp lại việc tải ảnh đến khi hoàn tất. Việc sắp xếp các ảnh bản đồ thành một bản đồ lớn cũng cần chú ý vì hệ tọa độ 3 chiều của Away3D có khác biệt một chút so với hệ tọa độ 3 chiều thông thường khi trục X trong Away3D ngược chiều so với trục X trong ThreeJS (WebGL). Vẽ biểu đồ 29 Để vẽ biểu đồ ta sử dụng đối tượng CubeGeometry mà Away3D cung cấp các tham số cơ bản về chiều rộng, chiều cao và chiều dài. CubeGeometry(width:Number,height:Number,depth:Number) Away3D cũng cung cấp việc tô màu các cột thông qua sử dụng ColorMaterial. ColorMaterial(colorsetHexa) Việc xác định vị trí vẽ trên bản đồ ta hoàn toàn có thể sử dụng phương pháp đã đề cập ở phần phân tích hệ thống mới đồng thời cũng cần lưu ý về hệ toa độ của Away3D như khi vẽ bản đồ. Các thành phần đồ họa và tương tác với đồ thị, bản đồ Thành phần đồ họa: Away3D cũng cung cấp các thành phần cơ bản tương ứng như ThreeJS để tạo nên các đối tượng 3D như View3D, Camera3D, Scene3D, DirectionalLight. Trong đó - - View3D là thành phần cha chứa tất cả các thành phần đồ họa 3D khác như Camera3D và Scene3D. View3D sẽ có phương thức render() và được gọi để xuất ra các frame và hiển thị lên trình duyệt. Camera3D cung cấp khung nhìn chiếu phối cảnh lên các thực thể 3D. Scene3D là nơi chứa các thực thể 3D được tạo ra. DirectionalLight cung cấp nguồn sáng chiếu từ một hướng cụ thể với các tia sáng song song làm tăng hiệu ứng hiển thị cho các thực thể 3D. Thành phần tương tác: Cũng như trong ThreeJS cung cấp thư viện OrbitControl hỗ trợ các tương tác di chuyển, xoay hay phóng to thu nhỏ thì trong Away cung cấp đối tượng HoverController giúp điều khiển camera thực hiện các tương tác tương ứng. Tuy nhiên với các tương tác này ta phải định nghĩa các hàm tương ứng để có thể xử lý các sự kiện chuột cũng như bàn phím, không như OrbitControl đã gói gọn các tương tác đó. 30 5.9. Mô hình phân lớp dữ liệu Hình 3.13 Mô hình phân lớp dữ liệu Với mô hình này ta tách biệt các thành phần dữ liệu: - - Dữ liệu thống kê: là các dữ liệu đã được thống kê, xử lý theo mục đích và lưu vào cơ sở dữ liệu được Web Server trả về cho tầng ứng dụng (bên phía Client) để thực hiện các công việc liên quan đến hiển thị đồ họa trên nền bản đồ tương ứng với dữ liệu nhận được. Dữ liệu bản đồ: dữ liệu được Map Server lấy từ OpenStreetMap (OSM) sau đó thông qua Open Layers để xử lý và hiển thị bản đồ lên thành bản đồ. Tại tầng bản đồ ngoài việc hiển thị bản đồ còn cung cấp các thông tin liên quan đến bản đồ như tọa độ, mức độ zoom hỗ trợ cho quá trình vẽ các vật thể đồ họa tại chương trình Flash ở tầng ứng dụng. Theo đó, khi Client có yêu cầu về viêc hiển thị đồ họa trên nền bản đồ thì sẽ lấy các dữ liệu cần thiết là dữ liệu thống kê và dữ liệu bản đồ. Dữ liệu thống kê sẽ được WebServer lấy từ cơ sở dữ liệu và trả về dữ liệu tương ứng với yêu cầu từ phía người dùng. Dữ liệu bản đồ cũng sẽ được lấy theo yêu cầu người dùng. Khi có yêu cầu Map Server sẽ kiểm tra xem liệu có sẵn dữ liệu bản đồ trong cơ sở dữ liệu không. Nếu có, Map Server sẽ lấy dữ liệu đó và trả về cho người dùng và nếu không sẽ lấy dữ liệu cần thiết từ 31 các máy tính xung quanh nó qua giao thức chia sẻ hoặc sẽ lấy trực tiếp từ Server dữ liệu của Open Street Map. Dữ liệu bản đồ được gửi thông qua Open Layers sẽ được hiển thị theo cách mong muốn của người dùng và chứa các thông tin về tọa độ và mức zoom của bản đồ. Các dữ liệu cần thiết đó được chuyển tới cho chương trình Flash được sử dụng để hiển thị đồ họa. Việc sử dụng mô hình phân lớp dữ liệu sẽ giúp cho việc xử lý yêu cầu linh hoạt hơn. Khi có sự thay đổi về yêu cầu hiển thị bản đồ hay biểu đồ thì sẽ chỉ có sự thay đổi trên tầng tương ứng mà không có ảnh hưởng gì đến tầng còn lại. Đồng thời phân lớp dữ liệu sẽ giúp giảm tải trong việc xử lý cho Web Server do chỉ phải xử lý các thông tin liên quan đến dữ liệu thống kê và xây dựng biểu đồ, các phần việc xử lý và hiển thị bản đồ sẽ do Map Server xử lý. 32 Chương 6. THỰC NGHIỆM Tôi đã tiến hành thực nghiệm qua việc xây dựng chương trình Flash từ chương trình sử dụng WebGL ban đầu với phương pháp chuyển đổi dùng Flash. Trong khóa luận này, tôi sẽ xây dựng một chương trình sử dụng phương pháp đó dựa trên chương trình “Kỹ thuật hiển thị dữ liệu trên bản đồ” [2] nhưng bằng công nghệ Flash sử dụng Away3D. Cụ thể dữ liệu được biểu diễn là thống kê về sử dụng Internet trong khu vực Hà Nội, gồm thông tin về số lượng, thói quen sử dụng của người dùng tại các khu vực thuộc Hà Nội theo các khoảng thời gian trong ngày. Bên cạnh đó cũng có biểu diễn thống kê theo loại dữ liệu: văn bản, hình ảnh, âm thanh và video. Chương trình sẽ hiển thị dữ liệu trên bản đồ Hà Nội được chia theo mức độ chi tiết là cấp quận và đường/phố. 6.1. Kiến trúc và các thành phần của hệ thống 6.1.1. Mô hình chương trình Hình 4.14 Mô hình chương trình Mô tả: 33 - - Server: Gồm Web Server và Geo Server. Trong đó, Web Server nhận kêt nối từ Client và trả về mã Actionscript được biên dịch thành chương trình Flash cùng với dữ liêu thống kê là file JSON. Geo Server là tầng chịu trách nhiệm lấy dữ liệu bản đồ từ Open Street Map, độc lập với Web Server. Client: Thực hiện các công việc liên quan tới hiển thị cũng như giao tiếp với Server để lấy dữ liệu. Trong đó, Client nhận hai phần dữ liệu riêng biệt là dữ liệu thống kê cùng với chương trình Flash lấy từ Web Server và dữ liệu bản đồ lấy từ Geo Server. Từ dữ liệu bản đồ thông qua Open Layers bản đồ sẽ được hiển thị và chứa các thông tin về tọa độ và mức zoom bản đồ. Trên bản đồ được hiển thị chương trình Flash sẽ vẽ biểu đồ theo dữ liệu thống kê nhận được trên những vị trí tọa độ tương ứng. 6.1.2. Các chức năng chương trình Hình dưới đây mô tả các chức năng của chương trình. Truy cap trang web Nguoi dung Tuong tac Tuy chinh Bieu do Tuy chinh Ban Do Hình 4.15 Mô hình UseCase Các ca sử dụng chính của người dùng bao gồm “Truy cập trang web” và “Tương tác”. Trong ca sử dụng “Truy cập trang web”, người dùng kết nối lần đầu tới server, server sẽ truy vấn cơ sở dữ liệu và trả về dữ liệu thống kê để máy khách tiến hành hiển thị. Đối với ca sử dụng “Tương tác”, hệ thống hỗ trợ các tương tác tuỳ chỉnh biểu đồ và di chuyển trên bản đồ, trong quá trình này sẽ phải thực hiện vẽ lại biểu đồ hoặc vẽ lại bản đồ tuỳ theo yêu cầu người dùng. Khi có yêu cầu vẽ lại bản đồ, hệ thống sẽ thực hiện kết nối tới server của OpenStreetMap để yêu cầu ảnh bản đồ tương ứng. 34 6.1.3. Các thành phần chương trình Máy chủ (Server): gồm Web Server và Geo Server, Open Layers Web Server: Đơn giản là chứa file dữ liệu JSON ở trên và sinh ra mã Actionscript được biên dịch thành chương trình Flash dưới dạng file SWF. Server đơn giản là sẽ nhận kết nối từ Client và trả về chương trình Flash được nhúng trong file HTML cùng với file dữ liệu thống kê JSON. Về dữ liệu thống kê do chương trình ở đây chỉ là mô phỏng sự chuyển đổi từ WebGL sang dùng Flash nên ta hoàn toàn có thể sử dụng chung dữ liệu thống kê. Cụ thể, ở đây tôi sẽ lấy tất cả các dữ liệu thống kê được dưới dạng file JSON thông qua việc xử lý và truy vấn dữ liệu tại Server Java Servlet đã có. Dữ liệu sẽ được chia thành các mảng JSON với 3 khối thống kê chính: - districtStats: thống kê dữ liệu số người sử dụng theo quận. Ví dụ: "districtStats" : [{ "data" : 8, "district_id" : 1, "time_id" : 0, "lng" : "105.852402", "datatype_id" : 0, "lat" : "21.028999" }, Trong đó: -  Data: giá trị của dữ liệu thống kê được.  District_id: id của quận  Time_id: id của khoảng thời gian trong ngày (giá trị 0 biểu thị cho thời gian 24 h trong ngày).  Datatype_id: id của loại dữ liệu được thống kê (giá trị 0 biểu thị thống kê cho tất các các loại dữ liệu).  Lnd, lat: kinh độ và vĩ độ của địa điểm đại diện cho quận. streetStats: dữ liệu thống kê cho đường/phố. Ví dụ: - "streetStats": [{ - "street_id": 1, - "count": 4, 35 - "formatted_address": Kiem District, Hanoi, Vietnam", "Luong Van - "district_id": 1, - "lng": "105.850510", - "streetName": "Luong Van Can", - "lat": "21.032719", - Can, Hoan "datatype_count": "[[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]" - }, Trong đó: -  count: giá trị thống kê được tại phố.  Formatted_address: địa chỉ đầy đủ của phố dùng để hỗ trợ Search biểu đồ theo tên phố.  streetName: tên phố.  Lng, lat: kinh độ và vĩ độ của phố.  Datatype_count: thống kê theo kiểu dữ liệu lần lượt theo văn bản, ảnh, âm thanh và video; trong đó mỗi kiểu lại được chia theo các khoảng thời gian trong ngày. datatypeStats: dữ liệu thống kê theo khoảng thời gian và kiểu dữ liệu. Ví dụ: - "dataTypeStats": [{ - "data": 34, - "district_id": 1, - "time_id": 2, - "lng": "105.852402", - "datatype_id": 1, - "lat": "21.028999" - }, Geo Server: là nơi sẽ tiếp nhận yêu cầu dữ liệu và trả về dữ liệu bản đồ cho CLient. Dữ liệu bản đồ sẽ có luồng hoạt động như sau: 36 Hình 4.16 Luồng hoạt động của dữ liệu bản đồ Cụ thể, khi có yêu cầu về dữ liệu bản đồ, Client sẽ thực hiện các bước - Gửi yêu cầu dữ liệu đến Geo Server Kiểm tra nếu dữ liệu bản đồ có sẵn trong cơ sở dữ liệu thì đi đến bước xử lý luôn. Nếu không thì lấy dữ liệu bản đồ từ OpenStreetMap và đến bước xử lý. Xử lý, gửi trả dữ liệu về cho Client. Kết thúc. Hiện tại, việc lấy dữ liệu bản đồ qua Geo Server được thực hiện trên chương trình khai thác dữ liệu bản đồ [3] mà nhóm bạn Vũ Danh Việt đã xây dựng. Open Layers: dùng để hiển thị dữ liệu bản đồ lấy từ Geo Server. Ở đây tôi cũng sẽ sử dụng Open Layers được xây dựng trong chương trình khai thác dữ liệu bản đồ [3] của nhóm bạn Vũ Danh Việt. Máy khách (Client) gồm có chương trình Flash 37 Chương trình Flash: người dùng truy cập trang Web, trình duyệt sẽ kết nối tới Server qua phương thức HTTP request và nhận dữ liệu phản hồi để tiến hành vẽ biểu đồ. Cấu trúc của chương trình Flash chạy bên Client được thể hiện như sau: Hình 4.17 Các thành phần của chương trình Client (Flash) - Tại Main: đọc dữ liệu trả về, vẽ bản đồ, biểu đồ, đáp ứng tương tác người dùng. • init() : Hàm này gọi tới các hàm init_engine(), init_light(), init_Listeners() để thực hiện việc khởi tạo các đối tượng cần thiết cho việc vẽ biểu đồ và bản đồ. • init_engine() : khởi tạo các đối tượng cơ bản của Away3D như view, scene, camera. • init_light(): khởi tạo các đối tượng về ánh sáng bối cảnh. • init_Listeners() : khởi tạo các hàm sự kiện cho bàn phím, chuột. 38 • setURL(): hàm hỗ trợ cho việc tải bản đồ, lấy các URL cần thiết và lưu chúng vào một mảng. • loadMap(): thực hiện tải ảnh và vẽ bản đồ. Hiện tại tôi vẫn sử dụng phương pháp vẽ bản đồ bằng các ảnh bản đồ nhỏ tĩnh lấy từ server của OpenStreetMap chứ chưa áp dụng lấy dữ liệu bản đồ theo mô hình phân lớp. • loadJson() : hàm thực hiện lấy dữ liệu thống kê được từ file dữ liệu JSON được Server trả về. • drawGraph(): thực hiện vẽ biểu đồ. Trong đó sẽ chia ra các trường hợp nhỏ hơn vẽ theo cấp quận và đường/phố. • onKeyUp(), onKeyDown(): hàm bắt các sự kiện bàn phím và thực hiện các tương tác di chuyển tương ứng. • onMouseUp(), onMouseDown(): hàm bắt các sự kiện chuột và thực hiện các thao tác di chuyển, xoay. • onMouseWheel(): hàm bắt sự kiện chuột giữa và thực hiện thao tác phóng to, thu nhỏ (zoom). • changeHandler_dist(): thực hiện lại việc vẽ biểu đồ khi thay đổi Checkbox của các quận. • changeHandler_time():thực hiện lại việc vẽ biểu đồ khi thay đổi Checkbox của các khoảng thời gian. • changeHandler_street(): thực hiện chuyển sang vẽ bản đồ cấp phố khi Checkbox All Street được tick. • changeHandler_zoom(): thay đổi mức phóng đại bản đồ khi người dùng tương tác với thanh trượt. • Các thành phần điều khiển: ở đây bao gồm các checkbox tuy chọn về quận, phố, thời gian, kiểu dữ liệu và độ phóng to, nhỏ (zoom) bản đồ. Thay vì xây dựng trên các thành phần HTML như thông thường ta xây dựng chúng bằng các phần tử Checkbox mà Flash (Flex SDK) cung cấp. Ở đây tôi sẽ chia các thành phần điều khiển thành 2 Panel chính. Panel District: chứa các ô tùy chọn về quận, huyện và kiểu dữ liệu. 39 Panel Time: chứa các ô tùy chọn về thời gian và thanh trượt điều chỉnh mức zoom bản đồ. Hình 4.18 Các thành phần giao diện điều khiển Mỗi Checkbox sẽ có một thuộc tính định danh riêng như đã được quy định từ trong cơ sở dữ liệu và sẽ được sử dụng để xác định các tùy chọn cho chương trình. Ví dụ danh sách các Checkbox quận sẽ được đánh định danh “name” từ 1 cho đến 15 tương ứng với trường id của các quận trong cơ sở dữ liệu cũng như trong kết quả JSON thống kê được. - Tại GraphUtils: thực hiện một số chức năng hỗ trợ vẽ biểu đồ • colorList: danh sách một số mã màu thông dụng, dùng để vẽ các cột biểu đồ. • gradient(): sinh màu phụ thuộc vào độ lớn của giá trị cột biểu đồ. Màu từ xanh tới đỏ ứng với giá trị từ nhỏ đến lớn. • toHex(): chuyển đổi mã màu sang cơ số 16. 40 • ArrayShuffle(): tráo danh sách màu. • randomSet(): tráo danh sách màu và trả về một dãy màu ngẫu nhiên để vẽ cột biểu đồ. - Tại map: thực hiện các tác vụ liên quan tới bản đồ. Các thuộc tính: • zoom: lưu mức phóng đại (zoom) hiện tại của bản đồ. • x_tile: lưu tham số toạ độ x của ô bản đồ chính giữa. • y_tile: lưu tham số toạ độ y của ô bản đồ chính giữa. • x_coord: lưu toạ độ x trong khung hình của cột biểu đồ đang được vẽ. • y_coord: lưu toạ độ y trong khung hình của cột biểu đồ đang được vẽ. • centerLat: vĩ độ của điểm chính giữa bản đồ. • centerLng: kinh độ của điểm chính giữa bản đồ. Các phương thức: • init_tiles(): tính toán các thuộc tính x_tile, y_tile dựa vào kinh độ, vĩ độ của điểm chính giữa bản đồ. • latLngToCoord(): chuyển đổi từ kinh độ, vĩ độ sang vị trí tương ứng trên bản đồ. • coordtoLatLng(): chuyển đổi vị trí trên bản đồ sang kinh độ, vĩ độ. • long2tile();lat2tile(): từ kinh độ, vĩ độ tính toán tham số x, y của ảnh bản đồ tĩnh. • tile2long();tile2lat(): từ tham số x, y của ô ảnh bản đồ tĩnh tính kinh độ, vĩ độ. • getURL(): tạo đường dẫn URL của ảnh bản đồ từ các tham số zoom, x, y. Tất cả các thành phần chương trình này sẽ được biên dịch thành file chương trình Flash SWF và được nhúng trong HTML. Nhằm tăng tính hiệu quả trong việc tận dụng khả năng bên các máy Client trong file HTML sẽ có một đoạn mã Javascript sử dụng thư viện Detector.js xác định xem bên Client có hỗ trợ đồ họa WebGL không, qua đó có thể lựa chọn chương trình hiển thị dữ liệu thống kê thích hợp. 41 6.2. Môi trường thực nghiệm 4.1.1. Cấu hình máy chủ Máy chủ sử dụng trong thực nghiệm có cấu hình như sau: Bảng 4.1 Cấu hình máy chủ IBM System X3200 CPU Intel Xeon 3050 @2.13GHz Memory 4x512MB DDR2 OS Ubuntu 10.0.4 LTS 6.2.1. Cấu hình máy khách Các máy khách sử dụng trong thực nghiệm có cấu hình như sau: Bảng 4.2 Cấu hình máy khách Client 1 : Laptop ASUS X550C (Máy ảo) CPU Intel 2 nhân Memory 512MB DDR3 VGA OS Máy ảo Windows XP Display Screen 1366x768 Browsers Internet Explorer 6, Chrome Client 2 : Laptop ASUS X550C (Máy thật) CPU Intel Core i5 – 3337U 1.8GHz Memory 4 GB DDR3 VGA IntelHD 4000 OS Window 8.1 Pro 64-bit Display Screen 1366x768 Browsers Google Chrome v25, IE 11 42 4.1.1. Công cụ phần mềm Dưới đây là các công cụ, thư viện được sử dụng trong qua trình xây dựng chương trình thực nghiệm. Bảng 4.3 Các công cụ phần mềm STT Tên công cụ Mục đích 1 Flash Builder 4.7 Môi trường phát triển ứng dụng. 2 Detector.js Thư viện phát hiện trình duyệt có hỗ trợ WebGL. 3 Ascorelib.swc Thư viện hỗ trợ trong việc đọc file dữ liệu dạng JSON. 4 Away3D.swc Thư viện hỗ trợ đồ họa 3D trên nền Flash. 5 Flex SDK Bộ công cụ lập trình gồm các hàm, thư viện 6.3. Kết quả thực nghiệm Tôi đã tiến hành thực nghiệm qua việc xây dựng chương trình Flash từ chương trình sử dụng WebGL ban đầu với phương pháp chuyển đổi dùng Flash. Chương trình hiện đã có những kết quả nhất định trong việc xây dựng đồ họa 3D trên Flash. Chương trình đã có hầu hết chức năng cơ bản về xem, tương tác với dữ liệu tương tự với chương trình gốc xây dựng bằng WebGL, ngoại trừ chức năng tìm kiếm xây dựng biểu đồ theo tên phố. Bên cạnh đó, chương trình cũng tự xác định được xem bên Client có hỗ trợ các công nghệ WebGL hay không nhằm tận dụng việc sử dụng hai chương trình một cách có hiệu quả trên các máy Client khác nhau. Chương trình hiện nay cũng chưa hoàn thiện theo mô hình phân lớp dữ liệu như đã trình bày ở trên. Thay vào đó vẫn sử dụng bản đồ ảnh tĩnh lấy trực tiếp từ Open Street Map. Các loại biểu đồ mà chương trình hiện cung cấp: - Số người dùng theo quận - Loại dữ liệu theo quận - Số người dùng theo phố - Loại dữ liệu theo phố Dưới đây là một số hình ảnh kết quả hiển thị lấy từ máy Client 1. Bản đồ và biểu dồ được vẽ và hiển thị tương tự như chương trình WebGL ban đầu, giao diện cũng cung cấp các tùy chọn hiển thị. 43 Hình 4.19 Biểu đồ loại dữ liệu truy cập theo quận/huyện và theo thời gian trong ngày Hình trên hiển thị biểu đồ biểu diễn loại dữ liệu người dùng hay truy cập theo khu vực quận và theo thời gian trong ngày. Các biểu đồ trên cũng được xây dựng giống với với biểu đồ trong chương trình WebGL với việc phân chia loại dữ liệu thành 4 cột: văn bản, hình ảnh, âm thanh và phim với các màu sắc khác nhau cùng với hình chú giải dưới 4 cột. Hình dưới đây sẽ hiển thị biểu đồ tổng số người dùng ở cấp quận với màu sắc các cột là ngẫu nhiên. Hình 4.20 Biểu đồ hiển thị số người dùng theo quận 44 Hình 5.3 dưới đây cũng hiển thị tổng số người dùng ở mức phố. Cũng tương tự như trong chương trình WebGL các cột biểu đồ sẽ được tô màu theo tỉ lệ người dùng với cột màu xanh tỉ lệ người dùng thấp và cột màu đỏ với tỉ lê người dùng cao. Hình 4.21 Biểu đồ hiển thị số người dùng theo phố Hình 4.22 Biểu đồ loại dữ liệu truy cập theo phố Hình trên hiển thị biểu đồ biểu diễn loại dữ liệu người dùng hay truy cập theo cấp quận và theo thời gian trong ngày. Kết quả hoạt động của chương trình được trình bày qua các bảng dưới đây. 45 Bảng 4.4 Thời gian tải trang (giây), hiệu năng hiển thị khung hình/giây (FPS) Số cột đồ Máy ảo XP thị IE 6 Chrome Laptop ASUS X550C IE 11 Chrome Tải trang, vẽ biểu 11 đồ lần đầu tiên 20 20 12.4 11.1 24FPS 10FPS 30FPS 30FPS Vẽ biểu đồ loại dữ 44 liệu theo quận 0.5 0.5 0.3 0.2 20FPS 10FPS 30FPS 30FPS Vẽ biểu đồ số người 158 dùng theo phố 0.7 0.6 0.6 0.6 10FPS 8FPS 30FPS 30FPS Vẽ biểu đồ loại dữ 940 liệu theo phố 1 1 1 1 4FPS 3FPS 20FPS 21FPS 46 Bảng 4.5 Bảng so sánh hiệu năng chương trình trên các phiên bản trình duyệt Laptop ASUS X550C Tải trang, vẽ biểu đồ lần đầu tiên Vẽ biểu đồ loại dữ liệu theo quận Vẽ biểu đồ số người dùng theo phố Vẽ biểu đồ loại dữ liệu theo phố IE 6 IE7 IE 11 Chrome 12 10 12.4 11.1 30FPS 30FPS 30FPS 30FPS 0.3 0.3 0.3 0.2 30FPS 30FPS 30FPS 30FPS 0.5 0.4 0.6 0.6 30FPS 30FPS 30FPS 30FPS 0.7 0.6 1 1 30FPS 30FPS 20FPS 21FPS 19 21 22 30FPS 30FPS 30FPS Tải trang khi có thay đổi về độ 20 zoom bản đồ 30FPS 6.4. Đánh giá Bước đầu chương trình đã hiển thị được dữ liệu đồ họa cần thiết. Các đối tượng 3D như bản đồ và biểu đồ được vẽ chính xác đúng vị trí như theo dữ liệu. Chương trình chạy được trên nhiều trình duyệt khác nhau từ các trình duyệt cũ cho đến các trình duyệt mới, chỉ cần có cài đặt Flash Player. Trên các trình duyệt khác nhau thì về thời gian và chất lượng hiển thị không có nhiều sự khác biệt, có độ ổn định khá tốt. Tuy nhiên, chương trình có hạn chế lớn hiệu suất chương trình không cao: thời gian tải trang lần đầu tiên vẫn lớn thường khoảng 12 giây thỉnh thoảng lên tới trên 15 giây. Đối với những lần tải trang sau đó thời gian có được rút ngắn hơn. Chủ yếu thời gian tải trang là dành cho việc tải vẽ bản đồ, còn thời gian để vẽ biểu đồ thì tương đối nhanh, mất khoảng tầm 1 giây khi chuyển qua lại giữa các tùy chọn vẽ. Tỷ lệ khung hình chỉ đạt ngưỡng tối đa khoảng 35 khung hình/giây nên chất lượng hiển thị chỉ đạt mức trung bình. Đối với việc vẽ biểu đồ theo cấp phố thì tỷ lệ thấp hơn đạt khoảng 20-25 khung hình/giây. Đối với những máy có phần cứng thấp như Client 1 thì tỷ lệ này còn thấp hơn nhiều thậm 47 chí chỉ đạt 4 khung hình/giây khi thực hiện vẽ biểu đồ loại dữ liệu cấp phố. Khi có thay đổi về độ zoom bản đồ thì thời gian tải lại là cao trên 15 giây. Các tương tác như xoay, di chuyển, phóng to thu nhỏ diễn ra khá mượt mà tuy nhiên sẽ bị giật khi ở chế độ vẽ biểu đồ cấp phố. Việc tiêu tốn tài nguyên cũng là một vấn đề khi chương trình tiêu tốn khá nhiều RAM với trung bình từ 30-35MB RAM với việc vẽ biểu đồ cấp độ quận và từ 6070MB với vẽ biểu đồ cấp phố, đôi lúc lên đến khoảng 100MB RAM khi chương trình chạy lâu kéo dài. So với chương trình viết trên WebGL thì có thể thấy chương trình viết trên Flash hạn chế hơn từ hiệu suất tải trang cho tới chất lượng hiển thị. Có thể so sánh với kết quả của chương trình viết bằng WebGL qua bảng dưới đây: Bảng 4.6 Bảng so sánh kết quả về hiệu năng giữa hai chương trình Số cột đồ thị Chương Flash trình Chương WebGL Chrome Chrome Tải trang, vẽ biểu 11 đồ lần đầu tiên 12.1 8.8 30FPS 46FPS Vẽ biểu đồ loại dữ 44 liệu theo quận 0.2 0.6 30FPS 40FPS Vẽ biểu đồ số người 158 dùng theo phố 0.6 1 30FPS 23FPS Vẽ biểu đồ loại dữ 940 liệu theo phố 1 1.2 21FPS 20FPS trình Có thể thấy về thời gian tải trang lần đầu của chương trình Flash lâu hơn đến 1.5 lần so với chương trình WebGL. Về chất lượng hiển thị cũng thấy rằng số khung hình trên giây (FPS) của chương trình cũng thấp hơn hoặc ngang bằng so với chương trình WebGL. Tuy vậy tỷ lệ khung hình của chương trình Flash có độ ổn định hơn, không quá bị chênh lệch nhiều giữa các tùy chọn vẽ biểu đồ giữa cấp độ quận và phố. 48 Chương 7. KẾT LUẬN Với sự tồn tại một số các hệ thống cũ và lạc hậu cùng với nhu cầu sử dụng đồ họa 3D ngày càng tăng thì cần có một phương pháp có thể chuyển đổi đồ họa WebGL sang cấu trúc đồ họa khác có thể chạy được trên các hệ thống cũ. Với việc tìm hiểu phương pháp chuyển đổi cấu trúc đồ họa WebGL sang Flash, có thể thấy việc chuyển đổi đồ họa WebGL từ những hệ thống mới sang hệ thống cũ là hoàn toàn có thể xây dựng được. Dựa vào phương pháp trên tôi đã xây dựng một chương trình mô phỏng phương pháp chuyển đổi dựa trên chương trình WebGL “Kỹ thuật hiển thị dữ liệu trên bản đồ” và đạt được một số kết quả nhất định. Cùng với đó mô hình phân lớp dữ liệu là mô hình có nhiều ưu điểm trong việc xây dựng các thành phần hệ thống một cách tách biệt và linh động. Với việc sử dụng mô hình này, sẽ giảm phụ thuộc vào việc tải dữ liệu bản đồ từ Open Street Map và giảm tải cho chương trình trong việc xử lý dữ liệu bản đồ, đồng thời tăng hiệu suất tải trang đáng kể. Từ những kết quả đạt được qua thực nghiệm có thể thấy phương pháp chuyển đổi từ WebGL sang dùng Flash trình bày trong khóa luận này có nhiều hứa hẹn được áp dụng trong những hệ thống cũ không hỗ trợ WebGL. Với khả năng có thể chạy trên nhiều trình duyệt khác nhau từ những trình duyệt cũ đến những trình duyệt hiện đại, phương pháp chuyển đổi có thể đáp ứng tốt với các nhu cầu hiển thị cơ bản về đồ họa 3D. Mặc dù vậy, bên cạnh những kết quả đã đạt được, khoá luận không tránh khỏi những thiếu sót, nhược điểm do hạn chế về thời gian và công nghệ. Hiện tại chương trình vẫn còn chưa tối ưu, mới chỉ áp dụng cho một vài chương trình WebGL nhất định, chưa thể áp dụng cho nhiều loại chương trình WebGL khác nhau do điều cần thiết của phương pháp là phải hiểu sâu và rõ các thành phần của chương trình WebGL thì mới có thể thực hiện việc chuyển đồi. Bên cạnh đó hiệu năng chương trình còn kém khi thời gian tải trang lâu, chất lượng hiển thị trung bình chưa cao. Ngoài ra, hệ thống vẫn chưa áp dụng việc phân lớp dữ liệu nhằm tăng hiệu suất cũng như sử dụng dữ liệu một cách hiệu quả. Do vậy, trong thời gian tới, có một vài hướng phát triển hệ thống như cải tiến thêm về hiệu năng (thời gian tải trang và chất lượng hiển thị) và áp dụng việc phân lớp dữ liệu đối với hệ thống. Ngoài ra như đã trình bày ở các chương trước, thì việc chuyển đổi đối với nhiều hệ thống khác nhau thì ta có thể tiếp tục phát triển phương pháp xử lý WebGL trên Server thông qua xử lý và bóc tách các frame. Như vậy, hệ thống sẽ có khả năng phát triển và ứng dụng rộng hơn. 49 TÀI LIỆU THAM KHẢO Tiếng Việt [2] N. H. Khanh, “Kỹ thuật hiển thị dữ liệu trên bản đồ,” Khóa luận tốt nghiệp, 2013. [3] N. s. v. p. t. n. Toshiba, “Giao thức XMPP và khai thác dữ liệu bản đồ phân tán,” Công trình nghiên cứu khoa học Khoa Công nghệ thông tin Đại học Công nghệ, 2014. Tiếng Anh [8] "Actionscript 3.0," [Online]. Available: http://www.adobe.com/devnet/actionscript/learning.html. [7] "Adobe Flash Player," [Online]. Available: http://www.adobe.com/products/flashplayer.html. [10] "Adobe Flex," [Online]. Available: http://www.adobe.com/devnet/flex.html. [12] "Away 3D," [Online]. Available: http://away3d.com/. [15] "Geo Server," [Online]. Available: http://geoserver.org/. [6] "H264," [Online]. Available: http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC. [4] "JSON," [Online]. Available: http://www.json.org/. [5] "NodeJS," [Online]. Available: http://nodejs.org. [14] "Open Layers," [Online]. Available: http://openlayers.org/. [13] "Open Street Map," [Online]. Available: http://www.openstreetmap.org/. [16] "ThreeJS," [Online]. Available: http://threejs.org/. [1] "WebGL – OPENGL ES2.0 for the Webc," [Online]. Available: http://www.khronos.org/webgl/. [11] Adobe Flex Tutorial, Tutorials Point. [9] Learning Actionscript 3.0, Adobe, 2011. 50 51 [...]... hỗ trợ nhiều định dạng dữ liệu bản đồ chuẩn như: Open Geospatial Consortium (OGC) Web Feature Service (WFS) and Web Coverage Service (WCS), Web Map Service (WMS) 16 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... của việc chuyể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ọa trên đó Trong quá trình tìm hiểu tôi tập trung vào hai phương pháp sau:... 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âu trê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... 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... - Xử lý mã WebGL trên Server thông qua chạy và bóc tách các frame, chuyển các frame nà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... 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ười dù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ên bả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... 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... 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ương trì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... việc liên quan đến hiển thị đồ họa trên nền bản đồ tương ứng với dữ liệu nhận được Dữ liệu bản đồ: dữ liệu được Map Server lấy từ OpenStreetMap (OSM) sau đó thông qua Open Layers để xử lý và hiển thị bản đồ lên thành bản đồ Tại tầng bản đồ ngoài việc hiển thị bản đồ còn cung cấp các thông tin liên quan đến bản đồ như tọa độ, mức độ zoom hỗ trợ cho quá trình vẽ các vật thể đồ họa tại chương trình Flash... toa độ của Away3D như khi vẽ bản đồ Các thành phần đồ họa và tương tác với đồ thị, bản đồ Thành phần đồ họa: Away3D cũng cung cấp các thành phần cơ bản tương ứng như ThreeJS để tạo nên các đối tượng 3D như View3D, Camera3D, Scene3D, DirectionalLight Trong đó - - View3D là thành phần cha chứa tất cả các thành phần đồ họa 3D khác như Camera3D và Scene3D View3D sẽ có phương thức render() và được gọi ... đồ họa 3D hệ thống đề cập yêu cầu được đặt tìm phương chuyển đổi cấu trúc đồ họa WebGL sang cấu trúc đồ họa khác mà hỗ trợ bên phía Client Nội dung đề tài: Phương pháp chuyển đổi cấu trúc đồ họa. .. Map Service (WMS) 16 PHƯƠNG PHÁP CHUYỂN ĐỔI ĐỒ HỌA WEBGL Phương pháp chuyển đổi đồ họa việc chuyển đổi mã WebGL sang mã khác việc chuyển mã thực Server việc xử lý hiển thị đồ họa thực thi phía Client... hiểu phương pháp chuyển đổi cấu trúc đồ họa WebGL sang Flash, thấy việc chuyển đổi đồ họa WebGL từ hệ thống sang hệ thống cũ hoàn toàn xây dựng Dựa vào phương pháp xây dựng chương trình mô phương