06 drawer animation

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

This session focuses on adding realistic ground shadows and a static background for the interactive table. Students learn to enable and fine-tune Verge3D shadows, adjust light and shadow settings for clarity, and create a static emission-based background while preserving ground shadows using a mask mix shader. The result is a clean, grounded look for the table in the browser preview.

 

Session 6 — Creating Drawer Animation

Goal: Animate the drawer so that it slides out smoothly, and prepare the animation to be triggered later with a click event.

---

1) Rename Objects for Clarity

1. Open the Outliner.
2. Rename objects for better organization:
• Cube → Table
• Cube.001 → Support_Bush
• Cube.002 → Metal_Stack
• Cube.003 → Drawer

Tip: Clear naming makes animation and scripting easier.

---

2) Set Initial Keyframe (Frame 1)

1. Select the Drawer object in the viewport.
2. Move the Timeline to Frame 1.
3. Press I → select Location to insert a keyframe for the current position.

---

3) Move Drawer to Open Position (Frame 30)

1. Move the timeline slider to Frame 30.
2. Select the Drawer.
3. Activate the Move Tool (G key or toolbar icon).
4. Move the drawer along Y-axis ≈ −0.4 units to slide it out.
5. Press I → choose Location to insert another keyframe.

---

4) Preview Animation in Blender

1. Rewind the timeline to Frame 1.
2. Press the Play button or spacebar.
3. Confirm that the drawer smoothly slides out over 30 frames.

---

5) Save and Preview in Verge3D

1. Save the file (File → Save).
2. Click Sneak Peek to test.
• You’ll see the animation looping automatically.

---

6) Disable Auto-Start

1. Go to Object Properties for the Drawer.
2. Scroll to Verge3D Settings → Animation.
3. Toggle Auto Start OFF.
4. Save the file again.
5. Click Sneak Peek to verify that the animation no longer plays until triggered.

---

7) Next Steps

In the next session, we’ll link this animation to a click event using Verge3D Puzzles, so the drawer only slides out when the user interacts with it.

---

Mini-Checklist

•  

 

Session 6 — Naming & Drawer Animation (Keyframes + Auto‑Start Off)

Goal: Clean up object names, animate the drawer to slide out, and ensure the animation doesn’t auto‑play. We’ll hook the click trigger with Puzzles in the next session.

---

1) Rename Objects Clearly (Outliner)

1. Open the Outliner. Double‑click each object name to rename:
• Cube → Table_Main (main body)
• Cube.001 → Support_Bush (bottom support)
• Cube.002 → Metal_Stack (steel frame/stack)
• Cube.003 → Drawer (the sliding drawer)
2. Keep names short, descriptive, and unique. This helps when wiring interactions later.

---

2) Animate the Drawer (slide out)

1. Select Drawer.
2. Make sure the Timeline is visible and set to Frame 1.
3. Press I → choose Location to insert the first keyframe (initial closed position).
4. Go to Frame 30 (or your preferred frame for speed).
5. With the Move tool, slide the drawer out along Y (about −0.4 units). Keep X and Z unchanged.
6. Press I → Location to insert the second keyframe.
7. Press Space (or the transport controls) to preview in Blender — the drawer should slide out from frame 1 to 30.

Tip: If it moves on the wrong axis, switch the transform orientation to Global and adjust Y only.

---

3) Prevent Auto‑Play in Verge3D

By default, actions may loop in the web preview. Disable auto‑start so we can trigger it on click later.

1. Stay on Drawer → open Object Properties.
2. Scroll to Verge3D Settings → Animation.
3. Disable Auto Start.
4. File → Save.

---

4) Test in Browser (Sneak Peek)

1. Click Sneak Peek. The scene should load without the drawer animation playing automatically.
2. The drawer won’t move yet in the browser — that’s expected. We’ll trigger it via Puzzles (click event) next session.

---

Troubleshooting

• Animation still plays on load: Recheck Verge3D Settings → Auto Start is off for the Drawer object.
• No motion: Confirm keyframes were added on Drawer (yellow diamond on the timeline at frames 1 and 30) and that Y changed (approx −0.4).
• Moves the wrong way/too far: Adjust the Y translation value (e.g., −0.2 to −0.6) and re‑keyframe.
• Too fast/slow: Change the second keyframe frame (e.g., frame 45 for slower, 20 for faster) or set timeline end accordingly.

 

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.

 

04 adding textures

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

Session 4 — Adding Materials and Environment Setup

Goal: Apply wood and chrome materials to the interactive table, set up environment textures for realistic reflections, and adjust brightness for balanced previews.

---

1) Unlock Camera for Material Editing

• Go to View > Camera and disable "Lock to Camera View" to freely orbit the scene while adding materials.

---

2) Switch to Shading Workspace

• In Blender, switch to the Shading workspace.
• Select the object you want to texture.
• Click New to create a new material and rename it (e.g., wood_material_1).

---

3) Apply Wood Texture to Table Surfaces

1. In the Shader Editor, ensure the Principled BSDF node is connected to the Material Output.
2. Click Base Color → choose Image Texture.
3. Click Open and load wood_base_color_1.jpeg from your resources.
4. Switch to UV Editing workspace to check or adjust UV mapping.
5. For better control:
• Add a Mapping node (Shift+A → Vector → Mapping).
• Add a UV Map node (Shift+A → Input → UV Map) and connect it to the Mapping node.
• Connect the Mapping node to the Vector input of the Image Texture.
• Adjust Scale to X=5, Y=5, Z=1 to refine the texture scale.

---

4) Reuse Material for Other Objects

• For drawers or similar parts, select the object and choose the existing wood_material_1 from the material list to maintain consistency.

---

5) Add Chrome Material to the Stand

1. Select the stand or metallic parts.
2. Click New and name it chrome.
3. Set Metallic to 1 and Roughness to around 0.1 for a reflective chrome effect.

---

6) Set Up Environment Texture for Reflections

1. Switch to World mode in the Shader Editor.
2. Click Use Nodes if not already enabled.
3. Add an Environment Texture (Shift+A → Texture → Environment Texture).
4. Connect the Environment Texture to the Background node’s Color input.
5. Click Open and select environment.hdr from your resources.
6. This sets up a high dynamic range environment for realistic reflections.

---

7) Assign Chrome to Other Metallic Parts

• Select any additional metallic parts (e.g., holders labeled cube_001) and assign the chrome material.

---

8) Adjust Environment Brightness

• In World mode, reduce the Strength of the environment texture to around 0.6 for balanced lighting.

---

9) Preview in Browser

• Click Sneak Peek to check the updated materials and reflections.
• If too bright, further reduce environment strength or adjust the Sun light added earlier.

---

10) Save Your Work

• Save the Blender file to keep all material and environment changes.

---

Troubleshooting

• Texture not showing: Check UV mapping and image path.
• Reflections missing: Ensure HDR environment is loaded and connected correctly.
• Brightness too high: Lower environment strength or Sun strength.
• Chrome not reflective: Ensure Metallic is 1 and Roughness is low.

---

Mini-Checklist

•  

 

Session 4 — Materials & Environment (PBR, UVs, HDRI, Chrome)

Goal: Apply a wood texture with correct UV scaling, set up a reflective chrome frame using PBR settings, and add an HDRI environment so reflections appear in-browser.

---

1) Prep

1. If you previously used Lock Camera to View, go to View → Lock Camera to View and disable it so the camera stays fixed.
2. Switch the top workspace to Shading (Object mode).

---

2) Wood Material on the Table/Drawer

1. Select the table mesh (e.g., Cube).
2. In Material Properties, click New → name it M_Wood_01.
3. In Shader Editor (Object): ensure Principled BSDF → Material Output exists.
4. Add → Texture → Image Texture. Connect Image Texture → Color to Principled BSDF → Base Color.
5. Click Open on the Image Texture and choose wood_base_color_1.jpg (the provided file).
6. Add proper UV‑based scaling (node method):
• Add → Input → UV Map (select UVMap).
• Add → Vector → Mapping.
• Connect UV Map → Vector to Mapping → Vector, then Mapping → Vector to Image Texture → Vector.
• In Mapping set Scale X = 5, Y = 5, Z = 1 (tune to taste).

Optional: In the UV Editing workspace, ensure the mesh has a clean UV unwrap (Edit Mode → A → U). Keep transforms applied (Ctrl+A → Rotation & Scale).

7. Reuse the same wood on the drawer (e.g., Cube.003): select it → in Material slot choose M_Wood_01 (don’t create a new one).

---

3) Chrome Material on Stand/Holder

1. Select the stand/metal parts (e.g., Frame, Cube.001).
2. Create a new material M_Chrome.
3. In Principled BSDF set Metallic = 1.0 and Roughness ≈ 0.10 (adjust 0.05–0.20 for different polish levels).
4. Assign M_Chrome to all metal pieces (stand + base holder) for consistency.

---

4) World Environment (HDRI) for Real Reflections

1. In Shader Editor, switch from Object to World.
2. Enable Use Nodes (if off). You should see Background → World Output.
3. Add → Texture → Environment Texture. Connect Environment Texture → Color to Background → Color.
4. Click Open and choose environment.hdr (provided).
5. If the scene is too bright, lower Background → Strength to around 0.6 (tune later with the Sun light from Session 3).

Ensure any blocking environment sphere is hidden from Viewport and Render (see Session 3) so the HDRI actually lights and reflects.

---

5) Preview & Iterate

1. Use Render Preview in Blender to check materials.
2. Click Sneak Peek to view in the browser and orbit around. Confirm:
• Wood pattern density looks natural (adjust Mapping Scale if not).
• Chrome shows clear environment reflections (metallic = 1, roughness low, HDRI active).

---

6) Save, Export, Run

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

---

Troubleshooting

• Texture missing/pink: Ensure the image file is inside the app folder and the Image Texture node points to it; avoid unsupported nodes.
• Wood looks stretched/huge: Check UV unwrap; adjust Mapping Scale (e.g., 2–10) or re‑unwrap.
• Chrome looks dull: Confirm Metallic = 1.0, Roughness <= 0.2, HDRI connected, and the environment sphere is hidden.
• Too bright/too dark: Balance World Strength (0.3–1.5) and Sun Strength/rotation.

 

03 camera Lightings

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

A continuation of the Verge3D and Blender interactive table project. This session guides students through locating their app folder, replacing the default Blender file with a provided model, exporting the updated scene using the Verge3D glTF exporter, and running the app in a browser for initial testing. The setup prepares the project for adding textures, lighting, and interactivity in the next session.

Session 3 — Camera, Orbit Target & Lighting

Goal: Make the scene readable with a Sun light, set a clean default camera view, and define the orbit target so Sneak Peek/Web preview opens at the right angle.

---

1) Hide the Environment Sphere (so it doesn’t block light)

1. In the Outliner, click the funnel (Filter) icon and enable the monitor (Viewport) and camera (Render) toggles if they’re hidden.
2. Select your environment sphere (e.g., Sphere_Env).
3. Turn off the monitor and camera icons to hide it from the viewport and render.

Why: The sphere was blocking the default light, making the table look unlit.

---

2) Convert the Default Light to a Sun and Tune It

1. Select the light object (often named Light/Lamp).
2. In Object Data Properties (light bulb icon), change Type → Sun.
3. Adjust Rotation to aim the sunlight:
• Example values: X = 30°, Y = −20°, Z = 100° (tune as desired).
4. Set Strength/Energy (try 3–10; if still dim, try 15–30 for a punchier look).
5. Click Sneak Peek to preview in the browser; iterate rotation/strength until forms read well.

---

3) Set the Default Camera View (so Sneak Peek opens at your angle)

1. Press Numpad 0 to enter Camera View.
2. Choose one method to frame the shot:
• Method A (one‑shot): View → Align View → Align Active Camera to View (shortcut Ctrl+Alt+Numpad 0). Navigate in the viewport first, then run this.
• Method B (interactive): Press N to open the right panel → View tab → enable Lock Camera to View. Now navigate (MMB orbit, Shift+MMB pan, scroll zoom) to compose. Disable the lock when done.
3. Save your .blend (Ctrl+S).

---

4) Define the Orbit Target for Verge3D

Verge3D can use a target point/object to control where the orbit pivots in the browser.

1. Select the Camera.
2. In Camera Properties → Verge3D Settings, find Target:
• Option A: Pick Object (e.g., your table or a central helper empty).
• Option B: Set Coordinates manually. Example target: X = 0.0, Y = −0.2, Z = 0.3 (adjust to center your piece).
3. Save.
4. Sneak Peek again and ensure orbiting feels centered on the product.

---

5) Re‑Export & Run (Optional sanity pass)

1. File → Export → Verge3D glTF and overwrite your app scene file inside interactive-table/.
2. In App Manager, click your app → Run to confirm the new camera/lighting.

---

Troubleshooting

• Still dark? Increase Sun Strength, rotate Sun for better grazing light, or add a subtle Area Light. Consider an HDRI for soft ambient.
• Wrong starting angle in preview? Realign camera (Ctrl+Alt+Numpad 0) and Save before Sneak Peek.
• Orbit pivots oddly? Recheck the Verge3D Target (object or coordinates) on the camera.
• Harsh shadows/noise: Soften with larger light angle (Sun Angle) or add fill.

02 Session 2 Continue from Created App Folder Assets Export Run

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

Verge3D + Blender — Interactive Table (Web 3D/VR)

Session 2 — Continue from Created App (Folder, Assets, Export, Run)

Goal: Replace the default scene with the provided simple configurator model, export with Verge3D glTF, and run the app in a browser. We’ll fix textures and lighting in the next session.

Recap (Session 1): You installed Verge3D for Blender, enabled the add‑on, created a new app named interactive-table via App Manager, and verified Sneak Peek works.

---

1) Locate Your App Folder

1. Open Verge3D App Manager (from Blender’s top bar).
2. Confirm your apps path (default is something like: Documents/Verge3D/applications/).
3. Open the folder for your app: …/applications/interactive-table/.
• You’ll see files like index.html, visual_logic.xml (Puzzles), interactive-table.gltf (or similarly named), a blender/ subfolder if you created it, and other assets.

Tip: Keep names short, lowercase, no spaces. Use hyphens or underscores.

---

2) Open the Default .blend

1. In Blender, go to File → Open.
2. Navigate to your app: …/applications/interactive-table/.
3. Open interactive_table.blend (or the default .blend created by the template). If you don’t see one, use any existing .blend you saved earlier.
4. Switch to Shading workspace and enable Material Preview to see the starter materials.

This default scene exists only to prove your pipeline works; we’ll now replace it with the provided model.

---

3) Add the Provided Resources to the App

You’ll receive 1 Blender file (simple_configurator.blend) and 4 texture images.

1. Copy all 5 files.
2. Paste them inside your app folder: …/applications/interactive-table/ (or inside a subfolder like assets/).
3. Keep paths relative to the app root for easier export and hosting.

---

4) Replace the Default Scene (Two Methods)

Method A — Append (non‑destructive, recommended for learning)

1. In Blender: File → Append.
2. Pick simple_configurator.blend (the copy you placed in the app folder).
3. Open the Object or Collection folder inside the .blend and select the items you need (e.g., Table_Top, Frame, Cubes, Sphere_Env, etc.). Click Append.
4. Clean up the Outliner: delete old placeholder objects; keep your new collection organized. Apply transforms (Ctrl+A → Rotation & Scale).

Method B — Replace by Renaming (quick swap)

1. Close Blender (or ensure the default .blend is not open).
2. In the interactive-table folder, note the default file name (e.g., interactive_table.blend).
3. Delete the old default .blend.
4. Rename simple_configurator.blend to interactive_table.blend (exact same name as the original).
5. Re‑open Blender and open this renamed file.

Caution: The rename approach is fast but you lose the original template scene unless you kept a backup.

---

5) Inspect the Scene in Blender

1. In Outliner, verify you see the expected objects: e.g., a main Table/Cubes set and a Sphere for environment.
2. Ensure origins are sensible (e.g., at hinges for parts you’ll animate later).
3. Check UVs exist on meshes intended to show textures.
4. Keep materials simple and EeVee‑friendly (Principled BSDF with Image Texture where applicable).

---

6) Export with Verge3D glTF

Verge3D installs a special exporter. Use that (not the generic glTF exporter) for best compatibility.

1. In Blender: File → Export → Verge3D glTF (.gltf/.glb).
2. Target folder: your app folder …/applications/interactive-table/.
3. Overwrite the existing scene file if prompted (e.g., interactive-table.gltf).
4. Recommended options:
• Format: .gltf (JSON + external textures) or .glb (single binary). For beginners, .gltf is ok.
• Embed textures: off if you plan to keep images as separate files; on if you want a single package (file size grows).
• Apply modifiers: on (where safe) to avoid surprises.
• Animation: enabled if you have actions.
5. Click Export.

If textures don’t show later, don’t worry — we’ll fix paths/materials next session.

---

7) Run the App in the Browser

1. Open Verge3D App Manager.
2. Click your app card interactive-table → Run.
3. A browser tab opens with index.html and loads your exported scene.
4. Verify you can orbit/zoom/pan the camera.

Expected for now: It may look unlit or missing textures. That’s okay — we’ll address Lighting & Textures next.

---

8) Quick Sanity Checks & Common Pitfalls

• Nothing loads / blank page: Re‑export with Verge3D glTF and ensure you overwrote the correct file in the correct folder.
• Pink / gray materials: Textures not linked or unsupported nodes. We’ll convert/bake or relink next session.
• Scale/rotation odd: Apply transforms (Ctrl+A) before export.
• Wrong file paths: Keep textures inside the app folder with relative paths.
• Multiple scenes: Ensure the camera and main objects are in the active scene being exported.

---

9) What’s Next (Session 3 Preview)

• Relink textures and verify material compatibility for Verge3D.
• Add basic lighting (HDRI + 1–2 area lights) suitable for mobile.
• First interactions in Puzzles (material switchers, animation trigger).

 

01 Interactive 3D using Blender and verge 3D

Overview

Build a fully interactive, web‑based 3D product viewer (an Interactive Table) using Blender + Verge3D — no hand‑coding required. You’ll model (or import) a table, set up materials, add interactions (click to switch materials, buttons to animate parts, optional sounds), and publish it to the web so it works on desktop and mobile. Optional: enable VR (WebXR) for students with headsets.

---

0) What You’ll Deliver

• A working web app that loads in a browser, showing a 3D table.
• Interactions:
• Click the tabletop to cycle wood finishes.
• Click the metal frame to cycle metal/paint finishes.
• Click a button to play an animation (e.g., raise/lower tabletop).
• Optional: UI buttons for color presets, a light toggle, and a simple sound.
• Packaged ZIP (or public link) for submission.

---

1) Prerequisites

• Blender (3.3+ recommended).
• Verge3D for Blender (Windows/macOS).
• A modern browser (Chrome/Edge/Firefox mobile/desktop).
• GPU with updated drivers (integrated is okay for basic scenes).

Tip: Keep all project files inside one folder with short, ASCII‑only names.

---

2) Install & Enable Verge3D

1. Download Verge3D → soft8soft.com → Get Verge3D → Blender → Windows/macOS.
2. Install with default options. On Windows it goes to C:\Program Files\Verge3D for Blender.
3. Launch Blender → Edit → Preferences → Add‑ons.
4. Search “Verge” → enable Verge3D.
5. You should now see two buttons in Blender’s top bar: Sneak Peek and App Manager.

Sanity check: Click Sneak Peek on the default cube. A browser tab should open and show the cube. If it does, you’re good.

---

3) Create Your Verge3D App

1. In Blender, click App Manager. A browser tool opens.
2. First run: choose a location for your apps (keep the default Documents/Verge3D‑apps path) and Apply.
3. Click Create New App.
• Name: interactive-table
• Template: Standard (leave Physics off for now)
• Create App → OK
4. Your app folder is created under the chosen path, with index.html, visual_logic.xml (Puzzles), and an applications/interactive-table structure.

---

4) Model (or Import) the Table in Blender

You can block out a clean, low‑poly table or import an existing model.

Geometry & Transforms

• Name objects clearly: Table_Top, Table_Frame, Table_Leg_FL, etc.
• Apply transforms (Ctrl+A → Rotation & Scale) after modeling.
• Set origins sensibly (e.g., tabletop origin at hinge for lift animation).
• Parent parts to a master empty Table_ROOT to keep hierarchy tidy.

UVs & Materials

• Unwrap meshes (simple seams/Smart UV). Pack UVs logically.
• Create at least 3 materials:
• M_Wood_Dark (Principled BSDF; base color texture or color value)
• M_Wood_Light
• M_Steel_Black
• Keep node graphs EeVee‑friendly and Verge3D‑compatible (avoid exotic nodes; stick to Image Texture → Principled BSDF → Material Output). Use 1–2k textures initially.

Lighting & Camera

• Add an HDRI (World → Color → Environment Texture) or a few Area Lights.
• Create a camera named Cam_Main. Frame your product.

Save the .blend inside your app folder (e.g., .../interactive-table/blender/interactive-table.blend).

---

5) First Preview with Verge3D

1. In Blender, click Sneak Peek. Your table should appear in the browser.
2. If something is pink/missing:
• Check textures are saved and paths are relative.
• Avoid non‑supported nodes/modifiers (apply where needed).

---

6) Create an Animation in Blender (for the “lift” demo)

1. Select Table_Top.
2. At frame 1, insert keyframe for Location/Rotation (I).
3. At frame 40, raise/rotate as desired → insert keyframe.
4. Name the Action LiftTop (in the Dope Sheet → Action Editor).
5. Optional: Push to NLA to ensure Verge3D finds it.
6. Save.

Sneak Peek again — nothing plays yet; we’ll trigger it via Puzzles.

---

7) Add Interactivity with Puzzles (No Code)

Open App Manager → find interactive-table → click Puzzles. A visual editor opens.

7.1 Scene Ready Setup

Add these blocks (drag from the left palettes):

• when scene is ready
• set variable woodList → list of materials: M_Wood_Dark, M_Wood_Light
• set variable steelList → list: M_Steel_Black (add more later)
• set variable woodIndex → 0; set variable steelIndex → 0

7.2 Click to Cycle Wood on Tabletop

• when object is clicked → object: Table_Top
• set woodIndex → (woodIndex + 1) mod (length of woodList)
• apply material item woodList[woodIndex] to object Table_Top

7.3 Click to Cycle Steel on Frame

• when object is clicked → object: Table_Frame
• set steelIndex → (steelIndex + 1) mod (length of steelList)
• apply material item steelList[steelIndex] to object Table_Frame

7.4 Play/Pause Animation via a Button

We’ll add an on‑screen HTML button (or you can click a 3D object).

• In Puzzles, open HTML palette → create HTML element with id btn-animate and inner text Animate (position it with CSS or default flow).
• when HTML element is clicked btn-animate
• play animation → object Table_Top, action LiftTop, once
• Optional: if already played, reverse or stop animation to toggle.

Alternative: Use when object is clicked on a mesh named Button_Knob in 3D.

7.5 Optional: Light Toggle & Sound

• Create a Point Light named Lamp_A.
• when HTML element is clicked btn-light
• toggle visibility of Lamp_A.
• Import a short .ogg click sound into the app’s assets.
• play sound on interactions for feedback.

Save Puzzles (Ctrl+S icon). Click Run in App Manager to test.

---

8) Optional: Color Swatch UI (HTML)

You can add simple color buttons to switch directly to specific materials.

1. In App Manager → Open your app folder → edit index.html.
2. Add a small toolbar:

<div id="ui" style="position:fixed;right:16px;top:16px;z-index:5;">

<button id="wood-dark">Wood: Dark</button>

<button id="wood-light">Wood: Light</button>

<button id="steel-black">Steel: Black</button>

<button id="btn-animate">Animate</button>

</div>

3. In Puzzles → HTML palette, create listeners:
• when HTML element is clicked wood-dark → apply material M_Wood_Dark to Table_Top
• wood-light → apply M_Wood_Light
• steel-black → apply M_Steel_Black to Table_Frame

Save and Run.

---

9) Performance & Quality Tips

• Textures: start 1k–2k. Use power‑of‑two sizes. Bake heavy procedural materials.
• Draw calls: merge small meshes by material where sensible.
• Normals: ensure correct shading; mark sharp + auto‑smooth where needed.
• Mobile: test on a phone; reduce lights/shadows if slow.
• PBR: keep node graphs simple; avoid unsupported nodes.
• Compression: if your Verge3D version supports it, consider KTX2 textures for size.

---

10) VR (WebXR) — Optional

• In Puzzles → XR/AR palette, add enable VR on scene ready.
• Verge3D will show a VR button on supported browsers/devices. Your scene should be usable with or without a headset (graceful fallback).

---

11) Package & Publish

Local Testing

• From App Manager, click Run to serve locally. Use your LAN IP to test on mobile.

Zip Package

• In App Manager, use the Package/Zip option for interactive-table (icon or menu). This creates a deployable archive with HTML, JS, and assets.

Hosting Options

• GitHub Pages: create a repo, copy your app’s files, enable Pages (root). Share the URL.
• Any static web host (Netlify, Vercel, college server, S3+CloudFront). Upload the same files.
• Verge3D Network (Soft8Soft): quick sharing if your course allows external accounts.

---

12) QA Checklist (Mark as you test)

•  

---

13) Troubleshooting

• Blank page or errors: re‑Sneak Peek from Blender; check console (F12).
• Pink materials: missing textures or unsupported nodes — simplify to Image → Principled.
• Animation won’t play: confirm Action name (LiftTop), track in NLA, target object name matches Puzzles.
• Clicks not detected: ensure you clicked the visible mesh (not a hidden child); disable Overlay → Select Through in Blender while testing selection.
• Huge file size: downscale textures, remove unused images, merge small meshes.
• Dark scene on mobile: tone down shadows; add subtle ambient light/HDRI.

---

14) Extensions (For Extra Credit)

• Replace HTML buttons with 3D hotspots (billboard planes) and use the Annotations Puzzles.
• Add variant presets (e.g., “Walnut + Black”, “Birch + White”) via lists and one‑click apply.
• Add price calculator (simple JavaScript variables in Puzzles) and a screenshot button.
• Add AR (WebXR) mode for phones that support it.

---

15) Submission Format

• Submit either:
• A public URL (GitHub Pages/Netlify/etc.), and
• A ZIP export of the app folder (so we can re‑host if needed).
• Include a short README with:
• Material names used
• Interaction summary
• Known issues

---

Rubric (20 points)

• Scene correctness & hierarchy (names, transforms) — 4
• Materials & UVs (clean, compatible) — 4
• Interactivity (wood/frame cycling) — 6
• Animation trigger (LiftTop) — 3
• Packaging & publish (runs in browser) — 3

Good luck! Keep it light, modular, and mobile‑friendly. If you’re comfortable, push yourself with presets, hotspots, and a small price calculator to simulate real product configuration flows.

 

G10 Microsoft, Xbox, and the Dawn of Connected Gaming

Briefing: The Connected Console

Executive Summary:

 

The early 2000s marked a pivotal transformation in the gaming industry, shifting consoles from standalone machines to integrated, online-enabled entertainment hubs. While Sony's PlayStation 2 (PS2) dominated the market with its backward compatibility, DVD capabilities, and nascent online features, Microsoft's entry with the Xbox fundamentally altered the landscape by prioritizing and perfecting online multiplayer through Xbox Live and the groundbreaking success of Halo. This era not only redefined gaming as a social and competitive activity but also laid the groundwork for the always-connected, global gaming culture of today.

 

Key Themes and Important Ideas/Facts:

 

1. The Rise of the Connected Console and the Internet Revolution in Gaming:

 

Shift from Standalone to Connected: The defining characteristic of this era was the evolution of consoles from isolated devices to "connected entertainment hubs." This marked a fundamental change in how games were played and experienced.

Microsoft's Strategic Emphasis on Connectivity: Microsoft's Xbox was specifically designed for online play, evidenced by its "Built-in Ethernet port — signaling Microsoft’s plan for a connected gaming future."

Xbox Live as a Game-Changer: Launched in 2002, Xbox Live was revolutionary, offering a "Unified online network for matchmaking and multiplayer," "Voice chat, enabling real-time strategy and social interactions," and "Downloadable maps, updates, and content." It established the benchmark for online console gaming.

PS2's Early, Clunky Connectivity: The PlayStation 2, while dominant, offered "optional adapter for limited online play — clunky but a glimpse of the future," indicating the nascent stage of online integration before Xbox Live's arrival.

Nintendo's Handheld Innovation in Connectivity: Nintendo responded with Wi-Fi support in its Nintendo DS (2004), "pushing connected handheld experiences," demonstrating the pervasive trend towards online features across different gaming platforms.

2. The PlayStation 2's Market Dominance and Innovation:

 

Unprecedented Sales and Longevity: The PS2 achieved unparalleled success, selling "over 155 million units" and supporting "1,900+ games," making it "the best-selling console of all time." It remained a "fixture in homes for over 13 years."

Backward Compatibility: A key innovation was its ability to play "both new PS2 games and older PS1 titles, solving the problem of 'game mortality.'"

DVD Storage and Home Entertainment Integration: The adoption of "DVD Storage" not only enabled "longer and richer games" but also positioned the PS2 as a "home entertainment device, not just a game console," by doubling "as a DVD player."

Grand Theft Auto III as a Defining Title: This game was critical for demonstrating "that games could be vast, complex, and culturally significant," pioneering "open-world 3D games where players could explore freely."

3. Microsoft's Entry and the Xbox's Hardware Advantage:

 

Entry of a Tech Giant: Microsoft's arrival with the Xbox in January 2001 marked "the first major U.S. console since Atari bowed out in the '90s."

Superior Hardware: The Xbox boasted being "Faster, more powerful than competitors," and included a "Large internal hard drive for game saves and downloadable content," a significant advantage.

4. Halo as a Console FPS and Competitive Gaming Catalyst:

 

Redefining Console FPS: Halo: Combat Evolved (2001) "Redefined first-person shooters (FPS) on consoles," selling "over 5 million copies by 2005."

Paving the Way for eSports: Halo 2 (2004) "fully embraced Xbox Live," with "Intuitive online matchmaking matched players by skill level," which "Created the foundation for competitive console gaming, paving the way for Major League Gaming (MLG) tournaments and the growth of eSports."

Early Multiplayer Foundations: The original Halo also introduced "System Link for local multiplayer battles (up to 16 players)," a precursor to widespread online play.

5. The Emergence of Competitive Gaming and Gaming Communities:

 

Rise of eSports: The early 2000s saw the rapid growth of "Professional Gaming," with Halo tournaments and fighting games like Super Smash Bros. Melee becoming "staples in competitive circuits."

Community Building: Gaming fostered "Online Communities" where "Players forming guilds, clans, and forums," alongside "LAN Parties" for local multiplayer.

Multiplayer as a Standard: The era solidified "Multiplayer as a Standard" where "playing with others became the norm."

6. Key Shifts in Gaming Culture:

 

The period brought four major shifts:

 

Online Connectivity: Games became "not isolated experiences anymore."

Multiplayer as a Standard: Playing with others became expected.

Competitive Gaming: eSports transitioned "from local tournaments to global competitions."

Community and Social Play: Forums, clans, and online lobbies became "integral parts of gaming culture."

7. Lessons for Today's Industry and Students:

 

Innovation Drives Adoption: "Xbox succeeded because it leveraged technology to solve problems — and deliver new experiences."

Community Is Power: "Online play created loyal communities that fueled long-term engagement."

Adapt or Exit: "Sega’s departure showed that even innovative companies must adapt quickly to stay in the race."

Games Shape Culture: Games evolved beyond mere entertainment, becoming "part of global conversations," exemplified by "GTA III controversies to Halo tournaments."

Conclusion:

 

The early 2000s fundamentally reshaped the gaming landscape, moving beyond simple entertainment to establish gaming as a connected, social, and competitive global phenomenon. Microsoft's strategic entry with the Xbox and Xbox Live, combined with the PS2's market dominance and innovative features, laid the essential "foundation for the modern, always-connected gaming world we know today."