Shoes & Bags AR Try-On — User Guide

This guide covers all tools available to clients and internal users managing 3D products on the WEARFITS platform at dev.wearfits.com. It covers asset upload and conversion, object administration, the general 3D editor, and the shoe and accessory try-on editors.

1. 3D Converter (`/upload`)

The 3D Converter is the primary entry point for digitizing physical products into web-ready 3D assets.

Supported File Formats

Format	Notes
`.glb`	Binary GLTF — preferred format
`.gltf`	Text-based GLTF
`.obj`	Wavefront OBJ
`.stl`	Stereolithography mesh
`.zip`	Archive containing OBJ + MTL + texture files

Batch processing is supported: multiple files or archives can be dropped simultaneously and will be processed in parallel.

Shoe Try-On Toggle

Enable the "Use as shoe for tryon" checkbox before uploading to automatically trigger the shoe alignment (autofit) pipeline during conversion. This eliminates a separate manual fitting step for footwear products.

Conversion Pipeline Stages

Stage	Description
Preprocessing	Validates meshes and textures
Building	Generates optimized GLB and USDZ formats
Postprocessing	Applies default scene properties and creates thumbnails
Uploading	Finalizes assets in cloud storage

Controls

Abort — Permanently deletes the task and any partially processed data. Use with caution; this action cannot be undone.
Retry — Restarts the failed stage. This button is only shown when a stage has errored.

2. Object Administration (`/object/:id`)

The Object Admin page is the central management hub for a single 3D asset.

Key Actions

Action	Description
Preview	Interactively view the model in a 3D window
Edit	Launches the General 3D Editor
Configure Try-on	Launches the shoe or accessory try-on editor depending on asset type
Export	Downloads the asset in GLTF format
Enhancement	Requests manual 3D model optimization by the WEARFITS team
Delete	Permanently removes the object from the library

Link Management

Each object exposes several shareable links and codes for distribution and testing:

Link Type	Purpose
Admin Link	Private link for permanent access to this admin page
Public 3D Link	Embeddable URL for placing the 3D viewer on external websites
Public AR/Tryon Links	Direct links for testing the AR experience in a mobile browser
QR Codes	Instant access to AR/Tryon experiences via smartphone cameras

3. General 3D Editor (`/editor` & `/viewer`)

The General 3D Editor provides deep asset customization through a tabbed interface. All changes are non-destructive until explicitly saved or exported.

Material Tab

Controls the visual surface properties of the selected mesh.

Attributes: Base color, emissive color, roughness, and metalness values.
Texture Maps: Assign and manage maps for the following channels:

Map Type	Purpose
Color	Diffuse/albedo surface color
Normal	Surface detail and micro-geometry
Roughness	Controls light scattering across the surface
Metalness	Defines metallic vs. dielectric surface response
Emissive	Self-illumination areas
AO (Ambient Occlusion)	Pre-baked shadow detail in crevices
Alpha	Transparency mask
Displacement	Geometric offset for high-detail surfaces

Mapping Controls: Adjust texture offset, scale, and rotation.
Side Rendering: Choose Front, Back, or Double Sided rendering.
Presets: Load material settings from a built-in library (e.g., Fabric, Leather, Plastic).

Mesh Tab

Controls the geometry and transform of the selected object.

Transform: Edit Position, Rotation, and Scale across X, Y, and Z axes.
Simplification: Decimate geometry to reduce triangle count, improving mobile performance.
Replace Mesh: Swap the 3D geometry while preserving existing material definitions.
Metadata: View triangle count, dimensions (in cm), and file size.

Presets Tab

Save as Preset: Saves the current material configuration to the global shared library.
Material Sets: Manage multiple visual variants (colorways, materials) for the same object, enabling color/material switches without duplicating assets.

Scene Tab

Lighting Themes: Select from preconfigured lighting setups (e.g., Default, RL9).
IBL Environment Maps: Choose an Image Based Lighting environment for realistic reflections.
Postprocessing Effects:

Effect	Description
Bloom	Adds a glow to bright areas
Vignette	Darkens screen edges for focus
Bokeh	Simulates depth-of-field blur

Background: Change background color or toggle full transparency.

Camera Tab

Control Type: Switch between Orbit (standard turntable) and Mouse Position (parallax) modes.
Constraints: Set limits for zoom distance, vertical and horizontal rotation range, and panning boundaries.
FOV: Adjust the Field of View to control perspective distortion.

Tools Tab

Tool	Description
Normal Fix	Recomputes vertex/face normals to resolve lighting artifacts
UV Viewer	Displays UV maps; supports Box projection unwrapping
Baking	Computes Ambient Occlusion maps or bakes full scene lighting into textures
Export	Exports the asset as ZIP, OBJ, DRC (Draco compressed), or GLTF

Warnings Tab

Issues List: Real-time list of detected problems, such as missing textures or excessive triangle counts.
Texture Filter: Identifies oversized textures and provides controls to downscale them for optimization.

AR Tab

Configures how the asset behaves when viewed through the AR experience.

Asset Type: Declare the object category — Shoe, Handbag, Accessory, or others — which determines which try-on pipeline is used.
Wall Placement: Toggle for items intended for vertical surfaces (e.g., wall art, mirrors).
Custom Banners: Configure pop-up overlays shown in AR, including:
Title
Descriptive text
Shop/product links

Fitting Room Tab (Garments Only)

Available only for garment-type assets.

Measurement Matrix: Detailed table mapping garment sizes to body measurements.
Avatar Setup: Configure gender toggle and height/chest limits for the virtual fit test.

Image Tab

Global Filters: Apply non-destructive color grading across the entire scene:
Brightness
Contrast
Saturation
White Balance

4. Tryon Editor: Shoes (`/tryon/editor`)

The Shoe Tryon Editor is used to align shoe models precisely to the virtual foot template so the try-on experience looks natural on a user's feet.

Feature	Description
Auto Position	Uses machine learning to find the optimal alignment automatically
Occluder Creation	Generates a dynamic mask so the user's leg appears naturally behind the shoe collar
Mirroring	Configure one shoe (e.g., left foot) and mirror the result to the opposite foot
Transparency Sliders	Adjust the visibility of the template foot (anatomical reference) to verify fit inside the 3D shoe

Recommended workflow: Run Auto Position first, then use the transparency sliders to verify the fit, make manual adjustments with the transform tools if needed, and apply Mirroring last.

5. Tryon Editor: Accessories (`/tryon/accessory-editor`)

The Accessory Tryon Editor is used to position items such as handbags, backpacks, and wrist accessories relative to the user's body.

Feature	Description
Object Pin	Defines the attachment point on the 3D model (e.g., top of a bag strap)
User Pin	Selects the body attachment target: `Left Hand`, `Right Hand`, or `Auto Hands`
Height Scaling	Tests how the accessory scales proportionally across a user height range of 100 cm to 210 cm

Keyboard Shortcuts

The following shortcuts are available in both the General 3D Editor and the Tryon Editors.

Key	Action
`G`	Grab / Move. Follow with `X`, `Y`, or `Z` to constrain to an axis.
`R`	Rotate. Follow with `X`, `Y`, or `Z` to constrain to an axis.
`S`	Scale. Follow with `X`, `Y`, or `Z` to constrain to an axis.
`7`	Switch to Z-axis camera view
`8`	Switch to X-axis camera view
`9`	Switch to Y-axis camera view
`Escape`	Cancel the current transformation