Join our Mailinglist:


Who uses ILNumerics?






Visualization API: Quick Start Guide

A quick start guide for the Visualization Engine is given in the Getting Started Section. Visit this guide and come back afterwards!


Default Interaction with ILPanel

Left mouse button: drag -> Rotation

Right mouse button: drag -> Pan

Mouse wheel -> Zoom In / out

Left Click -> Selection

Double Click -> Reset view


CTRL + Left button + drag -> Rotate around LookAt axis

SHIFT + drag -> fine adjust

ALT + drag -> restrict to horizontal or vertical direction


Modifying Shape Properties

Note, in the following documentation sections we will concentrate on creating scenes instead of windows. We will utilize the ILNumerics web components in the client browser. If in a code area a scene is created, it is converted to a visual image on the fly and immediately displayed. Try modifying the code and generate your own visualizations on demand!

Read more about visual code examples and the ILNumerics web component in the Web Examples How to.

Returning to the example above. Modify the scene setup as follows:

Note, how the line color has changed, the fill color has changed and the fill became transparent. The sphere, however, is still lit.


Multiple Shapes

Continuing with the last example, we add to scene setup:

Note how the triangles corners are positioned: the tri.Positions.Update function receives a two-dimensional array. Each column represents the X, Y and Z coordinates of a corner. We only create one triangle; hence we only need 3 vertices.

By default, the coordinate system is centered at (0, 0, 0) and oriented as follows: positive X goes to the right, Y goes up the screen and Z comes out of the screen.

Note further, how the triangle intersects with the transparent sphere. The lighting for the triangle is deactivated in this line:


Reusing Shapes

We take the triangle from the last example and reuse it in the scene. First, a new group node is added. Group nodes hold an arbitrary number of child nodes and optionally apply transformations to them. Our group is configured to rotate its children by 180° around the Y axis.

Note, the original triangle is again added to the scene. This will result in a clone of the original shape being created. Initially it gets the same properties as the source. Here: it gets the same positions! Since it is added to our transformation group, the triangle gets rotated by 180° (Math.Pi) around the Y axis ( new Vector3(0,1,0)). However, it can still get configured individually. In our example the color is set to green.


Reusing Scene Parts

We again add to the code:

First, we create 50 random positions in the range X: -10..10, Y: -10..10, Z: 0..-20.

In each iteration we add the sphere created earlier. Since we have added the red triangle and the (transformed) green triangle to the sphere node, once we clone the sphere the triangles are cloned as well.

Once we get the clone, we can alter arbitrary properties of it. We simply translate it using the random positions created above.

Note how transparency works nicely for all complex shapes in the scene. 


Buffer Sharing

Whenever we clone shapes or groups and any subtrees contained within, the original nodes are cloned. However, all buffers used by the shapes are still shared! So in our example, the scene uses exactly one buffer for the vertices of the sphere and exactly one other buffer for the vertices of the first red triangle. All other shapes are derived from these buffers.

Try modifying the vertex buffer for the red triangle! Simply add the following line to the end of the scene setup in the above example. This will set the position of the first triangle vertex to (0, 2, 0):

By changing the vertex data for the first triangle created, all derived triangles change as well! In order to prevent this behavior, the shape needs to get detached from all other shapes before modifying it:

This time, only the vertices of the first shape will change. Its buffers are detached from the one of the green triangle and all other derived triangles; hence changes are limited to the first red triangle.

Keep in mind: cloning shapes and groups (i.e.: 'subtrees') will keep buffers shared. Detaching a shape allows modifications to its buffers without affecting any other shape which may use the same buffers.


Full Source Code for the Quick Start Guide

This example repeats the code needed in order to be run in the context of a Windows.Forms application. It produces an output similar to this:

Note, that the code for both examples differs slightly. While the top code area shows the code for a Windows.Forms.Form application, the lower code creates an ILScene only. Latter ommits boilerplate code for the creation of the form and the ILPanel control. It concentrates on the scene creation and configuration only and enables the interactive rendering in your browser. However, the setup for the scene itself is identical in both examples.

Read everything about the ILNumerics web code component in the Web Examples Howto.


Purchase a License:

Buy ILNumerics

Download ILNumerics:

Free Trial