Forge Viewer低/中/高画质分级设置API实现技术问询

Hey there, let's walk through how to build this quality tier system for your 3D viewer—this is a smart move to make your app accessible across all kinds of hardware. Here's a practical breakdown based on common industry practices:

First, you'll want to map core viewer settings to each tier, focusing on the most impactful performance factors. Here's a tested configuration:

• Low Quality (Absolute Minimum Config)
  This is for entry-level hardware that struggles with basic 3D rendering:

  • Polygon count: Force LOD (Level of Detail) to load the lowest-poly models, set maxPolyCount: 10000
  • Textures: Cap resolution at 256x256, disable all non-essential texture optimizations
  • Shadows: Fully disable with shadowEnabled: false
  • Anti-aliasing: Turn off entirely (antiAliasing: false)
  • Post-processing: Disable AO (Ambient Occlusion), bloom, and other effects (postProcessingEnabled: false)
  • Frame rate: Lock to 30fps to prevent hardware overload (frameRateCap: 30)

• Medium Quality (Balanced Performance & Experience)
  The sweet spot for most mid-range devices:

  • Polygon count: Enable LOD, allow up to maxPolyCount: 50000
  • Textures: Cap at 512x512, enable basic texture compression
  • Shadows: Enable soft shadows with reduced resolution (shadowResolution: 512) and halved draw distance (shadowDistance: 10)
  • Anti-aliasing: Use lightweight FXAA (antiAliasing: 'FXAA')
  • Post-processing: Enable low-intensity AO (aoEnabled: true, aoIntensity: 0.5), disable bloom
  • Frame rate: Lock to 60fps or let it adapt (frameRateCap: 60)

• High Quality (Flagship Hardware Experience)
  For top-tier GPUs where performance isn't a concern:

  • Polygon count: Disable LOD, load full-poly models (maxPolyCount: Infinity)
  • Textures: Allow 2048x2048+ resolution, enable advanced texture compression
  • Shadows: Enable 4K hard shadows (shadowResolution: 4096) with full draw distance (shadowDistance: 20)
  • Anti-aliasing: Use high-quality TAA (antiAliasing: 'TAA')
  • Post-processing: Enable full-intensity AO, bloom, volumetric lighting, etc. (postProcessingEnabled: true)
  • Frame rate: Uncapped for maximum smoothness (frameRateCap: 0)

Next, tie your dropdown UI to the viewer's API. Here's a straightforward example using vanilla JS:

HTML Dropdown #

<select id="qualitySelector">
  <option value="low">Low Quality (Minimum Config)</option>
  <option value="medium" selected>Medium Quality (Balanced)</option>
  <option value="high">High Quality (Best Experience)</option>
</select>

JavaScript Logic #

// Predefined tier configurations
const qualityConfigs = {
  low: {
    maxPolyCount: 10000,
    textureResolution: 256,
    shadowEnabled: false,
    antiAliasing: false,
    postProcessingEnabled: false,
    frameRateCap: 30
  },
  medium: {
    maxPolyCount: 50000,
    textureResolution: 512,
    shadowEnabled: true,
    shadowResolution: 512,
    antiAliasing: 'FXAA',
    aoEnabled: true,
    aoIntensity: 0.5,
    frameRateCap: 60
  },
  high: {
    maxPolyCount: Infinity,
    textureResolution: 2048,
    shadowEnabled: true,
    shadowResolution: 4096,
    antiAliasing: 'TAA',
    postProcessingEnabled: true,
    frameRateCap: 0
  }
};

// Get dropdown element
const qualitySelector = document.getElementById('qualitySelector');

// Handle tier change
qualitySelector.addEventListener('change', (e) => {
  const selectedTier = e.target.value;
  const config = qualityConfigs[selectedTier];
  
  // Apply config to viewer via API
  if (window.viewer) {
    // If your viewer has a bulk config method
    window.viewer.setQualityConfig(config);
    
    // If not, set each parameter individually
    // window.viewer.setMaxPolyCount(config.maxPolyCount);
    // window.viewer.setTextureResolution(config.textureResolution);
    // ... repeat for all settings
  }
});

// Apply default config on load
window.addEventListener('load', () => {
  if (window.viewer) {
    window.viewer.setQualityConfig(qualityConfigs.medium);
  }
});

To ensure your low tier works reliably, define clear hardware thresholds:

• Target devices: Entry-level integrated GPUs (e.g., Intel UHD 610), old discrete GPUs (e.g., NVIDIA GT 710), low-end mobile devices
• Core performance metric: Stable 30fps or higher with no crashes or severe lag
• Pro tip: Add an auto-detection feature to recommend the right tier on first load:

// Simple GPU performance detection (uses WebGL)
async function detectRecommendedQuality() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl');
  if (!gl) return 'low';
  
  const rendererInfo = gl.getExtension('WEBGL_debug_renderer_info');
  if (!rendererInfo) return 'medium';
  
  const rendererName = gl.getParameter(rendererInfo.UNMASKED_RENDERER_WEBGL);
  
  // Adjust these checks based on your target hardware
  if (rendererName.includes('UHD 610') || rendererName.includes('GT 710')) {
    return 'low';
  } else if (rendererName.includes('GTX 1050') || rendererName.includes('RX 560')) {
    return 'medium';
  } else {
    return 'high';
  }
}

// Auto-set recommended tier on load
window.addEventListener('load', async () => {
  const recommendedTier = await detectRecommendedQuality();
  qualitySelector.value = recommendedTier;
  window.viewer.setQualityConfig(qualityConfigs[recommendedTier]);
});

内容的提问来源于stack exchange，提问作者Torbjorn