library logo

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 Static Properties

Syntax:

PhiloGL.Scene.PICKING_RES = 1;

Scene Method: constructor

Creates a new Scene instance.

Syntax:

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

Arguments:

  1. program - (object) A Program instance. For more information check the Program class.
  2. camera - (object) A Camera instance. For more information check the Camera class.
  3. options - (object) An object with the following properties:

Options:

Examples:

Create a new Scene instance. Taken from lesson 16.

var innerScene = new PhiloGL.Scene(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 PhiloGL.Scene(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

Add an O3D object to the Scene.

Syntax:

scene.add(o[, ...]);

Arguments:

A variable argument list of O3D instances.

Examples:

Add a moon and a box models to the scene. Taken from lesson 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(callback);

Arguments:

  1. callback - (object, optional) An object with onBeforeRender(object, index) and onAfterRender(object, index) methods to be called right before and right after rendering each element.

Scene Method: renderToTexture

Performs scene.render() but binds a texture afterwards to store the rendered image in the texture itself and not the main buffer.

Syntax:

scene.renderToTexture(name);

Arguments:

  1. name - (string) The name/id of the texture to bind the rendering to.

Examples:

Bind a framebuffer, render the scene to a texture, and unbind the framebuffer. This is the procedure done to render the inner scene in the laptop example on lesson 16.

function drawInnerScene() {
  program.setFrameBuffer('monitor', true);
  
  gl.viewport(0, 0, screenWidth, screenHeight);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  theta += 0.01;
  
  moon.position = {
    x: rho * Math.cos(theta),
    y: 0,
    z: rho * Math.sin(theta)
  };
  moon.update();
  
  box.position = {
    x: rho * Math.cos(Math.PI + theta),
    y: 0,
    z: rho * Math.sin(Math.PI + theta)
  };
  box.update();
  
  innerScene.renderToTexture('monitor');
  
  program.setFrameBuffer('monitor', false);
}

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 PhiloGL is a color picking algorithm. Each model is assigned a different color and the scene is rendered to a texture. Then, the pixel pointed by the mouse position is retrieved from the texture and the color of that pixel is used to identify the model.

Customizing the picking algorithm

Sometimes we want to know more than just which object has been picked. For example, we would want to know which face of that object has been picked. In that case the O3D constructor options pickingColors and pick are useful. By defining your own set of per vertex colors and a method that given a pixel returns special information on what part of the object has been retrieved, then it is possible to have finer grain picking. For more information about how to use this you can take a look at the Air Flights example or go to the Google group of the framework and ask for more info.

Syntax:

scene.pick(x, y);

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: resetPicking

Clear framebuffers and previous scene captures and restart the picking routine without any cached values. Generally used when lazyPicking is set to true in Events.create.

Syntax:

scene.resetPicking();
Copyright © Nicolas Garcia Belmonte.