"""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""")