Nex-Voxial Universe
A Voxel-Based Creative & Gaming Ecosystem
Official Hackathon Submission Paper
Project URL: https://app-b7plc0mkpkht.appmedo.com/
Category: Advanced Creative Tools & Interactive Experiences
Problem Statement & Solution
Nex-Voxial Universe solves the 'blank canvas' problem in 3D design. Creating 3D assets often requires steep learning curves; our app provides an AI-assisted, voxel-based studio that allows anyone to build, animate, and explore interactive worlds. We built this to democratize 3D creation by combining the simplicity of voxels with the power of generative AI.
Conversation Structure with MeDo
Building Nex-Voxial was an iterative journey. We structured our conversations with MeDo by first establishing a robust foundational layout (the WorkshopLayout), then sequentially adding specialized workshops. We used high-level architectural prompts to define the 'Command Center' logic and then dove into specific implementation details for the 3D rendering engines and animation rigs. This modular approach allowed us to maintain a clean, scalable codebase throughout the hackathon.
The Most Impressive Feature
The most impressive feature created with MeDo is the 'Prompt Architect Lab'. MeDo helped us integrate a neural pathway that translates natural language prompts into complex 3D voxel structures. The complexity of the UI—balancing the AI input with the live 3D preview while maintaining perfect interactivity through careful z-index management—was a masterpiece of AI-assisted engineering.
Extension via Plugins & APIs
Taking advantage of MeDo's utility by extending the application's core functionality through key integrations:
• Supabase Auth & DB: Ensured secure user profiles and persistent inventory tracking across different universe dimensions.
• Three.js/R3F: Leveraged for high-performance 3D rendering of thousands of voxels in the browser.
• Lucide-React & Shadcn/UI: Provided a consistent, professional-grade icon system and accessible UI components.
Core Feature Catalog
Commander Hub & Exploration
The central gateway where players manage their 'Teraform Survival' progress, engage in PvP combat, and curate their loot. It provides a unified dashboard for the entire ecosystem. (Under Construction)
Specialized Workshops
A suite of tools for the modern creator:
• Animation Workshop: IK-based motion rigging for voxel entities.
• Environment Workshop: Procedural terrain and atmosphere generation.
• Pipeline Workshop: Cross-engine export and LOD management.
What We Did Best (Collaborating with MeDo's great agentic toolkit)
Solving the interactive overlay challenge was our highlight. By implementing a strict stacking context, we ensured that the 3D viewport never blocked user interactions with sidebar menus or tooltips—a common pitfall in WebGL development.
The Best Thing About MeDo
The absolute best thing about MeDo is its autonomy and precision. It doesn't just write code; it understands the architectural intent. The platform's ability to navigate a 200+ file project and apply global fixes—like our semantic HTML correction and z-index refactor is what made this ambitious project possible within the hackathon timeframe.
Further Re-iteration of Nex-Voxial Universe: Project Overview
Inspiration
The inspiration for Nex-Voxial Universe stems from the desire to merge the tactile, creative joy of voxel-based building with the boundless possibilities of generative AI. We wanted to create a digital playground where the barrier between "imagining" and "rendering" is virtually non-existent.. A place where architectural precision meets survival gameplay.
What it does
Nex-Voxial Universe is a comprehensive 3D creative and gaming ecosystem.
It features specialized workshops from the Prompt Architect Lab (AI-to-Voxel) to the Animation Lab (IK rigging), users have professional-grade tools to forge assets. Interactive Dimensions: Explore the Teraform Survival world, a procedural voxel environment where resource gathering and base building are key. (Under Construction) Multiplayer Combat: A real-time PvP Arena for testing custom-built equipment against rivals. Commander Hub: A centralized dashboard for managing progression, inventory, and global rankings.
How it was built
Frontend Framework: React with TypeScript for a scalable and type-safe UI architecture. 3D Graphics Engine: Three.js and React Three Fiber for real-time WebGL rendering and physics. Styling: Tailwind CSS for a futuristic "glassmorphism" aesthetic and responsive design. Backend & Auth: Supabase for secure user authentication and persistent database management. Collaboration: Developed in close partnership with MeDo, utilizing its autonomous engineering capabilities to manage complex file structures and iterative refactors.
Challenges
Z-Index & Stacking Contexts: One of the most significant hurdles was ensuring that the 2D UI (tooltips, menus, sidebars) remained interactive while layered over a full-screen WebGL canvas. We solved this by implementing a strict global stacking hierarchy ($Z_{header} > Z_{sidebar} > Z_{canvas}$). Semantic HTML & SEO: During rapid prototyping, we initially over-nested
tags. We had to perform a project-wide refactor to ensure proper semantic structure while maintaining 3D viewport integrity. Real-time Performance: Optimizing the rendering of thousands of voxels while maintaining high frame rates required careful Level of Detail (LOD) management and efficient state updates.Accomplishments
Prompt Architect Lab: Successfully building a "Neural Pathway" that allows natural language to influence 3D geometry is our proudest technical achievement. Universal Workshop Layout: Creating a unified, modular UI that handles 11+ different creative workflows seamlessly. Interactive Survivability: Transitioning from a pure "editor" to a "playable game" with resource systems and combat mechanics.
What was learned
AI-Assisted Engineering: I learned how to leverage autonomous agents like MeDo to handle large-scale refactors and project-wide bug fixes effectively. 3D UX Design: Building for 3D is vastly different from standard 2D web design. I gained deep insights into camera controls, viewport occlusion, and spatial navigation.
Mathematical Rigor in UI: We used several mathematical models for our IK rigging and procedural generation. For example, calculating the inverse kinematics for voxel limbs involved solving: $$\theta = \arccos\left(\frac{a^2 + b^2 - c^2}{2ab}\right)$$ to determine joint angles in real-time.
What's next for Nex-Voxial Galactic Conquest & Neon Streets: We are currently working on unlocking other areas of the creator and game development process Mobile Optimization: Enhancing the touch-control logic for 3D viewports to bring the Nex-Voxial experience to mobile devices. Blockchain Integration: Exploring decentralized asset ownership for user-created voxel blueprints.