Webgl: 2012

Friday, January 13, 2012

Tutorial 2: Adding Colors

In this post, we'll use the previous tutorial code of drawing a square and add colors to it.

Its very easy to add the colors in the OpenSceneGraph model. we just have to add the color attributes to osgjs model file for every vertex. The rest of the code will remain the same. Take a look at the model now.

{
"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"
},
"Color": {
"Elements": [ 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1 ],
"ItemSize": 4,
"Type": "ARRAY_BUFFER"
},
"Vertex": {
"Elements": [ -50, 50, 0, 50, 50, 0, -50, 50, 100, 50, 50, 100 ],
"ItemSize": 3,
"Type": "ARRAY_BUFFER"
}
}
}
} ]
}
} ]
}
}

Thursday, January 12, 2012

Tutorial 1: Square Draw

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"
}
}
}
} ]
}
} ]
}
}

Tuesday, January 10, 2012

OpenSceneGraph Webgl

This blog is for the users of the OpenSceneGrapf users who wants to work in "Webgl". This blog is based on the "osgjs" library developed by Mr Cedric Pinson.

OpenSceneGraph being one of the best 3D graphics toolkits, is being used widely in the fields of virtual reality,scientific visualization, visual simulation, modeling, games, mobile applications, and so on. Although you can use the powerful OpenSceneGraph, which is based on the low-level OpenGL API, to implement applications that simulate different environments in the 3D world, developing picture-perfect applications is easier said than done.

In this blog, we'll provide you with the tutorial series so that you can easily startup your own webgl projects with easy to use "OpenSceneGrapf Javascript" Library.

Sunday, January 8, 2012

IEwebgl

The support for the webgl for the long awaited Internet Explorer has finished with the launch of IEwebgl plugin. IEWebGL is a plugin for Microsoft Internet Explorer web browser, that adds support for WebGL - modern web 3D graphics standard.

IEWebglPlugin

Webgl

WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering.
WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins. The specification was released as version 1.0 on March 3, 2011. WebGL is managed by the non-profit Khronos Group.

Pages