luma.gl

Scene

Class: Scene

The Scene class abstracts the use of low level code for lighting and other effects and creates a high level structure that plays well with objects created with O3D and the default shaders in Shaders to enable rendering of multiple models in the scene with different options.

The Scene role is to connect the properties set in the O3D models to the attributes defined in the shaders so that the buffer creation and updating is transparent to the user. The good thing about the design though is that the Scene provides many callback functions that can be executed at different stages of the rendering process for the user to update or bypass setting of the attributes and uniforms. This also enables you to create your own shader files that are compatible with the Scene class. Some examples of Scene compatible shader files can be found here. Also, for more information about the default shaders take a look at the Shaders class. The O3D options describe how to override or set callbacks when rendering objects with a default scene.

Scene Method: constructor

Creates a new Scene instance.

Syntax:

var scene = new LumaGL.Scene(program, camera, options);

Arguments:

  1. gl - (WebGLRenderingContext) A WebGLRenderingContext object.
  2. options - (object) An object with the following properties:

Options:

Examples:

Create a new Scene instance. Taken from [lesson 16]http://uber.github.io/luma.gl/examples/lessons/16/).

var innerScene = new LumaGL.Scene(gl, program, innerCamera, {
  lights: {
    enable: true,
    points: {
      position: {
        x: -1, y: 2, z: -1
      },
      diffuse: {
        r: 0.8, g: 0.8, b: 0.8
      },
      specular: {
        r: 0.8, g: 0.8, b: 0.8
      }
    }
  }
});

Create a new Scene instance and add some fog to it.

var scene = new LumaGL.Scene(gl, program, camera, {
  //Setup lighting.
  lights: {
    enable: true,
    points: {
      position: {
        x: -1, y: 2, z: -1
      },
      diffuse: {
        r: 0.8, g: 0.8, b: 0.8
      },
      specular: {
        r: 0.8, g: 0.8, b: 0.8
      }
    }
  },
  //Add fog effect.
  effects: {
    fog: {
      near: 0.5,
      far: 500,
      color: {
        r: 0.3, g: 0.4, b: 0.7
      }
    }
  }
});

Scene Method: add

Inherited from Group

Examples:

Add a moon and a box models to the scene. Taken from [lesson 12]http://uber.github.io/luma.gl/examples/lessons/12/).

//Add objects to the scene
scene.add(moon, box);

Scene Method: remove

Removes an O3D object from the Scene.

Syntax:

scene.remove(model);

Arguments:

model - (object) The model to be removed.

Examples:

Add a moon and a box models to the scene. Then remove them.

//Add objects to the scene
scene.add(moon, box);

//Remove the moon
scene.remove(moon);

Scene Method: render

Renders all the objects added to the scene.

Syntax:

scene.render(options);

Options:

Scene Method: pick

Returns an O3D object under the given x and y coordinates. The object must have pickable set to true.

About the picking algorithm

The picking algorithm used in LumaGL is a color picking algorithm. Each model is assigned a different color and the scene is rendered to a texture. Then, the pixel indicated by the given coordinates is retrieved from the texture and the color of that pixel is used to identify the model.

Syntax:

scene.pick(x, y, options);

Arguments:

Notes:

Examples:

Get an object at (100, 100) and change its color by altering a uniform value.

var model = scene.pick(100, 100);
if (model) {
  model.uniforms.colorUfm = [1, 1, 1, 1];
}

Scene Method: pickCustom

Behaves similarly to the pick function, but utilizes the per-vertex color attribute pickingColors to return the (r, g, b, a) tetrad under the given x and y coordinates.

Syntax:

scene.pickCustom(x, y, options);

Arguments: