GermaniumWeb is not a 3D engine like WebGL, O3D, Unity3DIt is an mapping engine like Google Earth or Bing Maps 3D, but specialized for interiorsThat means you don’t have to learn advanced 3D graphics and deal with triangles and shaders, learn complex 3D coordinate systems.You do get easy access to rich functionality such as placemarks and the eye/camera.
… of an app. Let’s take a look at the conceptual steps to getting GermaniumWeb into your webpage.
When the HTML has been loaded, call the Init() function.TheInit() function puts GermWeb into the prepared div, and asks the API to call the OnInitOk function when ready. The OnInitOk function receives the WebControl, which is the master plugin object.
Ask the WebControl object to download & load a building.
Mouse guide:LMB: pan laterallyMMB: orbitRMB: zoom
That was the introduction to GermaniumWeb
The other things you’ll learn today are
how to manipulate buildings and the eye
how to use placemarks to mark an important part of the building
Then we’ll briefly go through other features not covered by this training
And cover issues to be aware of while developing your webapp
So let’s start with buildings.
Germanium models the world as collections of buildings, blocks, and levels. Buildings (or rather, building complexes) are made of blocks. Blocks are made of levels, stacked vertically. This is very intuitive and fits with our common understanding of ‘a building’.For short, we refer to them as ‘BBL’ objects.
Note that buildings are modeled beforehand, and just loaded into the app at runtime. At runtime, you merely manipulate the loaded model, e.g. turning on/off levels , move the eye to take a closer look at level 2, etc.We will cover building modeling in the app development issues later.
So that was the view of the BBL through a webpage interface. So how do you as a developer get access to the BBL to program its behaviour?BBLid – Unique within its parent’s scope, so to specify a level, you need its building, block, and level bblid. Specified by modeler, e.g. using Building ComposerFor Generic office and the other buildings on our website, you can find out the bblids using their viewer appsFor other buildings, can use the code snippet on our interactive sampler on our website.Introduce API Documentation when showing Level. Show how to get there on website.Introduce callback functions.Samples: Load a buildingHide a levelHide other levels
So now that we know how to show Level 2, and hide the levels above it, we want to show our user something on Level 2, e.g. a meeting area. In other words, we want to bring Germanium’s eye over to the room.
First up, is the Eye itself.The eye consists of several parameters:positionorientationtarget distancetarget position - which can be derived, or set directlyGermanium allows you to set the target position because you usually want to tell the eye to look at something rather than where to go.Right now we’re only concerned with the target position, because we want to look at the meeting area. This position is specified in Germanium’s
… 3D Coordinate System.
Arrows point in the positive direction.
How do you remember which direction to rotate?
Personally I find it easier to remember the thumbscrew rule. After all, I carry my fingers around with me everywhere, not a diagram
Germanium’s coordinate system works in radians. If you’re like me, and you prefer to think in degrees, there’s a convenient function to convert it for you.
Just accept the 3D coordinates for now, I’ll explain later how to get them.In this sample, you can see several things going on, so let’s take a closer look at them one by one.Samples:Set a target positionGlide to a target position
Setting the position directly is bad as it makes users lose their orientation. Far better to animatedly bring your users from where they are to what you want to show them. To do this, we use the glide functions. If you’re familiar with Google Earth, they call this feature “fly-to”.
Samples:Glide to a levelGlide to a level with orientation
Break from 1100-1120 or 1500-1520
Previously the coordinates were just provided. Here’s how to get them. So, you can see the position you want, so how do you get the 3D coordinates of that point?
Germanium does tell you when the user clicks, and where in the window s/he clicked. With the help of Compute3DIntersection(), you can convert this to 3D coordinates.Let’s take a look the 2 parts one by one. First up are events.
Events are very similar to theCreateInstance and Load callbacks we’ve already seen. Both events and callbacks tell you when something has happened.
Events not only tell you when something has happened, they give you more information about the event, e.g. mouse button, window coordinates, etc.This click + Compute3DIntersection combination is very useful, as we’ll see later in the placemarks.Samples:1. Get clicked position
Placemarks allow you to annotate the building and mark out places of significance.
Placemark – name, description, contentGeometry - the fundamental shape of the placemark, e.g. when you’re concerned with ‘Where Am I?’ you’re thinking of a 3D coordinate position. Whether it looks like a diamond, arrow, or icon, is unimportant at this time.GeometryStyleapplies a visual look to the geometry. Similar to HTML and CSS.
Can control color and shape of the diamond.
Can control color and shape of the arrow.
Icons are useful when you want the placemark to look the same size no matter how far away you are.Can use practically any image on the web.
Can apply line patterns.Can animate.
Specify vertices, Germanium will fill in the polygon. Can also extrude.
Samples:All placemark samplesFor more code examples, http://www.germanium3d.com/code/LinePolygonConcepts
Hands-on Session from 1200-1220 or 1600-1620
Auto-rotationSolid background color, SkyboxOrthographic viewFirst Person NavigationClip Planes
This section is for people who don’t already have a web development environment.
…tasks you will probably have to perform for the competition.It’s also possible that your webapp will be very simple, don’t need live data or to save data, you can skip all this and just run a single machine.
If you do need a server environment and don’t already have one, here’s what we recommend.
When you develop a real web or mobile application, you will very likely need to perform some common tasks or operations. I’ll just be listing some of the most common ones, so if you don’t already know how to do them, you can prepare for the competition by trying them out.
#2 – GMail = 100% user-specific. Google My Maps = partially user-specific.#5 – Desired behaviour rather than an operation.
This step is Germanium-specific, for those of you who want to Bring Your Own Building
How to place geopositioned data on SoC:http://www.germanium3d.com/forum/viewtopic.php?f=2&t=399
Allowed to do this before competition
We also have a real-time modeling guide on our website, which gives pointers on how to optimize your building model.
So after modeling, you need to deploy the building file on a server. Or if you want to make a local copy of our sample buildings on your own server.
1. Setup<br />Bookmarkhttp://www.germanium3d.com/cxa2010/links<br />Wi-Fi: Connect to rpguest network<br />Install a web debugger if you don’t have one:<br /><ul><li>Firebug for Firefox; or
2. IE Developer Tools for IE</li></ul>Training will begin at 10:00<br />
89. Common Web Dev Tasks<br />Setting up the server environment<br />Commonwebapp operations<br />Bringing your own building (BYOB)<br /><ul><li>Modeling
90. Deploying</li></li></ul><li>1. Setting up the serverenvironment<br />
91. Setting up the server environment<br />index.html<br />www.example.com<br />/<br />- Apache<br />- MySQL<br />- PHP<br />webserver<br />database<br />scripting language<br />-Apache<br />- MySQL<br />- PHP<br />JBoss<br />e.g. WAMP, LAMP, XAMPP<br />
92. 2. Common webapp operations<br />
93. Common webapp operations<br />Store local state, e.g. cookies<br />Provide user-specific interactions, e.g. sessions<br />Query live data from the server<br />Save user data to the server<br />Perform all of the above asynchronously<br />
94. 3. Bring Your Own Building<br />
95. Provided buildings<br />http://www.germanium3d.com/code/SampleBuildings<br />Shopping Mall<br />Office Building<br />Coming soon<br />NUS School of Computing<br />Republic Polytechnic<br />
96. BYOB - Modeling<br />Quick and easy way:<br />KML Building Importer<br />
97. BYOB - Modeling<br />Full 3D way:<br />COLLADA<br />
100. BYOB – Deploying files<br />Things to look out for:<br />Use relative paths <br />Preserve directory structure<br />Check your filename capitalizatione.g. Floor.jpg vs floor.jpg<br />Hostedwebapps are not allowed to load local files<br /><ul><li>Local webapp -> local file OK