![Setup Bookmarkhttp://www.germanium3d.com/cxa2010/links Wi-Fi: Connect to rpguest network Install a web debugger if you don’t have one: ,[object Object]](https://image.slidesharecdn.com/germaniumcxa2010trainingslidesharefinal-100614001725-phpapp02/85/germaniumweb-training-for-cxa2010-1-320.jpg)
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie GermaniumWeb training for CXA2010
Ähnlich wie GermaniumWeb training for CXA2010 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
GermaniumWeb training for CXA2010
- 2. IE Developer Tools for IETraining will begin at 10:00
- 3. GermaniumWebTraining SessionIan LohTechnical Product Manager
- 4. Why?
- 6. Geospatial mapping with Google Earth
- 7. Interior mapping with GermaniumWeb
- 8. What?
- 11. JavaScript API
- 12. How?
- 13. How it Works index.html JSAPI www.example.com api.germanium3d.com Web Developer + IE User GermaniumWebIE plugin
- 14. How it Works index.html JSAPI www.example.com api.germanium3d.com Web Developer + + GermaniumWebFirefox plugin Firefox User
- 15. + + IE User GermaniumWebFirefox plugin GermaniumWebIE plugin Firefox User
- 16. How it Works index.html JSAPI www.example.com api.germanium3d.com Web Developer + GermaniumWebFirefox plugin Firefox User
- 17. Basic Anatomy
- 18. 1. Target the JavaScript API <script src="http://api.germanium3d.com/?v=1.4&key=your_API_key"> </script>
- 19. 2. Add a <div> to contain GermaniumWeb <body> <div id="germdiv"style="width:100%; height:100%"></div> </body>
- 20. 3. Initialize GermaniumWeb <body onload="Init()"> <div id="germdiv" style="width:100%; height:100%"></div> </body> <script type="text/javascript"> vargerm = null; functionInit() { Germanium.CreateInstance("germdiv", OnInitOk); } functionOnInitOk(webControl) { germ = webControl; } </script>
- 21. 4. Load a building functionOnInitOk(webControl) { germ = webControl; germ.Load("http://www.germanium3d.com/static/sample/ generic_building/2.0/generic_building.xlcl"); }
- 23. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 24. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 25. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 26. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 27. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 28. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 29. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 30. Buildings
- 33. BBL Example: Office building http://www.germanium3d.com/cxa2010/links - Office Building
- 34. BBL Code Samples http://www.germanium3d.com/cxa2010/links - Code Samples
- 35. The Eye
- 36. The Eye
- 38. 3D Coordinate System - Position Right-hand, Y-up, in metres
- 39. 3D Coordinate System - Position Right-hand, Y-up, in metres
- 40. 3D Coordinate System - Orientation Default orientation of (0°, 0°, 0°) points down the negative z-axis
- 41. 3D Coordinate System - Orientation (0°, 45°, 0°) means a 45° rotation around the Y-axis
- 42. 3D Coordinate System - Orientation If you point right thumb in axis direction, fingers will point in positive rotation direction
- 43. 3D Coordinate System - Orientation All possible rotation axes
- 44. 3D Coordinate System - Orientation To work in degrees instead of radians: varright_angle = Germanium.DegreeToRadian(90);
- 45. The Eye - Setting the position http://www.germanium3d.com/cxa2010/links - Code Samples “Let’s meet up here!”
- 46. The Eye - Gliding 2 types – Look at/from somewhereor Look at something,e.g. a level, placemark - GlideTargetTo(),GlideEyeTo() - GlideEyeToFit()
- 47. The Eye - Gliding Specify parameters in an associative array germ.GetEye().GlideEyeTo( { position: [10, 0, 10], targetDistance: 5, duration: 10, // 10 seconds } ); Full list of parameters in API documentation, under Eye > Specifying glide parameters
- 48. The Eye - Gliding http://www.germanium3d.com/cxa2010/links - Code Samples
- 49. Break
- 50. How do I get the position to glide to? “I can see the point that I want, if only I could just click it!”
- 51. How do I get the position to glide to? Answer: mouse click event + Eye.Compute3DIntersection() “But… what are events?”
- 52. Events similar to callbacks, tell you when something has happened
- 53. Callback “You do something, tell me when you’re done”
- 54. Event “Tell me every time this thing happens”
- 55. Load Callback vs Event // Load callbacks germ.Load( url, options, successCallback, failureCallback); // Load event germ.AddEventHandler( Germanium.Event.OnLoadEnds, eventHandler);
- 57. Eye
- 58. File loading
- 59. BBL
- 61. ClipPlane
- 62. ErrorsFull list of events in API documentation, under Event > Event names
- 63. How do I get the position to glide to? http://www.germanium3d.com/cxa2010/links - Code Samples mouse click event + Eye.Compute3DIntersection()
- 64. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 65. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 66. Placemarks
- 67. Placemark Structure Placemark Geometry StyleSet fundamental shape GeometryStyle visual look
- 69. Arrow (point)
- 70. Icon (point)
- 71. Line
- 73. Arrow Placemark Placemark PointGeometry StyleSet ArrowStyle
- 74. Icon Placemark Placemark PointGeometry StyleSet IconStyle
- 75. Line Placemark Placemark LineStringGeometry StyleSet LineStyle
- 76. Polygon Placemark Placemark PolygonGeometry StyleSet PolygonStyle
- 77. Customizable Label Placemark PointGeometry StyleSet LabelStyle DiamondStyle
- 78. Customizable Callout Balloon Placemark PointGeometry StyleSet BalloonStyle DiamondStyle
- 79. Putting it all together Placemark Geometry StyleSet point linestring polygon BalloonStyle LabelStyle GeometryStyle diamond, arrow, icon line polygon
- 80. Placemarks - Code Examples http://www.germanium3d.com/cxa2010/links - Code Samples
- 81. Hands-on Session
- 82. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 83. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 84. GermaniumWeb Playground http://www.germanium3d.com/cxa2010/links - Playground
- 85. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 86. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 87. How it Works index.html JSAPI www.example.com api.germanium3d.com Web Developer + GermaniumWebFirefox plugin Firefox User
- 88. A typical web environment Webserver:JBoss/Apache/Tomcat/IIS scripts:PHP/Python/Perl/Ruby Appserver:JBoss/WebSphere/IIS logic: Java servlets/JSP/ASP.NET Database:MySQL/MS SQL index.html JSAPI Static files:.xlcl (Germanium buildings) Feeds:Project Nimbus/ Google Data APIs www.example.com api.germanium3d.com (GermaniumWeb API server) Data formats:JSON, XML data.example.com (data server) Browser:IE/Firefox/Chrome/Opera Plugins:GermaniumWeb/Flash/Silverlight/Java Client-side scripts:VBScript, JavaScript + jQuery/MooTools/YUI User
- 91. Setting up the server environment index.html www.example.com / - Apache - MySQL - PHP webserver database scripting language -Apache - MySQL - PHP JBoss e.g. WAMP, LAMP, XAMPP
- 92. 2. Common webapp operations
- 93. Common webapp operations Store local state, e.g. cookies Provide user-specific interactions, e.g. sessions Query live data from the server Save user data to the server Perform all of the above asynchronously
- 94. 3. Bring Your Own Building
- 95. Provided buildings http://www.germanium3d.com/code/SampleBuildings Shopping Mall Office Building Coming soon NUS School of Computing Republic Polytechnic
- 96. BYOB - Modeling Quick and easy way: KML Building Importer
- 97. BYOB - Modeling Full 3D way: COLLADA
- 98. BYOB - Modeling Real-time modeling guide
- 99. 3. BYOB - Deploying
- 101. Hosted webapp -> local file Not allowed
- 103. IntroductionBuildings & EyePlacemarksOther FeaturesWeb Development
- 104. Please give feedback:http://tinyurl.com/cxagermsurvey Questions? blog.germanium3d.com www.germanium3d.com/forum technical:ianloh@gelement.com business: shinwe@gelement.com
Hinweis der Redaktion
- 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”.
- The glide functions make use of the JavaScript feature called associative arrays, which is just a fancy way of saying key-value pairs.
- 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.