Saturday, August 30, 2025

10 interactive drawer animation compression


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

This session introduces interactivity using Verge3D Puzzles. Students learn how to assign materials to the metal stand by clicking on color spheres and replace wood textures on the table by clicking on wood slabs. The process covers exporting updated scenes, setting up puzzle logic, and testing interactions for a fully responsive 3D experience.

 

Session 10A — Drawer Animation, Camera Limits, and Optimization

Goal: Add click‑triggered animation for the drawer, adjust camera controls for a better user experience, improve texture quality, and enable compression for optimized web performance.

1) Trigger Drawer Animation with Puzzles

  1. Export the scene as Verge3D glTF and open Puzzles from the App Manager.
  2. Create a new tab in Puzzles (name it Animation).
  3. Drag in a “when clicked” event → set object to Drawer.
  4. From Animation, drag “play animation” → snap it under the event.
    • Set loop to once.
  5. Save and Play → clicking the drawer plays the opening animation.

2) Add Open/Close Toggle Logic

  1. In Variables, create a new variable: status.
  2. Set initial status to closed (drag in set status to + text block → type closed).
  3. Add an if-do block from Logic:
    • Condition: if status = closed, play the open animation.
  4. On the animation block, open its settings and enable “when finished”.
  5. Use a set status to block to set status to open once the animation finishes.
  6. Add an else if condition:
    • If status = open, play the animation in reverse.
    • Enable advanced playback and set direction: reverse.
    • On completion, set status back to closed.
  7. Save and Play → clicking toggles between opening and closing smoothly.

3) Adjust Light for Shadow Placement

  1. In Blender, hide the environment sphere (viewport only).
  2. Select the Sun Light, go to Top View, and use G (move) and R (rotate) to adjust its angle.
  3. Preview with Sneak Peek until the shadow falls in the desired direction.
  4. Save and Export the scene again.

4) Limit Camera Zoom and Rotation

  1. Select the Camera.
  2. In Camera Properties → Verge3D Settings:
    • Set Minimum Distance = 2
    • Set Maximum Distance = 4
    • Set Vertical Rotation Limit = 0 to ~85°
  3. Save and Sneak Peek → test that zoom and rotation are restricted properly.

5) Improve Texture Quality

  1. Select the Table_Main object.
  2. In the Shader Editor, click on the Image Texture node for the wood material.
  3. In the Verge3D settings for the texture, set Anisotropic Filtering to 8x.
  4. Save, Export, and Sneak Peek → textures should now render sharper.

6) Enable Asset Compression

  1. In Blender, go to Render Properties → Verge3D Settings.
  2. Enable LZMA Compression.
  3. Save and Export Verge3D glTF.
  4. In Puzzles, open the Init tab.
    • Drag in Configure Application and enable Compressed Assets.
  5. Save and Play → check the project folder; file sizes should be significantly reduced (e.g., .bin file reduced from ~105 KB to ~18 KB).

7) Final Testing

  1. Open the app from App Manager and test:
    • Drawer toggles open/close on click.
    • Shadows and textures look correct.
    • Camera zoom/rotation limits are enforced.
    • File sizes are optimized.

Mini‑Checklist

  •  

Next: Learn how to publish the optimized project to your website or web server.

 

Session 10B — Drawer Click Animation (Toggle Open/Close)

Goal: Use Puzzles to play the drawer animation on click, and toggle it open/closed using a state variable (no JavaScript).

1) Prep & Open Puzzles

  1. In Blender: File → Save, then File → Export → Verge3D glTF (overwrite the app scene file).
  2. In App Manager, open your app → click Puzzles.

2) Create a New Puzzles Tab

  1. Click the + at the top of Puzzles to create a new tab.
  2. Name it animation (keeps logic organized).

3) Basic Click → Play Animation

  1. From Events, drag when object clicked → set object to Drawer.
  2. From Animation, drag play animation and snap it under the event.
  3. Set Object to Drawer, Playback: Once.
  4. Save and Play to test: clicking the drawer should open (plays forward).

If it autoplays on load, recheck Session 6 to ensure Verge3D Settings → Auto Start = Off for the Drawer.

4) Add a State Variable (open/closed)

  1. From Variables, create a variable named status.
  2. Drag set status to and place it near the top of the tab; set the value to text closed.

5) If/Else Toggle Logic

  1. From Logic, drag if do and place it above the play animation block.
  2. From Logic → Comparators, drag = (equals) into the if condition.
  3. Into the left side of =, drop the status variable; right side type text closed.
  4. Put your existing play animation block inside the if.
  5. Click the gear icon on play animation and enable when finished; attach set status to open under it (so the state updates after finishing).
  6. Click the gear on the if block and add an else if.
  7. Duplicate the = check and change the right side to open.
  8. Duplicate the play animation block and place it inside the else if. Click its gear → Advanced Playback and set it to reverse (play from end to start). Alternatively, set Start = 30, End = 1, Speed = 1.
  9. In the else if branch’s when finished, set status back to closed.
  10. Save and Play to test: click → opens; click again → closes.

Troubleshooting

  • Nothing happens on click: Ensure the clicked object is Drawer and the animation action exists on that object.
  • Only opens, never closes: Check that status is set to open in the when finished slot and that the else if condition compares to open.
  • Reverse doesn’t work: Use Advanced Playback → Reverse, or manually set Start/End frames inverted.

Mini‑Checklist

  •  

Session 11 — Final Tweaks: Shadows, Camera Limits, Texture Quality, Compression

Goal: Polish the visual feel (shadow direction), lock down camera limits, boost texture clarity, and shrink file sizes for the web.

1) Nudge Shadow Direction (Sun Light)

  1. Temporarily hide the background sphere (viewport icon) to see the light clearly.
  2. Select the Sun light.
  3. Top View (Numpad 7) → G to move, R Z to rotate until the shadow falls behind the table (check with Sneak Peek).
  4. When satisfied, Save and Export Verge3D glTF.

Tip: Combine with Session 5 shadow settings (CSM Max Distance, Contact Shadows) for crisp results.

2) Camera Orbit Limits (Verge3D Settings)

  1. Select the Camera → Camera Properties → Verge3D Settings.
  2. Set Min Distance = 2 and Max Distance = 4 (adjust to taste).
  3. Set Vertical Rotation Limit range, e.g., 0° to 85° (prevents diving under the ground).
  4. Save and test with Sneak Peek (you shouldn’t be able to zoom too close/far or go below the ground plane).

3) Sharper Textures (Anisotropic Filtering)

  1. Select Table_Main (or the object using your primary wood texture M_Wood_00).
  2. In Shader Editor, click the Image Texture node (e.g., named wood).
  3. In the side panel for that texture (Verge3D settings), set Anisotropic Filtering = 8× (or 4× on low‑end devices).
  4. Save and Sneak Peek to verify improved clarity at glancing angles.

4) Compress Assets (Smaller Web Downloads)

A) Export with LZMA

  1. In Render Properties → Verge3D Settings, enable LZMA Compression.
  2. File → Save, then File → Export → Verge3D glTF (overwrite scene).

B) Enable Compressed Assets in Puzzles

  1. Open Puzzles → init tab.
  2. From Initialization, add/locate configure application and enable Compressed Assets.
  3. Save and Play.

C) Verify File Sizes

  • In your app folder, note that .bin and .gltf sizes should drop significantly (e.g., from ~105 KB → ~18 KB, 28 KB → ~4 KB in the example).

5) Final Save, Export, Run

  1. Save the .blend.
  2. Export → Verge3D glTF.
  3. In App Manager, click Run to test the production‑like build.

Troubleshooting

  • Camera still goes under ground: Increase Vertical Rotation Limit lower bound (e.g., 10–15°) or adjust target point (Session 3).
  • Textures still blurry at angles: Confirm you changed the Image Texture node’s Verge3D anisotropy (not the World). Try 16× if available.
  • Compression not applied: Ensure you both enabled LZMA in Blender and Compressed Assets in Puzzles → configure application, then re‑exported.

Mini‑Checklist

  •  

Next: Publishing: package your app and deploy to GitHub Pages/Netlify (or your server) with a short README and versioned assets.

 


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)