Beach Scene (17MB)

3D PingPong

Prince IO: The SketchUp Knight

Stenciled Teapot

Scene Viewer

Hello, World

Your introduction to a O3D program. Loads a scene and displays it.

Rotating a model

Moves a 3D object.

Creating a cube, adding colors, adding textures.

These samples are discussed in detail in the Program Structure, Shapes, Materials, and Textures chapters of the Developer's Guide.

Using the o3djs.simple utility library

This example uses the o3djs.simple.js utility library to create a cube. This utility library provides functions that make it easy to display something on the screen without learning the details of the O3D plug-in or the other utility libraries.

Creating a perspective camera

This example includes text boxes that allow you to manually set the eye position, target, and up vector of the camera.

Using O3D debugging tools

This example demonstrates using the debug.js utilities.

Creating simple shapes using the primitives utility library

This example demonstrates using the primitives.js utilities to create a variety of shapes.

Creating effects

(a) Create a sphere with a Phong shader.

(b) Create a light.

(c) Add normals and vertex streams.

Test one of the 12 shaders included in this example

The samples directory contains a number of common shaders you can use for the effects in your programs.

Sobel edge detection shader

This example shows how to use render targets to create a Sobel edge-detect image processing shader.

Displaying a juggling pattern using a shader

This example uses shaders to create an animation of juggling balls. The JavaScript program includes a variable for the time. Using a mathematical function for the trajectory of the balls, the shader checks whether a given pixel is contained in the ball at a given moment. If YES, the ball color is used for that pixel. If NO, the background color is used for that pixel.

Drawing an animated julia set in real time using the pixel shader for the computation (7 KB)

This example is similar to the juggling example. It uses the pixel shader to compute where the shape pixels are at any given time.

Converting image color space and format

This example shows how to use a shader to perform image color space and format conversion.

Using texture samplers

This example demonstrates the use of sampler state settings and how they affect the way that textures are mapped onto geometry.

Handling missing textures

O3D supplies a default error texture when a texture is missing or improperly specified. This example shows how you can use the Client.setErrorTexture() method to set a user-defined error texture. The example illustrates three different types of errors related to textures. The system reports only the first error after rendering a frame. To view the other two errors, you can hide the first and second errors in order to view the third texture error.

Creating a procedural texture

This example shows how to create a Lambert-shaded checkerboard texture programmatically within a shader and how to apply this texture to a model imported from a file.

Creating a small texture using JavaScript

This example creates seven textures programmatically. Each texture is in a different format (XRGB8, ARGB8, ABGR16F).

Loading textures from a .tgz archive

This example progressively loads textures from a tar.gz archive.

Creating bitmapped textures

This example shows how to create bitmaps and how to draw images on both bitmaps and texture mipmaps.

Instancing shapes

1000 teapots created from a grid of transforms, each with an instance of the same teapot shape.

How to override effect params on instanced geometry

This example uses a single instanced sphere, changing the color of each sphere by specifying the parameters for the effect on the transform for each sphere instance.

Creating multiple clients

This example creates a 10-by-10 grid of O3D frames, sets up the DrawContext and effect for each frame, and then loads a rotating cube into each.

Setting the render mode

This example illustrates setting the client's render mode to RENDERMODE_ON_DEMAND to save CPU cycles when the 3D portion of the application is not changing. (The default render mode, RENDERMODE_CONTINUOUS, is also demonstrated here.)

Creating multiple views

This example sets up three views, each with a viewport, a tree traversal, and two draw passes. The left and top-right views use a perspective projection, and the bottom-right view uses an orthographic projection.

Creating a shadow map (multi-pass rendering)

This example uses two render passes to render shadows. The first pass renders the scene from the perspective of the light to create an offscreen, grayscale image called the shadow map. In the second pass, which renders the transform graph, the pixel shader samples the shadow map to determine if a point is in shadow.

Creating shadows using a simple circle texture

This example uses a single quad with a round texture and draws it under the object. The only "trick" is that you need to draw the shadows last (on a separate draw pass). Turn off z-buffer writing and use the PolygonOffset state parameter to bring the shadows in front of the ground plane. Many games, even modern games, use this technique for low-end hardware.

Z-sorting for transparent objects

This example creates a rotating grid of transparent spheres. The material is added to the zOrderedDrawList so that the spheres are rendered from back to front, with their colors blended when they are on top of each other.

Display frames per second

This example shows computing and display frames per second for a vertex-shaded cube.

Culling of off-screen objects

This example shows use of bounding boxes and the CULLING state parameter to render only elements that are visible on the screen.

Google trends visualizer

This example illustrates a technique for loading complex textures in an unobtrusive way. First a low-resolution blue sphere is loaded for the Earth's surface, followed by a series of progressively higher resolution textures: daytime Earth, then nighttime Earth, and finally Earth with reflective oceans.

Basic render target example

This example shows how to set up a basic render graph that uses RenderSurface nodes to implement render targets.

2D image processing using render targets

This example uses a convolution shader to create a 2D Gaussian blur. The same code can be used for any separable convolution kernel.

Switching to full-screen mode

This example modifies the Hello, World example to toggle between plug-in and full-screen modes.

Animating objects

This example sets up animation curves that are evaluated by the O3D plug-in to create motion without executing any JavaScript functions.

Skinning

This example shows a simple skinned cylinder.

Scene with an animation (717Kb)

This example shows an animated model.

Using the particles.js utility library

This example illustrates using the GPU for particle effects such as fire, smoke, and rain.

Creating a ripple effect

This example shows creating a ripple effect using the vertex shader.

Animating using a sine wave

This example shows using the vertex shader to move the vertices in a sine wave based on the parameter "time" and the world position of the vertices.

Billboard objects simulating 3D objects

This example shows how to create 2D objects that appear three-dimensional because they always face the camera.

Creating 2D objects in O3D

This example demonstrates how to display 2D graphics with O3D. This technique provides better rendering performance for 2D rendering than basic HTML.

Box2DJS in 3D

This example shows the Box2DJS physics engine in 3D.

Creating a heads-up display or 2D overlay

This example includes two ViewInfo objects: one for the normal 3D view and one for the heads-up display (HUD). The view for the HUD has a higher priority than the view for the 3D objects, so the HUD view is drawn after the 3D view. The HUD view does not clear the buffer between renderings. Each view displays different branches of the transform graph.

Using the Canvas object for 2D drawing

This example demonstrates use of the Canvas API.

Canvas fonts

This example demonstrates using the Canvas object to create text with different fonts.

Drawing with bitmaps

This example demonstrates drawing into a Canvas surface using a texture.

Picking

This example uses the O3D utility library picking.js, which provides picking functions that you can customize for your application. (Because O3D allows you to create your own shaders, it does not provide automatic picking functionality.)

Home Configurator (Firefox only)

This example uses models from 3D Warehouse and demonstrates how an application can combine HTML and O3D on the same page. The user drags and drops items from an HTML furniture catalog and positions them in an O3D model home.

Play checkers!

This interactive version of checkers demonstrates picking and simple animation.