Complete guide to material management in STP Viewer, including material analysis, visualization controls, and mobile-optimized workflows

Material Guide

Overview

STP Viewer's material management system provides comprehensive tools for analyzing, visualizing, and controlling materials in your 3D models. This advanced feature helps you understand material properties, isolate specific components, and optimize your technical analysis workflow.

Material Analysis

Examine color, opacity, and physical properties

Visual Controls

Show, hide, and isolate materials for focused analysis

Mobile Optimized

Touch-friendly interface with responsive design

Search & Filter

Find materials quickly with intelligent search

Accessing Material Panel

Prerequisites

Load a 3D model with multiple materials
Enter fullscreen mode by clicking the fullscreen icon (⛶)
Material panel is only available in fullscreen mode

Desktop Access

Open Material Panel

Click the Material button (🎨) in the fullscreen toolbar

Panel Layout

The material panel opens as an overlay with split-view layout:

Left side: Material list with search
Right side: Detailed material properties

Mobile Access

In fullscreen mode, tap the More button (⋯) in the toolbar

Select Material

Tap Material from the dropdown menu

Full-Screen Panel

Material panel opens as a full-screen overlay optimized for touch interaction

Responsive Design: The interface automatically adapts between desktop dialog and mobile drawer layouts based on your screen size.

Material List Interface

Understanding Material Display

Each material in the list shows:

Visual Indicators

Color Dot: Large circular color preview (6px diameter)
Transparency Badge: Blue dot indicator for transparent materials
Selection Indicator: Blue dot shows currently selected material

Material Information

Material Name: Auto-generated or imported from CAD file
Type Badge: Material type (Phong, Physical, etc.)
Color Code: Hex color value in uppercase
Transparency: Opacity percentage for transparent materials
Usage Count: Number of meshes using this material

Material Types Explained

Type	Description	Properties
Phong	Basic shading model	Color, opacity
Physical	Physically-based rendering	Color, opacity, metalness, roughness

Material Identification: Materials with transparency show both opacity percentage and blue indicator dot for quick identification.

Search and Filtering

Smart Search Features

Real-time filtering: Results update as you type
Case-insensitive: Search works regardless of case
Name-based: Searches through material names
Clear function: One-click search reset

Search Interface

Search icon: Magnifying glass indicator
Clear button: X button appears when typing
Results counter: Shows "X of Y results" during search
Total count: Displays total materials found in model

Material Properties Analysis

Basic Information

When you select a material, the details panel shows:

Core Properties

Name: Material identifier
Type: Shading model type with colored badge
Index: Internal material reference number

Appearance Properties

Color: RGB values with hex code and color swatch
Opacity: Percentage value with transparency indicator
Metalness: Metal-like appearance (Physical materials only)
Roughness: Surface roughness (Physical materials only)

Usage Statistics

Mesh Count: Number of geometric meshes using this material
Usage Badge: Visual indicator showing utilization

Physical vs Phong: Physical materials show additional metalness and roughness properties for realistic rendering.

Material Operations

View Control Functions

Fit to View

Purpose: Automatically frames all meshes using selected material
Usage: Click "Fit to View" button with Focus icon
Result: Camera adjusts to show material geometry optimally

Toggle Visibility

Purpose: Show or hide all meshes with selected material
Usage: Click "Toggle Visibility" button with Eye icon
Result: Material becomes invisible/visible in 3D view

Isolate Material

Purpose: Hide all other materials, show only selected one
Usage: Click "Isolate Material" button with EyeOff icon
Result: Only selected material remains visible for focused analysis

Isolation Mode: When isolating materials, use "Show All" from model tree to restore full visibility.

Mobile-Specific Features

Touch Optimization

Large Touch Targets

Material items: 48px minimum height for easy selection
Action buttons: 44px minimum touch area
Color dots: 24px clickable area
Spacing: Adequate gaps prevent accidental touches

Gesture Support

Tap to select: Single tap selects material
Scroll to browse: Smooth scrolling through material list
Swipe to dismiss: Swipe down to close panel
Pinch to zoom: Color preview supports zoom gestures

Mobile Interface Layout

Drawer Design

Slide-up panel: Emerges from bottom of screen
Handle indicator: Drag handle for easy closure
Auto-sizing: Adapts to screen orientation
Safe areas: Respects device notches and home indicators

Responsive Behavior

Portrait mode: Vertical layout with stacked sections
Landscape mode: Horizontal layout when space allows
Tablet mode: Dialog interface on larger screens
Orientation change: Seamless transition between layouts

Professional Workflows

Material Analysis Workflow

Survey Materials

Open material panel and review all available materials in your model

Identify Key Materials

Use search to find specific materials or materials with certain properties

Analyze Properties

Select each material to examine color, transparency, and physical properties

Visual Inspection

Use isolation and visibility controls to examine each material separately

Document Findings

Take screenshots of isolated materials for documentation or reporting

Quality Control Process

Material Consistency: Check for similar materials that should be unified
Transparency Issues: Identify unwanted transparent materials
Color Accuracy: Verify material colors match design specifications
Usage Analysis: Review which components use specific materials

Advanced Tips

Search Strategies

Color-based naming: Search for "red", "blue", "metal" etc.
Component search: Look for "housing", "bracket", "cover" etc.
Property search: Find "transparent", "chrome", "plastic" etc.

Analysis Techniques

Isolation workflow: Isolate each material systematically
Comparison method: Switch between materials to compare properties
Screenshot documentation: Capture material-specific views
Property verification: Cross-check with CAD specifications

Mobile Best Practices

Landscape orientation: Better for detailed material analysis
Two-handed operation: One hand holds device, other interacts
Adequate lighting: Ensure screen visibility for color accuracy
Stable positioning: Use device stand for extended analysis

Pro Workflow: Use isolation → analysis → screenshot → documentation sequence for systematic material review.

Cause: Model may not have material definitions
Solution: Check original CAD file material assignments
Alternative: Materials may be embedded in mesh geometry

Material Panel Won't Open

Requirement: Must be in fullscreen mode
Solution: Click fullscreen icon (⛶) first, then access materials
Mobile: Use More menu (⋯) to access material panel

Slow Performance with Many Materials

Optimization: Use search to filter materials
Mobile tip: Close other browser tabs to free memory
Large models: Consider simplifying materials in CAD software

Color Display Issues

Color accuracy: Check display color calibration
Transparency: Some materials may appear solid in certain lighting
Browser support: Ensure WebGL 2.0 is properly enabled

Performance Optimization

For Better Performance

Close unused panels: Keep only necessary interfaces open
Limit isolation: Avoid isolating too many materials simultaneously
Use search: Filter materials instead of scrolling through long lists
Mobile memory: Close background apps before material analysis

Integration with Other Features

Measurement Tools

Isolate materials before taking measurements for accuracy
Use material colors to distinguish measurement points
Combine with screenshot for material-specific documentation

View Controls

Use preset views with material isolation for standard documentation
Combine orthographic projection with material analysis for technical drawings
Switch between perspective and orthographic when examining material properties

Export Functions

Materials are preserved in compatible export formats (OBJ+MTL, glTF)
Material properties transfer to supported formats
Use material analysis to verify export accuracy

Ready to master material management in your 3D models? Start by loading a model with multiple materials and exploring the comprehensive material analysis tools!

Material Guide - Advanced Material Management and Visualization

Material Analysis

Visual Controls

Mobile Optimized

Search & Filter

Table of Contents