<head>
<title> SceneJS Test</title>
<script type="text/javascript" src="resources/scenejs.js"></script>
</head>
I want to distribute cubes randomly on the canvas scene using SceneJS. Since the library has major learning curve, Myself checked with few examples and started coding. I did some code and couldn't convince myself where the errors are:
<body onload = "main()" bgcolor="white">
<canvas id="theCanvas" width="720" height="405">
</canvas>
<script type="text/javascript">
main = function({
N = 10;
var canvas = document.getElementById("theCanvas");
var sceneName = "theScene";
SceneJS.createScene({
id: sceneName,
canvasId: canvas,
nodes: [{
type:"library",
id:"mylib",
nodes:[]
},
// Viewing transform specifies eye position, looking at the origin by default
{
id:"lookat",
type: "lookAt",
eye : { x: 0.0, y: 1.0, z: 80.0 },
up : { z: 1.0 },
look:{x:0,y:0,z:0},
nodes: [
/* Camera describes the projection*/
{
type: "camera",
optics: {
type: "perspective",
fovy : 45.0,
aspect : 720/405,
near : 0.10,
far : 10000.0
},
nodes: [
{
type: "rotate",
id: "pitch",
angle: 0.0,
x : 1.0,
nodes: [
{
type: "rotate",
id: "yaw",
angle: 0.0,
y : 1.0,
}
]
}
]
}
]
}
]
});
var scale = 100;
var scene = SceneJS.scene(sceneName);
for(var i=0; i<N; i++)
{
scene.add("node",{
type:"translate",
x:(Math.random()-0.5)* scale,
y:(Math.random()-0.5)* scale,
z:(Math.random()-0.5)* scale,
nodes:[{
type: "cube",
id: "cube"+i
}]
});
}
});
</script>
</body>
I request someone spot me where the errors are, I would be really thankful to you. I could see only blank white screen in my browser :(
Add your nodes to the innermost rotate node - that way they will "inherit" the view, projection and modelling transforms set up by the lookat, camera and rotate nodes.
So give that rotate node an ID like "myYawRotate", then get a reference to that node off the scene:
and add your cube branches to that node:
This is a scene graph concept called "state inheritance". It fits with the data-driven approach of the API, helping scene graph brevity and pluggability, but also performance because the transform matrices will be set once for all the cubes on each frame (an aspect of "state sorting").
You'll also need to insert lights in amongst the higher transforms, plus a material node. Then you have all the state that SceneJS needs to render the cubes in a way that you can see them.
In your example, what's probably happening is you do have cubes rendering, but with no illumination, and not transformed into View space and projected.