Modifying Nodes and Node Properties#
The previous chapter we learned how to setup a first application. We also learned about the InstanceGraph. 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 context.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 context.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 context.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 context.setProperty(nodeID,"renderMode",webvis.RenderMode.enum);
shaded |
wireframe |
shaded with wireframe |
masked |
masked with wireframe |
|---|---|---|---|---|
|
|
|
|
|
[Faces] |
[Topology]| |
[FacesTopology] |
[Occluder] |
[OccluderTopolgy] |
Transformations#
Note
We are using the library http://glmatrix.net/ for our calculations in these exampes. However, other math libraries and number arrays can be used as well:
// both matrices are equal const glMatrix_matrix = glMatrix.mat4.fromTranslation(glMatrix.mat4.create(), glMatrix.vec3.fromValues(2,3,4)); const plain_array = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 3, 4, 1];
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:#
const m = glMatrix.mat4.fromTranslation(glMatrix.mat4.create(), glMatrix.vec3.fromValues( x, y, z)); // axes as vector
await context.setProperty(nodeID, "localTransform", m);
This playground shows some simple translation:
Rotation:#
const m = glMatrix.mat4.fromRotation(glMatrix.mat4.create(), radian_value, glMatrix.vec3.fromValues(x, y, z));
await context.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.142 |
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.
const m = glMatrix.mat4.fromScaling(glMatrix.mat4.create(), glMatrix.vec3.fromValues(0.2,1,1)); // axes as vector (x,y,z)
await context.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.
const m = glMatrix.mat4.fromScaling(glMatrix.mat4.create(), glMatrix.vec3.fromValues(x,y,z));
const n = glMatrix.mat4.fromTranslation(glMatrix.mat4.create(), glMatrix.vec3.fromValues(x,y,));
const o = glMatrix.mat4.multiply(glMatrix.mat4.create(),n,m) // important: the first operations is the furthest to the right e.g. scaling before translation
await context.setProperty(nodeID, "localTransform", o);
.. playground:: ../playground_data/multiple_transformations
Labels#
You can add labels to the nodes. This improves the clarity of the tree.
await context.setProperty(nodeID,"label"); //changes the "name" of the node to "label"
Sometimes it’s convenient to do it directly while creating the node:
await context.add({label: "nodeName", dataURI: "/URI/to/data"});
Initial Properties#
To instantiate a node with predefined values, the inital property is used: `` const nodeID = context.add({label:”NodeLabel”, dataURI: “some_src”, initialProperties: {enum_property: value}}); ``
Recursivity in webvis#
Using the dynamic structure of the InstanceGraph, 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.
More Properties#
There are a lot more properties, which work in the same way, as showed in the examples above. Click here for a complete list.
Next we will learn about the event system of webvis and how to interact with events.