Friday, August 29, 2025

05 shadows control background emissio control


Verge3d + Blender: Interactive Table (web 3d/vr) — Step‑by‑step Student Guide

This session focuses on adding realistic materials and environment lighting to the interactive table. Students learn to apply a wood texture using PBR and UV mapping, create a reflective chrome material for the stand, and set up an HDRI environment for realistic reflections. It concludes with a preview and export to verify that textures and lighting render correctly in the browser.

 

Session 5A — Shadow and Background Masking

Goal: Add a realistic ground shadow for the table and create a steady, non-moving background using masking with an emission shader.

1) Enable the Ground Sphere for Shadows

  1. In Outliner, re-enable visibility (monitor icon) and render (camera icon) for the ground sphere.
  2. Use Sneak Peek to preview — the table is grounded but shadow may look unclear.

2) Enable Shadows in Render Settings

  1. Go to Render Properties → Verge3D Settings.
  2. Enable Shadows option.
  3. Preview with Sneak Peek — shadows are still weak but visible.

3) Configure the Light for Better Shadows

  1. Select the lamp used in your scene.
  2. In Light Properties → Shadows, make sure Shadows is enabled.
  3. Open Cascaded Shadow Map settings:
    • Change Max Distance to around 20 (from default 1000).
  4. Adjust Intensity:
    • Reduce Strength to 1 for softer lighting.
    • Enable Contact Shadows and set:
      • Bias ≈ 4
      • Distance ≈ 0.4
  5. Optionally increase Intensity slightly (~1.7) if needed.
  6. Sneak Peek — shadows should look more natural.

4) Fix Background Movement (Static Background)

  1. Switch to Shading Workspace.
  2. Change from World mode to Object mode.
  3. Select the sphere object.
  4. In Material Properties, click New and name it Sphere_Material.
  5. Delete the default Principled BSDF node.
  6. Add → Shader → Emission node.
  7. Connect Emission → Surface.
  8. Reduce Emission Strength to 0.5.
  9. Sneak Peek — background is now static, but shadows disappear.

5) Add a Mask for Shadows

  1. In Shader Editor, Shift + A → Texture → Image Texture.
  2. Click Open and select ground_mask.jpg (provided).
  3. Add → Shader → Mix Shader.
  4. Connect Image Texture → Fac (factor input) of the Mix Shader.
  5. Connect Emission Shader to one shader slot of the Mix Shader.
  6. Add → Shader → Principled BSDF (regular shader) and connect it to the other shader slot of the Mix Shader.
  7. Connect the Mix Shader output → Material Output Surface.
  8. Adjust node connections so:
    • Emission shader = background.
    • Principled BSDF = ground area under the table.
  9. Sneak Peek — shadows are restored, with a clean static background.

6) Finalize & Export

  1. Save the project (File → Save).
  2. Export updated scene (File → Export → Verge3D glTF) and overwrite the existing app scene.
  3. In App Manager, click Run to preview the updated app in the browser.

Troubleshooting

  • No shadow: Check shadow toggle in Render Properties and Light Properties.
  • Shadow too sharp or weak: Adjust Intensity, Bias, or Distance under light settings.
  • Background moving: Ensure the sphere material uses Emission with strength reduced and proper masking applied.
  • No shadow with static background: Ensure Mix Shader is wired correctly with Principled BSDF assigned to the ground area.

Mini-Checklist

  •  

 

Session 5B — Ground, Shadows & Static Background

Goal: Make the table sit on a believable ground with crisp shadows, then replace the moving HDRI look with a static, clean background that still preserves shadows under the table.

1) Re‑enable the Environment Sphere (as a backdrop/ground)

  1. In Outliner → Filter (funnel), show the monitor (Viewport) and camera (Render) toggles.
  2. Turn ON both toggles for your environment sphere (e.g., Sphere_Env) so it’s visible in viewport and render again.
  3. Sneak Peek to confirm the table no longer looks like it’s floating (it may still look odd—shadows aren’t tuned yet).

2) Enable Global Shadows (Verge3D)

  1. Go to Render Properties → Verge3D Settings.
  2. Enable Shadows (leave other defaults as-is for now).

3) Enable & Tune Shadows on the Sun Light

  1. Select your Sun (or the project’s main light).
  2. In Light Data (bulb), enable Shadow.
  3. Open Cascaded Shadow Map (CSM) and set Max Distance ≈ 20 (down from very large defaults like 1000) to focus shadow detail near your product.
  4. Reduce Strength/Energy of the Sun to ≈ 1.0 (then fine‑tune later; e.g., 1.7 if needed).
  5. Toggle Contact Shadows ON and try:
    • Bias ≈ 4.0
    • Distance/Thickness ≈ 0.4
  6. Sneak Peek → you should see a much clearer, grounded shadow.

Tip: If shadows still look soft or wrong, adjust Sun rotation and Angle (larger angle = softer shadows). Keep the subject near world origin.

4) Make the Background Static (Emission backdrop + shadow pass)

Problem: Orbiting with an HDRI/fake dome can feel like the background “moves.” Solution: Give the sphere a flat Emission material so it looks static, but preserve a shadow area beneath the table via a mask mix.

  1. Switch Shader Editor to Object context and select the sphere.
  2. New Material → name it M_Sphere_BG.
  3. Delete the default Principled BSDF and Add → Shader → Emission. Connect Emission → Material Output (Surface).
  4. Set Emission Strength ≈ 0.5 (adjust to taste). This makes a clean, static background—but it also kills shadows.
  5. Re‑introduce ground shadows with a mask:
    • Add → Texture → Image Texture, Open the provided ground_mask.png/.jpg (black‑to‑white gradient).
    • Add → Shader → Mix Shader and connect it to the Output (Surface).
    • Plug Emission into Shader 1 of the Mix.
    • Add → Shader → Principled BSDF (default grey), plug it into Shader 2 of the Mix.
    • Connect the mask’s Color to the Mix → Fac.
    • Result: one shader for most of the sphere (Emission), and a different shader for the ground patch (Principled) that receives shadows.
    • If the patch is inverted, either swap Emission/Principled inputs or insert Add → Color → Invert between mask and Fac.
  6. Sneak Peek: background appears flat/static, and a ground patch under the table shows proper shadows.

Optional: UV/Mapping — If the mask isn’t positioned right, add Input → Texture Coordinate (Object/UV) and Vector → Mapping to scale/translate the mask until the shadow patch sits under the table.

5) Save, Export, Run

  1. File → Save.
  2. File → Export → Verge3D glTF, overwrite your app’s scene file in the interactive-table/ folder.
  3. In App Manager, Run the app and verify in the browser.

Troubleshooting

  • No shadows at all: Ensure Render Properties → Verge3D → Shadows is enabled and the Sun’s Shadow toggle is on.
  • Shadows too faint/soft: Reduce CSM Max Distance (10–30), increase Sun Strength slightly, or adjust Contact Shadows (Bias/Distance). Check the ground patch is Principled, not Emission.
  • Background still looks like it’s moving: Confirm the sphere with Emission is visible (viewport+render) and HDRI is still lighting the scene but visually blocked by the sphere. If HDRI shows through, your sphere may be hidden or not enclosing the camera.
  • Mask in wrong place/scale: Use Mapping node to translate/scale the mask so the grounded area sits beneath the table.

 


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)