SceneJS 3.0 is an open-source 3D engine on WebGL that's geared towards rendering large numbers of individually arcticulated and pickable objects as required for high-detail visualisation applications.

Contents

• Downloads
• What's New
• Plugin System
• Examples
• Basic
• Lighting
• Geometry
• Texture
• Nodes

Downloads

You can hotlink to these binaries and they will dynamically load plugins on demand from this repository as required.

Latest Build

• scenejs.js
• scenejs.min.js

Documentation

• Class Docs - Documentation in progress for the SceneJS class API, which is the core implementation beneath the JSON API. You can use this to build scenes programmatically, instead of declaratively with JSON as shown in the examples. You would also use this API when when manipulating nodes (even they were defined with JSON).

What's New in V3

Though V2 was released a year prior, V3 has since been under active development in the context of several apps currently in production. V3 has some major enhancements, including:

• many more defaults, resulting in simpler scene definitions
• seamless recovery from lost WebGL context
• an architecture review followed by a 70% rewrite
• lots of JS object pooling, to minimise the impact of garbage collection on FPS
• a swish new plugin system

Check out the examples below for more info.

Plugin System

SceneJS now uses plugins for non-core things like geometry primitives (box, teapot, text etc.) and fancy texture functionality (video etc).

Plugins are used from within node definitions, like this:

 myNode.addNode({
    type:"geometry",
    plugin:{
        type:"sphere",
        latitudeBands : 30,
        longitudeBands : 30,
        radius : 2
    }
 });

When SceneJS creates this node, it's going to dynamically load a plugin from ./plugins/geometry/sphere.js, which happens to be a factory that creates sphere primitives.

By default, SceneJS is hardwired to download plugins from a directory in this repository. This means you can just hotlink to the SceneJS core library downloads and they will download the plugins automatically as you need them. That's nice for putting SceneJS examples on code sharing sites like jsFiddle.

However, if you'd rather load them off your own server, grab a copy of the plugins and configure SceneJS to load them from there:

SceneJS.configure({
    pluginPath: "./foo/myPluginsDir"
});

Examples

Basic

SceneJS is based on the convention over configuration paradigm, automatically providing defaults, which allows you to get started quickly then override them where you need specialised functionality.

• Newell Teapot - [source] - A simple scene showing the lookat, camera, lights and material nodes that SceneJS will provide by default.

Lighting

SceneJS provides default ambient and directional lights, but you can override these with your own.

Directional and positional lights can be defined in either World space, where they move relative to changes in viewpoint, or in View space, where they are fixed in alignment with the view frustum as if they were moving with the viewpoint like lights on a helmet. The maximum number of lights is only limited by the number of vars supported by your GPU, and a modern one should support at least 4-6.

• Ambient Light - [source]
• World-Space Directional Light - [source]
• View-Space Directional Light - [source]

Geometry

Many of the examples here use plugins to create primitives like cubes and teapots, but you can also manually create your own meshes, line segments and points.

• Custom Mesh - [source] - A cube geometry complete with positions, normals, UVs and a texture.
• Vertex Colouring - [source] - Another cube geometry, but this time with vertex colors.
• Vertex Sharing - [source] Vertex sharing is a technique in which a parent geometry node defines vertices (consisting of position, normal and UV arrays) that are inherited by child geometry nodes, which supply their own index arrays pointing into different portions of the vertices. The VBOs for the parent vertex arrays are then bound once across the draw calls for all the children. Each child is a seperate object, which can be wrapped by different texture or materials etc. This is efficient to render as long as each child geometry inherits a similar combination of states and thus avoids needing to switch shaders.

Texture

• Bump Mapping - [source]
• Video Texture - [source]
• Multitexturing - [source]
• Texture Animation - [source]
• Texture Atlas - [source] A texture atlas is a large image that contains many sub-images, each of which is used as a texture for a different geometry, or different parts of the same geometry. The sub-textures are applied by mapping the geometries' texture coordinates to different regions of the atlas. So long as each of the geometry nodes inherit the same configuration of parent node states, and can therefore share the same shader, SceneJS will bind the texture once for all the geometries as they are rendered. Another important benefit of texture atlases is that they reduce the number of HTTP requests for texture images.

Nodes

• Shared Node Cores - [source] Traditionally, re-use within a scene graph is done by attaching nodes to multiple parents. For dynamically updated scenes this can have a performance impact when the engine must traverse multiple parent paths in the scene graph, so SceneJS takes an alternative approach with "node cores", a concept borrowed from OpenSG.