GermaniumWeb training for CXA2010

Editor's Notes

1. 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.
2. … of an app. Let’s take a look at the conceptual steps to getting GermaniumWeb into your webpage.
3. 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.
4. Ask the WebControl object to download & load a building.
5. Mouse guide:LMB: pan laterallyMMB: orbitRMB: zoom
6. That was the introduction to GermaniumWeb
7. The other things you’ll learn today are
8. how to manipulate buildings and the eye
9. how to use placemarks to mark an important part of the building
10. Then we’ll briefly go through other features not covered by this training
11. And cover issues to be aware of while developing your webapp
12. So let’s start with buildings.
13. 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.
14. 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.
15. 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
16. 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.
17. 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
18. … 3D Coordinate System.
19. Arrows point in the positive direction.
20. How do you remember which direction to rotate?
21. Personally I find it easier to remember the thumbscrew rule. After all, I carry my fingers around with me everywhere, not a diagram 
22. 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.
23. 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
24. 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”.
25. The glide functions make use of the JavaScript feature called associative arrays, which is just a fancy way of saying key-value pairs.
26. Samples:Glide to a levelGlide to a level with orientation
27. Break from 1100-1120 or 1500-1520
28. 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?
29. 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.
30. Events are very similar to theCreateInstance and Load callbacks we’ve already seen. Both events and callbacks tell you when something has happened.
31. 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
32. Placemarks allow you to annotate the building and mark out places of significance.
33. 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.
34. Can control color and shape of the diamond.
35. Can control color and shape of the arrow.
36. 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.
37. Can apply line patterns.Can animate.
38. Specify vertices, Germanium will fill in the polygon. Can also extrude.
39. Samples:All placemark samplesFor more code examples, http://www.germanium3d.com/code/LinePolygonConcepts
40. Hands-on Session from 1200-1220 or 1600-1620
41. Auto-rotationSolid background color, SkyboxOrthographic viewFirst Person NavigationClip Planes
42. This section is for people who don’t already have a web development environment.
43. …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.
44. If you do need a server environment and don’t already have one, here’s what we recommend.
45. 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.
46. #2 – GMail = 100% user-specific. Google My Maps = partially user-specific.#5 – Desired behaviour rather than an operation.
47. This step is Germanium-specific, for those of you who want to Bring Your Own Building
48. How to place geopositioned data on SoC:http://www.germanium3d.com/forum/viewtopic.php?f=2&t=399
49. Allowed to do this before competition
50. We also have a real-time modeling guide on our website, which gives pointers on how to optimize your building model.
51. 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.