Documentation

Getting Started - 02 - 3D

In this video, we are going to assemble a simple 3D scene. Despite its simplicity, it is vital, that we already have an understanding of 3D graphics in general or have gained some basic experience by using a 3D modelling software.

00:00:14

Let us create a new compound to begin with. We start the whole process from scratch. A 3D scene is basically a hierarchical composition of so called “Nodes”. Every Node can present different, visible, geometrical shapes and additionally other sub-nodes.

00:00:32

One of the first things we have to do is add a so called “Scene Node” to the compound. We call them this in the Aximmetry system. This will be the root node of our scene. All the other items will be arranged in a hierarchy under this one.

In order to display anything in the scene, we have to add a “Camera”. The camera has to be wired under the root node too. The output of the camera is wired to the main output. We do not have any on the Preview, since we still have an empty scene.

00:00:59

It is worth mentioning here, that we have a type of connection, that we have not had so far. This connection is established not for processing of data or videos, but exclusively for the indication of relation between objects. We call these types of connections: “Reference Connections”. There are several, different reference connections in the system. This particular one is for structuring scene nodes and other scene objects.

00:01:23

The next object I will place in the scene is a sphere, a simple module called “Sphere”. This will also have a connection to our root node. We are still not getting any preview image. The reason for  this is that our camera is located in the middle of the sphere at the moment and the inner side of the sphere, that our camera is pointing at, is not being rendered. We can create a visible image, if we position the camera elsewhere. For this, we can use the  “Transformation” property, that every green colored scene node and every green colored objects have. In this property we can adjust position, rotation and scaling. If we reposition the camera backwards, along the Z axis, like this, we see how a sphere appears. Moving the camera backwards will bring the sphere into the view of true camera.

00:02:13

Moving the camera with this tool alone would result in a tiresome editing process. Therefore, we also have a dedicated module called “Camera Mover” for this purpose. This module can provide us with camera transformation settings and a zoom factor - which is basically the field of view angle of the camera.

00:02:31

When this module is connected to the camera, we can adjust the position of it either on the preview panel or on the output monitor directly by the mouse. Here for instance, I can move the camera backwards or go around the object by simply using the mouse. There is a separate documentation available on what type of mouse operations are available to the camera mover. I will not go into details on this subject but you are advised to go through that one too,at some point in the future.

00:02:57

The next step is to add a plane, which will be a floor surface in order to have something to relate our sphere to. This plane is created by a “Rectangle” object here, which is a planar rectangle placed in the 3D space.

00:03:10

As you can see it is added now to the scene but with incorrect, vertical placement. Do not worry, this rectangle object has a “Plane” property, which is set to “XY” now. This means that the rectangle has its area spread out along the XY axes. We need the XZ parameter, which gives the right plane and the object becomes our floor surface now. We can detect this change on the preview panel.

00:03:36

Our Preview panel here doesn’t always have the optimal size to follow our actions. For this reason I will enlarge the panel from time to time. It is worth mentioning that after selecting one of the preview panels and then press a “Shift Tab” key combination, the panel will increase to its maximum size, like this. We gain better detailing on the image with this step. We exit this view by pressing the “Esc” key. (I will often use this handy feature in this video.)

00:04:05

We have a rectangle now, which has an adequate plane but it is far too small. Therefore, we can transform this into a real floor surface. By adjusting its properties here, we can change its size. Along the existing two x,z coordinates we can specify different start and end values to set its distribution in the scene. Let us range both co-ordinates from -100 to 100. We now have a nice big plane but with a distorted texture on it. We can fix this by increasing its UV range as well by setting “TU Max” and “TV Max” values to 100. It is clearly visible, that we have a more dense texture and this will be quite handy when we fill this area with a proper texture.

00:04:50

The next step is to move the sphere to cease its merged position with the surface. The Sphere object itself, like the rectangle, has a property for adjusting its size. It has a “Radius” parameter, which is good for the setting of the size of the mesh itself but it will not facilitate any repositioning of the sphere.

In order to make any repositioning or transformation of the object, we have to connect another Scene Node. This new node is placed in a hierarchy, directly under the root scene node and the sphere object is placed directly under the new screen node now. This node also has its own transformation properties. If I change the values in the y axis, then we see how the sphere moves accordingly. Also, I can perform different rotations of the object here.

00:05:35

This editing technique however feels rather uncomfortable. Do we have an alternative here? Of course, we do. Let’s get familiar with the “Edit Scene-On” menu option. This option is also available in the “Edit” menu but it is more easily accessible here on the toolbar. With this option I can select monitors or preview windows that I want to use for editing purposes. If now we select the “Preview 1” option here, then I can edit the scene which has its camera wired to this Preview window.

00:06:06

Let’s select a module in the editor now. But not any module. We need a module that has transformation properties attached to it. A “Scene Node” for instance. It will display a couple of control handles. I enlarge it to see them better. I refer to these small arrows which allow us to reposition the object with good visual feedback and flexibility. In addition to this, I can rotate and scale it too with the tool options listed here at the top. Now, when the system is set to position mode, I can move the object freely, in the rotation mode I can turn it in all directions. In the scaling mode I can either use the white circle in the middle and perform a proportionate scaling or select one of the three axis arrows, scaling along only one of the axes by moving the mouse. Now we have managed to lift the sphere out of the surface.       

00:06:58

Our next task involves the replacement of this numbered, basic texture attached to this object. This texture covers an object by default if there is not any specific, so called “shader” added to it. Now, these two objects will have to get proper materials - or shaders, as we call them in Aximmetry. Existing shaders can be found in the Common project folder. There are quite a lot of shaders available to us. Now we select  one of the most simple ones. We open the Shader folder and the subfolder Standard. We select the “Norm” shader file here. The “.xshad” extensions identify the shader files. We drop the file into the editor and connect it to the Sphere box.

Before we do that, I have to mention that a shader can be connected not just to a specific object but also to a node as well. In this case all objects along the whole hierarchy will inherit the properties of the shader. For our purpose here, it is enough to connect the shader only to the sphere.

00:07:56

The sphere turns into black now. The reason for this is that our shader is capable of receiving light from light sources but there aren’t any light sources added to our scene. Let’s fix this situation by adding an ambient light source, this “Ambient Light” module. This will give constant lighting in the scene regardless of direction and distance. This module has to be connected to a scene node as well.

00:08:20

But before we do that, I want to mention a new feature of the system previously not talked about. When you add a new module to the compound, it will not necessarily display all of its available pins. Those pins that are not used so often, also called “secondary pins” are closed by default and therefore hidden from the eye. But we have a small switch here, which can be used to select between different “Expansion Modes” of the box. So, if I click on it, then it will display the entire content of the module. As we can see there are a lot more pins available to us here. Including the one, that we are using to connect our light source now.

00:08:58

We have three different expansion modes that we can select from. There is the closed mode, where only the pins which have cables connected to it are visible. There is the semi-open mode which is the default mode and the fully open mode. It is important to mention, that the module does not have to be open in order to connect cables to it. We simply move the cable above the desired module while pressing the shift key. By doing this all the compatible pins, in this case the one that can be used for connecting our new light module. We release the mouse button and now the connection between the light source module and the scene node is created.

00:09:33

We have now completed the connection of a light source. It is showing on the sphere object as it becomes completely white, while receiving a constant, white, ambient light. Let’s reduce its intensity a bit since we will not be needing such a strong ambient light. We leave it a bit faint, like this. Let’s continue by adding a different light source to this scene, a spot light for instance. We connect this light to the “Affecting lights” pin also. We cannot see any new light effects in the scene since the light source - as in the case of every object - is located in the origin by default. Let’s move it somewhere else. Here, or rather up here to cast a nicely tilted light on our sphere. Now I switch to “Rotate” and tilt it down to get a light beam coming in from the top.

00:10:27

We see instantly, that not only the handles appear around the graphical image of the spotlight but a schematic presentation of its conical light beam. This schematic figure can be disturbing in situations when we work on the lighting and we want to see how the light actually behaves on a certain object. Therefore it can be switched off in the “File Properties”. In this view, we look for the “Scene Editing” section and within it, there is the “Show helper geometries” button. If we switch this button off, light cones, camera frustums and similar objects will not be present. We see that the light cone is vanished and that the light source clearly casts its light onto the sphere. Now, when we have established normal lighting conditions, we can define a material for our floor surface as well.

00:11:14

We can either add a new shader or simply copy the one we have applied here on the sphere. We have two options here. Either using the copy-paste function (Ctrl-C, Ctrl-V, in this case the Ctrl-V will always place the object where the cursor was pointing at) or making a clone by moving the module, while pressing the “Alt” key. By the way this function works on every other module type as well.

00:11:40

Now we connect this second shader to the surface - to the rectangle module, defined as our surface here. We see immediately, how this provides us with an unpleasant light on the surface. We can of course make some fine adjustments to it. The spotlight has various parameters. For instance, we can adjust the spreading diameter (Falloff Angle) and the blurring of its edge (Falloff Power). We are adding a smoother edge and open up the spotlight a little bit with these two parameters.

00:12:10

Another thing that a light source can do is - of course - cast shadows. Again, in the Pin Values panel, we can switch on the Shadows effect. The sphere now has a shadow and it is traceable on the surface. Let’s position our sphere a bit higher, so it will clearly separate  from the surface. We select the light source again. We see the shadow of the sphere on the surface but we also see that there is a glitch. While I am moving the light source up and down, I am also producing a disturbing cut in the background. This phenomena is caused by performance optimization. Shadows are limited to a certain region and valid within certain distance intervals, calculated from the light source. The default maximum distance is set to 20 meters. We find this interval defined in the “Shadow Near Plane” and “Shadow Far Plane” parameters. The shadow is only calculated by the system within this interval. If we increase the “Far Plane” parameter we see how the line is pulling away in the distance. But the more distant we stretch our shadow, the poorer quality we get on it. We adjust the light to a medium distance by tilting it down until we get rid of that ugly line. Now, let’s further enhance these objects by changing their dull grey colors.   

00:13:24

As we can see there are quite a few properties available on the “Norm” shader module. By the way, it is appropriate to say a few things about the naming of the shaders. We call this shader “Norm” because it is capable of using a normal map. It is common that the name of the shader informs the user, what kind of textures it is able to use or if it has certain behavior parameters attached to it. The “Norm” shader is one of the simplest shaders available to us, capable of having “Color Map” and “Normal Map”.

00:13:56

Let’s apply a color map on it. I am positioning the object a bit closer in order to see the result better. We find the Color Map parameter in the properties panel of the Norm shader. By clicking on the three dots here, we open a new window, where we can select an image file. This image will function as a texture on our object. In the “Common” project folder there are many general purpose textures for us to use. These are sorted into different categories as well. We find the Carpet image in the category called “Floor” for instance. Let’s use this one on our object. It is worth mentioning here, that if the “Instant preview” button is turned On, here at the bottom of the window, the image files are immediately visible on the object in the preview panel. This feature makes choosing the texture rather easy. Let’s select this simple carpet texture and let’s pick a Normal Map too,  in order to gain a more rugged effect on its surface.

00:14:50

Now, I will be using a method that has not been demonstrated so far. This time I know exactly what texture I will use. Rather than browsing for textures in different folders in the directory, I can instead search for a specific file by its name. Here, we find a search field. After opening this window, the flashing cursor is placed here in the field, in order to facilitate quick typing of a specific search name. I am now looking for a texture, that looks like a rock. I type “rock” in the field now and select the rock_03 type of texture. But as we can see I clicked the wrong file as it compromises our sphere object. It is not the rock_03 texture we want to use, but the rock_03_nrm, which is a normal map texture. It looks much better now. We can select it and click OK.

00:15:40

Now we have ended up with a rather bumpy surfaces. We can further refine this for instance  by changing the density of the bumps. Every shader module has a property for texture coordinate transformation (also called UV transformation). With this tool the texture itself can be moved in all directions. Rotating is also possible but on a spherical surface the result can be unpredictable. But here, we are mainly interested in the scaling function. If I increase the values here, I get a more dense texture. Well, let’s now take a look at it in fullscreen mode. One additional property that we can adjust here is the spreading of the reflection of the incoming light. By adjusting the Specular Power property we can change the size of the area of reflection on the object. Let’s set it like this. It looks rather good now. Also, we can adjust the colors. We can apply one single color to the whole texture or we can select different components separately, for instance, we can adjust the color of the ambient light. I increase it now - in the Ambient Light module - to make it more powerful and when I come back here and adjust the color parameter, it is visible, how this change affects only those areas, where the ambient light is present. Similarly we can adjust the “Diffuse Color” parameter, which affects the coloring of light coming from other types of light sources, such as our connected spotlight. If we set this to a blue color for instance, it is clearly visible how the changes divide the sphere into 2 distinct colors, red and blue. Lastly, I can set the color of the specular reflection and come up with a quite unrealistic effect.

00:17:17

I can quickly reset all of these recent changes with a couple of Undos. Now we are back at the original lighting conditions. Let’s place a texture onto our floor surface as well. I select the shader of the floor surface and search for a specific parquet texture. This first one looks good. For our purpose the texture may be a bit dense and therefore I decrease its scaling property here in the Texture Coordinate Transformation. Now we have much wider patterns on the parquet, like this. Then I reduce the ambient light to gain more contrast on the colors.

00:17:53

There is one other thing that I have not mentioned so far, although it is important. We have connected our light source to the top root scene node. But any light source only affects the sub-hierarchy below the node it is connected to. If I, for instance change the connection of the spotlight to the lower “Scene Node 2”, which is the node of the sphere, we can see how it stops affecting the floor surface and only cast light on the sphere alone.

00:18:18

There are also other special settings available in the shaders. One of them is the “Wireframe” switch. If I set it to “On”, I see the mesh itself and now, I can show another useful parameter that has not been presented yet. The sphere has a “Tesselation” parameter. This controls the the density of its mesh and hence influences the detail of the contour of the sphere.

00:18:41
Also, this object can be transparent. This is set here by the “Transparency” property. There are several transparency modes available. I will only present the most simple one, called Normal Transparency. If I set a value for transparency, the “Opacity” parameter will be activated and available for adjustments. As I am changing the parameter, I see how the object is becoming transparent. But, as we saw in the preview, the shadow disappears at a certain transparency level. This is because the system does not handle half-shadows unfortunately.

00:19:16

The transparency function has a special type as well. This is called “Refractions”. This happens when objects become distorted behind a transparent object. This function requires special preparations. First, the “Norm” shader cannot cope with the refraction function and the module therefore has to be replaced. This is done quite easy. The same way as we have seen already in the effects section, I right-click on the shader and select “Change Import Source” and select another shader here. Or I simply bring in another shader from the File Browser by simply dropping it on the old shader in the editor. The one we are looking for is not in the Standard folder but in the Refract folder instead. Each material capable of refraction is  stored here. Again, we select the most common one, the Refract_Norm file. As we see, the name of the file indicates both that it is able to refract and that it can have normal map as well. I simply drop it onto the old shader and replace it by that. All previously set parameters will remain unchanged, color map, normal map, colors, etc… Every parameter that has its equivalent in the old shader will remain unchanged.

00:20:28

The reason why we are not experiencing any refractions just yet, is due to a certain switch on the camera module. We have to switch On the Refraction parameter of the camera. Applying refraction in the scene requires additional system resources. Therefore it is listed in the properties panel of the camera. If it is necessary, it can be switched off from here and thereby, we can free up system resources.

00:21:15

We still do not have the refraction on this preview but at least the object has become transparent. This is due to the “Refraction Index” parameter being set to 1, in the shader properties. As soon as I change its default value, we can sense a certain distortion in the background. I am zooming in now and it is clearly visible how the parquet is subject to this refraction effect.

00:21:16

  1. I am now going back to our original material with a couple of Undos. I now add a new object, a cube to the scene. It is represented by this “Box” module. The connection is made similarly through a scene node, like this. Now let’s move this object to another place, somewhere here, above the the sphere in a shrinked format and with a shadow cast on the sphere, like this. We connect a shader to this object as well. First we copy the shader of the sphere and apply another texture and another normal map as well, also we adjust the UV slightly.

00:22:06

Another thing I want to demonstrate on this object is the use of the specular map which can influence the coloring of light reflections. For this, we have to replace the current “Norm” shader. Instead of this one, we have to use the “Norm_Spec” shader, capable of receiving both normal and specular textures. We have already prepared a specular texture in our tutorial folder, we select this now. This action has resulted in a neat, little coloring to the specular reflection on the cube.

00:22:38

How should I proceed, when I decide to give rotation to the cube? Set aside the field of animation now. This area will be covered in a separate video later. However, we can perform this task by inserting a simple movement effect the same way as we did in the Basics tutorial video. We are going to use the LFO module again.

00:22:57

Our goal here is to make the cube rotating around its axis. Obviously, the cube has its own transformation property. It is now set to a certain value in its own properties panel. To this, we are aiming to add a so called “local transformation” that will be responsible for the rotating movement. One way of doing this is to add an extra scene node under “Scene Node 3” - further increasing the depth of the hierarchy and then rotate the Transformation of that new node. But for these cases we have a much easier method. Each node has its own “Add Transform” pin, which facilitates the adding of new local transformations to its main transformation.

00:23:38

Transformations can be assembled through many different modules. Here we are going to use a simple one, which is providing us with a rotation around the Y axis. We are going to connect a “Rotation Y” module to the Add Transform pin. We see that we have only 1 parameter, called “Angle”. This is the angle of the rotation. If I adjust this, I get a rotating movement on the cube. We can now add an automation routine with the help of the LFO module. If I simply connect it, knowing that the LFO oscillates between 0 and 1, I only get a tiny, 1 degree,  back and forth rotation. This will not help us much. Let’s increase the maximum value of the LFO. We get a more intense movement now. Our goal though is not the oscillating movement but a continuous rotation. The easiest way to accomplish this is to change the LFO “Waveform” parameter from “Sine” to “Linear”. This is a special setting of the LFO, which does not provide an oscillating movement but a continuous one. We can reduce the “Frequency” to slow down the cube a little. And we have a nice, rotating cube now.

00:24:50

So far we have used simple, geometric shapes, already available in the Aximmetry system. These have served us well, showing how to build a scene hierarchy and how to use the shaders. We have also had a nice introduction. Real life conditions however require us to add much more complex objects into 3d environments sourced from a wide variety of modelling applications. To import these externally fabricated geometric objects, we use the “Collada” file format. This means that the virtual environments and objects have to be exported in the first place in Collada format from any given modelling application. We are preparing a separate video tutorial on how exporting is done in specific modelling applications. For our purposes here, in this video, I will only demonstrate the basic functions, using an already exported Collada file.

00:25:41

Here, in the “Inventory” project folder, there are many model files in collada format. Now we select the “Dieffenbachia” file among them, located in the Plant subfolder.

This file is a collada type, with “.dae” extension. As we have done it many times before, we simply drop the file into the compound. With this move the import of the collada file is completed. If we now enter this box, we see that there is a scene node and a mesh geometry module connected to it. Obviously, in the case of more complex models, more geometries and several other scene nodes will appear. We are going to deal with this subject in our next tutorial, called Animations. This object is a very simple one, including only one piece of geometry.

00:26:29

I connect this new object to the root node and it appears immediately in the preview. Since this object has its own node and therefore its own transformation property, I can freely reposition it in the scene. I maximise the preview panel now. I can move the object freely with the arrows. Also, I increase the size to get a better view of it. This is our plant.

00:26:52

What we see is that this plant is presented without a texture, there is no shader connected to it. One solution for this is that we use a material similar to what we used on the sphere. We can simply copy it here and connect it to the plant.  We end up with a rock sculpture, not much of a plant really. Or there is another way. If the collada file has been exported together with the data of the material that has been set in the modelling application, then it is possible to import them here - with some limitations of course. We do this by right-clicking on the collada object and selecting the “Change Importer Source” option.

00:27:33

We can use two approaches here. If the “Use default” switch is On, then it means that any changes we make here will be valid for the entire compound and for every collada object imported. If the switch is turned Off, then the changes are valid only for this specific object. Let’s make a change now with the default switch turned On. We switch On the “Import materials” button here and exit this dialog with the “OK”. The object is now imported again together with its material properties. The original texture of the plant is visible now.

00:28:07

The importing of the different materials is carried out by allocating a specific shader type automatically. This shader type, called Imp_General, contains a wide range of commonly used maps and other frequently used properties. Obviously, it has its limitations as well and will struggle to import the very exotic materials designed in stand-alone modelling applications. It will perform well, with the most basic materials though.

But, because this shader has the characteristics to support a wide range of textures, it is maybe not the optimum solution for us to keep it within our new object. This plant is using only one color map and it is not equipped with any special property setting options in the material. Due to this and other performance related considerations, it is probably not the best shader for us to use here. Therefore, we can change this shader to one of our own materials. Let’s browse among our “Standard” shaders. So far we have used the “Norm” shader, which has the capability to use normal map. But even this one is unnecessary here because the object doesn’t have a normal map. In these cases we can opt for the quite basic “Flat” shader. This shader is the simplest one that still capable of receiving light from different light sources. We can now drop this file onto our “Mat” shader and replace it with this new one. As we see in this large preview, nothing has changed. This is due the fact, that the object is using only a color map.

00:29:31

If we now drop another shader, this “Basic” shader for instance, which is even more primitive than the other one, not even able to receive any light sources, then we see the change on our object. We end up with an illuminating plant that is not dealing with any incoming light.

00:29:46

Another good reason why we may consider changing an imported material, is when we want to create something very special, containing unique, Aximmetry specific features. Therefore, these automatically imported shaders and materials have to be considered as a starting point only. With this in mind, our goal however should always be to aim for an Aximmetry specific shader design.

00:30:09

One final thing I want to cover in this video is the HDR - High Dynamic Range - rendering feature. Let’s turn our attention to this enlightened area on the sphere. Assume that we have to make the impression that this light reflection is coming from a very powerful light source. As a first measure, we can try to increase the intensity of the reflection of the sphere. This property is called“Specular Color” and it is located in the shader module. Now, one thing that I have not mentioned so far is that these color property editors are made up of two parts. One is a commonly known RGB editor, which is used to pick a specific color.  The other one, is the so called intensity component which functions as a multiplier value in respect of the chosen color. What is relevant to us here is that this value can be increased over 1. More than that, we can increase it to a level around 10, which gives us 10 times higher intensity on the white. In default circumstances, we cannot end up with a realistic result. The white simply burns out at the enlightened area of the sphere. In order to get a visually satisfactory image, we have to do two things. First of all, we have to set the HDR rendering property on the camera. This means technically speaking, that the output signal from the camera at the moment is an 8 bit per channel RGBA signal, as it is displayed to us in the heading of the preview image here. This represents a normal Low Dynamic Range image format. In the case that  we switch On the HDR mode, we get a 16 bit per channel floating point output signal. This ultimately means that in the HDR mode output we get all the information preserved, including the higher than 1 intensity values at the reflection area. But we still do not see the intended result in the preview.

00:32:00

We have to add a new module to our scene, the so called “Tone Mapper”. If we include this module, it will do two things. It will first rearrange the intensity intervals. Secondly it is capable of applying visual effects that give the impression of high intensity areas. Among its properties there is the threshold value, which defines the minimum intensity level when these visual effects are starting to appear. There are also plenty of parameters within this panel, I will not cover each of them now. The basic effect that can be applied here is the “Bloom” effect. This is a kind of glow effect around the bright areas. It has several parameters, we can for instance adjust the size and the intensity of the effect. There is also the “Streaks” effect, which emulates different camera lens flares. We can view the blue Cinema effect for instance or the cross or the star effect. Similarly, the intensity, size and other parameters can be adjusted here.

Lastly, there is an option here to simulate camera lens reflections. I enlarge it to view it better. These effects show when bright areas are reflected on the lens diagonally.

And this concludes the initial explanation of 3D features in the Composer system. In our next tutorial, we will cover the area of animations.

 

Aximmetry Technologies Ltd.

Incorporation no: 01-09-171556
EU VAT registration no: HU24314486
Tax registration no: 24314486-2-41

Gömb utca 26., 1139 Budapest, Hungary
+36 1 300 5060
This email address is being protected from spambots. You need JavaScript enabled to view it.
Office hours

©2020 Aximmetry Technologies Ltd. All Rights Reserved. Designed By freeart.hu

Search

We use cookies
This site uses cookies to personalize content, to provide social media features and to analyse traffic.