(Tested) Google O3D API: First Test and Impressions

I quickly presented Google O3D yesterday in this news. O3D is just incredible. The guys at Google have done a great work on this new gadget from Google’s Lab. One secret to spread a new technology is to provide demos, code samples and documentation, lot of documentation. Google knows it well and has provided everything to make any developer happy. Once you have downloaded the plugin you’re ready to test all demos. Yes my friends, there are many demos and samples that cover all important topics to start programming with O3D. And most important, the API is fully documented and if you’re a developer you know how this task is difficult! Congratulation to Google! What’s more, if you’re already familiar with 3D programming, you will learn O3D basis in a couple of minutes.

O3D is based on javascript. No need to learn a new language. Just add piece of javascript code on your web pages and you’re ok.

O3D is fully-shader-oriented: it does not use fixed pipeline but only the programmable pipeline of your graphics card. This is really cool if you know GPU programming (like all Geeks3D.com readers 😉 – if not stay tuned because I will start shortly a series of 3D programming tutorials…) but in the same time it can frighten novice 3D programmers (fortunately, O3D comes with a stack of baked shaders you just have to load). O3D uses a real time shading language called O3D shading language. A new shading language??? Not really, O3D shading language is is a mix between the Direct3D’s HLSL and NVIDIA’s Cg (I guess that O3D shading language is internally based on Cg). So Google O3D is available for Windows, Mac OSX and Linux. On MAC and Linux, Google O3D uses OpenGL acceleration. On Windows, seems Google O3D uses either Direct3D or OpenGL (not really clear in the docs). O3DSL supports vertex and pixel shaders but not geometry shaders.

O3D uses a scene tree (render graph) to store scene nodes and render the scene. Scene nodes philosophy is very natural. To render an object, a mesh for example, you have to create a mesh, add it to the root node, create a GPU shader (in O3D shading language), create a material, link the shader to the material and finally attach the material to the mesh. You have a texture too? No problem, load it, add it to the material and modify the shader to use the texture. Thanks to all code samples, you quickly find how to code the effect you want.

The demo I wrote is not really impressive. What I wanted to see with this demo is:

• 1 – how to create a mesh. The demo contains three kind of meshes: mesh plane, mesh sphere and a mesh cube. Here is how to create a mesh plane:

  var meshPlane = o3djs.primitives.createPlane(
  g_pack, 
  GroundMat, 
  width, depth, 
  widthSubDiv, depthSubDiv);
  

• 2 – how to create a GPU shader in O3DSL. The demo shows 3 types of shaders: phong lighting (for the green cube), phong lighting + texturing (for the marble sphere) and textured only (for the ground). Here is a simple texturing shader:

  float4x4 worldViewProj : WorldViewProjection;
  sampler texSampler0;
  struct VertexShaderInput 
  {
    float4 postion : POSITION;
    float4 color : COLOR;
    float2 tex : TEXCOORD0;  
  };
  struct PixelShaderInput 
  {
    float4 postion : POSITION;
    float4 color : COLOR;
    float2 tex : TEXCOORD0;  
  };
  
  // Vertex Shader
  PixelShaderInput 
  vertexShaderFunction(VertexShaderInput input) 
  {
    PixelShaderInput output;
    output.postion = mul(input.postion, worldViewProj);
    output.color = input.color;
    output.tex = input.tex;
    return output;
  }
  
  // Pixel Shader
  float4 pixelShaderFunction(PixelShaderInput input): 
  COLOR 
  {
    float4 colorMap = tex2D(texSampler0, input.tex * 2.0);
    return colorMap;
  }
  
  // Here we tell our effect file *which* functions are
  // our vertex and pixel shaders.
  // #o3d VertexShaderEntryPoint vertexShaderFunction
  // #o3d PixelShaderEntryPoint pixelShaderFunction
  // #o3d MatrixLoadOrder RowMajor
  

• 3 – how to create materials and use them. A material is a shared resource and the same material can be used by several objects.

  var myMaterial = g_pack.createObject('Material');
  

• 4 – how to apply transform to position and rotate objects. This example shows how to create a scene tree tranform node and rotate it. Root node’s transformation will be applied to all children.

  g_3dRoot = g_pack.createObject('Transform');
  g_3dRoot.identity();
  g_3dRoot.rotateY(30.0);  
  

5 – how to use particles. The demo shows one particle system with four particles emitters:

particleSystem = o3djs.particles.createParticleSystem(...);
var transform = g_pack.createObject('Transform');
var emitter1 = g_particleSystem.createParticleEmitter();
transform.addShape(emitter1.shape);

• 6 - how to display text to see the FPS for example.
• 7 - how to control scene update in order to create animations.

There is a little problem with scene update main function: onRender(renderEvent). The renderEvent event has a member called elapsedTime. From the name, it's supposed to be the elsapsed time since the start of the demo. In reality, elapsedTime is the time step or delta time between 2 frames and the elapsed time is get with:

function onRender(renderEvent) 
{
  var dt = renderEvent.elapsedTime;
  g_elapsedTime += dt;
  ...
}

I wasted a little time with this wrong name...

One thing I wanted to do is to disable the vertical synchronization (VSYNC). By default it's enabled but I didn't find how to disable it. Disabling VSYNC is useful for benchmarking (think to a furry donut in O3D 😉 ). If you find the trick, please post a comment. Another thing I wanted too is to display a wireframe version of the sphere mesh. Not found how to do this...

The big problem with O3D is the source code is available. You can't hide it. If you spend time to code an effect, maybe you don't want the first visitor with a simple right click could see and re-use your source code. You can still protect your code with obfuscation but it's more complex.

Okay, here is the demo: First Quick Test With Google O3D

My first impression is rather positive and I think O3D could be useful to quickly code small 3D demos or games. It's easy to use, well documented and works fine (so far for my very small tests). I think the few small problems I had will be fixed (or have an explanation) very shortly.

As I said, I will start shortly a series of tutorials / demos about 3D programming. I will use GeeXLab as the main tool for coding. From this first test with O3D, many GeeXLab's concepts are similar. So I will try, each time it will be possible, to code a Google O3D demo too.

Related Posts:

• Google O3D @ Geeks3D.com