Exploring the Graphical capabilities of Rootex

This documentation aims to showcase the graphical capabilities of rootex and act as a tutorial for beginners to get started.

Let’s start by creating a scene.

Create a scene

To Create a Scene

  1. Go to file->CreateScene.

  2. Name the scene and click create.

Create Scene

Now we Create an Empty Scene. An empty scene is nothing but objects. You can have different components in it, more on that later.

Create Empty scene

To create an empty scene.

  1. Right-click the root scene.

  2. Click Add Empty Scene

Create Empty Scene

Empty Scene Created

Giving Components

Now we give components to the empty scene.

  1. Right-click the empty scene.

  2. Click Edit Components.

  3. Check the appropriate components, in this case, transform and Model. Note: Transform Component is a must.

Components Added

  1. Open inspector.

  2. Go to the model component in the inspector.

  3. Click the folder icon next to Model.

  4. Select the sponza 3D model file located at Rootex\game\assets\sponza\sponza.obj

Selecting File

For sponza initially, it would look like this:

Model File Just Added

This is due to the default settings of the sponza obj file. To get a better view, set the scale to (0.031, 0.031, 0.031) and set the LOD distance to 123:

Change Model Scale and LOD Distance

We need to create an empty scene and add a light component to it to add light.

Light Component

To add light, we now create an empty scene.

  1. Name the scene.

  2. Add transform and directional light components.

Directional Light Added

Added Components

To move freely, we can change our camera mode to Editor Camera. This allows us to move freely.

Editor Camera

To have complete control of movement, you can use an editor camera.

  1. Click the figure icon at the top left of the viewport.

  2. Open dropdown of camera.

  3. Select editor camera.

Change To Editor Camera

To move, you have to hold the right mouse button and then use WASD space and shift keys to move. The cursor for direction. Space to move up and shift to move down.

Navigate With Editor Camera

Point Light

A point light is helpful if you have a source of light, e.g. a candle, bulb etc. To add a point light, follow the given steps.

  1. Add an empty scene and give it a point light component.

  2. You can tweak its transformation value by either inputting it or dragging it left or right.

Add Point Light

If you press ‘q’, a transform gizmo will appear on the object you have selected. You can adjust light location through it. For rotation and scaling gizmo, press ‘w’ and ‘e’, respectively.

Translate Point Light 1

Translate Point Light 2

Translate Point Light 3

Overriding a material

To change the properties of one object without changing the original material, we can use overriding materials. To override a material:

  1. Create a new basic material by going to file -> Create Resource.

  2. Name the material and click create.

Create Basic Material

  1. Go to the Inspector-> Model Component->Materials.

  2. Click on the folder icon on the corresponding overriding material.

  3. Select the newly created basic material located at Rootex\game\assets\materials\new_cloth.basic.rmat

Select Basic Material

Now you can change its basic textures by 1)clicking on the pencil icon 2)In the file viewer now click on the diffuse texture and select the appropriate diffuse texture.


Change Basic Material Texture

Custom Material

  1. Go to create Resource -> Custom Material.

Create Custom Material

  1. Enter material name.

  2. Now go to Inspector -> ModelComponent and then to Materials.

  3. Click on the folder icon and choose the material.

Select Custom Material

Adding a shader

To Add shader:

  1. Click on the pencil icon on the overriding custom material.

  2. Now, in the file viewer you’ll get options to add vertex and pixel shaders.

  3. Click on the pixel shader. A dialog box will open now you can just select the shader.

Change Custom Material Pixel Shader

You can use fire_pixel_shader from rootex/core/renderer/shaders

Clicking on the pencil icon opens an editor to customise the shader.

Note

You can only add shaders to custom materials. If you want to use default material, override the original default material with custom material and then add a shader to the overriding material. The overriding material does inherit the textures of the original materials.

Change Shader To Fire Shader

Edit Fire Pixel Shader

Final Fire Pixel Shader

Fire Shader Sample

Decal Component

To add a decal component.

  1. Make a scene DECAL and give it transform and Decal Component.

Add Decal Component

  1. Create a decal material. By going to File -> CreateResource. And then slect Decal material in resource type dropdown.

Create Decal Material

  1. Now go to the inspector and click DecalComponent.

  2. Click on the folder icon and select the decal material.

Select Decal Material

  1. Click on the pencil icon and the in the file viewer click on Decal Texture.

Change Decal Material

  1. Shift its position by manipulating the transform component.

By default, the decal shader projects on the negative z-axis. You can rotate it till you get the desired result.

Decal Sample