Special Study report - Weeraphan

burgerraraSoftware and s/w Development

Nov 18, 2013 (3 years and 8 months ago)

251 views

SPECIAL STUDY



WebGL Based Visual Interface Linking Geography and Culture




By

Weeraphan Chanhom






Examination Committee:


Dr. Sumanta Guha (Chairman)

Nationality
:


Thai


Previous
Degree
:


Master of Science

Information Technology


and
Management
. Chiang Mai University,


Chiang Mai,
Thailand








Asian Institute of Technology

School of Engineering and Technology

Thailand

July

2
012



2


Acknowledgment

I would like to thank
Dr.Sumanta Guha for his guidance throughout my
special study.
He broadens
my insight how I did my research in the right direction, particularly a
collaboration in planning.



3


Table of Contents



Title










Page

1. Introduction








4


2. Review literature








4


2.1
Cultural heritage







4


2.2
OpenGL to
WebGL






4


2.3
A 3D Graphics Framework for Next Generation Web


7


2.4
C
hallenges of 3D real
-
time rendering on web



8


2.5
Example
:

WebGL Implemen
tation on Medical field


12

3. Experimental Projects







14


3.1 Google Earth linking with 3D objects




14


3.2 Web blog for construct WebGL Idea




23


3.3 WebGL Earth Development





23

4. Future Plan









27


4.1 Concept and Feature of System





27


4.2 Action Plan







28

5. References









29




4


Introduction


In this report, I collect all of

materials that I studied in Special Study course.
The topic is “WebGL Base visual Interface linking Geography and Culture”. The
contents consists of (1) Report the previous worked (literatures, Experiment projects
(Google earth, Web blog, and WebGL Earth
) (
2) Future Plan (Flowchart concept,
Action plan).

The contents are following:

Review literature

Cultural heritage

In the field of cultural heritage (CH), knowledge sharing is one of the most essential
aspects for communication activities between museal

institutions that

conserve and
take care of cultural collections, and the public. Among other things, these activities
include education, research and study as well as entertainment. All of them are really
precious for the spread of culture. However, the
public is not the only one to benefit
from knowledge sharing: it is important for promotion and advertisement purposes as
well, which are both of a high interest for the museal institutions themselves
regarding visibility, development and long term sustain
ability. (Larue,2012)


OpenGL to
WebGL

OpenGL

OpenGL stands for Open Graphics Library. The main source of inform
ation is the
OpenGL web site
, which contains news, specifications, tutorials, and downloads
among other materials. OpenGL was developed by
Silicon Graphics Inc. in 1992 and
has become the industry standard for graphics applications throughout the world. Its
API interface is well developed and is being nurtured by the ARB (OpenGL
Architecture Review Board), which is an industry consortium resp
onsible for steering
the evolution of the software.

The most appealing aspects of OpenGL are its high performance and portability or
“device independence”. OpenGL comes pre
-
installed on all major operating systems
(Windows, Linux, UNIX, and Mac) and applic
ations can be developed to run on all
platforms without the need for changing the code. The OpenGL API provides a set of
rich and highly usable graphics functions allowing learners to produce stunning 3D
simulations in a short time.

OpenGL code has been wr
itten in structured programming style providing easy
integration to C/C++ applications. Other languages such as Java require a wrapping
such as JOGL (Java OpenGL) that allows OpenGL functions, which were written in a
non
-
object oriented way, to b
e used in
the Java language
. The sheer power and ease of
integration of OpenGL led it to be the graphics engine of choice providing
functionality to a large number of current 3D modeling packages and graphics and
visualization applications.

While OpenGL provides the

engine driving graphics applications, it requires a front
-
end program to handle the visualization. Unfortunately, web browsers do not
understand OpenGL and thus do not interface with. Thus, a wrapper is required to
interface with and translate OpenGL grap
hics outputs into statements that the web
browser can understand and display; such a wrapper is JavaScript.


5


WebGL

WebGL is new standard for 3D drawing. By providing hardware 3D rendering for
Canvas in HTML5, WebGL allows system graphics card to render 3D
scenes and
models in browsers. Therefore, we can save time in developing render plug
-
ins for
web pages.

(Weigang Zhang,2012)

The appearance of WebGL makes a new chance for 3D WebGIS. WebGL is a cross
-
platform, royalty
-
free web standard for a low
-
level 3D g
raphics API based on
OpenGL ES 2.0, exposed through the HTML5 Canvas element as Doc
ument Object
Model interfaces
. After the standard releases, lots of application appears which use
the technology.
The difference from building 3D WebGIS by other technology,

using
WebGL can access GPU without any plugins. So, the rapid development of graphic
cards these years makes a good environment for WebGL.




Figure1.
WebGL System Structure Diagram

The drivers provides interface for calling OpenGL or OpenGL ES 2.0 API t
o access
graphic resources. The function part provides WebGL functions by JavaScript,
HTML5 and CSS, and makes browser can do efficient 3D rendering. The presentation
part packages some low level APis for other people, and makes system using both 3D
and no
n
-
3D elements for specific application.

(Lei Feng,

2011)

According to Figure 1. Each section can be described below.


JavaScript

JavaScript is the most popular scripting language on the Internet. Its main purpose is
to add interactivity to a web page by
embedding JavaScript code into standard HTML
pages. It is an interpreted lightweight programming language with very simple syntax
and it is freely available. With JavaScript, web designers can perform a number of
useful operations such as using dynamic tex
t into an HTML page, write event
-
driven
code such as reacting to mouse events, modify HTML elements, validate data before
submitting to a server to alleviate server load, detect the user browser and load
appropriate pages designed for that browser, create
cookies by storing and retrieving
information on the use
r’s computer and more
.

One of the most useful aspects of JavaScript is the ability to handle events. The
JavaScript Event Reference lists 21 events that include the various mouse events
6


(click, double

click, mouse button down and up, mouse motion), keyboard events,
window events (moved, get into focus, loses focus, resized), loading of a file is
interrupted, the occurrence of an error, button is pressed, user exits the page and so on.
Error handling is

a strong feature of JavaScript and the designer can make use of try,
throw and catch statements. Object oriented programming is also supported; in
addition to the built
-
in JavaScript objects, it is also possible to access and manipulate
all of the HTML DO
M objects with JavaScript such as Document, Frame, Table,
Image, Button, and so on.

To help designers writing compatible code for all browsers,
JavaScript allows browser detection, such that particular code can be written for
specific browsers. Creating an
d updating cookies and data validation such as checking
whether or not an email is valid can also be performed in JavaScript before
forwarding to a server. It is also possible to create animated images by setting events
to load different images as the user

hover the mouse over the page. Similarly, one can
create an image map with several clickable areas on the image and define event
handlers to react to user input.

If one wishes to access resources residing on the client’s machine (such as OpenGL)
and displ
ay the outputs of the computation using a web browser, a client
-
side
programming language would be a preferred choice such as JavaScript. If a server
-
side language were to be used (such as ASP or PHP) this would place undue load on
the server and on the ne
twork, resulting in performance degradation especially for
demanding applications such as 3D graphics. However, the standard JavaScript
language is not designed to interface with OpenGL so that an extension is required;
such an extension is provided by Web
GL.


The WebGL API

The Khronos Group defines WebGL as a cross
-
platform, royalty
-
free web standard
for low level g
raphics API based on OpenGL
. A WebGL JavaScript application is
defined entirely within an HTML document that is loaded into a web browser. In
p
rinciple, all that a web designer needs is a text editor to write WebGL statements.
The WebGL interface takes care of the communication with the client’s graphics
hardware through OpenGL libraries. The full power of the underlying graphics
hardware is thus
, harnessed by WebGL for a quality user experience.

Whereas
WebGL does not specify file formats, current trends to define 3D sc
enes use the
COLLADA format
, which has been developed by the Khronos Group. COLLADA is
an open standard to facilitate the use and

interchange of 3D assets and its format is
supported by all major content creation applications including 3ds Max, Maya,
Sketch
Up

and others. The problem of loading COLLADA files directly using WebGL is that
the programming soon becomes very complex, as
the developer needs to adapt to the
file format and to what COLLADA supports. A simpler, more useful and faster
solution is to load data that have been defined in JSON (JavaScr
ipt Object Notation)
format
. JSON is a text file containing pairs of values in a

specified order. These
values make up vertices, textures, indices, and so on.

If the 3D scene is very large
with texture, animation and other effects such as skinning, the JSON files may turn
out to be too large to be loaded in acceptable time frames. The

solution is still to
convert to JSON and load those types of assets from binary data that has been
compressed. Such solution is provided by
Google through their O3D API
, which is a
Java Script implementation on top of WebGL, thus fully compatible with Web
GL
specifications.

7


I
mplications to teaching and learning

Current technologies able to support interactive 3D graphics suggest that WebGL will
become the standard way of delivering 3D contents to be visualized on a web browser
without the need for plug
-
ins.

WebGL is a client
-
side programming language based
on JavaScript. The major functional difference between standard JavaScript and
WebGL is that WebGL provides the necessary extensions to communicate with the
underlying OpenGL libraries. Thus, OpenGL is the

engine driving the 3D graphics,
accessed by the browser through WebGL constructs


an alternative option is to
access OpenGL through Google’s O3D API. Initially, Google pushed its own
technology but now it has aligned itself with WebGL, so that O3D is sim
ply a
JavaScript extension that operates on top of WebGL.

Any higher education institution
planning to deliver learning content that requires interactive 3D graphics needs to
consider current trends. It is clear that there will be a demand for programmers
with
OpenGL and WebGL skills.
Therefore, a programme of studies should include the
teaching of OpenGL followed by WebGL
. It is also clear that in order to follow this
path;

students will be required to have a good mathematics background

together
with C pro
gramming skills
. Here there is an opportunity to develop specialized
courses perhaps at MSc level to address those requirements.

From the point of view of
Museums Sheffield, the 3D models generated by this project have significant value to
the Museums’ lea
rning offer. They have allowed the creation of a bank of pre and
post visit resources for schools, college and HE groups. The models can be used to
further investigate the objects back in the classroom, and act as an aide memoire for
students. The resource
s provide a sustainable model for access as learners are
effectively given access to objects without requiring facilitation by museum staff.
This is hugely important at a time when museums are critically underfunded and
the future provision of learning act
ivities remains in doubt.

Virtual objects enable
an infinitely repeatable leaning experience by allowing detailed remote examination
of objects, with no detrimental effect to the condition of the
artifact
. The models
provide rich source material to support

talks and workshops for informal learners,
offer study sources for art, design and technology students, and offer inspiration for
practitioners in the decorative arts. Crucially the techniques used here can provide a
minutely accurate version of real obje
cts in line with current state of the art in 3D
object models.

(Rodrigues,

2011)

A 3D Graphics Framework for Next Generation Web

3D content’s first presence on the web began since the VRML Consortium released
the Virtual Reality Markup Language in 1994 and

it was superseded by X3D
-

an
XML
-

based file format for representing 3d graphics that includes VRML extensions
in 1997. VRML was proposed as a text based format for specifying 3D scenes in
terms of geometry and material properties while it requires insta
llation of a platform
specific plug
-
in for rendering in the web browser.

VRML and X3D never really
caught on because they are too slow to render complex, high
-
fidelity models and
scenes in real time. What’s more, developers have to write 3D, 2D, video and
audio
content together to create full, compelling applications, which cause it hard and
complicate to develop 3D content. Another reason is the absence of processors and
software that could support the graphics that the technology enabled when the
technolo
gy appeared.

Adobe incorporated 3D capabilities with the release of Flash Player 10 to support
built
-
in 3D effects in 2008. It renders 3D content through Adobe Flash Player, which
is of 99% penetration on personal computers. However, this technology lacks
support
8


of hardware acceleration and the graphics render pipeline is simulated via software,
which means that all 3D effects are software rendered and cannot be used for highly
complex scenes with massive content. Adobe announced it would introduce support

for the new GPU
-

accelerated 3D APIs with source code name of ‘Molehill’ in the
first half of 2011.

In 2009 Google started to develop a novel technology named O3D, which is an open
-
source JavaScript API for creating interactive 3D graphics application
that run in a
browser window. It is geared towards games, ads, product demos, virtual worlds.
Instead as a black
-
box, non
-

programmable pattern like VRML and X3D, it integrates
as a plug
-
in to extend browsers with 3D graphics capabilities. O3D

leverages
ha
rdware acceleration of client
-
side GPU to lighten the burden of CPU so that the low
efficient JavaScript is up to the task of executing the client
-
side algorithms. O3D now
is implemented on top of WebGL.

The Khronos Group delivered the final draft of WebGL

specific
ation version 1.0 this
year
. As the name suggests, it defines the JavaScript analogous of the OpenGL API
for C/C++. WebGL extends OpenGL ES 2.0 to provide similar rendering
functionality, but in a HTML context for the HTML Canvas element. It bring
s plugin
-
free 3D to the web and supports client
-
side graphic hardware acceleration. At the time
of writing only the nightly built versions of most web browsers, excluding Internet
Explorer, support WebGL implementation.


C
hallenges of 3D real
-
time
rendering on web

Although relative hardware and software technologies have continued to improve
over time, 3D on the web remains primitive. It’s at the corner but there are numerous
hurdles to overcome before 3D web could truly take over the world. Bandwid
th is
always a concer
n when dealing with the web
. Resources that are used to create 3D
content, such as geometry models, texture images and script files, are delivered to end
users from servers primarily via the Internet. 3D on the web is challenged by
ban
dwidth limitation in the same way that every single page on the web is. If there’s
not enough bandwidth available to smoothly deliver resources to end users,
application will seem to freeze, which is less than pleasant experience for users.
Statistics show
s that 10 seconds is the limit response latency for user keeping their
atten
tion on the current webpage
. It is crucial to shorten response time to improve
user experience.


Browser Limitation

There are many limitations for browsers to present 3D content. B
rowsers generally
lack the ability t
o offer full
-
screen graphics
, which is a vital feature for most 3D
applications. Comparison to standalone 3D applications’ advantage of easily access to
system hardware and software capabilities, 3D applications on the w
eb run through
browser plug
-
ins and extensions, restraining applications fully use of client
-
side
resources. Low efficiency of execution and no support of multithread of JavaScript
further limit browsers to render sophisticated, full interactive 3D scene

A
lgorithm Migration

There have emerged massive computer graphics algorithms for standalone 3D
application development. However many

algorithms could not be used when
developing 3D content on the web. The migration of the algorithms to less powerful
browser
is limited by the gap between a compiled C++ and a JavaScript with respect
9


to computer graphics algorithms. Many computer graphics algorithms make intensive
use of multithreading for asynchronous access of resource

from different cache levels
.
JavaScript’s

feature of not supporting multithread makes these algorithms invalid.
Apart from algorithms, many computer graphics techniques could not be used for 3D
application on the web because of not supporting by the runtime environment.


System Overview

FRAMEWOR
K DESIGN


To take into consideration of the cruel runtime environment where web
-
based 3D
applications reside, several key features should be elaborated when designing the web
3D framework:


High
-
speed resource access: Web applications usually need kinds o
f resources
during rendering 3D content in the browser, so it is vital for applications to efficiently
access resources in time for real
-
time rendering. The ability of quickly resource load
reduces application freezing or response latency to improve user i
nteraction
experience.


GPU
-

friendly rendering ability: Graphics hardware has improved significantly over
past years at More’s speed. Nowadays, graphics hardware is not only far more
powerful than before but also programmable. The ability of GPU
-

friendl
y rendering
includes two aspects: One is the ability to leverage graphics hardware to accelerate
application performance; the other is the ability to use the programmability of
graphics hardware.


Collaborating with next
-
generation web: With the upcoming
HTLM5 and WebGL
specification, Next
-

generation web will be featured as faster and richer content
presentation. Many new features are introduced to improve user experience of web
browsing. The most exciting feature with respect to 3D is that WebGL supports

GPU
-
accelerated 3D rendering on the canvas HTML5 element without plug
-
ins, which is a
technique revolution for web
-
based 3D applications. Collaborating with these new
features can promote application performance and flexibility.


Compatibility with mains
tream browsers: There are many kinds of browsers in the
internet based on several browser kernel engines. The slight difference between
engines would cause application fail to run. To make sure most users browse 3D
content without troubles, it is important

for application to compatible with most
mainstream browsers.


NetGL
(Web 3D application framework)

is designed to satisfy features above as a
scalable platform to help developers unburden low
-
level works and focus on the
development of high
-
level applicati
on logic. Developers do not need to consider the
difference of implementation between browsers, neither the sophisticated but
necessary routines to setup a 3D application. System’s structure is composed as
follow:


10



Figure 2. Software stack of NetGL


Resource Loading: modules for system resource fetching and loading into memory.
There are kinds of resources to feed when system is running. Resources are
transformed from remote webserver to client
-
side asynchronous and preloaded as
need to shorten latenc
y. Resources are tagged with several states and switching
between different states at runtime for memory and usage optimization.



Space: reconstruct and organize scene space to optimize collision detection by using
adaptive space splitting algorithm.
Space is split into subspace according to
distribution of objects in 3D scene. Denser t objects distribute, finer the space is split.
Only subspace where objects are moving needs to consider collision detection, which
sharply reduces the calculation for co
llision.


Utility: supply Utilities for system debugging, profiling and running across
browsers, which are great helps for web application development. There is also a
mathematic supplementary library implementing sequential arithmetic operations on
vecto
r and matrix.


Visual: 3D wrapper is an abstract layer for low
-
level graphics API functions to
supply uniform functions calls and it simplifies sophisticated routines by single
wrapped function calls. WebGL only supports GLSL shading language and Shade
Pa
rser module translates other shading scripts written with Cg or HLSL into GLSL
shading scripts. Considering the cruel runtime environment web applications reside in,
System supports special effects in a cheap way, such as particle
-
based fire, smoke and
bil
lboard
-
based trees and grass.


UI: event handle wrapper sweeps the differences of I/O input and event response
between browsers. The overlay
-
based GUI elements are embedded to supply seamless
user interfaces with configurable scripts.



11



Figure 3. Adapt
ive subspace partition collision detection



Figure 4. A virtual 3D store implemented based on NetGL


Figure 5. A design environment for store implemented based on NetGL

12



Figure 6. A 3d virtual goods demonstration implemented based on NetGL


(Zhanpeng,2
011)


Example
:

WebGL Implementation on Medical field.

Medical imaging web applications require complex mechanisms to display and
interact with 3D medical volumes. This is mainly due to the lack of native support for
3D computer graphics interaction inside

modern browsers. Internet browser plug
-
ins
is commonly used to work around this limitation. However these alternatives have to
simulate many of the operations that otherwise would be done in graphics hardware.
This is changing thanks to upcoming web stand
ards like HTML5 and WebGL that
enable the native processing of 3D volumes and 3D scenes inside modern web
browsers by accessing the underlying graphics hardware. Current software libraries
that offer high
-
level rendering services like the Visualization Too
lKit (VTK) can be
integrated with these technologies leveraging the capabilities of current applications.


Figure7
. HTML5 + WebGL support local rendering exploiting local hardware
resources.


13


Using WebGL and HTML5 (Figure 7
), a clinician would be able to
request and
interact with a 3D medical image in the same fashion that one can access music or
videos online. The benefit of this approach is that the physician could obtain access to
images of his patients without downloading them to his computer. The imag
es could
stay in a secure server and the physician could perform functions (registration,
segmentation, marching cubes to generate a surface, etc.) in a web application context.
If the physician’s computer is compromised, the patient’s information would no
t be
on it, and the integrity of the patient’s privacy would be maintained.



Figure8
. Wt enables VTK applications running in the server to be accessed from a
remote client



WEB
-
READY
VTK APPLICATIONS

WebGL is a general purpose library and does not
provide the high level programming
interface for visualization that is available in libraries such as the Visualization
Toolkit (VTK). Therefore to use WebGL, for developing medical imaging
applications, a library (e.g. VTK) would need to be built on top o
f WebGL.
Fortunately, this is not necessary because VTK uses OpenGL and the OpenGL code
can be replaced by WebGL code. In other words, VTK could work with WebGL to
render web
-
ready 3D interactive scenes.

Given that WebGL is a web technology
while VTK is no
t, it is necessary to use a third l
ibrary to connect them (Figure 8
). Wt
is a library that allows programming graphical user interfaces (GUI) that are rendered
in a web browser. There is no need to learn HTML programming with Wt because it
internally gener
ates all the required code to represent C++ GUI classes as HTML
components.

In the case where VTK is not present, WebGL can still be exploited
thanks to the support of the COLLADA format. Also Using this format any
application can visualize and manipulate
3D medical images using just WebGL in the
client’s web browser.

(Diego,

2011)




14


Experimental Projects


(1)
Google Earth linking with 3D objects
(http://weeraphan.com/googleearth)


Figure9.
3D object on Google Earth experimental


Coding

Description

<
script type="text/javascript"
src="http://www.google.com/jsapi?key=AIzaSyD6GYan0ceu4_VOIm2BmFo
Q5JrBqfms4Z8"></script>

google api key, you should
register from Google

<script type="text/javascript">

var map;


google.load("maps", "2.x");


function init() {

map = new GMap2(document.getElementById('map3d'));

map.setCenter(new GLatLng(12.53, 100.52), 4);

map.addControl(new GHierarchicalMapTypeControl());

map.addControl(new GLargeMapControl());

map.addMapType(G_SATELLITE_3D_MAP);

map.addOverlay(polyline);

}


var

ge;

var la;

var latitude;

var longitude;

var heading;

var buildings;

var turning;

var frameendEL;

var kmzs;

var nls;

google.load("earth", "1");


Define variable for fly to your
Object

function init() {

google.earth.createInstance('map3d', initCB, failure
CB);

}

function initCB(instance) {

ge = instance;

ge.getWindow().setVisibility(true);

Function

15


ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);

ge.getLayerRoot().enableLayerById(ge.LAYER_BORDE
RS, false);

ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN,true);

la =
ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

var win = ge.getWindow();

nls=[];

loadKmz('http://weeraphan.com/h
eritag
e/3d_ict.kmz');

}


function toggleBuildings() {

buildings = true;

toggleVisibilityNLs(true);

ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, buildings);


}


function loadKmz(kmzFile){


var networkLink = ge.createNetworkLink("");

networkLink.setName("Opened KMZ File");

networkLink.setFlyToView(false);

var link = ge.createLink("");

link.setHref(kmzFile);

networkLink.setLink(link);

networkLink.setVisibility(true);

ge.getFeatures().appendChild(networkLink);

nls.push(networkLink);


re
turn networkLink;

}



function toggleVisibilityNLs(visibility){

var nl;

for (var x=0; x<100; x+=1){


nls[x
].setVisibility(visibility);


}
}


function failureCB() {

alert('Go
ogle earth loading failed!');

}


function createPlacemark(lat,lng){

var placemark

= ge.createPlacemark('');

var point = ge.createPoint('');

point.setLatitude(lat);

point.setLongitude(lng);

placemark.setGeometry(point);

ge.getFeatu
res().appendChild(placemark);

}


function za(lat,lng,head,range,altitude,tilt){

turning = false;

latitude
= lat;

longitude = lng;

heading = head;

la.set(lat,lng,0,ge.ALTITUDE_RELATIVE_TO_GROUND,heading,tilt,range)
;

toggleFrameendEL();

ge.getOptions().setFlyToSpeed(.25);

ge.getView().setAbstra
ctView(la);

turning = false;


}


function toggleFrameendEL(){

if (!f
rameendEL){

window.google.earth.addEventListener(ge, 'frameend', zoomAround);


16


frameendEL = true;

}else{

google.earth.removeEventListener(ge, 'frameend', zoomAround);

frameendEL = false;

}


}

function zoomAround(){


latemp =
ge.getView().copyAsLookAt(ge.A
LTITUDE_RELATIVE_TO_GROUND);


if ((latemp.getLatitude().toFixed(4) == latitude.toFixed(4) &&
latemp.getLongitude().toFixed(4) == longitude.toFixed(4))|turning
){

turn();

turning = true;


}

}


function buttonClick(lat,lng,head,range,altitude,tilt) {

za(lat,
lng,head,range,altitude,tilt);

}

function stopFly() {

if(frameendEL){

toggleFrameendEL();

}

ge.getOptions().setFl
yToSpeed(1);

turning = false;

}


function finished(object) {

if (!object) {

alert('bad or NULL kml');

return;

}

ge.getFeatures().appendChild(object);

var la = ge.createLookAt('');

la.set(59.110426, 10.226211, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,

180, 60, 500);

ge.getView().setAbstractView(la);

}


var url = '';

google.earth
.fetchKml(ge, url, finished);


</script>

<
/head>


<body onload='init()' id='body'>


HTML body onload call
function

<input name="button2" type="image"
onclick="buttonClick(13.77372222222222,100.5403,0,43652,0,0)"
value="ICT 3D Building" src="images/menu_top/Screenshot5_02_04.jpg"/>


HTML onclick
send coordinate
… to Javascript functions

<input name="button3" type="image"
onclick="buttonClick(18.7890694444444444,98.986386111111111,0,3931,0,0
)" value="ICT 3D Building" src="images/menu_top/Screenshot5_02_06.jpg"/>




More detail

of Google Earth API
:


Google Earth API.

The Google Earth Plugin and its JavaScript API let you embed the full power of
Google Earth and its 3D rendering capabilities into your web pages. Just like in the
Google Maps API, you can draw markers and lines

but in 3D!


17


The Google

Earth Plugin


The Google Earth Plugin is currently supported on the following platforms:



Microsoft Windows (XP, and Vista)


o

Google Chrome 5.0+

o

Internet Explorer 7.0+

o

Firefox 3.0+

o

Flock 1.0+



Apple Mac OS X 10.5 and higher (Intel)


o

Google Chrome 5.0+

o

Safari

3.1+

o

Firefox 3.0+

Using the Google Earth API

To load the Google Earth Plugin in your web page, you need to:

1.

Load the Google Earth API.

2.

Create a

DIV

element to hold the plugin.

3.

Create functions to initialize the plugin.

4.

Call the initialization functions
once the page has loaded.

Loading the Google Earth API

Place the following tag in the
<head>

of your HTML page:

<script

type
=
"text/javascript"

src
=
"https://www.google.com/jsapi"
></script>

The tag's
src

points to a JavaScript file with a single method,
goog
le.load
, used to
load individual Google APIs. Inside a new
<script>

tag, call:

google
.
load
(
"earth"
,

"1"
);

This tells Google to load the
earth

module into the
google.earth

namespace, and
specifies version 1 (the last stable version of the API). To specify the latest test
version of the API, specify
"1.x"
.

For more information on the loading mechanism, refer to the
Google AJAX APIs

documentation.

Creating a container for the plugin

The Google Earth Plugin is loaded into a DIV element with a unique id. Add the DIV
to your page's
<body>

section:

<div

id
=
"map3d"

style
=
"
height
:

400px
;

width
:

600px
;
"
>
</div>

18


In the example above, the DIV named
map3d

will become the target element for the
plugin.

Creating initialization functions

You will create three functions as part of this step. In order, they will:



Attempt to create a new instance of the plugin.



Be
called when the plugin instance is successfully created.



Be called if the instance cannot be created.

The first function looks like this:

function

init
()

{



google
.
earth
.
createInstance
(
'map3d'
,

initCB
,

failureCB
);

}

google.earth.createInstance

here shows three options: the DIV element into
which the instance should be added, the function to call when success is returned, and
the function to call if a failure is returned. In addition to these options, you can
specify an
alternative database

to connect to, in order to display
Mars

i
magery or to
connect to an Earth Enterprise database.

The success callback function will contain all of the code required to set up your 'first
run' experience
-

all of the objects and views that will first appear when your plugin
instance is loaded in the

browser. This function must contain the
GEWindow.setVisibility

method, setting the window visibility to
true
, so that the
plugin is visible inside its DIV:

function

initCB
(
instance
)

{




ge
=

instance
;




ge
.
getWindow
().
setVisibility
(
true
);

}

The failure
callback can contain any code to deal with a failure to create the plugin
instance. The error code is passed to the callback function, and can be repeated on the
page or as an alert, if desired. Throughout this guide, the error callback function is left
em
pty:

function

failureCB
(
errorCode
)

{

}

Calling the initialization function when the page is loaded

The google namespace includes the
setOnLoadCallback()

function, which calls the
specified function once the HTML page and requested APIs have been loaded. Us
ing
this function ensures that the plugin is not loaded until the page's DOM is completely
built out.

google
.
setOnLoadCallback
(
init
);

19


Complete example

<html>

<head>



<title>
Sample
</title>



<script

type
=
"text/javascript"

src
=
"https://www.google.com/jsapi"
>

</script>



<script

type
=
"text/javascript"
>





var

ge
;





google
.
load
(
"earth"
,

"1"
);






function

init
()

{







google
.
earth
.
createInstance
(
'map3d'
,

initCB
,

failureCB
);





}






function

initCB
(
instance
)

{







ge
=

instance
;







ge
.
getWindow
().
setVisibility
(
true
);





}






function

failureCB
(
errorCode
)

{





}






google
.
setOnLoadCallback
(
init
);



</script>


</head>

<body>



<div

id
=
"map3d"

style
=
"
height
:

400px
;

width
:

600px
;
"
></div>

</body>

</html>

Loading Additional Databases

You can load your own database to display on the Google Earth globe by specifying
that database during initialization, or by calling
addSideDatabase()

on the Earth
object. Loading a database at initialization will load only that database; the standard
Goog
le Earth imagery will not be loaded.

To load a database when initializing the plugin:

function

init
()

{



google
.
earth
.
createInstance
(
'map3d'
,

initCB
,

failureCB
,

{





database
:

'http://khmdb.google.com/?db=moon'
,





username
:

''
,





password
:

''

// If
your server requires these.



});

}

Using
addSideDatabase()
:

google
.
earth
.
addSideDatabase
(



ge
,

'http://khmdb.google.com/?db=mars'
,





sideDatabaseSuccess
,





sideDatabaseFail
,





{







userName
:

''
,







password
:

''

20






}

);

For information about
the Mars and Moon databases shown in the examples above,
please read the
Sky, Mars, and Moon

chapter of this guide.

Google Maps Engine maps

Note
: Google Maps Engine u
ses the term
map

to refer to a collection of imagery and
vector layers; it is the equivalent of a
database

in Google Earth Enterprise Fusion Pro.
For more information, please refer to the
Terminology

section of the
Tips for users of
Google Earth Enterprise

support article.

Google Maps Engine maps can be loaded into the plugin using the methods above.
The URL to a specific map is o
btained by clicking the
Google Earth

option in the
Published Links

section of any published map's
Details

page.

google
.
earth
.
addSideDatabase
(



ge
,

'https://earthbuilder.google.com/10446176163891957399
-
13516001307527776624
-
4/kh/'
,





sideDatabaseSuccess
,





sideDatabaseFail
,





{







userName
:

''
,







password
:

''





}

);

View sample
:
https://developers.google.com/earth/documentation/samples/addSideDatab
ase_noauth

If your map is public, no additional steps are required. If your map is private, you'll
need to provide authentication credentials.

Authentication for Google Maps Engine maps

Users can authenticate to your map using their Google Account, if you'
ve granted
them access in Maps Engine. This is done using an OAuth 2.0 token; for information,
please refer to the
OAuth 2.0 documentation
.

An example of loading the Earth API with an
OAuth 2.0 token is below. You'll need:



An
application ID
, obtained from the
API Access

page of the API Console at
https://code.google.com/apis/console
.



A valid
redirect URI
, also configured in the API
Console. In the example
below, it's assumed that the redirect URI is set to the same value as the
application's URI (i.e. the authentication process will return the user to the
originating page once authentication is complete).

var

ge
;


// Google Maps API
for Business users must specify their client ID
when loading

21


// the Google Earth API.

// var params =
{"other_params":"client=
YOUR_MAPSFORBUSINESS_CLIENTID
&sensor=false"};

var

params
=

{
"other_params"
:
"sensor=false"
};

google
.
load
(
"earth"
,

"1"
,

params
);


fu
nction

init
()

{



var

hash_value
=

window
.
location
.
hash
;



if

(!
hash_value
)

{





var

redirect_url
=

"https://accounts.google.com/o/oauth2/auth"
;





// The client_id value below is obtained from the
APIs Console
.





// It is not the same as a Google Maps API for Business client
ID.





redirect_url
+=

"?client_id=370755043334.apps.googleusercontent.com"
;





redirect_url
+=

"&redirect_uri="

+

window
.
location
.
href
;





redirect_url
+=

"&scope=https://
www.googleapis.com/auth/earthbuilder.readonly"



















+

"%20https://www.googleapis.com/auth/userinfo.email"
;





redirect_url
+=

"&response_type=token"
;





window
.
location
=

redirect_url
;





return
;



}




if

(
hash_value
[
0
]

==

"#"
)

{





hash_value
=

hash_value
.
slice
(
1
);



}




var

hash_parts
=

hash_value
.
split
(
"&"
);



for

(
var

i
=

0
;

i
<

hash_parts
.
length
;

++
i
)

{





var

name_value
=

hash_parts
[
i
].
split
(
"="
);





if

(
name_value
.
length
==

2
)

{







var

name
=

name_value
[
0
];







var

value
=

name_value
[
1
];







if

(
name
==

"access_token"
)

{









g_oauth_token_value
=

value
;







}





}



}




if

(!
g_oauth_token_value
)

{





return
;



}




var

optArgs
=

{





oauth2Info
:

{







oauthToken
:

g_oauth_token_value
,







signingUrl
:

'https://earthbuilder.google.com/'





}



};



google
.
earth
.
createInstance
(
'map3d'
,

initCB
,

failureCB
,

optArgs
);

}


function

initCB
(
instance
)

{



ge
=

instance
;



ge
.
getWindow
().
setVisibility
(
true
);



ge
.
getOptions
().
setStatusBarVisibility
(
true
);



ge
.
getNavigationControl
().
setVisibility
(
ge
.
VISIBILITY_AUTO
);



ge
.
getLayerRoot
().
enableLayerById
(
ge
.
LAYER_BORDERS
,

true
);



ge
.
getLayerRoot
().
enableLayerById
(
ge
.
LAYER_ROADS
,

true
);

22





var

lookAt
=

ge
.
createLookAt
(
''
);



lookAt
.
setLatitude
(
41.26
);



lookAt
.
setLongitude
(
-
100.00
);



lookAt
.
setRange
(
800000.0
);



ge
.
getView
().
setAbstractView
(
lookAt
);




// Substitute a valid Maps Engine URL below. The URL is obtained



// by clicking the
Google Earth

option in the
Published Links



// section of any published ma
p's
Details

page.



var

earthDb
=

'https://earthbuilder.google.com/
01234
-
5678
-
9
/kh/'
;



google
.
earth
.
addSideDatabase
(





ge
,

earthDb
,





sideDatabaseSuccess
,





sideDatabaseFail
,





{







userName
:

''
,







password
:

''





}



);

}


function

failureCB
(
errorCode
)

{



alert
(
errorCode
);

}


function

sideDatabaseSuccess
(
db
)

{



db
.
setDrawOrder
(
2
);

}


function

sideDatabaseFail
()

{



alert
(
'Failed to add side database connection.'
);

}


google
.
setOnLoadCallback
(
init
);




23


(2)
We
b
b
log for construct
WebGL Idea



Figure10. Weeraphan Web blog


URL:
http://weeraphan.com

Hosting server: Linux Apache, MySQL

Web Application: Word
-
press

Main Menu: Home, Experimental Projects, Keywords glossary, Presentation, WebGL
Res
ource

Objective: Collect and Distribute the knowledge of WebGL direct to my Topic
(WebGl Based linking Visual Interface Geography and Cultural Artifact)


(3)
WebGL Earth Development

(http://weeraphan.com/weapp)


Figure11. WebGL Earth experiment on own
hosting

24



Implementation

The practical result of this work is a fully functional open
-
source project, although
some parts and features are still in the “beta” phase. This section introduces some of
the tools used during the development and describes importa
nt and/or interesting parts
of the implementation at the time of writing this document.

Closure Tools

Closure Tools
is a set of tools designed for efficient JavaScript development. It is
being actively developed by Google as a base for their large applica
tions such as
Gmail, Google Maps, or Google Docs. Closure Tools were released as
open
-
source
in
November 2009 and Google is accepting patches since May 2010. The main purpose
of Closure Tools is to make JavaScript development easier and more efficient by
k
eeping the code clean and easy to read. We decided to use Closure Tools for WebGL
Earth development to make it easy for anyone who would like to join the project in
the future.

Closure Library

The
Closure Library
is an object
-
oriented codebase with modula
r architecture that
contains a lot of useful functions and classes for a wide range of web
-
related tasks
such as DOM manipulation, WYSIWYG editor or even client

server communication
utilities.

The library also provides module
-
dependency and a namespace sy
stem or class
inheritance that can help programmers to achieve consistent project structuring and
higher maintainability. Because it’s divided into a lot of small files (modules), the
best practice is to use Closure Compiler along with the library to minif
y the code.

Closure Compiler

The
Closure Compiler
is an optimization tool that can be used to “compile”
JavaScript source code into faster and more compact, though behaviorally
-
equivalent,
output. It utilizes several different optimization techniques such

as function in lining,
dead code removal, function and property renaming, constant folding, etc.

Closure Linter

Another important part of Closure Tools is a rather small utility for code style
checking. When developing a project together with other peopl
e, it is often difficult to
make every contributor follow the same code style guidelines.
Closure Linter

notifies
the programmer of the most common violations of good JavaScript coding practices
1

and is even able to auto
-
fix most of them.

25


Project overview

We utilize Closure Tools to organize the code of WebGL Earth into a number of
namespaces and modules (figure

12
).



Figure12.
Visualization of the most important classes and
modules

The project is divided into three main parts. The namespace
we

(
W
ebGL
E
arth)
serves as a codebase and provides all of the core functionality for the other two
namespaces called
weapp

and
api
. As their names suggest,
weapp

represents the final
appli
cation (and additional UI (
User Interface
) controls) running on
http://www.webglearth.com/
, while
api

contains an application and exports for the
WebGL Earth API
. If a programmer wants to build his own, complex application, the
codebase in the
we

namespace should be used together with the Closure Compiler.
However, for simple applications that use only the most common operations, the API
should provide enough func
tionality and can be easily used together with a wide
variety of JavaScript libraries and compilers.

This approach is similar to Google Maps model, where the core codebase is shared
between the Google Maps application itself (running at
http://maps.google.com/
) and
the public JavaScript API.

CodeBase Installation

F
ollow to setup WebGL Earth development environment:

1.

You need

Python Interpreter

and

Java Virtual Machine

in order
to

successfully compile WebGL Earth source code.

2.

Download the source code from our GitHub
repository:

https://github.com/webglearth/webglearth

3.

Under Linux & Mac: just run "make"

4.

Under Windows: download latest

Closure Library

and unpack
the

Closure Compiler

into the project directory.

Now you are ready to
run build_app.bat to build WebGL Earth Application or build_api.bat to
build WebGL Earth API.


26


Note :
The directory of Closure Compiler should in the same that you
install Python Interpre
ter into.

5.

Upload index file to hosting (http://weeraphan.com/weapp) include file
in same directory (weapp)

WebGL Earth API

The "Hello World"


<!DOCTYPE HTML>

<html>

<head>

<script src="
http://www.webglearth.com/api.js
"></script>

<script>



function
initialize() {





var options = { zoom: 3.0, position: [47.19537,8.524404] };





var earth = new WebGLEarth('earth_div', options);



}

</script>

</head>

<body onload="
initialize()
">



<h1>WebGL Earth API: Hello World</h1>



<div id="earth_div" style="wid
th:600px;height:400px;border:1px
solid gray; padding:2px;"></div>

</body>

</html>



Figure13.
WebGL Earth API: Hello World



27


Future Plan

















Figure 14
.

Research concept framework

Features of System

Earth Map :

-
Rotation and Zoom of the globe.

-
Tilt of the
camera.

-
Free movement in space.

-
Search

-
Runs without a plugin modern webbrowers.

-
Displays existing maps(OpenstreetMap, Bing..)


-
3D Museum library for Developer.

-
Insert 3DBuilding, 3DTemple, 3DArtifact.

-
Provide API for developer.


-
Online Exhibition


-
Online Collection


-
Online Learning



Cultural artifact


Digitization

In
-
hand
scanning

3D
Modeling


Cultural
heritage

Geography Web publishing/WebGL Earth

Weapp

Library

3D
Multimedia
contents

API

Internet browing of

3D CH artifacts

28


Action

Plan

Schedule

Year 1

Year2

Year3

1.


Study of OpenGL and WebGL




2.


Review literature : Cultural heritage and WebGL




3.

Digitization (In
-
hand scanning, 3D modeling)




4.

Develop software for convert 3D to WebGL Earth




5.

Provide Library / API for developer : insert 3D object to WebGL Earth




6.

Develop WebGL Cultural Heritage+WebGL Earth




7.

Provide Library and API for developer : for develop their own web




8.

Write
report















29


References:


1.

Frederic Larue, Marco Di Benedutto, Matteo Dellepiane and Reberto Scopigno,
From the Digitization of Cultural Artifacts to the Web Publishing of Digital
3D Collections: an Automatic Pipeline for
Knowledge Sharing, ISTI
-
CNR,
Pisa, Italy. 2012

2.

Huang Zhanpeng, Gong Guanghong, Han Liang, NetGL: A 3D Graphics
Framework for Next Generation Web, Beijing, 100191, China, 2011

3.

Dorde Golubovic, Goran Miljkovic, WebGL implementation in WebKit based
web browse
r on Android platform, 2011

4.

Lei Feng, Chaoliang Wang. A Research for 3D WebGIS Based on WebGL,
Beijing, China. 2011.

5.

https://developers.google.com/earth/documentation/examples

: Google Earth
API Example

6.

http://www.namchok.com/webgl/



: WebGL Tutorial, Basic, Graphic design

7.

http://www.webglearth.org/

: WebGL opensource application, Earth,
Codebase, Api

8.

http://wiki.oak3d.com/index.php?title=Oak3D

: free JavaScript framework for
3D graphics development

9.

http://wiki.openwebglobe.org/

: OpenWebGlobe


OpenSource Virtual Globe
written in JavaScript/WebGL

10.

http://www.khronos.org/webgl/

: WebGL


Open
GL ES 2.0 for the Web

11.

http://www.khronos.org/webgl/wiki/Main_Page

:

WebGL public wiki!
resources for help to learn about WebGL

12.

http
://www.3dsitelinks.com/

:

Beautiful new 3D websites are starting to
appear online

13.

http://www.khronos.org/developers/books

: WebGL Books

14.

http://swiss3d.openwebglobe.org/

:

The demo version of a potential 3D
Viewer for geo.admin.ch

15.

http://it
-
ebooks.info

: Free download IT ebooks

16.

http://learning
webgl.com/blog/?page_id=1217

: Learning WebGL Step by
Step