Rendering, lighting and shading

Materials

PocketStudio supports physically based shading models and is compatible with industry standards.

If you create or import an object in a 3D scene that has no material assign to it, you will have to create one. Here are the steps to do so:

  1. Select the object you want to assign a material to. The object’s properties will appear in the property panel (on the right of the viewport).
  2. Click on the Create a New Material Button in the Property Editor panel. The button is replaced with the parameters of the newly created material.

Material models

Two general-purposes material models are supported in the application:

  • Metallic-Roughness
  • Specular-Glossiness

These models were developed by industry insiders such as the Walt Disney Animation Studios to cover a very large range of materials. They are characterized by a small number of parameters, aiming for physical accuracy while maintaining artistic control. Popular paint packages such as Substance generally support both models.

The Metallic-Roughness and Specular-Glossiness differ in how the diffuse and specular reflection components are set, but for the other components of a material (such as subsurface scattering, bump or transmission), the two material models share the same set of properties (or parameters).

Metallic-Roughness model parameters

This model is known in the industry as the Disney material model; it was developed by the Walt Disney Animation Studios and used on its most recent movies. It can be used to reproduce a wide range of materials (almost all except hair) with only a few “artist friendly” parameters.

The material contains a special parameter called metallic (sometimes often referred to as metalness) that let you define whether the object is metallic or non-metallic (such materials are also called dielectrics or insulators).

Use this pulldown menu to switch between material types.

Controls the color of the object. For example yellow for gold and green for grass.

The effect of Base Color depends on the material type:

  • Non-metals (also called dielectrics) have a chromatic diffuse component (grass is green, cherry is red, jeans are blue) and an achromatic specular reflection component (a white light shining upon a non-metallic object stays white when reflected back by the surface of the object). Base Color is used in this case to control the color of the diffuse component of the material. Your material is of such type if the Metallic parameter is set to 0.

ps docs albedo

  • Metals have no diffuse component and have a chromatic (aka colored) specular reflection. A white light shining upon a gold nugget for example is tinted in yellow when reflected back by the surface of the object. Base Color in this case is used to tint the specular reflection of such materials (yellow for gold, brown for copper, etc.). Your material is a metal if the Metallic parameter is set to 1.

ps docs metallic color

If your Base Color map contains an alpha channel, this channel will be used to set the transparency of the object the material is applied to when this checkbox is ticked.

See Opacity/Transparency below.

Controls whether the material is a non-metal (dielectric) or a metal. In theory this parameter should be a switch as a material can only either be a metal or an insulator (a non metal). However, it can be useful to paint values within the range [0,1] for artistic purposes.

The metallic parameter is mappable which means you can use a black and white texture to isolate the metallic from non-metallic areas of an object.

Controls the amount of specular reflection (from 0 to 1) at incident normal (the incident ray is parallel to the normal at the surface). An average material reflects 4% of the light at incidence normal (hence default value of 0.04). For metals, it can vary within the range [0.5,]. At grazing angle the amount of reflection is always 100%.

When Dieletric F0 is set to 0 and that you don’t wish to have any reflection at grazing angle, set the Roughness parameter to 1.

The variation of the amount of reflection at incident normal and grazing angle is known as the Fresnel effect.

ps docs dielectric F0

For a mirror like surface, set the value to 0. For a matte surface set the value to 1. Values in between will allow you to control how “shiny” the surface is.

ps docs roughness

Specular-Glossiness model parameters

This model is an alternative to the Disney material model; it can be seen a the legacy model. It is still very popular though and can be set to behave in a similar way to the “Metallic Roughness” material.

In the specular-glossiness model, there is no metallic parameter, the Base Color parameter is replaced by a Diffuse Color parameter and the dielectric F0 parameter, the amount of specular reflection at normal incidence, which is a float (or scalar) in the Metallic-Roughness model is a color in this model.

Use this pulldown menu to switch between material types.

Metallic materials (or conductors) don’t have a diffuse component. Only non-metallic materials (dielectric) have. To the contrary of the Metallic Roughness model where the Base Color parameter controls the color of the diffuse and specular reflection, in this model, the Diffuse Color parameter controls the diffuse component only (hence its name). To control the color of the specular reflection use the Dielectric F0 parameter (see description below).

ps docs albedo

If your Diffuse Color map contains an alpha channel, this channel will be used to set the transparency of the object the material is applied to when this checkbox is ticked.

See Opacity/Transparency below.

The Dielectric F0 parameter has the same function that in the Metallic-Roughness model. However in this model, the parameter is a color whereas in the Metallic-Roughness model, it is a number. It controls both the amount of specular light reflected by the object at incident normal as well the specular reflection color. Remember that dielectric material (non-metallic objects) have achromatic specular reflection. For such materials, the R, G and B value of the Dielectric F0 parameter should be equal. By default the color is set to (0.04,0.04,0.04. Metals on the other hand have chromatic (aka colored) specular reflection and reflect much more light (between 50% and 90%) at incident normal than dielectrics. For gold for instance, this value can be set to (1.00,0.85,0.57

Glossiness is the inverse of Roughness (aka glossiness = 1 - roughness though check that your images are in linear color space if you plan to do this conversion). The surface is diffuse if Glossiness is set to 0 and looks like a mirror-like surface if it is set to 1.

Opacity - Transparency

Real-time engines including PocketStudio often expect the transparency map of an object to be stored in the alpha channel of the material’s color map (which is either called Base Color for the Metallic-Roughness model and Diffuse Color for the Specular-Glossiness model).

If your Diffuse Color or Base Color map (depending on the material type used) contains an alpha channel, this channel will be used to set the transparency of the object the material is applied to when this checkbox is ticked.

Use base color's alpha: OFF
Use base color's alpha: ON

When objects are opaque, real-time engines don’t care about the order in which objects are drawn to the screen, however when objects are transparent or semi-opaque, they need to be rendered from back to front. However when two transparent objects intersect each over ordering won’t work which can lead to visual artifacts. This problem concerns the preview mode only.

Transmission (glass, water, …)

Works on:PreviewHigh-quality

Do not mix transparency and transmission. Transparency works in both the preview and high-quality rendering mode, while transmission only works in the high-quality rendering mode and simulate the effect of light passing through a clear medium (to avoid using the term translucency here). The particularity of that effect, to the contrary of transparency, is that light rays are bent as they go from one medium with a given index of refraction (for example vacuum) to a another with a different index of refraction (ex. glass, water, etc.), which is the reason why the image of a background is deformed when you look at it through a glass ball for example.

When passing through glass or water for example, refracted (or transmission) rays are bent according to the material index of refraction. The higher the IOR value the greater the bent as depicted in the image below.

Here are some IOR values for common materials:

  • Vacuum: 1
  • Water: 1.33
  • Glass: 1.5
  • Diamond: 2.47

The IOR parameter has no incidence on the amount of light reflected at incident normal. This amount is controlled by the Dielectric F0 parameter.

ps docs transmission ior

Transmission Weight controls the “intensity” of the transmission / refracted rays.

  • 1: you see through the medium (water, glass, etc.). If an object is beyond the surface, you will see it (its image though will be bent due to refraction. The amount of bent is controlled by the IOR parameter).
  • 0: the medium is opaque.

There is not falloff on transmission rays at the moment. This can be needed to simulate a change of transmission weight according to the distance between the point where the ray entered the medium and the surface hit beyond that surface by the transmission rays. This feature will be added later.

ps docs transmission weight

The color of the medium.

ps docs transmission color

Subsurface Scattering / Translucency (SSS parameters)

Works on:PreviewHigh-quality

What we call translucency is the result of a physical effect known as subsurface scattering which describes how light travels below the surface of an object as a result of bouncing off from the structures the medium is made of, before making its way out to the surface.

Subsurface scattering is more expensive to compute than purely diffuse material. Use it to simulate things such as “flesh” in general (skin, potatoes), wax or other translucent material such as silicon, milk, etc.

Two parameters are particularly important to control the look of translucent materials:

  • Base Color or Diffuse Color (depending on the material type used): they control the overall color of the material. These are the color of a slab of your material under uniform lighting. Therefore the first thing you need to do when setting scattering is to set the color of either one of these parameters to the color you wish the object to have.

  • SSS Radius Factor: it controls the “color” of the light bleeding in the shadow areas as well as how translucent your material is. For instance, to simulate human skin, you will set the red component of this parameter with a value greater than the green and blue components. This value can be scaled up and down using the SSS Radius parameter.

SSS Weight controls allows you to mix the result of subsurface scattering with the result of diffuse. When set to 0, diffuse is 100% and there is no contribution from subsurface scattering. When set to 1, the subsurface component is 100% and there is no contribution from diffuse. Any in-between values is a linear mix between the two.

This value should generally either be 0 or 1. Whether you use diffuse or scattering, the overall color of your surface should be the same (it will be controlled via either Base Color or Diffuse Color). If you use scattering, you will however notice a difference in the shadow areas and particular at shadow boundaries, where the light will bleed, whereas with diffuse light won’t bleed at all. Therefore mixing the two components doesn’t really make sense. You generally either want scattering or diffuse (scattering takes longer to compute). If the scattering effect is too strong simply reduce the SSS radius parameter.

SSS Radius is used as a multiplier to the SSS Radius Factor parameter which is itself a color. SSS Radius Factor defines for each wavelength (red, green and blue) how far light travel on average in the medium before making its way out to the surface of the objet. However if you set values for this parameter greater than 1, you won’t be able to appreciate its color any longer. That is why SSS Radius exists: first you set SSS Radius Factor using the color picker tool, then use SSS Radius to scale SSS Radius Factor up or down.

Keep in mind that in PocketStudio, distances and defined in meter. Therefore a radius of 0.1 means (assuming SSS Radius Factor is set to white) that light can travel in the object as far as 10 centimeters (3.9 inches) before exiting the medium.

ps docs sss radius

SSS Radius Factor can be considered as the distance between the point where a beam of light enters the surface and the point where the photons making up that light beam exit the surface due to the effect of scattering. This distance can be different for each wavelength (red, green, blue). The higher the value, the more translucent the material. However rather than setting these values as numbers, you can simply set it as a color and adjust the overall distance using the SSS Radius parameter. For skin for example, you can set the parameter to (1.0,0.35,0.2 and set the SSS Radius parameter to 0.1 (meter).

The example below shows an example of three spheres having their Base Color set to (1, 1, 1 and their SSS Radius Factor set to (1,0,0, (0,1,0 and (0,0,1 respectively. Notice how the color of the surface of the sphere illuminated by the light is not affected by the SSS Radius Factor parameter (this color is controlled by Base Color or Diffuse Color). The effect is only visible where there is a variation of lighting due to shadows for instance. We often speak of light bleeding which is clearly visible in this example.

ps docs sss radius color

Bump Mapping

Bump or normal mapping is used to simulate small bumps, cracks, scratches, or more generally small variation of height on the surface of an object that would be too complex to model with geometry. In effect it replaces the normal computed from the geometry with a normal stored in a RGB image, called normal or bump map.

The data of your normal map should be stored in this RGB image as follows:

  • Red channel: X
  • Green channel: Y
  • Blue Channel: Z

Where Z points along the normal direction at the surface.

You may have to edit your normal map in a paint package to reorder the channel accordingly. You may also have to invert the green channel (encoding the Y data). Unfortunately the way normal maps are encoded are not standardized across all 3D software and graphics APIs.

Normal maps are considered to be stored in linear color space and are thus applied as is (no color correction applied)

To apply a normal map to an object do as follows:

  1. Edit a material file and set the normalTexture parameter with the path to the normal map. Save the file
  2. Drag & drop the file onto the selected objedct you wish to apply the material to
  3. Adjust the bump height using the Bump Factor material parameter from the Property Editor panel.

Adjust the effect of the bump map.

Bump Factor = 0
Bump Factor = 1

Emission

Works on:PreviewHigh-quality

Switch the Emissive Color from black to any other color for the object to behave as a light (emit light). The amount of light emitted can then be controlled with the Emissive Strength parameter.

See Lighting: Area Light for a detailed description on using area light in PocketStudio.

Controls the color of the light emitted by the object. The final emitted light is equal to the value of the Emissive Color parameter multiplied by the Emissive Strength parameter.

ps docs emissive

Controls the strength of the light emitted by the object. The final emitted light is equal to the value of the Emissive Color parameter multiplied by the Emissive Strength parameter.

To assign textures to parameters other than the Diffuse Color or Base Color, you will need to use the following method:

  1. Download the template from this link or duplicate an existing material file.

  2. Open this file in a text editor. Edit the parameters of the material. Path to texture files can either be full (c\myproject\textures\leather.png) or relative to the material file’s location (foe example ..\textures\leather.png if the material file is stored in c\myproject\materials). Save the file.

  3. Select in the viewport the object(s) you wish to assign the material to.

  4. Drag and drop the material file onto the selection.

  5. The Import panel will open. Once the content of the material definition file and the textures referenced by the file will be loaded in memory, you will need to select the imported material from the import asset list and click on the Import button on the panel to complete the process. Only then will you be able to see the textures applied to the geometry.

    Texture files (similarly to every other assets imported in your project) are stored by the application both locally on your computer in the PocketStudio blob storage directory, as well as on the server. It is thus safe to delete or move the original files after you have imported them in a project.

What happens when a texture cannot be found? When PocketStudio cannot find a file referenced in a material file (because it doesn’t exist or because its path or file name is set improperly), it will simply skip it and a warning will be displayed in the console/terminal.

What happens when you import the same texture several times in a row (or a slightly different version of the same file)? All assets are imported into the project and stored both locally your computer (in the project’s local blob storage) and on the server projet’s blob storage as well. Therefore, if the application were to import the same file over and over this could quickly fill up your disk with redundant data. Instead, when a texture is loaded in the application, PocketStudio will first figure out if the texture that is being imported already exists in its blob storage and will only load it if it doesn’t. It is enough for 2 files to vary by a single pixel to cause the application to load the file as a new texture. For instance, if T1 and T2 are two similar textures apart for a single pixel in the top-left corner of the textures and that T1 already exists in the project, then T2 will be imported in full. At the end of the process, the blob storage will both contain T1 and T2.

Here is what the template material file (which is a JSON file if you know about the JSON format) looks like:

{
    "name": "default",
    
    "model": "MetallicRoughness",
    
    "baseColor": [1.0, 1.0, 1.0],
    "baseColorTexture": "",
    "useBaseColorTextureAlpha": false,
    "metallic": 0.0,
    "metallicTexture": "",
    
    "dielectricF0": 0.04,
    
    "roughness": 0.2,
    "roughnessTexture": "",

    "diffuseColor": [1.0, 1.0, 1.0],
    "diffuseColorTexture": "",
    "useDiffuseColorTextureAlpha": false,

    "specularF0": [0.4, 0.4, 0.4],
    "specularTextureF0": "",
    "glossiness": 0.2,
    "glossinessTexture": "",
    
    "transmissionWeight": 0.0,
    "transmissionColor": [1.0, 1.0, 1.0],
    "transmissionTexture": "",

    "ior": 1.5,

    "normalFactor": 1.0,
    "normalTexture": "",

    "emissiveColor": [0.0, 0.0, 0.0],
    "emissiveTexture": "",
    "emissiveStrength": 1.0,
    
    "sssWeight": 0.0,
    "sssWeightTexture": "",
    "sssRadiusScale": 1.0,
    "sssRadiusColor": [1.0, 1.0, 1.0]
}

The model can either be SpecularGlossiness as show in the example above or MetallicRoughness. To use a texture rather than a constant value, set the texture path associated with the parameter to the file you want to use. For instance if you wish to use a texture for the color parameter, set the baseColorTexture or diffuseColor (depending on the material model being used) parameter to something like c\myproject\textures\car\leather_col.png and so on.

The material definition file contains the parameters of the two supported models; depending on the model you will be using some will be active and others won’t. For example the metallicTexture and Base Color parameters are only relevant if the Metallic-Roughness model is used. If the Specular-Glossiness model is used instead, they can still be defined in the material file but will be ignored when the material file will be applied to an object.

Textures can be directly connected to the parameters of existing materials using one of the following methods:

  • Select an object in the viewport and drag and drop a texture file on that object. This will assign the texture to the Base Color parameter of the object’s material.
  • Drag and drop the map onto the desired material parameter (not available yet).
  • Set the path to the maps in a material description file. See Apply a material to an object using the material file.

You can tell wether a texture is assigned to a material parameters by checking whether a small checkerboard icon is drawn in the top right corner of the parameter’s widget (example below). If a checkerboard is visible, then a texture is used.

In this example, a texture is connected to the Diffuse Color parameter.

When a texture is assigned to a material parameter, the constant value of the parameter is used as a multiplier to the input texture. For example when the Base Color is white, the texture will be unaffected; if it is red (1,0,0), the texture will take on a reddish tint. This feature is useful to make small adjustments to color maps, or adjust the levels of specular maps directly within the application.

How do I remove a texture assigned to a material parameter? It is currently not possible to disconnect/reconnect an existing texture. This feature will be available soon. For the time being, the only solution is to assign a “dummy” material (that contains no texture assignment) to the object whose parameters you wish to reset.

Textures can currently not be individually color managed. The application applies the following rules:

  • Images assumed to be in sRGB space: at the moment, only the maps applied to Base Color (if you use the Metallic-Roughness model) or Diffuse Color (if you use the Specular-Glossiness model) are assumed to be stored in sRGB color space whether the maps are stored in a 8 (e.g. JPG), 16 (e.g. PNG) or 32 (e.g. TIFF, EXR) bits formats. Such textures will thus automatically be converted into linear color space at render time.
  • Images assumed to be in linear space: all other images (bump, weight map, transmission color, F0, etc.) are assumed to contain linear values regardless of the formats these images have been stored into. We assume that the user has painted numerical values known by him or by her. This would be the case for instance for the F0 map in which the values for the reflectance at incidence normal should be set numerically and then painted into the map (rather than chosen from the color wheel). That value should be for example 0.04 (roughly 11 in 8 bits) for a common dielectric and (1.00, 0.85, 0.57 for gold for example.
  • What about color buckets and the color selection panel? PocketStudio assumes that the color profile that you are using for your monitor is a sRGB profile or similar. Consequently, all color buckets whose colors can be set using the Color Picket editor are assumed to be in sRGB color space as well. All these colors are converted at render time to linear color space.

It is possible to see F0, metallness, bump and transmission as percentages: for these maps, % values are painted in rather than colors and thus we assume that the values stored in the maps are therefore not color managed.

To assign a set of animated textures to one of the material properties, do as follows:

  1. Create a folder and copy the sequence of images in this folder. To form a sequence, images need to have the following format: filename.number.ext. Tthe file extensions must be separated from the basename and/or the extension by periods. Padding for the numbers is supported. Rename the folder to whatever you like. For example “Fire”. The basename of the image file can be different from the name of the folder.

    The folder should contain one and only one sequence of images and there should be no missing images in the interval provided.

  2. In this folder create a json file called header.json. Copy/paste the content below into this file and adjust the parameters accordingly. For instance, if the texture resolution is 1024x1024 set the width and height parameter to 1024.

{
    "width": 1024,
    "height": 1024,
    "starts": 3,
    "end": 20,
    "sourceFps": 30,
    "speed": 1
}
  1. Open the material definition file and set the parameter you wish to assign the sequence of images to, with the name of the folder containing the textures and the json file:
    ...
    "emissiveTexture": "Fire",
    ...
  1. Assign the material definition file to the geometry.

Best practices, optimisation

Images displayed in the viewport of PocketStudio are rendered on your computer’s GPU. This practically means that all the data making up the 3D scenes displayed in the viewport needs to fit within the GPU’s memory for the scene to be rendered at all. The more memory on the GPU, the better.

PocketStudio doesn’t do anything special to optimize the loading of the texture in the GPU’s memory. Currently textures are loaded in full. The application doesn’t put any limit on the texture resolution and 8K textures are perfectly fine, as long as there is enough memory to load them. However you might consider whether 8K textures are absolutely necessary for the scenes you are working on. If not, consider reducing the resolution of the files (in a paint software such as Photoshop for example) to the lowest possible acceptable levels.

Square textures are recommended over non-square textures.

Compatibility with other 3D packages

The Metallic-Roughness (also known as the Disney model) and the Specular-Glossiness are popular models supported by many rendering APIs and 3D software; feeding these models with the same data (constant values or textures) should produce similar results. If they don’t, first check if any of the following reason is the cause of a noticeable difference:

  • Is tone mapping applied?
  • Are color maps in the same color space?
  • Check the conventions of normal maps (notable a possible inversion of the Y channel)

The material parameters associated with transmission, subsurface scattering and emission, are effective in the high-quality rendering mode only.

Can I apply a material from an object to another object?

Not at the moment.

What happens if an asset is used in multiple scenes? Are the materials or textures for this asset duplicated?

Textures are not duplicated. They are shared across scenes. Materials are.