PBR Research

[MrVR]

PBR RESEARCH

 

its amazing what you can do to these pbr materials , light settings, cameras, physics ...

 

 

First PBR materials test 

  

 

Shader samplers of properties

BABYLONJS Features

Here is a small reminder of the PBR material supported features:

Albedo, Reflectivity, Microsurface
Reflection / Refraction
Normal Map / Parallax
Shadows (as the standard material)
Energy Conservation
Gamma Correction
Inversed squared light Falloff and Light Radius
HDR Texture and Seamless Cubemap (LOD extension required)
Environment Irradiance
Camera controls: Contrast and Exposure
Camera controls: Color Grading and Color Curves
Zero Light Lighting
Debug Controls

BABYLONJS PARAMS

directIntensity: Controls the amount of diffuse and specular the material is reflecting.
emissiveIntensity: Controls the level of emissive light the material is emitting.
environmentIntensity: Controls the level of the reflected light from the environment.
specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity.
MicroSurface (AKA Glossiness or specular power) 
reflectivityTexture= texture;
useMicroSurfaceFromReflectivityMap = true;
useMicroSurfaceFromReflectivityMapAlpha = true;
reflectionColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective.
OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1
overloadedAlbedo = new BABYLON.Color3(0, 0, 1);
overloadedAlbedoIntensity = overloadedIntensity;

// Creates a reflection texture.
var reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene); 

// Creates the pbr material to use in the scene
var pbr = new BABYLON.PBRMaterial("pbr", scene);
pbr.reflectionTexture = reflectionTexture;
pbr.reflectivityColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective.

The diffuse reflection will be described later in the Environment Irradiance section.

Another interesting addition to the reflection is the ability to keep the most luminous part of the reflection over transparent surface... Yeah, it does not make much sense... Actually if you look through a window at night from a lit room, you can see the reflection of lights or TV on the glass. This is the same for reflection in the PBR Material. A special property pbr.useRadianceOverAlpha = true; has been added to allow you to control this effect. Not only reflection (AKA radiance) but specular highlights can be seen on top of transparency.

glass.reflectionTexture = hdrTexture;
glass.alpha = 0.5;

// realism reflection
material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
material.emissiveFresnelParameters.bias = 0.4;
material.emissiveFresnelParameters.power = 140;
material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Red();
material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Blue();






Camera Control 
Photographic tone mapping and deals with the contrast directly from the material.

var pbr = new BABYLON.PBRMaterial("pbr", scene);
pbr.cameraExposure = 0.66;
pbr.cameraContrast = 1.66;

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Roughness: parameter can “flatten” the color transitions. You can use it to make your material appear dusty and flat

Reflections: Black color makes the material non-reflective, white color makes it fully reflective. All the gray scale values between increase or decrease the reflection strength
Just like with the Diffuse, you can use Color, Bitmap or Procedural map in the Reflect slot.

Glossiness: This is the parameter that controls how sharp/blurred are the reflections. Some real world objects, like polished metal, mirror, chrome, have very sharp reflections, while other materials, such as wood, concrete, plastic, etc., have blurred reflections.

BABYLONJS
//MicroSurface (AKA Glossiness or specular power) BABYLON
The micro-surface of a material defines the way it is reflecting the incoming lights. It is not defining the amount, only how. A glossy material will tend to reflect the light in the same direction it is incoming. On a Matte one the reflected light will vary in contact of the surface. 
http://babylonjs-playground.com/#1LZALU#5
Tips: To achieve the best results, you can store the glossiness in the alpha channel of the reflectivity map (this prevents having a constant gloss on one material):
materialSphere.reflectivityTexture = texture;
materialSphere.useMicroSurfaceFromReflectivityMap = true;

Ligthing Intensity

In order to allow finer grain control of the lighting, the following properties have been added in the material.

directIntensity: Controls the amount of diffuse and specular the material is reflecting.
emissiveIntensity: Controls the level of emissive light the material is emitting.
environmentIntensity: Controls the level of the reflected light from the environment.
specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity.

Fresnel changes the reflection strength depending on the viewing angle. General rule is that reflections are weaker if the surface is facing you perpendicularly and increase in strength as the surface approaches parallel position relative to your viewing angle.

As a general guideline, here are the Reflect IOR values for some common object types:

water 1.33
plastic 1.45
glass 1.5-1.8
diamond 2.4
compound materials like wood, stone, concrete etc 3-6
metals 20-100

Reflection Depth: This is the number of times a light ray is reflected before stopping the calculations. When the set number of reflections has been calculated, the rest are simply displayed as the Exit color. You can try setting a bright color as the Exit color to see how much information you lose.

BABYLONJS
Reflectivity (AKA specular color)
The reflectivity of a material defines the amount of light it is reflecting. Basically, a black specular will mean almost no reflection and white will be close from a perfect mirror:

Tips: To achieve the best results use a specular map stored in a texture:

materialSphere.reflectivityTexture = texture;
Reflection
The key purpose of a PBR material is to conserve the energy (not emitting more light than it receives). If a lot of light is reflected from the environment the diffuse reflected light will drop. This means that without Reflection Map the material would be black if the specular is close to white (reflecting nothing). This is why we introduce in the material a Reflection Color parameter to ensure the material still works without Reflection texture.

var pbr = new BABYLON.PBRMaterial("pbr", scene);
pbr.reflectionColor = new BABYLON.Color3(1.0, 0.0, 0.0);

Refractions: These settings control if and how the material let’s the light through it. Common materials that have refractive properties are glass, water, gems, transparent plastics, etc.

First parameter that controls the refractions is Refract color. As before, it goes from black (no refractions) to white (full refractions) and everything in between is a mix between Diffuse and Refraction.

OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1
materialSphere.overloadedAlbedo = new BABYLON.Color3(0, 0, 1);
materialSphere.overloadedAlbedoIntensity = overloadedIntensity;

Refraction glossiness: Just like with the reflections, you can change how blurry are the refractions. This effect is great for frosted glass or any other rough surface that lets through the light but distorts it along the way.

This one increases render times and noise a lot so be careful with it. No need to go lower than 0.6 for most materials.

Quote

This may not apply for babylon maybe it needs a tranlation chart to maps babylons values 

INDEX of REFRACTION: has been calculated for many materials, so you don’t need to guess. You can find various IOR tables on the internet. Here is one of them:

Acetone 1.36
Actinolite 1.618
Agalmatoite 1.550
Agate 1.544
Agate, Moss 1.540
Air 1.0002926
Alcohol 1.329
Amber 1.546
Amethyst 1.544
Crystal 2.00
Diamond 2.417
Emerald 1.576
Ethanol 1.36
Ethyl Alcohol 1.36
Glass 1.51714
Glass, Albite 1.4890
Glass, Crown 1.520
Glass, Crown, Zinc 1.517
Glass, Flint, Dense 1.66
Glass, Flint, Heaviest 1.89
Glass, Flint, Heavy 1.65548
Glass, Flint, Lanthanum 1.80
Glass, Flint, Light 1.58038
Glass, Flint, Medium 1.62725
Gold 0.47
Ice 1.309
Ivory 1.540
Jade, Nephrite 1.610
Jadeite 1.665
Lead 2.01
Malachite 1.655
Methanol 1.329
Moonstone, Albite 1.535
Nylon 1.53
Onyx 1.486
Opal 1.450
Oxygen (gas) 1.000276
Oxygen (liq) 1.221
Pearl 1.530
Plastic 1.460
Plexiglas 1.50
Polystyrene 1.55
Quartz 1.544
Quartz, Fused 1.45843
Rock Salt 1.544
Rubber, Natural 1.5191
Ruby 1.760
Sapphire 1.760
Silicon 4.24
Steel 2.50
Tiger eye 1.544
Topaz 1.620
Tourmaline 1.624
Turpentine 1.472
Turquoise 1.610
Water (gas) 1.000261
Water 35’C (Room temp) 1.33157
Zirconia, Cubic 2.170

Max depth works just like with the reflections. The default value is usually fine, but for scenes with large amount of refractions, you should increase it.

Fog Color. It is great if you want to tint the glass in a realistic way. Using the Fog color makes thinner parts lighter and thicker parts darker. You can use the Fog multiplier value to adjust how strong is the tint. I suggest using colors with less than 255 lightness and saturation for realistic results.

You can control the relationship between object thickness and Fog intensity by using the Fog value. Look at the examples to see how it works. Negative values make the tinting stronger and color transitions more extreme, while positive values make the fog smoother and weaker. Use it together with fog multiplier to get the effect you need.

The biggest drawback of the Fog color is that you can not use a map in this slot, this means you can only use a single color. If you want to create a stained glass material or glass with multiple colors, you will have to do that by using the Refract color and not the Fog. It is, however, great for those single-colored materials and much more realistic than simply changing the Refract color.

Anisotropy allows you to create stretched highlights. In real world these are most commonly seen on brushed metal surfaces with long, parallel ‘scratches’. Anisotropy allows you to fake this by stretching and rotating the highlights as you like.

Bump and Displace slots first.

Both of these slots allow you to assign a bitmap or procedural map to simulate unevenness and deformation of the objects surface. Bump does so without changing the overall geometry of the object, but Displace actually subdivides and deforms the object during rendering. The deformations work like this – middle grey [128;128;128] of the map does not change anything on the object, darker values push the surface inwards while lighter values pull it out. The further this value is from medium gray, the stronger is the effect. Color of the map is not taken into account and only the lightness value is used.

Last map we are going to look at is the Opacity map. It works very simple. Pure white value is used for the non-transparent parts of the material and pure black is for completely invisible parts of the material, everything in between is more or less half transparent. It is great if you need to simulate stuff like tree leaves or lace fabric without using a large amount of polygons.

 

BRDF DOCS

 

~ref:http://doc.babylonjs.com/tutorials/Advanced_Texturing

~ref:http://doc.babylonjs.com/tutorials/Advanced_Texturing

~ref:http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master

~ref:http://blog.selfshadow.com/publications/s2012-shading-course/burley/s2012_pbs_disney_brdf_slides_v2.pdf

 

[MrVR]

PARAMS FOR UNITY SHADER

 

If some one notice that Im missing any please let  me know...

 @MackeyK24 I'm working on the parameters code for unity, parameter like specular in non-metal materials is not required

so I want to make it disable by making templates of the properties that apply disable or enable e.g. non-metal = desable specular map, translucnet : alpha:0.5,.

the templates would be non-metal, glossy, translucent..etc I still need to test and figure how to group them up 

 

// params list

.directIntensity: Controls the amount of diffuse and specular the material is reflecting.
.emissiveIntensity: Controls the level of emissive light the material is emitting.
.environmentIntensity: Controls the level of the reflected light from the environment.
.specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity.

.reflectivityTexture= texture;
.useMicroSurfaceFromReflectivityMap = true;

// in progress....

.reflectionTexture = CubeTexture or HDR Texture

refractionTexture

.linkRefractionWithTransparency

.albedoColor = BABYLON.Color3.White();

.albedoTexture// already in the shader

.alpha

.indexOfRefraction

.useMicroSurfaceFromReflectivityMapAlpha = true;

.MicroSurface (AKA Glossiness or specular power) 

.environmentIntensity: Controls the level of the reflected light from the environment.

.specularIntensity: specular highlights

.directIntensity = 1.5;// direct dIffuse and specular highlights 

.wireframe : combine 

.cameraExposure = 0.9;// photography exposure
.cameraContrast = 1.6;

 

.reflectivityColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective.
.reflectionColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective.
.OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1
.overloadedAlbedo = new BABYLON.Color3(0, 0, 1);
.overloadedAlbedoIntensity = overloadedIntensity;

// Creates a reflection texture.


// Creates the pbr material to use in the scene
var pbr = new BABYLON.PBRMaterial("pbr", scene);
pbr.reflectionTexture = reflectionTexture;
pbr.reflectivityColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective.

//Allow you to control reflection over transparent surfaces (AKA radiance)
pbr.useRadianceOverAlpha = true;

glass.reflectionTexture = hdrTexture;
glass.alpha = 0.5;

// realism reflection fresnel prams to explore
material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
material.emissiveFresnelParameters.bias = 0.4;
material.emissiveFresnelParameters.power = 140;
material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Red();
material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Blue();

Camera Control (WTF)
Photographic tone mapping and deals with the contrast directly from the material.

var pbr = new BABYLON.PBRMaterial("pbr", scene);
pbr.cameraExposure = 0.66;
pbr.cameraContrast = 1.66;