Physically Based Rendering (PBR)

From WakingApp SDKs
Jump to: navigation, search

PBR - Properties

The PBR shading module enables easy material-setup, with outstanding rendering results. Demo Video

There are 2 ways to control the PBR configuration for the Rendering Engine:

  • Using our PBR configuration GUI (see bellow)
  • By editing the GLTF directly (see bellow)

The Rendering engine is implementing PBR using the following properties:


Diffuse

Diffuse Map - A texture that defines the main color of the model.

Diffuse Color - Defines the base color of the model. If used with a diffuse map, it tints the texture by multiplying its color.

Watch-diffuse.gif


Normal

Normal Map - A special texture composed of RGB channels that create the illusion of surface depth.

Normal Strength - Defines how extreme the highs and lows of the illusion appear.

Watch-normal.gif

Metallic

This property defines how reflective the model is, from 0 to 1, 1 being completely reflective and 0 being not reflective at all.

Metalic Map - A grayscale image representing the metallic value of the model, with the option to apply different values to different areas.

Metallic Strength - When not using Metallic map, this value defines the overall metallic value of the entire model.

Watch-metallic.gif

Roughness

Defines the sharpness of the reflected light on the model. The rougher a model is, the more blurred the reflection of light, 0 being completely smooth and 1 being completely rough.

Roughness Map - A grayscale image representing the roughness value of the model, with the option to apply different values to different areas.

Roughness Strength - When not using Roughness map, this value defines the overall roughness value of the entire model.

Watch-roughness.gif

Using the GUI Tool

The user-friendly way to edit PBR materials is to use the PBR GUI Editor.

It provides an extensive interface, including a real-time preview of changes to the material,

in order to better audit changes before creating final assets for the 3D Engine.

Simple Controls

The PBR GUI Editor provides simple navigation controls.

Use the mouse scroll wheel in order to zoom in and out on the model.

To orbit around the model - in order to review it from different angles - simply hold and drag the left mouse button to rotate the camera.

Watch-navigation.gif

Import / Export Pipeline

First, a model has to be imported into the editing environment in order to modify its materials.

Internally, the 3D Engine uses the GLTF format to display models.

The PBR GUI Editor includes importing capabilities for either the GLTF and the FBX formats.

In this example, a GLTF file is imported directly.

If there are any textures or PBR Properties already defined in the GLTF file, they will be imported and used as well.

Otherwise, default values will be provided by the Editor.

Watch-import.gif

In order to save any changes made to the model's materials, it is necessary to export the model.

Regardless of the imported file format, exported models will always be in the GLTF format.

Assigned textures will also be exported along with the GLTF file to the same designated location.

Watch-export.gif

Finally, in order to clear the scene for another model, simply click on the 'Unload Model' button.

Watch-unload.gif

Editing PBR Materials

The PBR GUI Editor provides a simple user interface for editing the various PBR properties, as well as texture assignment.

In order to assign textures, simply click the button with the texture's name on it and select a supported image file of either the jpg or png formats.

Watch-texture-assign.gif

To edit other properties, simply drag the relevant sliders and preview the changes to the model in the viewport.

Watch-edit-pbr.gif

Setting the Environment

In order to review the model in different environment settings, the PBR GUI Editor includes options to change the lighting and background texture.

To change the background, simply click the drop-down menu and select a new environment map.

Watch-background.gif

To change the lighting conditions, use the relevant sliders to rotate and change the light's color and intensity.

Watch-light.gif

Direct Editing of GLTF

It's possible to directly edit the PBR properties of the model without using the GUI tool.

In order to do so via code, use the JOSN library of your choice.

Alternatively, it's possible to just open the GLTF file in a text editor and apply the changes manually.

Editing PBR Properties

In order to edit PBR parameters, add or edit the following elements in the GLTF (default values will be used for missing elements):

   "materials": { <- directly under the json root
       "material_name": { <- directly under the "materials" node
           "name": "my_material_name",
           "values": { <- only the relevant properties are shown below
               "diffuseColor": [
                   1, <- red component of the color, from 0.0-1.0
                   1, <- green component of the color, from 0.0-1.0
                   1 <- blue component of the color, from 0.0-1.0
               ],
               "bumpFactor": 1, <- this is actually NORMAL STRENGTH, from 0.0-5.0
               "metallic": 1, <- this is actually METALLIC STRENGTH, from 0.0-1.0
               "roughness": 1, <- this is actually ROUGHNESS STRENGTH, from 0.0-1.0
           }
       },
   }

Editing Textures

In order to bind a texture file to the relevant map in the model material, there are 3 parts: the Sampler definition, the Texture definition, and the Material Property definition.

1. Sampler Elements

This is the basis of textures: the sampler contains GPU instructions on how to process the texture and serves as the bridge between the material property and the texture node itself.

To define a new sampler, it's necessary to edit or create the following JSON element in the GLTF:

   "samplers": { <- directly under the json root
       "unique_sampler_name": { <- under the "samplers" node
           "wrapS": 10497, <- it's important to use THIS SPECIFIC VALUE AS IS
           "wrapT": 10497 <- it's important to use THIS SPECIFIC VALUE AS IS
       }
   }


2. Texture Elements

In addition to the sampler element, it's necessary to define a texture element for each texture, that creates a reference to the texture file on disk. It's recommended to store the texture files in the same directory as the GLTF file.

To create a texture element, add or create the following elements (note that the texture element root's name corresponds to the sampler name that binds tho this texture):

   "textures": { <- directly under the json root
       "texture_name": { <- under the "textures" node; notice that this usually corresponds to the sampler name that binds this texture
         "extras": {
           "offsetS": 0, <- will "scroll" the texture across the model, edit with caution
           "offsetT": 0, <- will "scroll" the texture across the model, edit with caution
           "scaleS": 1, <- will scale the texture across the model, edit with caution
           "scaleT": 1 <- will scale the texture across the model, edit with caution
         },
         "sampler": "unique_sampler_name", <- this is the actual bind to the sampler, hence it must be eqaul to the sampler name
         "source": "path_to_image.png" <- supported formats include png and jpg
       },
   }

3. PBR Properties

Finally, in order to actually load the texture into the proper material property, it's necessary to add or edit the following elements:

   "materials": { <- directly under the json root
       "material_name": { <- directly under the "materials" node
           "name": "my_material_name",
           "values": { <- only the relevant properties are shown below
               "diffuseColorImage": "diffuse_sampler_name", <- this has to correspond to the sampler name that's used to bind the DIFFUSE map to the material
               "bumpImage": "diffuse_sampler_name", <- this has to correspond to the sampler name that's used to bind the NORMAL map to the material
               "roughnessImage": "diffuse_sampler_name", <- this has to correspond to the sampler name that's used to bind the ROUGHNESS map to the material
               "metallicImage": "diffuse_sampler_name", <- this has to correspond to the sampler name that's used to bind the METALLIC map to the material
           }
       },
   }