Importing a Google SketchUp model (Part 2)

Okay. Now that we have a way to "fix" Google SketchUp COLLADA files, let's go on and see what needs to be done.

To recap, Part 1 shows you the steps to import Google SketchUp models for GermaniumWeb. The additional step, between step 3 and 4, is to run your DAE file through DAE Fixer. Save and overwrite your DAE file with what is returned. Repeat if there's more than one DAE file.

Steps 4 onwards remains the same. Here's the result:

Click to run in GermaniumWeb

Not too bad eh?

Fixing broken COLLADA files

COLLADA is an extremely flexible but confusing format, and it's no wonder a lot of companies got it wrong/has different interpretation of the format. One of those things is transparency. To cut the long story short, Google SketchUp produces .dae files with inverted transparency values. Two possible fixes:

1. Add RGB_ZERO to the <transparency> element
   
2. Invert the transparency value
   

I work with COLLADA files quite a fair bit and so I wrote a script to make it easy for me to fix problematic files. I've also done a web interface for it so that hopefully others can benefit from it too. To use, go to:



A couple of options for you to choose from. For Google SketchUp .dae fix, simply choose Invert current transparency value and leave the other options as Do nothing. Upload your file and it will perform the necessary processing and return you a file with all the changes done. Simple as that.

P/S: The usual disclaimers apply. :-)

Importing a Google SketchUp model (Part 1)

You may be wondering how to load your own model (or other people's models) in GermaniumWeb. This is what I'm going to talk about in this article (It'll prob take you 15-20 mins to follow with hands-on). Here goes:

The GermaniumWeb API has a Load() method that can be use to load a building model with a xlcl extension. However the details of this xlcl is at best sketchy. The good news is there's a tool that allows you to roll your own xlcl file, sort of. Let's see how we can use this tool to import a SketchUp model from the Google 3D Warehouse.

To follow this tutorial you must first install GermaniumWeb and Building Composer.

1. Find a nice model from the warehouse, preferably a room. For this tutorial, we'll be using this model.
   


2. Under [Download Model], download the COLLADA (.zip) file. In some cases only the SketchUp skp file is available. Not to worry, simply open the skp file in SketchUp and export it as KMZ file. Then rename the file extension from KMZ to ZIP.
   


3. Extract the ZIP file somewhere. Use Windows Explorer to locate the folder that contains the COLLADA (.DAE) file. It's usually in models/. Keep it open.
   


4. Launch Building Composer. Drag the .DAE file from Explorer into the colorful background of Building Composer. You'll see a couple of boxes appearing. Drop the file in the box above ground.
   
   
   


5. You have just imported a level. To finish, goto Export > Export Scene. Select a location to save the xlcl file and other associated files. Cross your fingers ;-)
   


6. Congrats! If you have reached here, export must be successful. Go to Export > View Exported Scene. This will launch your browser to view the file you've just exported using GermaniumWeb. The result:
   
   
   

Wait a min. That doesn't look right. What happened??!

Hmm, Google SketchUp seems to be doing something wrong. But not to worry, it's quite easy to fix and that's coming right up.

GermaniumWeb API 101

The API doc can be found here: http://www.germanium3d.com/code/api/

That seems like a good reference, but what do you need to know to get started?
Hello Germanium is a good place to start. Let's analyze that.

1. You need to include the JSAPI in your html
   

   
   <script type="text/javascript" src="http://api.germanium3d.com/?v=1.0&key=d3ddf431f5f9f035839c7bdd727a4f28"></script>
   
   

   
   
   
   There are 3 parts to this:
   

   
   
   • Getting the JSAPI from http://api.germanium3d.com.
     
   • Requesting for a API version (in this case 1.0).
     
   • Specifying a key. This key is linked to the URL where your html is hosted. You must sign up for a key to deploy the html in your website.
     

   
   
   
   


2. Specifying a DIV and initializing the DIV for GermaniumWeb
   

   
   ...
   Germanium.CreateInstance("myGerm", InitSuccessCallback);
   ...
   <div id="myGerm" style="height: 500px"></div>
   
   

   
   


3. Saving the webcontrol for future use. The WebControl is the main class to work with and the success callback is called with an instance of the class.
   

   
   function InitSuccessCallback(webcontrol)
   {
    germ = webcontrol;
    ...
   }
   
   

That's it. This is the bare minimum you need to get started. Really.

The website has some nice examples. Yup, one of them is from me ;-)

Introducing GermaniumWeb

Apologies for the long overdue post. Check out:

http://www.germanium3d.com

Some Q&A that you might be interested in.

Q. Is GermaniumWeb yet another 3D engine?
A. No. GermaniumWeb contains a 3D engine that is optimized for what it does. But it is not a general-purpose 3D engine like say openscenegraph.

Q. Is GermaniumWeb a Google Earth plugin wannabe?
A. No. GermaniumWeb is not intended to replace GE plugin. It is in fact a very good complement to GE plugin. You can think of GermaniumWeb as analogous to Google Earth for buildings.

Q. Why use a 3D plugin as opposed to say Java3D?
A. There is a good reason why some of the best 3D web applications out there are done using plugins. Nothing comes close to the user experience and performance of a native purpose-built plugin, especially when it comes to 3D.

Q. If I'm going to be using a plugin, why not X3D, or O3D, or <name your fav 3D plugin>?
A. GermaniumWeb is not a 3D engine or a scene graph. It encapsulates low-level stuff - like building representation, camera management, visibility logic etc. - so that you can concentrate on building useful and easy to deploy 3D in-building web applications.

So what are you waiting for? Start downloading and start coding already!

I've landed

This is a blog (mostly) about GermaniumWeb and related stuff. Huh? What the hell is GermaniumWeb? Lemme answer that in the next post. :-)