Rendering & Graphics

// From src/utils/rendering/RendererFactory.ts
import { createRenderer, isWebGPURenderer, getRendererBackend } from '@hyperscape/shared';

// Create renderer (WebGPU preferred, WebGL fallback)
const renderer = await createRenderer({
  antialias: true,
  powerPreference: "high-performance",
});

// Check active backend
const isWebGPU = isWebGPURenderer(renderer);  // true or false
const backend = getRendererBackend(renderer); // "webgpu" or "webgl"

// Check if WebGPU is available
const supportsWebGPU = await isWebGPUAvailable();

if (supportsWebGPU) {
  // Try WebGPU first
  return await create(false);
} else {
  // Fall back to WebGL
  return await create(true);
}

// From src/systems/shared/world/Environment.ts
private readonly DAY_EXPOSURE = 0.85;   // Standard daylight
private readonly NIGHT_EXPOSURE = 1.7;  // Boosted for night visibility
private currentExposure: number = 0.85; // Smoothed current value

private updateAutoExposure(dayIntensity: number): void {
  // Calculate target exposure: lerp from night (high) to day (low)
  const t = dayIntensity * dayIntensity * (3 - 2 * dayIntensity); // smoothstep
  const targetExposure = 
    this.NIGHT_EXPOSURE + (this.DAY_EXPOSURE - this.NIGHT_EXPOSURE) * t;

  // Smooth interpolation to prevent jarring changes
  this.currentExposure += (targetExposure - this.currentExposure) * 0.03;

  // Apply to renderer
  graphics.renderer.toneMappingExposure = this.currentExposure;
}

// Night ambient colors (brighter for visibility)
this.ambientLight.color.setRGB(
  0.5 + dayIntensity * 0.5,   // R: 0.5 at night, 1.0 at day
  0.55 + dayIntensity * 0.4,  // G: 0.55 at night, 0.95 at day
  0.7 + dayIntensity * 0.25,  // B: 0.7 at night, 0.95 at day (bluer at night)
);

// From src/systems/shared/world/Environment.ts
this.csmShadowNode = new CSMShadowNode(this.sunLight, {
  cascades: csmConfig.cascades,        // 3 cascades
  maxFar: csmConfig.maxFar,            // 400 units
  shadowMapSize: csmConfig.shadowMapSize, // 2048×2048
  shadowBias: csmConfig.shadowBias,
  shadowNormalBias: csmConfig.shadowNormalBias,
});

// WebGL fallback: single directional light shadows (no cascades)
if (!useWebGPU) {
  this.csmShadowNode = null;
  const baseFrustumSize = Math.min(250, csmConfig.maxFar);
  shadowCam.left = -baseFrustumSize;
  shadowCam.right = baseFrustumSize;
  shadowCam.top = baseFrustumSize;
  shadowCam.bottom = -baseFrustumSize;
}

// From src/systems/client/ClientGraphics.ts
this.usePostprocessing = 
  (this.world.prefs?.postprocessing ?? true) && this.isWebGPU;

if (this.usePostprocessing && isWebGPURenderer(this.renderer)) {
  // Create post-processing composer with TSL effects
  this.composer = createPostProcessingComposer(this.renderer, {
    colorGradingLut,
    colorGradingIntensity,
    bloomEnabled,
    bloomIntensity,
  });
}

import { createRenderer, configureRenderer, configureShadowMaps } from '@hyperscape/shared';

// Create renderer
const renderer = await createRenderer({
  antialias: true,
  alpha: false,
  powerPreference: "high-performance",
  canvas: document.getElementById('game-canvas'),
});

// Configure renderer
configureRenderer(renderer, {
  toneMapping: THREE.ACESFilmicToneMapping,
  toneMappingExposure: 0.85,
  outputColorSpace: THREE.SRGBColorSpace,
  pixelRatio: window.devicePixelRatio,
});

// Configure shadow maps
configureShadowMaps(renderer, {
  enabled: true,
  type: THREE.PCFSoftShadowMap,
});

import { getWebGPUCapabilities, getMaxAnisotropy } from '@hyperscape/shared';

// Get WebGPU features
const caps = getWebGPUCapabilities(renderer);
console.log("Backend:", caps.backend);        // "webgpu" or "webgl"
console.log("Features:", caps.features);      // WebGPU feature list

// Get max anisotropy
const maxAniso = getMaxAnisotropy(renderer);  // 16 for WebGPU, varies for WebGL

// Enabled depth testing on clouds
cloudMaterial.depthTest = true;
cloudMaterial.depthWrite = false;

// Day fog: warm beige
private readonly dayFogColor = new THREE.Color(0xd4c8b8);

// Night fog: dark blue
private readonly nightFogColor = new THREE.Color(0x1a1f2e);

// Lerp between day and night
this.updateFogColor(dayIntensity);

// From world preferences
const shadowsLevel = this.world.prefs?.shadows || "med";
const csmConfig = csmLevels[shadowsLevel];

this.usePostprocessing = this.world.prefs?.postprocessing ?? true;