This post is about how to start the webgl window on "osgjs" library. In this tutorial I will draw a simple rectangle in the shortest and the easiest way.
Lets start with loading the page at which we gonna render our scene.
<html>
<head>
<title>osgjs</title>
</head>
<body>
<div id="ViewContainer">
<canvas id="webgl" style="border: none;" width="800" height="600"></canvas>
</div>
</body>
</html>
Now lets load the required scripts libraries used. the scripts we used are: jquery and osgjs.
<script type="text/javascript" src="osg.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
Now lets start to write the script in main file. we begin by jquery ready function and initializing the viewer. After that we initiate the viewer.
$(function () {
var canvas = document.getElementById("webgl");
var viewer;
try {
viewer = new osgViewer.Viewer(canvas);
viewer.init();
} catch (er) {
osg.log("exception" + er);
}
});
After that the models are loaded into the viewer. the model which we'll load will be a square model described later. The models are loaded with the help of loadmdel function.
var node = new osg.Node();
loadmodel(node, "model/box.osgjs");
viewer.setSceneData(node);
The setupManipulator function is used to set the camera of the scene graph. and atlast the viewer run funtion is called to start the rendeing.
viewer.setupManipulator();
viewer.run();
The loadmodel function uses the jquery azax call to load the model and parse it and add it to the node.
function loadmodel(node, filename) {
$.ajax({
url: filename,
dataType: 'json',
success: function (data) {
o = osgDB.parseSceneGraph(data);
node.addChild(o);
}
});
}
Now the structure of the 'box.osgjs' model file which will have the vertices and the normals to render the scene. you should have some knowledge of the opengl so that you will not say that "hey, whats this? what do you mean by vertices and normals"
the structure of the openscenegraph is as follow:
1. osg.node is the containers of other nodes and osg.geometry objects
2. osg.geometry object contains vertex list which gives the list of the verties to be drawn.
3. osg.geometry object contains normal list which contains the list of the normanls of the faces.
4. it also has primiive list which gives the mode, count and no of elements to be drawn as in the opengl function calls.
more elements to be stated later...
{
"Generator": "OpenSceneGraph 3.0.1",
"Version": 1,
"osg.Node": {
"Children": [ {
"osg.Node": {
"Name": "Box001",
"Children": [ {
"osg.Geometry": {
"PrimitiveSetList": [ {
"DrawArrays": {
"Count": 4,
"First": 0,
"Mode": "TRIANGLE_STRIP"
}
} ],
"VertexAttributeList": {
"Normal": {
"Elements": [ 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0 ],
"ItemSize": 3,
"Type": "ARRAY_BUFFER"
},
"Vertex": {
"Elements": [ -5, 5, 0, 5, 5, 0, -5, 5, 10, 5, 5, 10 ],
"ItemSize": 3,
"Type": "ARRAY_BUFFER"
}
}
}
} ]
}
} ]
}
}
This example fails at the $. "$ is not recognized" is the output error.
ReplyDeletemake sure you have referenced the jquery library. this will only happen if because the page will not be able to find the '$' definition of the jquery library.
ReplyDelete