Creating a Stylish Environment with Dynamic Lighting and SSAO
🌲

Creating a Stylish Environment with Dynamic Lighting and SSAO

Created
Apr 19, 2023 10:09 PM
Tags
image

Depending on your artistic style goals and environment scale, creating a low poly environment with simple color shading, and leveraging dynamic lighting, shadows, and screen space ambient occlusion (SSAO) at run time, may serve you quite well. I will use this model by Karthik Naidu from Sketchfab to illustrate such a workflow.  Note that this model is nicely designed but has a few seam flaws that become more evident once the model has been scaled. First, download the .glb file from Sketchfab and import it into the Blender 3D modeling tool. Open Blender and go to the "File" menu.

  • Choose "Import" > "glTF 2.0 (.glb/.gltf)".
  • In the file explorer window, navigate to where you downloaded the .glb file and select it.
  • Click the "Import glTF 2.0" button.
  • And that's it! The 3D model should now be imported into Blender and ready for you to work with.

Second, scale the model by a factor of 5.3 to transform it to proper world dimensions.

  • Press “A” key to select all in the 3D Viewport.
  • Press the "S" key to activate the scaling tool.
  • Type "5.3" on your keyboard to set the scale factor to 5.3.
  • Press "Enter" to apply the scaling factor.

Third, open the shader editing tab and set the emission color for each material to the same color as the base color.Select the 3D model you want to edit by clicking on it in the 3D viewport.

  • Go to the "Shading" tab.
  • Click on the material you want to edit to select it.
  • Click on the color swatch next to the “Emission” color input to open the color picker.
  • Set the emission color to the same color as the base color by either selecting it from the color picker or entering the RGB values manually.
  • Repeat steps 3-8 for each material you want to edit.
  • And that's it! The emission color for each material should now be set to the same color as the base color.

Fourth, set the crystal glowing material’s emission strength to 0.8.  Set the emission strength of all other materials to 0.3. Setting the emission strengths in this manner ensures better shadow visualization. Setting the emission strength is done as follows:

  • Still in the "Shading" tab in the nodes window at the bottom.
  • Select the material you wish to edit.
  • Near the "Emission" color, locate the "Emission Strength" input.
  • Set the emission strength to 0.8 for the crystal glowing material, and 0.3 for all other materials.
  • Repeat steps 3-7 for each material you want to edit.

That's it! By setting the emission strength of each material in this manner, you can ensure better shadow visualization in your 3D model.Fifth, export the edited model as a .glb file and upload to Frame as a custom environment.

  • Make sure the 3D model you want to export is selected in the 3D viewport.
  • Go to the "File" menu and choose "Export" > "glTF 2.0 (.glb/.gltf)".
  • In the export settings window, make sure the "Selected objects" checkbox is enabled.
  • Choose the export location by clicking on the "Browse" button and navigating to the desired folder.
  • Enter a name for the exported .glb file.
  • Under the "Geometry" section, select the desired export settings.
  • Under the "Materials" section, select the desired export settings.
  • Under the "Advanced" section, select the desired export settings.
  • Click the "Export glTF 2.0" button to begin the export process.
  • And that's it! The edited 3D model should now be exported as a .glb file and ready for use in other applications.

Sixth, in your Frame settings:

  • Enable the default light
  • Enable shadows
  • Enable SSAO
  • Enable the environment to be shown when a sphere is open.

Note that SSAO will introduce a bit of aliasing, jaggedness to edges, and some performance cost.  You may wish to turn it off and weigh the benefits.Seventh, add this 360 photo and open it, or create your own at Blockade Labs. Finally, explore similar workflows with other models or create your own. Have fun creating! You can check out the Frame built in this example here: https://framevr.io/floresta