How to dynamically add new nodes to a scene

[bigopon]

From the official examples of Babylon, it seems to me that in order to add a node (Camera, light, mesh...) to a scene, you have to do it during constructor: new Class(..,.., pre-created-scene)

Is there a way to do it the normal way: creating a node separately and then later add it to the scene via a method: scene.addNode(cam)

 

 

[Wingnut]

Hi B, welcome to the forum.  "addNode" is "the normal way"?  What 1920's webGL library have YOU been using? 

hehe.  I'm just "busting chops" of the lesser webGL libraries "out there".    In BJS, I think the "normal" method to create a non-rendered node... is to call node.setEnabled(false)... after constructing.

Give yourself some time and patience, and you'll discover that you RARELY need to pre-construct nodes, and later enable them.  Just construct them when you need them displayed.  There's rarely a need for pre-built non-rendered or hidden nodes.  That's just my opinion.  BabylonJS is performance tweaked and already avoids rendering nodes that don't need rendering (things outside-of activeCamera frustum, for example).

BJS has a "tags system" that allows nice wildcards and pattern-matching searches of scene.meshes, .lights, or .cameras.  With good tags management, or using a few simple arrays, you can easily "activate all trees" or "shut off all street lights"... things like that.

Don't take offense to my playful ribbing, ok?  It's just that... 'round these parts, addNode() is certainly NOT "normal".    Stay tuned for more/better comments, and again, welcome.

[Guest]

To complete @Wingnut answer, we use the constructor to register the node to the scene immediately in order to keep track of all created objects so we can dispose memory efficiently.

[bigopon]

@Wingnut @Deltakosh Thanks for the answers, the main reason I asked for that API example is to integrate Babylon into higher level templating frameworks. So far, I've examined the src and can understand what your answers are about. It's a bit of unexpected though when 2D GUI can be done in that way. In case you are curious what I'm trying to achieve: currently, I'm doing integration tests for Aurelia vNext rendering engine, where the following scenario is possible:

<template>
  <b-scene>
    <b-box></b-box>

    ....
    2d GUI:
    <b-textblock></b-textblock>
  </b-scene>
  <div>
    ...
  </div>
</template>

You can see some other examples here https://github.com/aurelia/aurelia/pulls where I've done something similar with PIXI, NativeScript, Konva, Libui, blessed etc... The next in the line are ThreeJS and BabylonJS.

To do it easily, it kinds of need DOM-like API for add, insert, remove, traversal and ability to create node independently and insert lazily. Maybe I can try to find a way to work around that.

[Guest]

You can still create them without a scene (they will be  added to the latest created scene)

[Wingnut]

Ahh, Collada.  errr.  BJS in XML.  errr.

1 hour ago, Deltakosh said:

You can still create them without a scene (they will be  added to the latest created scene)

Can you repro that in a playground, please?    I want to see that.  We can create a node... without first creating a scene?   I bet we need to be Wizard-grade or higher.  Might need a magic potion or some faerie dust. 

I've been staring at https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.node.ts for 45 mins, now, thinking about bigopon building his own nodeConstructor, or maybe adding a setEnabled(false) default behavior on all nodes.   Wingnut == lost. 

I'm really not qualified to comment on this stuff, though.  But I HAVE been interested in building a BJS scene completely with XML or similar.  Then we can use xPath and XSL transforms against the DOM-ish scene graph... for filtering and other transform fun.  errr.  A different kind of 'transform' than the 3D type, of course.

<scene clearColor="black" >
     <mesh class="bigopon" type="box" size="5" enabled="false" color="red" />
     <light class="bigopon" type="hemispheric" direction="0,1,0" enabled="true" intensity="0.7" specular="blue" />
     <camera class="bigopon" type="arcRotate" alpha="-Math.PI/2" beta="1.2" radius="40" attached="true" wheelPrecision="200" />
</scene>

Coooool.  BSML 1.0  (Babylon Scene Markup Language).  We even write a DTD (document type declaration) so we can test if a given BSML file... is valid BSML.   

Wingnut wander-off:  Packet-serving becomes scene-serving becomes node-serving... Ted Nelson - Transclusion.  Bigopon logs-into our new 3D forum, and gets an XML <avatar> node from all visible forum-users... to be included in his "forum scene".  All the mesh (avatars) in his scene... were "transcluded" from many places.  Historically (back in the olden days), transclusion was also part of trans-copyright and micro-pay... it presumed that all links be 2-directional.  Instead, Timmy Berrners-Lee screwed up the web forever.    One-way links go stale.  2-way links can't.  But transcluded webpages/XML (pieces retrieved from many places) can be slow-building (yawn).  Still, though, there's not many formats that have the hand-around-ability and ease... of a packet of XML (a node).