Three js Rendering Templates

Three js Rendering Templates

Rendering Templates

Rendering templates gives you the freedom to experiment and choose the best amongst all the combinations of colors, lights, and reflections for a model.

Rendering templates come up with a set of predefined properties related to scene lights, background color, reflections over the model, individual part color, individual part textures which are applied over the model.

Let’s unwind how this thing helps us experiment and collaborate over a model.

How we created rendering templates:

 We have created two JSON metadata files that contain rendering templates metadata.

1) Rendering Templates Metadata JSON:

Responsible for scene settings. Scene is something that has background color, texture, lights, Shadows etc and can be reused across models.

2) Model Specific MetaData JSON:

Contains information specific to a model. Here the part names are mapped with specific material. Material may contain color and texture, roughness, shininess etc which will be applied on model load.

This is how we stored the information and achieved the output:

Contains information specific to a model. Here the part names are mapped with specific material. Material may contain color and texture, roughness, shininess etc which will be applied on model load.

1) renderingTemplatesMetadata.JSON:

a) Lights:

• The lights contain parameters such as the type of light along with its color and positioning.
• Color is stored as a CSS hex color string (eg:: #ff9dce).

 Fig 1 : Light Configuration

• After extracting the type of light passed as a parameter we created a function that is responsible to add that particular light to a specified position and color inside the scene.
  

Fig 2: Applying Directional light based on configuration parameters

b) Environment Texture :

• To add an environment map to the existing scene we have used a pattern like this one.
• Created an array of 6 URLs to images (The base path from which the asset will be loaded), one for each side of the CubeTexture.
• Used CubeTextureLoader class provided by three.js for loading files.

Fig 3: Environment textures configuration

• Begin loading from URL and pass the loaded texture to the Load function.
• After successfully loading, add the textureData to the background of the scene.

Fig 4: Applying Environment textures based on the configuration

c) Shadows:

• The way a shadow map works is, for every light that casts shadows all objects marked to cast shadows are rendered from the point of view of the light.
• The shadow parameters contain parameters such as
  • A boolean flag – that represents if the shadow is enabled or not.
  • Near – defines where the front of the frustum starts
  • Far – defines where it ends.

Fig 5: Shadow configuration

d) Background Color:

• The background parameters contains CSS hex color string (eg:: #A2AFFB)

Fig 6: Background color configuration

e) Bloom:

• The bloom parameters contain parameters such as:
  • A boolean flag – that represents if the bloom is enabled or not.
  • Bloom strength. 

 Fig 7:  Bloom configuration

f) Reflection:

• The bloom parameters contain parameter a boolean flag that represents if the reflection is enabled or not.
  

Fig 8: Reflection configuration

2) modelSpecificMetaData.JSON

• Items key contains the name of the object (mesh) we want to apply color to
• Texture or color we want to apply to those selected objects.
  

Fig 9: Texture configuration for nodes

Fig 10: Color value configuration for nodes

Below are some snapshots of output:

Template 1

Template 2

Template 3