choosing babylonjs

[jerome]

Hi,

 

I'm very new to Babylon and have read only tutos so far.

 

I plan to develop 3D graphic  sysadmin tools (network weathermaps, metrology indicators, etc) in order to renew the current classic softwares usually used in this domain.

 

I tried to code a first network weathermap with ruby and three.js just to have a demo POC for other university sysadmins : http://logiciels.iut-rodez.fr/proto/weathermap/  (not updated with fresh data for now)

 

Now I know this kind of tools could be really deployed among sysadmins, I'd like to make a choice between babylonjs and threejs (I'll keep ruby server side which is a very good system language).

I really like Babylonjs so far because of its elegance and fluent API.

 

So here are my newbee questions before diving in the 8h video tuto to make up my mind :

(sorry for comparing to threejs in my questions but it's my only reference)

 

#1 : Is a Babylonjs book planned ?

I know writting a book is a huge work. Therefore a book has a something more than every tuto : it can introduce all the concepts beyond API releases. So the reader can discover all the framework capabilities at once, even those he wouldn't have be aware elseway.

I learned the little I know about threejs concepts in a book, tutos just helped me to code and find everything in the API.

However I think I could manage without a babylonjs book.

 

#2 : Are there embedded camera controls (like threejs trackball, fly, orbit, etc) or do I need to code them by myself (tuto or snippet) ? 

I couldn't find the equivalent in the API. 

 

#3 : Is there some kind of buffer geometry optimization for fixed geometries ?

not so important to me however.

 

#4 : dynamic text

This is the most important point to me.

Displaying time updated measure data, metrics, indicators in a 3D environment is the main goal of my code.

I tried some text sprites using an equivalent to dynamicTexture but they have really bad performance when displaying dozen of sprites containing a text value refreshed 60 times per second (I think it's a GC concern because dozen of textures are created and deleted each frame and using a single big dynamicTexture and offsetting it improved a lot but was a real mess to render properly).

I'm about to test the very new threejs CSS3DRenderer (ex : http://threejs.org/examples/#css3d_periodictable ) in which the text is is directly rendered in html elements (the browser is very good at rendering html text) but with the 3D coordinate system used in the webglRenderer.

So my question is :

Is there a easy way in Babylonjs to display dynamic text (like sprites) in the 3D system ?

I'm talking about dozens of text sprites, each one updated on each frame.

example : in my weathermap, the bandwith in and out measures are numbers which are updated and displayed each frame on each link between switches.

 

Thank you for all your advices and ... happy new year ;-)

[julien-moreau]

Hey jerome,

Happy new year !! =D

 

It's nice to see Babylonjs can power this kind of project.

I can answer everything except the #1 because I'm like you, I don't know ^^

Also, I'm not enough friend with dynamic textures (#4). So I'll let Deltakosh give you the appropriate answer.

 

#2. Concerning the cameras, Babylonjs is embedding different kinds of cameras. You can find the tutorial here https://github.com/BabylonJS/Babylon.js/wiki/05-Cameras

Moreover, nothing prevents you to create your own type of camera. Just "inherit" from BABYLON.Camera and code your controls, or ask the great community for help

 

#3. I'm not sure to understand what you mean, but BabylonJS implements a lot of geometry optimization tools, like oct-trees, instances, access your vertex datas, and also CSG operations =D

 

#4. But, something you can do now to be sure, is to share your code here using the BabylonJS Playground : https://github.com/BabylonJS/Babylon.js/wiki/The-Playground

 

By hoping to see you again

[Temechon]

Hi and happy new year ! 

 

#1 Not that I'm aware of, but it's something I'm interested in... 

 

#2 A lot of camera already exists. Check this : https://github.com/BabylonJS/Babylon.js/wiki/05-Cameras

 

#3 Octrees and SceneOptimizer are available : 

https://github.com/BabylonJS/Babylon.js/wiki/Optimizing-performances-with-octrees 

and 

https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-SceneOptimizer-tool

 

#4 There is nothing like CSSRenderer for now, but we have dynamicTexture.

 

 

Don't hesitate if you have any questions

 

Cheers, 

[jerome]

Thank you both for your answers, in particular about camera controls

 

I'll have a try to bjs dynamicTextures but I'm afraid to front the same problem as in threejs pseudo-dynamicTexture (that was the same implementation : text written in a 2D canvas then textured) : if I drawText() dozens of dynamicTextures each frame, performance decrease dramatically !

 

Maybe it's not that important to refresh text values each frame as human eye can't read 60 values per second :-)

 

Therefore it will be a nice feature in any 3D framework when it exists at least ...

[joshcamas]

#4 - are you wanting a way to draw 2D text overlays? If so, here are two ideas:

1) Use a HTML overlay, and update the values using javascript

2) Use a 2D canvas overlay, and update the values using javascript

 

Each one could be updated only when you want to, and each one would not be.

You can compute distances as well, I believe.

[Dad72]

idea: Create the alphabet with sprites and use the appropriate letter to compose the text.

This may not be the best ways to do, but it can run without performance loss, or can.

[jerome]

@joshcamas : I don't want a general overlay, but something like text sprites displaying numeric values changing over time

 

@dad72 : yep ! I had this idea of a sprite alphabet. It might be not so difficult if I only consider digits from "0" to "9" (I need only numerical values) and a fixed font size for each character.

 

But I may reduce the displaying value update frequency too because a human eye can't decently read 60 values per second and keep using then the dynamicTexture.

 

The standard classic network weathermap software currently updates values every... five minutes !

And just displays statically on a single image new values on a 2D graph (so the user can't remember if values changed up or down from the last update)

looks like that : http://forums.cacti.net/download/file.php?id=11232&sid=13f2827f63f60e06d3201b1845b288d9

 

Mine collects data every 15 seconds... so I wanted the displayed values were evolving dynamically between two measures so the user can figure if the bandwith is increasing or decreasing on each link (a linear tween between two collects)

http://logiciels.iut-rodez.fr/proto/weathermap/

values are in/out in blue, not updated for now

 

I think I really can use dynamicTexture and update text value textures only every 1 or 2 s (with a round-robin like distribution on sprites each frame so I will lighten the GC work ).

I'll check next monday at work.

I need to migrate my POC from threejs to bjs too.

 

Links on my graph are generated from a json file.

I used a bezier curve from the threejs lib to give them a nice look.

 

Are there curve tools embedded in bjs or do I need to implement the mathemical function by myself ?

I'd like to reproduce in bjs the same aspect than in my POC : some kind of tube or cylindar curved along a bezier curve on its axis

[jerome]

mmhh...

crawling into the code, I found some Bezier curve here : https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Math/babylon.math.ts

 

but neither in the online documentation (1.12), either anywhere else (wiki, stackoverflow) explaining how to define a curve function, then apply it to a mesh geometry :-( for my curved tubes

 

I guess this feature is newer than the online documentation version.

I couldn't read in the forum thread about documentation why the online documentation was stopped at 1.12.

A new documentation site planned ?

 

If needed I could automatize maybe documentation generation from github (temechon, let me know how you do please) every night and publish it on my web servers at work.

[Dad72]

There is provided a official documentation, but we await news about it. This should be in very soon.

This is why the current documentation has been stopped and is no longer updated.

Deltakosh can tell us more about this.

[Temechon]

Beziers curves are used for easing animations curves, not for mesh geometry.

 

And yes, a new documentation is planned

[jerome]

ok, thanx for the answers

 

too bad the Maths class isn't visible in the documentation imho :

the Bezier function could be then used to generate vertex coordinates, themselves then used to construct a mesh geometry

nope ?

[GameMonetize]

For documentation, we are working on it. It will be available ASAP

 

For #3: Yes we have a lot of optimizations for static geometries (VBO, buffer and states caching)

[jerome]

I just remember I saw one of your video (in french) last summer about webgl and babylon where you talked about every optimizations done, even on garbage collection, objects pooling, etc

huge fantastic work !!!

[GameMonetize]

I'm writing a chapter on upcoming WebGL insights book (http://webglinsights.blogspot.com/). It is about optimizations I did for babylon.js

[jerome]

checked and adopted : after a day playing in the playground and having fun coding things fast (though I spent much time to realize axis were oriented differently than in threejs), I definetly decide to migrate from threejs to babylonjs for the sysadmin 3D softs I expect to submit to the next JRES conf  

 

I really like your product David(s)

[davrous]

Yeah!!! Thanks for this great feedback

[GameMonetize]

I like this kind of feedback. So welcome in our great community Jerome

[jerome]

you're welcome.

 

As a newcomer, what I did really appreciate is :

 

- website demos showing the framework powerfull

 

- the playground which a really good tool to start from basic running examples.

Learning by examples, as Phaser does, is really productive imo.

Readable and commented code helps a lot.

I wish there is a directory (somewhere else maybe) with all user codes accessible.

ex : I used Wingnut's playgroung code to understand how to populate a VertexData and I just could find this code via a link in a forum post.

 

- Web articles and videos of both of you, guys (deltakosh's accent sounds so familiar to me as I've got the same, arf).

Maybe the babylonjs website could have a page referencing all these links too : msacademy, techdays, your bjs blog posts, etc ?

The most material (code, snippets, demos) and documentation available, the best the framework, imho.

 

- very smart and reactive community on this forum

 

I wish I can write (question of time) in the wiki some article about "from threejs to bjs", though I'm a threejs newbee but I think it could help to understand the concept differences to easily migrate.

[Dad72]

Yeah like that it will attract other users Thee.js 

[jerome]

I started migrating my POC from threejs to babylonjs, waht is not that difficult so far

I faced a problem (or misunderstanding) about coordinate system (axis) because my meshes aren't the same position now (inversion) ...

 

Is the bjs system axis relative to the screen as described here : http://msdn.microsoft.com/en-us/library/ie/dn479430%28v=vs.85%29.aspx  ?

 

(sorry again for the threejs reference, but it's a threejs-bjs migration problem)

I couldn't find anywhere this primordial information in the documentation  :-( .

[Temechon]

Check the bottom end of this page : http://pixelcodr.com/tutos/toad_attack/toad_attack.html

 

It's a Y-up left-hand coordinate.

[Dad72]

Babylon use:

 

[jerome]

the explanation I needed so far

thank you a lot both of you !!!

[jerome]

added in the documentation : https://github.com/BabylonJS/Babylon.js/wiki/03---Position,-Rotation-&-Scaling