My favorites | Sign in
Project Home Downloads Wiki Issues Source
The WebGL implementation of O3D is a JavaScript library built on WebGL. It implements a subset of the original O3D plug-in API and calls the WebGL library directly from the Google Chrome browser.
Updated May 7, 2010 by


The WebGL implementation of O3D is a JavaScript library built on top of WebGL. It implements a subset of the original O3D plug-in API, which includes all O3D interfaces that have an analogous interface in WebGL. For example, the render graph, transform graph, and texture classes are all implemented in the WebGL implementation of O3D. Animation, parameter operations, 2D canvas, and file I/O classes are not included. See Functional Groupings of O3D for details.

One major difference between the two implementations is that the WebGL implementation of O3D uses the GLSL shader required by WebGL. This release includes a Cg-to-GLSL converter script to aid in this conversion.


A number of the samples for the plug-in implementation of O3D require only minimal revision to work with the WebGL implementation of O3D. Here are some of the samples that have already been converted to use the WebGL implementation of O3D:

  1. Hello Cube, v. 2
  2. Spinning Cube, v. 2 (minimal changes)
  3. Primitives, v. 2

The samples for the WebGL implementation of O3D are in the `o3d-webgl-samples/` directory of the file.

The Sample Application page discusses a fully developed game that uses this new library. In particular, this code example illustrates attractive procedurally generated graphics, realistic 3D physics effects, and shading effects using the GLSL shader.

Modifying an O3D plug-in app

The steps for modifying an application originally written for the plug-in implementation of O3D are summarized below:

  1. Load the o3d-webgl Library instead of the plug-in library:
  2. <script type="text/javascript" src="../o3d-webgl/base.js"></script>
  3. Inform the utility library of the new O3D library:
  4. o3djs.base.o3d = o3d;
  5. Use the new makeClients() function:
  6. o3djs.webgl.makeClients(initStep2);
  7. In the <div> where the client is installed, set the width and height explicitly:
  8. <div id="o3d" width="600" height="600"></div>
  9. Use the cg-to-glsl converter script to convert your Cg shader to GLSL, the shader used by WebGL.

Functional groupings of O3D

The following list groups O3D classes according to their typical use. Parentheses indicate classes that will not be included in the WebGL implementation of O3D.

  1. Basic
    • ObjectBase
    • NamedObjectBase
    • NamedObject
    • Client
    • ClientInfo
    • TickEvent
  2. Transform Graph
    • Vertices
      • Buffer
      • IndexBuffer
      • SourceBuffer
      • VertexSource
      • Field
        • FloatField
        • !UByteNField
        • !UInt32Field
      • StreamBank
      • Stream
      • VertexBufferBase
      • VertexBuffer
      • Skin
      • SkinEval
    • Transform Graph
      • Transform
    • Shaders
      • Material
      • Effect
      • EffectParameterInfo
      • EffectStreamInfo
    • Meshes/Shapes/Polygons/Triangles
      • Element
      • Primitive
      • RayIntersectionInfo
      • Shape
  3. Render Graph
    • RenderEvent
    • State
    • RenderDepthStencilSurface
    • DrawContext
    • DrawList
    • DrawElement
    • Render Nodes
      • ClearBuffer
      • DrawPass
      • RendereNode
      • RenderSurfaceSet
      • StateSet
      • TreeTraversal
      • Viewport
  4. Textures
    • Textures
      • Bitmap
      • Texture
      • Texture2D
      • TextureCUBE
      • Sampler
      • RenderSurfaceBase
      • RenderSurface
    • (Canvas)
      • (Canvas)
      • (CanvasFontMetrics)
      • (CanvasLinearGradient)
      • (CanvasPaint)
      • (CanvasShader)
  5. (Animation)
    • (Curve)
    • (CurveKey)
      • (BezierCurveKey)
      • (LinearCurveKey)
      • (StepCurveKey)
      • (Counter)
        • (RenderFrameCounter)
        • (SecondCounter)
        • (TickCounter)
    • (Function)
    • (FunctionEval)
  6. Params
    • Param, ParamBoolean, ParamBoundingBox (see class tree diagram)
  7. Param Operations
    • (Matrix4AxisRotation)
    • (Matrix4Composition)
    • (Matrix4Scale)
    • (Matrix4Translation)
    • (ParamOp16FloatsToMatrix4)
    • (ParamOp2FloatsToFloat2)
    • (ParamOp3FloatsToFloat3)
    • (ParamOp4FloatsToFloat4)
    • (!TRSToMatrix4)
  8. File I/O
    • (ArchiveRequest)
    • (FileRequest)
    • RawData

Class hierarchy

The following class tree diagrams use regular black type for classes included in the WebGL implementation of O3D. Gray type indicates classes not included in this implementation.

Top-level O3D classes

The first section of the O3D class tree shows the top-level classes in the O3D class hierarchy:

Classes derived from ParamObject

This section shows the O3D classes derived from the ParamObjectclass:

Classes derived from Param

This section shows the O3D classes derived from the Param class:

Comment by, Sep 22, 2010

Some of the samples under the o3d WebGL Samples trunk are actually o3d plugin examples (not o3d WebGL samples) eg.

Comment by, Sep 23, 2010

Any guidance on what to do with features that were in the o3d plugin, but aren't in the new framework? Eg. What is recommended alternative to Canvas and CanvasPaint? object? Is there any replacement for the canvas.drawText function?

Comment by, Sep 23, 2010

Hmmm. Perhaps like this: g_canvas2d = document.createElement('canvas'); g_canvas2d.width = 256; g_canvas2d.height = 256; g_ctx2d = g_canvas2d.getContext("2d"); g_ctx2d.fillText("Hello", 10, 10); See:

Comment by, Sep 23, 2010

.... Just a suggestion, but IMHO it would make sense to use a mixed strategy of o3d plugin AND webgl. In this way if the user can be bothered to install the plugin they can benefit from better performance up until such time as the browsers are fully supporting webgl. And in any browser that doesn't not support webgl the user can be prompted to install the plugin. And any browser that does support webgl, the page can run in the browser without the plugin initially but for next 12 months or so offer the user a choice to go either with the plugin or run direct in the browser...

Good idea?

Comment by, Sep 23, 2010

(I mean then we could use pretty much the same project code to target either o3d plugin OR o3d javascript library... which would be a really good reason for using the o3d javascript library in the first place, rather than just going for regular WebGL)

Comment by, Oct 19, 2010

Hi everyone,

I have a question for those, who are developing O3D: Would it not be better to build a homepage for O3D? Something similar to

With a forum and dokumentation section. I think a forum would be really useful.

Comment by rawsonkara, Jan 11, 2011

This is silly, they deprecate O3d to port it into WebGL which at some point prolly will be ported back into a separate 03d project.

at this junction why run 3d graphics in the browser at all, and just not run the graphics in a cloud and stream the output into the client using H.264 encoding???? This is what services like OnLive? do.

Comment by, Feb 22, 2011


I was just profiling the javascript api's in o3d application samples, but found that the data given by web inspector (google chrome's tool) is incorrect.

As the performance was taken for 30 sec's but the tool was showing more than 30 sec's for many of the Js fundtion's in app. Any idea? Is it a problem with tool or o3d app's itself ?

Comment by, Aug 21, 2011

You can attach a dom canvas to a texture in o3d with this code:

var canvas2d = creatDomCanvas(); var texture = g_pack.createTexture2D(32, 32, g_o3d.Texture.XRGB8, 1, false); texture .setFromCanvas(canvas2d, true, true);

var sampler = g_pack.createObject('Sampler'); sampler.texture = texture; sampler.minFilter = g_o3d.Sampler.ANISOTROPIC; sampler.maxAnisotropy = 4;

Comment by, Apr 3, 2012

rawsonk, the whole point of it is that you can access the GPU without needing to download any plugins. OnLive? needs a plugin, just like o3d used to. It puts people off using the website.

Comment by, Sep 23, 2013

Sign in to add a comment
Powered by Google Project Hosting