Render Settings Guide

Overview

STP Viewer's render settings provide professional-level control over 3D model visualization. These advanced features are available in fullscreen mode and offer precise control over edge display, background appearance, and environment lighting.

Accessing Render Settings

Desktop Access

Mobile Access

Edge Settings

Overview

Edge settings control the display of wireframe edges on your 3D model, helping to visualize the geometric structure and improve technical analysis.

Key Features

Edge Display Toggle

• Function: Enable or disable edge line display across the entire model
• Desktop Operation: Click the switch next to "Show Edges"
• Mobile Operation: Tap the toggle switch in the Edge Settings section
• Performance Impact: Disabling edges improves rendering performance on complex models

Edge Color Customization

Choose from multiple color options for optimal contrast and visibility:

Preset Colors (6 options):

• Dark Gray (Default): Professional appearance, good contrast
• Black: Maximum contrast on light backgrounds
• Red: High visibility for presentations
• Blue: Technical documentation standard
• Green: Alternative highlight color
• Orange: High-contrast option

Custom Color Selection:

• Desktop: Click the color picker or enter hex values manually
• Mobile: Tap the color square to open the system color picker
• Real-time Preview: Changes apply immediately to the model

Edge Threshold Control

Fine-tune which edges are displayed based on angle detection:

• Range: 1° to 180° (degrees between adjacent faces)
• Low Values (1-30°): Show only sharp edges and corners
• Medium Values (30-90°): Balanced edge display for most models
• High Values (90-180°): Display nearly all edges (wireframe effect)

Operation Methods:

• Desktop: Drag the slider or click specific positions
• Mobile: Touch and slide the control, value updates in real-time
• Visual Feedback: Edge display changes immediately as you adjust

Background Settings

Overview

Background settings control the appearance of the 3D scene behind your model, affecting both visual aesthetics and technical clarity.

Color Selection

Interactive Color Picker

• RGBA Support: Full color control including transparency
• Desktop: Advanced color picker with RGB values and transparency slider
• Mobile: System-native color picker optimized for touch
• Hex Input: Manual entry for precise color specification

Preset Backgrounds (6 options)

Quick-select professional background options:

Transparency Control

• Range: 0% (fully transparent) to 100% (fully opaque)
• Use Cases:
  • Transparent backgrounds for documentation overlays
  • Semi-transparent for watermark effects
  • Opaque for standard viewing

Background Best Practices

For Technical Documentation:

• Use White or Light Gray for clean, professional appearance
• Avoid transparent backgrounds unless specifically needed
• Consider contrast with model colors

For Presentations:

• Dark Gray or Black for dramatic effect
• High contrast backgrounds highlight model details
• Test visibility under projection conditions

For Analysis Work:

• Gray provides neutral reference for color accuracy
• Avoid high-contrast backgrounds that may cause eye strain
• Use consistent backgrounds across model comparisons

Environment Maps

Overview

Environment maps provide realistic lighting and reflection effects, simulating how your 3D model would appear in different real-world environments.

Available Environment Maps

Professional Preset Environments (7 options)

1. None (Default)

• No environment mapping applied
• Fastest rendering performance
• Basic directional lighting only

2. Citadella

• Urban environment with warm lighting
• Good for architectural models
• Balanced indoor/outdoor lighting

3. Fisherman's Bastion

• Historic architecture environment
• Soft, diffused lighting
• Excellent for detailed models

4. Ice River

• Cool, crisp lighting environment
• High contrast reflections
• Ideal for metallic materials

5. Maskonaive

• Neutral outdoor lighting
• Balanced color temperature
• Versatile for most model types

6. Park

• Natural outdoor environment
• Warm, sunny lighting
• Great for organic shapes

7. Teide

• Mountain landscape environment
• Dramatic lighting contrasts
• Excellent for presentation renders

Environment Map Controls

Map Selection

• Desktop: Click thumbnail images to select environment
• Mobile: Tap environment thumbnails in 2-column grid layout
• Loading Indicator: Visual feedback during environment loading
• Preview: Changes apply immediately upon selection

Background Application

• Toggle Option: "Use as Background"
• When Enabled: Environment becomes visible scene background
• When Disabled: Environment provides lighting only (transparent background)
• Performance: Background mode may impact rendering speed

Environment Map Best Practices

For Material Analysis:

• Use Park or Maskonaive for accurate color representation
• Enable background for realistic material appearance
• Test multiple environments to understand material properties

For Presentations:

• Teide or Ice River for dramatic lighting effects
• Consider audience and projection conditions
• Use background application for immersive effect

For Technical Work:

• None or Fisherman's Bastion for neutral lighting
• Disable background for focus on geometry
• Consistent environment for comparison work

Platform-Specific Operations

Desktop Interface

Panel Layout

┌─────────────────────────────────────┐
│  Render Settings           [Close]  │
├─────────────────────────────────────┤
│ ▼ Edge Settings                     │
│   ┌─ Show Edges ────────── [●]     │
│   ├─ Edge Color ─── [■] #263238    │
│   └─ Threshold ──── [====●] 45°    │
│                                     │
│ ▼ Background Settings               │
│   ├─ Color Picker ─ [████] RGBA    │
│   └─ Presets ─ [□][□][□][□][□][□]    │
│                                     │
│ ▼ Environment Maps                  │
│   ├─ Map Grid ─ [🏰][🌊][❄️][🏔️]     │
│   └─ Use as Background ──── [○]     │
└─────────────────────────────────────┘

Mouse Operations

• Single Click: Select options, toggle switches
• Click and Drag: Adjust sliders (threshold, transparency)
• Hover: View tooltips and descriptions
• Scroll: Navigate through long sections if needed

Mobile Interface

Sheet Panel Layout

┌──────────────────────────────────────┐
│        Render Settings        [×]    │
├──────────────────────────────────────┤
│                                      │
│ ▼ Edge Settings                      │
│   ┌─ Show Edges ──────────── [●]    │
│   ├─ Edge Color ── [■] #263238      │
│   └─ Threshold ─── [====●] 45°      │
│                                      │
│ ▼ Background Settings                │
│   ├─ Color Picker ─ [████] RGBA     │
│   └─ Presets ── [□][□][□]           │
│                  [□][□][□]           │
│                                      │
│ ▼ Environment Maps                   │
│   ├─ Map Grid ──── [🏰][🌊]          │
│   │                [❄️][🏔️]          │
│   └─ Use as Background ──── [○]      │
│                                      │
└──────────────────────────────────────┘

Touch Operations

• Single Tap: Select options, toggle switches
• Touch and Slide: Adjust sliders smoothly
• Long Press: Access additional options (where available)
• Swipe Down: Close the settings panel
• Pinch: Zoom thumbnails (environment maps)

Cross-Platform Features

Responsive Design

• Automatic Adaptation: Interface adjusts to screen size automatically
• Touch Optimization: All controls sized for comfortable touch interaction (44px minimum)
• Keyboard Support: Full keyboard navigation on desktop
• Accessibility: Screen reader support and proper focus management

Consistent Behavior

• Real-time Updates: All changes apply immediately across platforms
• State Persistence: Settings maintained during session
• Performance Optimization: Efficient rendering on all device types

Advanced Usage

Combining Settings for Specific Use Cases

Technical Documentation

Recommended Settings:
- Edge Settings: ON, Dark Gray, 15-30° threshold
- Background: White or Light Gray
- Environment: None (for neutral lighting)

Presentation Mode

Recommended Settings:
- Edge Settings: OFF (clean appearance)
- Background: Black or Dark Gray
- Environment: Teide or Ice River (dramatic lighting)

Material Analysis

Recommended Settings:
- Edge Settings: ON, Low contrast color
- Background: Neutral Gray
- Environment: Park or Maskonaive (natural lighting)

3D Printing Preparation

Recommended Settings:
- Edge Settings: ON, High contrast, 10-20° threshold
- Background: White (clean contrast)
- Environment: None (accurate geometry visualization)

Performance Optimization

For Large Models (>50MB)

• Disable edge display to improve frame rate
• Use simple backgrounds (solid colors)
• Avoid complex environment maps
• Consider reducing model complexity in CAD software

For Mobile Devices

• Use preset colors instead of custom selections
• Enable fewer settings simultaneously
• Monitor device temperature during extended use
• Close other applications to free memory

Troubleshooting

Common Issues

Settings Not Applying

1. Check Model Loading: Ensure 3D model is fully loaded before adjusting settings
2. Viewer Instance: Verify you're in fullscreen mode with active viewer
3. Browser Support: Confirm WebGL 2.0 support for advanced rendering features

Performance Issues

1. Reduce Edge Complexity: Lower edge threshold or disable edge display
2. Simplify Environment: Use "None" environment map for better performance
3. Background Optimization: Use solid colors instead of complex backgrounds

Color Display Problems

1. Monitor Calibration: Check display color accuracy
2. Browser Zoom: Reset browser zoom to 100%
3. Graphics Drivers: Ensure graphics drivers are up to date

Mobile-Specific Issues

1. Touch Responsiveness: Clean screen surface for accurate touch detection
2. Memory Management: Close background apps to free device memory
3. Screen Orientation: Landscape mode provides more control space

Getting Help

If you encounter persistent issues with render settings:

1. Check System Requirements: Verify WebGL 2.0 support in your browser
2. Clear Browser Data: Clear cache and cookies, then reload
3. Update Browser: Ensure you're using the latest browser version
4. Contact Support: Email [email protected] with device details

Best Practices

Professional Workflow

1. Start Simple: Begin with default settings for initial model review
2. Adjust Gradually: Make one setting change at a time to understand impact
3. Document Settings: Note effective combinations for similar models
4. Test Performance: Verify smooth operation before detailed analysis

Quality Control

• Consistent Lighting: Use the same environment map for model comparisons
• Standard Views: Combine with preset camera angles for systematic analysis
• Screenshot Documentation: Capture important views with optimal settings

Team Collaboration

• Standardize Settings: Establish team conventions for different use cases
• Share Configurations: Document successful setting combinations
• Training: Ensure team members understand render setting impacts

Ready to enhance your 3D model visualization with professional render settings? Access the fullscreen mode and start exploring these powerful customization options!