Quách Đồng Thắng
Trung tâm Ứng dụng GIS TP.HCM
1 GIỚI THIỆU
Sự ra đời của chuẩn HTML5 và thư viện đồ họa WebGL là một trong những sự kiện nổi bật của công nghệ web 3D. WebGL + HTML5 hỗ trợ tương tác các đối tượng đồ họa 3D trực tiếp trên trình duyệt mà không cần cài thêm plug-in như Flash/ Silverlight. Bài viết giới thiệu các ứng dụng của WebGL + HTML5 nói chung, cũng như cách tiếp cận xây dựng Web GIS 3D trên nền tảng các công nghệ này.
2 ỨNG DỤNG CỦA WEBGL + HTML5
2.1 3D Web Game
3D Web game là một lĩnh vực ứng dụng giàu tiềm năng của công nghệ WebGL + HTML5. Một số thư viện hỗ trợ xây dựng 3D Web game trên nền tảng WebGL/ HTML5: CopperLicht, KickJS , Cloudmach, o3d, Colbalt Calibur 3,IvanK Lib, DivSugar, J3D, GameMaker HTML5, RPG.js, PhiloGl, Crafty.js, Impact.js, Construct 2, Isongenic Engine, Rocket Engine, Bullet.js, CubicVR 3D Engine, Three.js,…
Ví dụ sao cho thấy mô hình Web 3D giải phẩu cơ thể người sử dụng công nghệ WebGL + HTML5.
2.2 Web GIS 3D
Trong lĩnh vực WebGIS 3D, có nhiều gói thư viện đã được phát triển trên nền tảng WebGL + HTML5, hỗ trợ mô hình trái đất ảo để các nhà phát triển ứng dụng có thể tạo các ứng dụng WebGIS 3D chạy trực tiếp trên trình duyệt mà không cài thêm plugin như Google Earh, Flash hay Silverlight.
2.2.1 WebGL Earth
Nhà phát triển ứng dụng có thể sử dụng WebGL Earth rất đơn giản bằng cách sử dụng các hàm JavaScript API:
<!DOCTYPE HTML><html><head><script src="http://www.webglearth.com/api.js"></script><script> function initialize() { var options = { zoom: 1.0, position: [14.392118,94.212093] }; var earth = new WebGLEarth('earth_div', options); }</script></head><body onload="initialize()"> <h1>WebGL Earth API: Hello World</h1> <div id="earth_div" style="width:600px;height:400px;border:1px solid gray; padding:2px;"></div></body></html>
Kết quả:
2.2.2 OpenWebGlobe
Sử dụng OpenWebGlobe SDK
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="openwebglobe-0.9.14.js"></script>
<script type="text/javascript">
function main()
{
// (1) create an OpenWebGlobe context using canvas
// first parameter is canvas-id and second is "fullscreen"
var ctx = ogCreateContextFromCanvas("canvas", true);
// (2) Create a virtual globe
var globe = ogCreateGlobe(ctx);
// (3) Add an image and an elevation layer
var imgBlueMarble500 =
{
url : ["http://www.openwebglobe.org/data/img"],
layer : "World500",
service : "i3d"
};
var elvSRTM_CH =
{
url : ["http://www.openwebglobe.org/data/elv"],
layer : "SRTM",
service : "i3d"
};
ogAddImageLayer(globe, imgBlueMarble500);
ogAddElevationLayer(globe, elvSRTM_CH);
// (4) Set the background color
//ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1);
}
</script>
</head>
<body onload="main()">
<div style="text-align: center">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
Kết quả:
2.2.3 ReadyMap
2.2.4 PhiloGL
2.2.5 WebGL Globe
WebGL Globe được phát triển bởi Google Data Arts Team và công bố trên Google Experiment
2.3 OpenScalesGL
OpenScales là một bộ thư viện mã nguồn mở viết bằng ActionScript 3 và Flex, dùng để xây dựng các ứng dụng bản đồ Rich Internet Mapping chạy trên nền Flash.
Để phục vụ hiển thị 3D, OpenScale đang phát triển bộ thư viện OpenScalesGL (OpenScalesGL = OpenScale + WebGL + HTML5).
2.4 Xu hướng hỗ trợ WebGL/HTML5
Hiện nay, một số ứng dụng bản đồ thương mại cũng đang có những động thái hỗ trợ WebGL như Google MapsGLvà Nokia Map 3D WebGL
2.4.1 Google MapsGL
Hiện tại, Google Maps đang thử nghiệm MapsGL (GoogleMaps + WebGL) để nâng cao khả năng hỗ trợ đồ hoạ của Google Maps
2.4.2 Nokia Maps 3D WebGL (beta)
3 KẾT LUẬN
Cách tiếp cận sử dụng thư viện WebGL+ HTML5 là một cách tiếp cận mới, rất thú vị và nhiều tiềm năng trong việc tạo ra các ứng dụng Web 3D nói chung và Web GIS 3D nói riêng.
