Spaces:

KwabsHug
/

GameConfigIdea

Running on Zero

File size: 21,551 Bytes

9328e91

"""3D Study and Tutorials Tab.

This module provides educational resources and tutorials for 3D development.
"""

import gradio as gr


def create_3d_study_tab():
    """Create the 3D Study and Tutorials tab."""
    with gr.Tab("3D Study and Tutorials"):
        gr.Markdown("## 3D Development Learning Resources & Tutorials")
        gr.Markdown("A collection of resources for learning 3D game development, modeling, and related technologies.")

        with gr.Tab("Getting Started & Tools"):
            gr.Markdown("""### 3D Fundamentals

**Core Concepts to Learn:**
- Coordinate systems (world space, local space, screen space)
- Meshes, vertices, and polygons
- Materials, textures, and shaders
- Lighting and shadows
- Camera systems and projections

**Recommended Learning Path:**
1. Basic 3D math (vectors, matrices, quaternions)
2. Simple 3D scene setup
3. Loading and displaying 3D models
4. Basic lighting and materials
5. Camera controls and navigation

---

### Popular 3D Game Engines

| Engine | Type | Pros | Cons | Links |
|--------|------|------|------|-------|
| **PlayCanvas** | Web-based (JS) | No download, browser-based, good docs | Performance limits for complex scenes | [Editor](https://playcanvas.com/) / [Tutorials](https://developer.playcanvas.com/tutorials/) |
| **Unity** | Full engine (C#) | Large community, asset store, cross-platform | Steeper learning curve, runtime fees | [Unity Learn](https://learn.unity.com/) |
| **Unreal** | AAA engine (C++/Blueprints) | High-quality graphics, visual scripting | Heavy resources, complex for beginners | [Learning Portal](https://dev.epicgames.com/community/unreal-engine/learning) |
| **Godot** | Open-source (GDScript/C#) | Free, lightweight, good 2D, improving 3D | Smaller community | [Docs](https://docs.godotengine.org/) |
| **Three.js** | JS library | Web-native, flexible, good for viz | Not a full engine, manual setup | [Docs](https://threejs.org/docs/) / [Journey](https://threejs-journey.com/) |

---

### 3D Modeling Software

**Blender (Free & Open Source)** - Best for modeling, sculpting, animation, rendering
- [Blender Guru - Donut Tutorial](https://www.youtube.com/playlist?list=PLjEaoINr3zgFX8ZsChQVQsuDSjEqdWMAD)
- [Official Tutorials](https://www.blender.org/support/tutorials/)
- [Grant Abbitt YouTube](https://www.youtube.com/@grabbitt)

**Free 3D Asset Sources:**
- [Sketchfab](https://sketchfab.com/) - Many free models
- [Poly Haven](https://polyhaven.com/) - Free HDRIs, textures, models
- [Kenney Assets](https://kenney.nl/assets) - Game-ready assets
- [Mixamo](https://www.mixamo.com/) - Free character animations
- [Quaternius](https://quaternius.com/) - Low-poly game assets

---

### AI-Assisted 3D Development

**Emerging AI Tools:**
- **Text-to-3D:** Generate 3D models from text descriptions
- **Image-to-3D:** Convert 2D images to 3D models
- **AI Texturing:** Auto-generate textures and materials
- **Motion Capture Alternatives:** AI-based animation from video

**Notable AI 3D Tools:**
- Meshy, Tripo3D, Luma AI - Text/Image to 3D
- Stable Zero123 - Single image to 3D
- Point-E, Shap-E (OpenAI) - 3D generation research
- NeRF/Gaussian Splatting - 3D from photos/video

**Recommended Viewing:**
- [No BS Conversation about AI & 3D with Andrew Price (Blender Guru)](https://www.youtube.com/watch?v=E5IIMNQ4rl4)
            """)

        with gr.Tab("YouTubers & Creators"):
            gr.Markdown("""### 3D & AI YouTubers to Follow

**AI + 3D Focus:**

| Creator | Focus | Link |
|---------|-------|------|
| **Stefan 3D AI Lab** | AI for 3D, tutorials, workflows | [YouTube](https://www.youtube.com/@stefan3dailab) |
| **Corridor Crew** | VFX breakdowns, AI experiments | [YouTube](https://www.youtube.com/@CorridorCrew) |
| **Two Minute Papers** | AI research explained | [YouTube](https://www.youtube.com/@TwoMinutePapers) |
| **Latent Space** | AI art & 3D generation | [YouTube](https://www.youtube.com/@LatentSpaceTV) |

**Blender & 3D Modeling:**

| Creator | Focus | Link |
|---------|-------|------|
| **Blender Guru** | Tutorials, industry insights | [YouTube](https://www.youtube.com/@blaboratories) |
| **Grant Abbitt** | Beginner-friendly Blender | [YouTube](https://www.youtube.com/@grabbitt) |
| **CG Geek** | Blender tutorials, simulations | [YouTube](https://www.youtube.com/@CGGeek) |
| **Ducky 3D** | Blender procedural, geometry nodes | [YouTube](https://www.youtube.com/@TheDucky3D) |
| **Default Cube** | Short Blender tips | [YouTube](https://www.youtube.com/@DefaultCube) |
| **Polygon Runway** | Motion graphics, Blender | [YouTube](https://www.youtube.com/@PolygonRunway) |
| **Polyfjord** | Stylized 3D, tutorials | [YouTube](https://www.youtube.com/@Polyfjord) |

**Game Dev & Engines:**

| Creator | Focus | Link |
|---------|-------|------|
| **Brackeys** | Unity tutorials (classic) | [YouTube](https://www.youtube.com/@Brackeys) |
| **Game Dev TV** | Unity/Unreal courses | [YouTube](https://www.youtube.com/@GameDevTV) |
| **GDQuest** | Godot tutorials | [YouTube](https://www.youtube.com/@GDQuest) |
| **Fireship** | Web dev, quick tutorials | [YouTube](https://www.youtube.com/@Fireship) |
| **Sebastian Lague** | Coding adventures, algorithms | [YouTube](https://www.youtube.com/@SebastianLague) |

**Technical Art & Shaders:**

| Creator | Focus | Link |
|---------|-------|------|
| **Ben Cloward** | Shader tutorials | [YouTube](https://www.youtube.com/@BenCloward) |
| **Acerola** | Graphics programming | [YouTube](https://www.youtube.com/@Acerola_t) |
| **The Art of Code** | Shader coding | [YouTube](https://www.youtube.com/@TheArtofCodeIsCool) |
            """)

        with gr.Tab("Animations & Measurements"):
            gr.Markdown("## Animation Keyframes & Real-World Measurements")
            gr.Markdown("Understanding motion through keyframes and translating physical measurements to digital.")

            with gr.Tab("Animation Keyframes"):
                gr.Markdown("### Breaking Down Animations into Keyframes")
                gr.Markdown("Every animation consists of key poses that define the motion.")

                with gr.Row():
                    with gr.Column():
                        gr.Markdown("""**Walk Cycle (8-frame)**
1. **Contact** - Front heel touches, back toe down
2. **Down** - Weight shifts, lowest point
3. **Passing** - Back leg passes under body
4. **Up** - Push off, highest point
5-8. Mirror for opposite leg

*Arms swing opposite to legs, slight torso rotation, head stays stable (focus point), hip sway for natural movement*""")

                    with gr.Column():
                        gr.Markdown("""**Run Cycle (faster, airborne)**
1. **Contact** - Front foot strikes
2. **Compression** - Absorb impact
3. **Drive** - Push off, power
4. **Flight** - Both feet off ground
5-8. Mirror for opposite leg

*More forward lean, higher knee lift, arms pump*""")

                with gr.Row():
                    with gr.Column():
                        gr.Markdown("""**Eat Animation**
1. **Idle** - Hand at rest
2. **Reach** - Move toward food
3. **Grasp** - Fingers close
4. **Lift** - Bring to face
5. **Approach** - Near mouth
6. **Bite** - Food enters mouth
7. **Chew** - Jaw motion starts
8. **Return** - Hand returns

*Variations: finger food vs utensil, standing vs sitting posture, speed (casual vs hungry)*""")

                    with gr.Column():
                        gr.Markdown("""**Sleep Animation**
1. **Tired** - Eyes drooping
2. **Settling** - Finding position
3. **Eyes Close** - Final adjustment
4. **Asleep** - Relaxed, breathing
5. **Deep Sleep** - Subtle shifts
6. **Stir** - Minor movements

*Breathing loop (overlay): chest/belly rise & fall, 3-4 sec cycle, subtle shoulder movement*
*Wake: stretch, yawn, eye rub*""")

                gr.Markdown("---")
                gr.Markdown("### Custom Animation Breakdown")
                with gr.Row():
                    custom_anim_name = gr.Textbox(label="Animation Name", placeholder="e.g., Jump, Climb, Dance", scale=1)
                with gr.Row():
                    custom_anim_keyframes = gr.Textbox(
                        label="Keyframe Breakdown",
                        placeholder="1. Starting pose\n2. Anticipation\n3. Action\n4. Follow-through\n5. Recovery",
                        lines=6,
                        scale=2
                    )
                    custom_anim_notes = gr.Textbox(
                        label="Timing & Notes",
                        placeholder="Frame counts, easing...",
                        lines=6,
                        scale=1
                    )

            with gr.Tab("Measurements & Proportions"):
                gr.Markdown("### Real-World Measurements for Digital Creation")

                with gr.Row():
                    with gr.Column():
                        gr.Markdown("""**Body Measurements**

| Measurement | How to Take | Range |
|-------------|-------------|-------|
| Chest/Bust | Fullest part, under arms | 80-120 cm |
| Waist | Natural waistline | 60-100 cm |
| Hips | Fullest part | 85-125 cm |
| Shoulder Width | Point to point | 35-50 cm |
| Arm Length | Shoulder to wrist | 55-70 cm |
| Inseam | Crotch to ankle | 70-85 cm |
| Torso | Neck base to waist | 40-50 cm |

*Tips: Use flexible tape, measure over light clothing, keep snug not tight. Measure twice, cut once!*""")

                    with gr.Column():
                        gr.Markdown("""**Glove Measurements**

| Measurement | Location | Range |
|-------------|----------|-------|
| Hand Circumference | Palm at knuckles | 17-24 cm |
| Hand Length | Wrist to middle finger | 17-21 cm |
| Thumb Length | Web to tip | 5-7 cm |
| Wrist | Around bone | 14-19 cm |

*Finger lengths: Index 6-8cm, Middle 7-9cm, Ring 6-8cm, Pinky 5-7cm*

**Size Chart:**
| Circumference | Size |
|---------------|------|
| 17-18 cm | XS/7 |
| 18-19 cm | S/7.5 |
| 19-20 cm | M/8 |
| 21-22 cm | L/8.5 |
| 23-24 cm | XL/9 |""")

                with gr.Row():
                    with gr.Column():
                        gr.Markdown("""**Human Proportions**

- **Realistic adult:** 7.5-8 heads tall
- **Heroic:** 8-8.5 heads tall
- **Fashion:** 9-10 heads tall
- **Chibi:** 2-4 heads tall

**Key Ratios:**
- Arm span = Height
- Elbow at waist level
- Wrist at crotch level
- Knee at mid-leg
- Eyes at head midpoint

**Golden Ratio (1:1.618):** Appears in faces, shells, architecture. Guides pleasing compositions.""")

                    with gr.Column():
                        gr.Markdown("""**Capturing Measurements**

**Manual:** Calipers (0.1mm), tape measure, reference objects (coins, rulers in photos)

**Photogrammetry:** 50-200 photos, include scale reference
- Meshroom (free), RealityCapture, Agisoft
- Output: Textured 3D mesh with real-world scale

**LiDAR:** iPhone 12+ Pro / iPad Pro
- Polycam, Scaniverse, 3D Scanner App (~1-2 cm)

**Structured Light:** Desktop scanners, higher accuracy than LiDAR

**Reference Modeling:** Photo with ruler, scale in software""")

                gr.Markdown("---")
                gr.Markdown("### Scale Calculator")
                with gr.Row():
                    real_measurement = gr.Number(label="Real-world size (cm)", value=100)
                    desired_scale = gr.Dropdown(
                        label="Target Scale",
                        choices=["1:1 (Full size)", "1:10", "1:24 (Dollhouse)", "1:64 (Hot Wheels)", "1:100", "Custom"],
                        value="1:1 (Full size)"
                    )
                    custom_scale = gr.Number(label="Custom denominator", value=1)
                with gr.Row():
                    calc_btn = gr.Button("Calculate", scale=1)
                    calc_result = gr.Textbox(label="Scaled size", interactive=False, scale=2)

                def calculate_scale(real_size, scale, custom):
                    scale_map = {
                        "1:1 (Full size)": 1,
                        "1:10": 10,
                        "1:24 (Dollhouse)": 24,
                        "1:64 (Hot Wheels)": 64,
                        "1:100": 100,
                        "Custom": custom if custom > 0 else 1
                    }
                    divisor = scale_map.get(scale, 1)
                    result = real_size / divisor
                    return f"{result:.2f} cm ({result*10:.1f} mm)"

                calc_btn.click(
                    fn=calculate_scale,
                    inputs=[real_measurement, desired_scale, custom_scale],
                    outputs=[calc_result]
                )

        with gr.Tab("Animation Resources"):
            gr.Markdown("## Free Animation & Motion Capture Resources")
            gr.Markdown("Sources for free character animations, motion capture data, and rigging tools.")

            with gr.Row():
                with gr.Column():
                    gr.Markdown("""**Animation Platforms**
- [Mixamo](https://www.mixamo.com/) - Characters + anims, .fbx/.dae, free, 2500+ animations
- [Actorcore](https://actorcore.reallusion.com/) - Motion library, .fbx/.bvh, free tier
- [Rokoko Studio](https://www.rokoko.com/products/studio) - Mocap, .fbx/.bvh, free tier
- [Cascadeur](https://cascadeur.com/) - Physics-based, .fbx/.dae, AI-assisted
- [Plask](https://plask.ai/) - Video to mocap, .fbx/.bvh/.glb, free tier

**Mocap Databases**
- [CMU Mocap](http://mocap.cs.cmu.edu/) - .bvh/.c3d, public domain
- [Bandai Namco Research](https://github.com/BandaiNamcoResearchInc/Bandai-Namco-Research-Motiondataset) - .bvh, free research
- [LAFAN1](https://github.com/ubisoft/ubisoft-laforge-animation-dataset) - Locomotion, .bvh
- [AMASS](https://amass.is.tue.mpg.de/) - Unified archive, .npz""")

                with gr.Column():
                    gr.Markdown("""**Pre-Animated Models**
- [Sketchfab](https://sketchfab.com/) - Filter "animated", .glb/.gltf/.fbx
- [Poly Pizza](https://poly.pizza/) - Google Poly archive, .glb
- [Ready Player Me](https://readyplayer.me/) - Avatars + anims, .glb
- [CGTrader](https://www.cgtrader.com/) - Filter "free" + "animated"
- [TurboSquid](https://www.turbosquid.com/) - Some free animated
- [Free3D](https://free3d.com/) - Community models

**Rigged Characters**
- [Mixamo Fuse](https://www.mixamo.com/) - Create → Auto-rig → Apply
- [MakeHuman](http://www.makehumancommunity.org/) - Free, open source
- [VRoid Studio](https://vroid.com/en/studio) - Anime, VRM format
- [Daz3D](https://www.daz3d.com/) - Realistic humans, free base""")

                with gr.Column():
                    gr.Markdown("""**Tools & Retargeting**
- [Blender](https://www.blender.org/) - Retarget, convert, Rigify addon
- [AccuRig](https://actorcore.reallusion.com/auto-rig) - Free auto-rigging
- [Rokoko Studio](https://www.rokoko.com/) - Free retargeting app

**Format Conversion**
- .bvh → Motion only, apply in Blender
- .fbx → Most universal format
- .glb/.gltf → Web-ready (Three.js, PlayCanvas)

**DIY Motion Capture**
- [Plask](https://plask.ai/) - Webcam video → animation
- [DeepMotion](https://www.deepmotion.com/) - Free tier
- [Move.ai](https://www.move.ai/) - Phone app, multi-phone
- [MediaPipe](https://mediapipe.dev/) - Google, free, self-host

**Game-Ready Packs (CC0)**
- [Quaternius](https://quaternius.com/) - Low-poly anims
- [Kenney](https://kenney.nl/assets) - Simple/casual
- [OpenGameArt](https://opengameart.org/) - Community""")

        with gr.Tab("3D Background with UI"):
            gr.Markdown("## Using 3D as Background for Story Games")
            gr.Markdown("Add immersive 3D backgrounds while keeping the choice-based UI overlay.")

            with gr.Row():
                with gr.Column():
                    gr.Markdown("""**Image to 3D Tools**

[3DTopia-XL](https://huggingface.co/spaces/FrozenBurning/3DTopia-XL) | [TRELLIS](https://huggingface.co/spaces/JeffreyXiang/TRELLIS) | [InstantMesh](https://huggingface.co/spaces/TencentARC/InstantMesh)

**More 3D Generation:**
- [Hunyuan3D-2mini-Turbo](https://huggingface.co/spaces/tencent/Hunyuan3D-2mini-Turbo) - With texture, glb/obj/ply/stl
- [Hi3DGen](https://huggingface.co/spaces/Stable-X/Hi3DGen) - glb/obj/ply/stl
- [Stable Virtual Camera](https://huggingface.co/spaces/stabilityai/stable-virtual-camera) - 3D video reconstruction
- [VGGT (Facebook)](https://huggingface.co/spaces/facebook/vggt) - High speed, single angle
- [GRM Demo](https://huggingface.co/spaces/GRM-demo/GRM)

**Research:**
- [3D Research Tracker](https://huggingface.co/spaces/dylanebert/research-tracker)
- [nunif/iw3](https://github.com/nagadomi/nunif/blob/master/iw3/README.md)""")

                with gr.Column():
                    gr.Markdown("""**3D Editors (Free/Free Tier)**
- [SculptGL](https://stephaneginier.com/sculptgl/) - Sculpting, no login
- [Tinkercad](https://www.tinkercad.com/) - Simple editor
- [Vectary](https://app.vectary.com/) - Web 3D editor
- [Clara.io](https://clara.io/) - Editor + model library
- [Sketchfab](https://sketchfab.com/) - Model library
- [Figuro](https://www.figuro.io/Home/Welcome) - Editor + tutorials
- [Spline](https://spline.design/) - 3D design + presentation
- [SelfCAD](https://www.selfcad.com/) - Full 3D editor

**Utilities:**
- [GLB to PLY Converter](https://imagetostl.com/convert/file/glb/to/ply)
- [PlayCanvas Free Assets](https://forum.playcanvas.com/t/assets-free-3d-models-sprites-icons-and-sounds-for-your-games/19199)""")

                with gr.Column():
                    gr.Markdown("""**Adding UI to 3D Exports**

**PlayCanvas:** 2D Screen entity → Text/Button children → wire clicks

**Godot:** CanvasLayer → Label/Button → connect signals

**Unreal:** Widget Blueprint → Text/Button → bind state

**PlayCanvas Code:**
```javascript
var UiManager = pc.createScript('uiManager');
UiManager.prototype.initialize = function() {
  this.descText = this.app.root.findByName('DescriptionText');
  this.buttons = this.app.root.findByName('ChoiceContainer').children;
};
UiManager.prototype.updateUI = function(state) {
  this.descText.element.text = state.description;
  state.choices.forEach((c, i) => {
    if (this.buttons[i]) this.buttons[i].element.text = c;
  });
};
```""")

        with gr.Tab("AR/XR Development"):
            gr.Markdown("## AR/XR Integration & Development")

            with gr.Row():
                with gr.Column():
                    gr.Markdown("""**AR Filter Platforms**

| Tool | Platform | Formats |
|------|----------|---------|
| [Lens Studio](https://lensstudio.snapchat.com/) | Snapchat | .fbx .obj .gltf .glb |
| [Meta Spark](https://spark.meta.com/) | IG/FB | .fbx .obj .gltf .dae |
| [Effect House](https://effecthouse.tiktok.com/) | TikTok | .fbx .obj .gltf .glb |
| [Adobe Aero](https://www.adobe.com/products/aero.html) | Cross | .usdz .glb .gltf .fbx |
| [Reality Composer](https://developer.apple.com/augmented-reality/tools/) | Apple | .usdz .reality |
| [8th Wall](https://www.8thwall.com/) | Web | .glb .gltf |

**Key Features:**
- **Lens Studio**: Face/body/hand tracking, SnapML, 300+ templates, Spectacles support
- **Meta Spark**: Patch Editor + Script API, audio analyzer, IG/FB distribution
- **Effect House**: Visual scripting, segmentation (hair/skin/bg), massive reach
- **Adobe Aero**: No-code, PS/AI integration, USDZ export
- **8th Wall**: WebAR (no app!), Three.js/A-Frame, 3B+ devices""")

                with gr.Column():
                    gr.Markdown("""**Platform Workflows**

**Snapchat:** [Lens Studio](https://lensstudio.snapchat.com/download)
1. Build lens → 2. Webcam preview → 3. Pair phone (Settings) → 4. Send to Snapchat → 5. Test in app → 6. Submit for review

**Instagram/FB:** [Meta Spark](https://spark.meta.com/download)
1. Build effect → 2. Webcam preview → 3. Download Spark Player app → 4. Test on Device → 5. Submit via Spark Hub

**TikTok:** [Effect House](https://effecthouse.tiktok.com/download)
1. Build effect → 2. Webcam preview → 3. QR code → 4. Scan in TikTok → 5. Submit for review

**WebAR:** [8th Wall](https://www.8thwall.com/)
1. Code in editor → 2. Browser preview → 3. Localhost test → 4. Deploy → 5. Share URL (no app needed!)""")

                with gr.Column():
                    gr.Markdown("""**Testing & WebXR**

| Platform | Test App |
|----------|----------|
| Snapchat | Snapchat app |
| Instagram | Spark Player + IG |
| TikTok | TikTok app |
| Apple | AR Quick Look |
| WebAR | Any browser |

**WebXR Frameworks:**
- [A-Frame](https://aframe.io/) - Web VR/AR
- [Three.js](https://threejs.org/) - WebXR support
- [AR.js](https://ar-js-org.github.io/AR.js-Docs/) - Open source
- [Model Viewer](https://modelviewer.dev/) - Google 3D/AR
- [PlayCanvas WebXR](https://developer.playcanvas.com/tutorials/webxr-hello-world/)

**Key Insight:** Snapchat & TikTok test in same app users use. 8th Wall: browser = production.""")

                with gr.Column():
                    gr.Markdown("""**Publishing & Docs**

**Review Times:**
- Snapchat: 24-48 hrs
- Instagram/FB: Days to weeks
- TikTok: Days
- WebAR: No review!

**Documentation:**
- [Lens Studio Docs](https://docs.snap.com/lens-studio)
- [Meta Spark Learn](https://sparkar.facebook.com/ar-studio/learn)
- [Effect House Learn](https://effecthouse.tiktok.com/learn)
- [8th Wall Docs](https://www.8thwall.com/docs)
- [Adobe Aero Help](https://helpx.adobe.com/aero/user-guide.html)

**Game Config Integration:**
- AR triggers at game states
- Face filters for character transformation
- Location-based ARG triggers
- QR codes → game state changes""")