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.
4
. For best picking precision use 1
.PhiloGL.Scene.PICKING_RES = 1;
Creates a new Scene instance.
var scene = new PhiloGL.Scene(program, camera, options);
lights - (object, optional) An object for managing lights. The options for lighting are:
enable - (boolean) Set this to true
to enable lighting.
ambient - (object, optional) A r, g, b object with values in 0, 1 to select ambient lighting.
directional - (object, optional) An object with properties:
points - (mixed, optional) An array of point lights configuration objects containing as properties:
effects - (object, optional) An object with scene effect options.
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
}
}
}
});
Add an O3D object to the Scene.
scene.add(o[, ...]);
A variable argument list of O3D instances.
Add a moon and a box models to the scene. Taken from lesson 12.
//Add objects to the scene
scene.add(moon, box);
Removes an O3D object from the Scene.
scene.remove(model);
model - (object) The model to be removed.
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);
Renders all the objects added to the scene.
scene.render(callback);
onBeforeRender(object, index)
and onAfterRender(object, index)
methods to be called right before and right after rendering each element.Performs scene.render()
but binds a texture afterwards to store the rendered image in the texture itself and not the main buffer.
scene.renderToTexture(name);
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);
}
Returns an O3D object under the given x
and y
coordinates. The object must have pickable
set to true
.
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.
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.
scene.pick(x, y);
x
position. The upper left corner of the viewport is considered to be (0, 0)
.y
position. The upper left corner of the viewport is considered to be (0, 0)
.on
in the rendering loop to ensure it is always on.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];
}
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.
scene.resetPicking();