Access address: 魔云盒 - 专业在线3D设计编辑平台
# QDesigner
## AI-Native 3D Design Infrastructure for the Next Generation of Product Visualization
QDesigner is a browser-based product design platform that brings together real-time 3D rendering, layered 2D design editing, and production-oriented AI workflows inside a single creative system. Built on top of BabylonJS and a custom editor runtime, it is designed for teams that need more than a viewer and more precision than a prompt-only image tool.
At its core, QDesigner turns packaging, product surfaces, and visual presentation into one continuous workflow:
- Design in 2D
- Preview in 3D
- Refine with AI
- Deliver with production-grade visual control
—
## Executive Vision
QDesigner is not just a 3D editor. It is a digital design layer built for modern product creation, where geometry, materials, UV-based artwork, lighting, background storytelling, and AI generation all operate as parts of the same pipeline.
The project combines three strategic capabilities:
1. A BabylonJS-powered real-time 3D engine for product visualization and material presentation
2. A layer-based UV design editor for packaging graphics, decals, and surface composition
3. An AI orchestration layer for generation, inpainting, cutout, scene staging, and concept acceleration
This makes QDesigner especially suited to packaging design, consumer product visualization, e-commerce imagery, branded mockups, surface customization, and AI-assisted design exploration.
—
## Core Product Narrative
### 1. Real-Time 3D as the Foundation
QDesigner is built around a real-time 3D editing experience powered by BabylonJS. The rendering layer supports model loading, scene interaction, lighting control, environment maps, material editing, background systems, and screenshot export. The 3D viewport is not treated as a final preview step; it is the primary truth surface for design validation.
The engine architecture exposes a dedicated `Editor3D` wrapper that coordinates:
- model loading and scene lifecycle
- material and texture updates
- environment and lighting controls
- background image and gradient systems
- post-process adjustments
- AI-generated design assets flowing back into the scene
This gives the platform a strong technical center: fast visual feedback, high material fidelity, and a clean bridge between design intent and rendered output.
### 2. Layer-Based Design on Top of UV Space
One of the strongest parts of the project is the split workflow between 2D design and 3D rendering. QDesigner includes a dedicated design editor that works like a visual composition system for UV textures.
Users can:
- upload mask or dieline references
- build multi-layer compositions on a canvas
- move, scale, rotate, mirror, lock, copy, and reorder layers
- work with region-aware mask segmentation
- map edits back onto the 3D model in real time
This creates a true design layer above BabylonJS: the user is not painting abstract pixels, but authoring surface intent that is immediately visible on the product model.
The platform uses a DOM-based layer rendering approach for interactive image layers and synchronizes the result into texture data used by the 3D engine. That architecture is important: it preserves design ergonomics while still delivering physically rendered output.
### 3. AI as a Creative Production Layer
QDesigner treats AI as a first-class production capability rather than a disconnected experiment. The source structure shows a meaningful AI stack integrated directly into the editor workflow.
Current AI capabilities include:
- AI design image generation
- region-based inpainting and redraw
- product-background generation
- product removal from generated scenes
- smart cutout and background removal
- pattern extraction from source artwork
- AI photography studio generation
- multi-provider AI configuration for different deployment realities
The project supports multiple AI access paths, including Gemini-style image generation flows and China-friendly provider routing. This is a practical architectural decision, not a cosmetic one. It makes the system more adaptable across teams, regions, and deployment constraints.
—
## What Makes This Project Distinct
### BabylonJS with Product Design Intent
This is not a generic scene editor. The BabylonJS layer is organized around product presentation, material realism, environment control, and design texture application. Features such as environment intensity, rotation, lighting controls, background gradients, background images, normal-map tooling, and screenshot capture all support a commercial visualization use case.
### A Real Design-Layer System
The project clearly goes beyond simple texture replacement. It includes a structured design editor with mask regions, layer transforms, canvas persistence, alignment guides, multiple design slots, and AI-assisted content generation tied to actual design regions. That moves the product closer to a professional design workstation than a typical web configurator.
### AI Embedded in Workflow, Not Added on Top
The AI modules are connected to scene screenshots, UV masks, selected layers, reference images, and saved generation history. In practical terms, AI is allowed to operate with context. That is the difference between novelty and usable creative infrastructure.
—
## Product Experience Architecture
### Home and Discovery
The home layer introduces templates, feature storytelling, project galleries, resource plazas, and user-owned design spaces. This suggests QDesigner is intended as a platform product, not just a standalone editor page.
### Main 3D Editor
The editor experience combines:
- a central BabylonJS render canvas
- a left navigation and asset area
- a right-side property and AI panel system
- a floating tools bar for transform operations
- dedicated design split view for 2D and 3D working side by side
The layout logic is tuned for a controlled canvas ratio and panel balance, which reinforces the sense that this is meant for serious visual work rather than casual browsing.
### Design Split View
The split mode is a particularly strong product decision. It allows the 2D design editor and the 3D render view to coexist in one working frame. This is where QDesigner becomes more than a renderer: it becomes a surface-authoring environment.
### AI Studio
The AI Studio panel captures the current product from the 3D engine, lets users provide prompt guidance and reference images, and generates styled campaign or e-commerce visuals. This extends the product from design creation into visual marketing output.
That is strategically valuable. It means the same platform can help create the product design and the visual assets used to present it.
—
## Technical Highlights
### Frontend Stack
QDesigner is built with:
- React 18
- TypeScript
- Vite
- Ant Design
- Redux
- Less and modular styling
This stack supports a fast editor-style UI while keeping the system modular enough for feature expansion.
### 3D and Graphics Layer
The graphics stack includes:
- BabylonJS as the main real-time 3D engine
- a custom `RainViewer` editor runtime behind the `Editor3D` facade
- texture and material control pipelines
- environment map handling
- normal map generation and compositing hooks
- post-processing and background management
### Design System Layer
The 2D design system includes:
- UV-oriented design editing
- DOM-based visual layer rendering
- mask-region segmentation
- guide-assisted layer movement
- canvas export and restoration logic
- slot-based design variants for comparing multiple creative directions
### AI Layer
The AI layer includes:
- unified image generation flow
- support for provider switching
- prompt-driven scene generation
- image-to-image and region-aware redraw flows
- local persistence and cloud-connected generation history patterns
—
## High-Value Use Cases
QDesigner is especially well positioned for:
- packaging concept design
- branded surface graphics
- product label and print placement
- consumer goods visualization
- e-commerce hero image creation
- campaign image generation from 3D product assets
- rapid AI-assisted concept iteration
- template-based design operations at scale
In other words, it sits at the intersection of 3D, design, and AI, but with a workflow shape that is commercially useful.
—
## Why the Architecture Matters
Many tools can generate images.
Many tools can preview 3D.
Very few systems connect:
- editable design layers
- UV-aware product surfaces
- BabylonJS-grade real-time rendering
- AI generation with scene and mask context
- reusable templates and variant slots
QDesigner does.
That architectural combination is the real value of the project. It creates a platform where design decisions are not isolated by medium. Graphic intent, material response, scene presentation, and AI-assisted ideation are all part of one runtime.
—
## Positioning Statement
QDesigner is a high-end, AI-native product design platform built on BabylonJS, engineered for teams that need cinematic 3D visualization, precision surface design, and scalable creative acceleration in one environment.
It is not only a design tool.
It is a design layer, a rendering layer, and an AI layer fused into one professional workflow system.
—
## Suggested One-Line Description
**QDesigner is a BabylonJS-powered AI design platform for real-time 3D product visualization, layered UV artwork editing, and next-generation creative production.**