Modifying Nodes and Node Properties¶
The previous chapter we learned how to setup a first application. We also learned about the Instance Graph. Next we will use it to modify nodes.
Note
Most of the webvis API functions are executed asynchronous using promises. We will use await to schedule the operations.
Nodes¶
Each node has a unique ID, through which it is accessed. The node directly above one node is the parentNode and the ones underneath are the childNodes. Nodes have different properties, which can be changed.
Node Properties¶
Different aspects (e.g. visual representation, location, …) of a node are stored in node properties. Changing these properties will reflect in direct visual feedback, as is demonstrated in this tutorial. Therefore we will use the setProperty function.
Changing Visibility¶
appearanceURI link nodes are visible:
await webvis.setProperty(nodeID, "enabled", true); //makes a node visible
Changing Color and Transparency¶
We use the enum member appearanceURI to change the color and transparency.
<!--> makes the node appear semi-transparent red <-->
await webvis.setProperty(nodeId, "appearanceURI", "ff000050");
There are predefinded colors All CSS color names and RGB hex-codes are supported:
urn:X-l3d:color:red
urn:X-l3d:color:rgb:ff0000
urn:X-l3d:color:rgba:ff0000ff
This playground changes the appearance of two resources:
Pickable¶
pickable defines, if you can click on a node and therefore interact with it. Resulting that nodes can’t be selected with the mouse in the viewer, but still in the tree view.
If a pickable node is clicked on, it will appear yellow.
await webvis.setProperty(nodeID, "pickable", false);
Per default all nodes are pickable.
Render Mode¶
Different render modes are available and can be changed with the renderMode property and the desired RenderMode enum member.
await webvis.setProperty(nodeID,"renderMode",webvis.RenderMode.enum);
shaded |
wireframe |
shaded with wireframe |
masked |
masked with wireframe |
|---|---|---|---|---|
|
|
|
|
|
[Faces] |
[Topology]| |
[FacesTopology] |
[Occluder] |
[OccluderTopolgy] |
Transformations¶
The following will give you a short overview about transformations in instant3Dhub.
Every node in a scene has a transformation property, which is implemented as a 4x4 matrix in homogenous coordinates. It’s used to store and manipulate the position, rotation and scale of the node.
The hierarchical transformation is accessed by the localTransform property. <br> To change this property first a matrix is created with the wanted values and then the localTransform changed accordingly. Use the following functions:
Translation:¶
let m = mat4.fromTranslation(mat4.create(), vec3.fromValues( x, y, z)); // axes as vector
await webvis.setProperty(nodeID, "localTransform", m);
This playground shows some simple translation:
Rotation:¶
let m = mat4.fromRotation(mat4.create(), radian_value, vec3.fromValues(x, y, z));
await webvis.setProperty(nodeID, "localTransform", m);
Some common radian values:
Degrees |
Radians (approx) |
|---|---|
30° |
0.524 |
45° |
0.785 |
60° |
1.047 |
90° |
1.571 |
180° |
3.412 |
270° |
4.712 |
360° |
6.283 |
The general equation for conversion from degrees to radians is:
Degrees*Math.PI /180 = Radians
This playground shows some basic rotation:
Scaling¶
Scaling a node works in a similar way as the previous transformations.
let m = mat4.fromScaling(mat4.create(), vec3.fromValues(0.2,1,1)); // axes as vector (x,y,z)
await webvis.setProperty(nodeID, "localTransform", m);
Multiple transformations at a time¶
In order to e.g. scale and translate a node, you need to concatenate the matrices.
let m = mat4.fromScaling(mat4.create(), vec3.fromValues(x,y,z));
let n = mat4.fromTranslation(mat4.create(), vec3.fromValues(x,y,));
let o = mat4.multiply(mat4.create(),n,m) // important: the first operations is the furthest to the right e.g. scaling before translation
await webvis.setProperty(nodeID, "localTransform", o);
We are using the library http://glmatrix.net/ for our calculations.
Labels¶
You can add labels to the nodes. This improves the clarity of the tree.
await webvis.setProperty(nodeID,"label"); //changes the "name" of the node to "label"
Sometimes it’s convenient to do it directly while creating the node:
await webvis.add({label: "nodeName", dataURI: "/URI/to/data"});
Initial Properties¶
To instantiate a node with predefined values, the inital property is used: `` let nodeID = webvis.add({label:”NodeLabel”, dataURI: “some_src”, initialProperties: {enum_property: value}}); ``
Recursivity in webVis¶
Using the dynamic structure of the instance graph, properties can be overridden recursively. If one node is changed, then all the nodes underneath it are changed in the same way too. The followin playground clarifies this by coloring three different parts of the instanceGraph. The first button changes just one single Node, which has no childNodes. Therefore only it’s own color changes. The second button colors one sub tree, which childNodes are the cone and sphere, hence both nodes change in color. The last button modifies the root node.