topical media & game development
graphic-webgl-scenejs-examples-node-cores-node-cores.js / js
/*
Demonstrates sharing node cores, a technique borrowed from OpenSG
github.com/xeolabs/scenejs/wiki/Node-Cores
Lindsay S. Kay,
lindsay.kay@xeolabs.com
*/
/*
* Not central to this demo, but just for testing completeness, one of our geometry nodes
* will load through an IoC service.
*
* github.com/xeolabs/scenejs/wiki/GeoLoader-Service
*
* Define a stub geometry stream service that just provides a mock "stream" through which
* a simple cube geometry data is available. We'll reference the stream with a geometry node
* within our scene graph, further below.
*/
SceneJS.Services.addService(SceneJS.Services.GEO_LOADER_SERVICE_ID, {
loadGeometry : function(id, callback) {
if (id == "my-geo-stream") {
callback({
primitive : "triangles",
positions : new Float32Array([ 5, 5, 5,-5, 5, 5,-5,-5, 5,5,-5, 5,5, 5, 5,5,-5, 5,5,-5,-5,5, 5,-5,5, 5, 5,5, 5,-5,-5, 5,-5,-5, 5, 5, -5, 5, 5,-5, 5,-5,-5,-5,-5,-5,-5, 5,-5,-5,-5,5,-5,-5,5,-5, 5,-5,-5, 5,5,-5,-5,-5,-5,-5,-5, 5,-5, 5, 5,-5]),
normals : new Float32Array([ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0,-1, 0, 0, -1, 0, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1]),
uv : new Float32Array([ 5, 5,0, 5,0, 0, 5, 0, 0, 5,0, 0,5, 0,5, 5,5,0,5, 5,0, 5,0, 0,5,5,0, 5,0, 0,5, 0,0, 0,5,0,5,5,0,5,0,0,5,0,5,5,0,5]),
uv2 : null,
indices : new Int32Array([ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9,10, 8,10,11,12,13,14, 12,14,15,16,17,18,16,18,19,20,21,22,20,22,23])
});
} else {
throw SceneJS_errorModule.fatalError("Internal error - can't find geometry stream: '" + id + "'");
}
}
});
/*----------------------------------------------------------------------
* Scene graph definition
*---------------------------------------------------------------------*/
SceneJS.createScene({
type: "scene",
id: "the-scene",
canvasId: "theCanvas",
loggingElementId: "theLoggingDiv",
flags: {
backfaces: false
},
nodes: [
/*-----------------------------------------------------------------------------------------
* Node core library
*---------------------------------------------------------------------------------------*/
{
type: "library",
nodes: [
/*-------------------------------------------------
* Loookat and camera node cores
*------------------------------------------------*/
{
type: "lookAt",
coreId: "my-lookat-core",
eye : { x: 0.0, y: 10.0, z: 55 },
look : { y:1.0 },
up : { y: 1.0 }
},
{
type: "camera",
coreId: "my-camera-core",
optics: {
type: "perspective",
fovy : 25.0,
aspect : 1.47,
near : 0.10,
far : 300.0
}
},
/*-------------------------------------------------
* Light node cores
*------------------------------------------------*/
{
type: "light",
coreId: "my-light-core-1",
mode: "dir",
color: { r: 0.8, g: 0.8, b: 0.8 },
dir: { x: 1.0, y: -0.5, z: -1.0 }
},
{
type: "light",
coreId: "my-light-core-2",
mode: "dir",
color: { r: 0.8, g: 0.8, b: 0.8 },
dir: { x: 1.0, y: -1.0, z: -1.0 }
},
/*-------------------------------------------------
* Rotate node cores
*------------------------------------------------*/
{
type: "rotate",
coreId: "my-rotate-core-1",
angle: 30.0,
x : 1.0
},
{
type: "rotate",
coreId: "my-rotate-core-2",
angle: -30.0,
y : 1.0
},
/*-------------------------------------------------
* Geometry cores
*------------------------------------------------*/
{
type: "geometry",
id: "my-geometry",
coreId: "my-geometry-core-1",
primitive: "triangles",
positions : [
5, 5, 5,-5, 5, 5,-5,-5, 5,5, -5, 5, 5, 5, 5, 5,-5, 5, 5,-5,-5, 5, 5,-5,
5, 5, 5, 5, 5,-5,-5, 5,-5,-5, 5, 5, -5, 5, 5,-5, 5,-5,-5,-5,-5,-5,-5, 5,
-5,-5,-5, 5,-5,-5, 5,-5, 5,-5,-5, 5, 5,-5,-5,-5,-5,-5,-5, 5,-5, 5, 5,-5
],
normals : [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,-1, 0, 0, -1, 0, 0, -1, 0, 0,-1, 0, 0,
0,-1, 0, 0,-1, 0,0,-1, 0, 0,-1, 0, 0, 0,-1, 0, 0,-1, 0, 0,-1,0, 0,-1
],
uv : [
5, 5, 0, 5, 0, 0, 5, 0, 0, 5, 0, 0, 5, 0,5, 5, 5, 0, 5, 5,0, 5,0, 0,
5, 5,0, 5, 0, 0,5, 0, 0, 0,5, 0, 5, 5, 0, 5, 0, 0,5, 0, 5, 5, 0, 5
],
indices : [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9,10, 8,10,11,
12,13,14,12,14,15,16,17,18, 16,18,19, 20,21,22, 20,22,23
]
},
/* This geometry loads through the loading service we defined earlier
*/
{
type: "geometry",
id: "my-geometry-2",
coreId: "my-geometry-core-2",
stream: "my-geo-stream"
},
/*-------------------------------------------------
* Material core
*------------------------------------------------*/
{
type: "material",
id: "my-material",
coreId: "my-material-core",
baseColor: { r: 1.0, g: 1.0, b: 0.0 },
specularColor: { r: 0.4, g: 0.4, b: 0.4 },
specular: 0.2,
shine: 6.0
},
/*-------------------------------------------------
* Texture core
*------------------------------------------------*/
{
type: "texture",
id: "my-texture",
coreId: "my-texture-core",
layers: [
{
uri:"../web/images/BrickWall.jpg" ,
applyTo: "baseColor",
blendMode: "multiply",
scale : { // Texture scale factors
x: .1,
y: .05
}
}
]
}
]
},
/*----------------------------------------------------------------------
* Node core usages
*---------------------------------------------------------------------*/
{
type: "lookAt",
coreId: "my-lookat-core",
nodes: [
{
type: "camera",
coreId: "my-camera-core",
nodes: [
{
type: "light",
coreId: "my-light-core-1"
},
{
type: "light",
coreId: "my-light-core-2"
},
{
type: "rotate",
id: "pitch",
coreId: "my-rotate-core-1",
nodes: [
{
type: "rotate",
id: "yaw",
coreId: "my-rotate-core-2",
nodes: [
{
type: "material",
coreId: "my-material-core",
nodes: [
{
type: "texture",
coreId: "my-texture-core",
nodes: [
{
type: "translate",
x: -7,
nodes: [
{
type: "geometry",
coreId: "my-geometry-core-1"
}
]
}
]
},
{
type: "translate",
x: 7,
nodes: [
{
type: "geometry",
coreId: "my-geometry-core-2"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
var yaw = 30;
var pitch = -30;
var lastX;
var lastY;
var dragging = false;
var canvas = document.getElementById("theCanvas");
function mouseDown(event) {
lastX = event.clientX;
lastY = event.clientY;
dragging = true;
}
function touchStart(event) {
lastX = event.targetTouches[0].clientX;
lastY = event.targetTouches[0].clientY;
dragging = true;
}
function mouseUp() {
dragging = false;
}
function touchEnd() {
dragging = false;
}
var scene = SceneJS.scene("the-scene");
function mouseMove(event) {
var posX = event.clientX;
var posY = event.clientY;
actionMove(posX,posY);
}
function touchMove(event) {
var posX = event.targetTouches[0].clientX;
var posY = event.targetTouches[0].clientY;
actionMove(posX,posY);
}
/* On a mouse/touch drag, we'll re-render the scene, passing in
* incremented angles in each time.
*/
function actionMove(posX, posY) {
if (dragging) {
yaw += (posX - lastX) * 0.5;
pitch += (posY - lastY) * 0.5;
lastX = posX;
lastY = posY;
scene.findNode("pitch").set("angle", pitch);
scene.findNode("yaw").set("angle", yaw);
}
}
canvas.addEventListener('mousedown', mouseDown, true);
canvas.addEventListener('mousemove', mouseMove, true);
canvas.addEventListener('mouseup', mouseUp, true);
canvas.addEventListener('touchstart', touchStart, true);
canvas.addEventListener('touchmove', touchMove, true);
canvas.addEventListener('touchend', touchEnd, true);
scene.start();
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
