three.js + osgjs?

[Darrell Esau]

Hi all,

Is it possible to use three.js along with osgjs?  In particular, I'd like to setup a scene graph and use three.js to add things like particle effects.

[Walter Nissen]

Hello,

I ended up exporting the OSG model with the JSON exporter and read it into three.js, unfortunately.

Walt

[Darrell Esau]

Yeah.  The problem is that I still have to use osgjs because another library I'm using is built on it.  

I'd love to use three.js because there's documentation for it and seems like it's written with ease of use in mind.

I was wondering if there was any way to use the same webgl context with both libraries.. but that probably is not possible.

-d

[Cedric Pinson]

It's possible to use the same context, the only things is that you will have some issue to synchronise the context between the two framework.

Cedric Pinson
Provide OpenGL, WebGL services
+33 659 598 614 - 
http://cedricpinson.com - http://osgjs.org - http://sketchfab.com

[Cedric Pinson]

BTW if there are some points that are complicated, just shoot a mail about it, I will be happy to know what is boring to use and improve it

Cedric Pinson
Provide OpenGL, WebGL services
+33 659 598 614 - 
http://cedricpinson.com - http://osgjs.org - http://sketchfab.com

On Wednesday, October 24, 2012 at 18:01 , Darrell Esau wrote:

[Darrell Esau]

First, let me state: I don't think anything is boring with osgjs, I think it's an AMAZING piece of work.  I've been looking at your code for the past 2 weeks and I'm blown away at what you've create, it's quite astounding.

That said - here's my reason for the above question:

I'm coming at this from the perspective of a Web UI engineer.  I know Web UI (JavaScript, HTML5, canvas, CSS, HTML, DOM, etc) very well.  I've been doing this work professionally for 15 years.  However .. I don't know 3D technologies.  I don't know OpenGL, I don't know WebGL, I don't know OpenSceneGraph.

So .. I'm trying to integrate a WebGL globe into our existing Web product for analytical data visualization.  After doing lots of research, I settled on ReadyMap because it appeared to fit our needs the best.  ReadyMap uses osgjs, so I don't really have an option to use any other WebGL framework.

Now you can see my predicament.  I'm very well versed in web UI technologies, but I don't have any background in 3D rendering technologies, thus I'm running into hurdles that are probably very simple to overcome if I understood the fundamentals of OpenSceneGraph.  Simple things like:

- How do I scale a node that's in my tree?

- Why do 1000 quads render with poor performance when they are rotated? 

- How do I apply a texture to a quad, and how do I fix culling issues?

- How do I create simple particles, and animate moving / sizing / fading them?

I could ask many, many more questions like these, but I'm trying not to, because I know this is just a learning curve. I'm just going to have to learn all of these fundamental things.

The biggest problem that I'm facing is that I cannot find any entry-level documentation.. specifically for OSGJS.  That's the reason I was drawn to three.js -- it appears it was designed for people "like me" in mind: people who have a web UI background but not strong 3d experience.  There's a number of good "getting started" tutorials, and there's a good set of reference docs.

-d

[Cedric Pinson]

Hi,

I understand your points, I will try to answer into your mail.

On Thursday, October 25, 2012 at 21:21 , Darrell Esau wrote:

First, let me state: I don't think anything is boring with osgjs, I think it's an AMAZING piece of work.  I've been looking at your code for the past 2 weeks and I'm blown away at what you've create, it's quite astounding.

That said - here's my reason for the above question:

I'm coming at this from the perspective of a Web UI engineer.  I know Web UI (JavaScript, HTML5, canvas, CSS, HTML, DOM, etc) very well.  I've been doing this work professionally for 15 years.  However .. I don't know 3D technologies.  I don't know OpenGL, I don't know WebGL, I don't know OpenSceneGraph.

So .. I'm trying to integrate a WebGL globe into our existing Web product for analytical data visualization.  After doing lots of research, I settled on ReadyMap because it appeared to fit our needs the best.  ReadyMap uses osgjs, so I don't really have an option to use any other WebGL framework.

maybe it's not what you need but still http://cedricpinson.github.com/globe/ 

Now you can see my predicament.  I'm very well versed in web UI technologies, but I don't have any background in 3D rendering technologies, thus I'm running into hurdles that are probably very simple to overcome if I understood the fundamentals of OpenSceneGraph.  Simple things like:

- How do I scale a node that's in my tree?

Add a scale node before your geometry, example:

var scaleNode = new osg.MatrixTransform();

scaleNode.setMatrix(osg.Matrix.makeScale(0.5,0.5,0.5, []));

scaleNode.addChild(youGeometryNode); 

- Why do 1000 quads render with poor performance when they are rotated?

Because it's slow to display a lot of differents objects, it's better to display all elements in one rendering call. 

 

- How do I apply a texture to a quad, and how do I fix culling issues?

    var texture = osg.Texture.createFromURL('image.png');

    var quad = osg.createTexturedQuadGeometry(0,0,0, 5,0,0, 0,5,0);

    quad.getOrCreateStateSet().setTextureAttributeAndModes(0, texture);

    quad.getOrCreateStateSet().setAttributeAndModes(new osg.CullFace('Disable'));  // disable the culling

    if you plan to disable culling, it's better to set this attribute in the parents node to affect all children instead of adding this attribute to all quads

- How do I create simple particles, and animate moving / sizing / fading them?

    UpdateCallback, you can have a look in this example https://github.com/cedricpinson/osgjs/blob/master/examples/cubemotion/main.js it animates differents cube http://osgjs.org/examples/cubemotion/

I could ask many, many more questions like these, but I'm trying not to, because I know this is just a learning curve. I'm just going to have to learn all of these fundamental things.

The biggest problem that I'm facing is that I cannot find any entry-level documentation.. specifically for OSGJS.  That's the reason I was drawn to three.js -- it appears it was designed for people "like me" in mind: people who have a web UI background but not strong 3d experience.  There's a number of good "getting started" tutorials, and there's a good set of reference docs.

Yep docs is missing too much.

Cheers

[Darrell Esau]

Thanks again - here are a couple more follow-up questions after working with this more:

I implemented the scaling as you've shown -- and I'm not quite sure I understand what it's doing.  I can see that the quad is changing, but it seems it's scaling from a different origin point than I was expecting.

This is probably best described with a movie:

https://dl.dropbox.com/u/6114816/Work/globe-markers.mov

So - when this starts, you'll see a globe with a number of blue dots on the surface.  These are drawn using a textured quad that's added to the globe's root node.  Here's the code that adds these quads to the globe's root node:

var markerDotNode = new osg.Node();
var globeXform = new osg.MatrixTransform(); 
globeXform.setMatrix(local2world); 

var w = 400000; 
var h = 400000; 
var q = osg.createTexturedQuad(-w/2.0, -h/2.0, 0, 
                               w, 0, 0, 
                               0, h, 0); 


globeXform.addChild(q);

var stateSet = new osg.StateSet(); 
texture = new osg.Texture(); 
texture.setImage(blueDotImage); 
stateSet.setTextureAttributeAndMode(0, texture); 
stateSet.setAttributeAndMode(new osg.CullFace('Disable')); 
q.setStateSet(stateSet); 

markerDotNode.addChild(globeXform);

var scaleNode = new osg.MatrixTransform(); 

scaleNode.addChild(markerDotNode); 

this.m_map.MapView.root.addChild(scaleNode);

Later, I've attached a mouse scroll event to apply the scaling matrix, which looks like this:

this.m_oScaleNodes[ndx].setMatrix(osg.Matrix.makeScale(1.2,1.2,1.2,[]));

From the movie, you can see that when I do this, it appears all the quads are scaling out from the center of the globe.  Since I attached the scale only to the quad node, I expected that only that node would be scaled.

Which brings my to my second question:

When the scale happens, it seems like the texture isn't scaled with the quad -- is there a way to tell osgjs to also scale the texture while scaling the quad?

Finally - as you can see, I applied the disabled CullFace, but I don't see that it changed anything.  Then again, perhaps I'm not communicating this correctly.  Again, perhaps a picture is worth a thousand words:

https://dl.dropbox.com/u/6114816/Work/markers-culling.png

When two quads are close together, there's this weird culling issue.  I really just want one quad to lay on top of another .. I don't really care which.  Now that I verbalize this, I guess I actually do want culling .. perhaps this just means that I need to have one of the quads slighter higher than the other?

Following up on your other replies:

I did see your globe and was tempted to try to use it -- however I need zooming, and we're already using Leaflet for 2D maps, so using ReadyMap looks like the quickest path to success.  We'll probably be creating our own map tiles also -- which Leaflet does for us.

I haven't looked at UpdateCallback yet, but your example looks very promising.  I'll wait until I can crawl before trying to run though   :)

Thanks again!

-d

[Cedric Pinson]

Cedric Pinson
Provide OpenGL, WebGL services
+33 659 598 614 - 
http://cedricpinson.com - http://osgjs.org - http://sketchfab.com

If you scale the node it makes sense I guess it scale everything. The way to do it should be to have your marker centered in 0,0 then having the scale, then having the position transform.

so it would make something like that :

MatrixPosition->MatrixScale->geometry

From the movie, you can see that when I do this, it appears all the quads are scaling out from the center of the globe.  Since I attached the scale only to the quad node, I expected that only that node would be scaled.

Which brings my to my second question:

When the scale happens, it seems like the texture isn't scaled with the quad -- is there a way to tell osgjs to also scale the texture while scaling the quad?

Finally - as you can see, I applied the disabled CullFace, but I don't see that it changed anything.  Then again, perhaps I'm not communicating this correctly.  Again, perhaps a picture is worth a thousand words:

https://dl.dropbox.com/u/6114816/Work/markers-culling.png

Is it not a culling issue but an alpha blending issue, try to add a this attribute to your marker:

market.getOrCreateStateSet().setAttributeAndModes(new osg.BlendFunc('SRC_ALPHA','ONE_MINUS_SRC_ALPHA'); 

When two quads are close together, there's this weird culling issue.  I really just want one quad to lay on top of another .. I don't really care which.  Now that I verbalize this, I guess I actually do want culling .. perhaps this just means that I need to have one of the quads slighter higher than the other?

yeah you could just have an kind of order on your quads to do transparency between them. Else the other solution would be to have an additive blending.