topfans/frontend/composables/useHolographicPreview.js

/**
 * 全息镭射卡预览组合式函数
 *
 * 集成 WebGL HolographicEngine + 触摸交互
 * simulate(x, y) 是唯一驱动入口
 */
import { ref, reactive } from 'vue'

function clamp(v, min, max) { return Math.max(min, Math.min(max, v)) }
function lerp(a, b, t) { return a + (b - a) * t }

export function useHolographicPreview() {
  const physics = reactive({
    tiltSensitivity: 72,
    transitionSmoothness: 66,
    angleStability: 88,
    sensorDeadzoneStrength: 1,
    gyroSimEnabled: true,
  })
  const viewAngle = reactive({ x: 0, y: 0, z: 0 })
  const isWebGLReady = ref(false)
  const hasWebGLError = ref(false)
  const fps = ref(0)

  function simulate(x, y) {
    viewAngle.x = clamp(x, -1, 1)
    viewAngle.y = clamp(y != null ? y : 0, -1, 1)
    viewAngle.z = Math.sqrt(viewAngle.x * viewAngle.x + viewAngle.y * viewAngle.y) * 0.5
  }

  function relax(factor = 0.85) {
    viewAngle.x *= factor
    viewAngle.y *= factor
    viewAngle.z *= factor
  }

  function onWebGLReady() { isWebGLReady.value = true; hasWebGLError.value = false }
  function onWebGLError() { hasWebGLError.value = true; isWebGLReady.value = false }
  function onFPSUpdate(v) { fps.value = v }

  return {
    physics, viewAngle,
    isWebGLReady, hasWebGLError, fps,
    simulate, relax,
    onWebGLReady, onWebGLError, onFPSUpdate,
  }
}

export function detectPerformanceTier() {
  const mem = navigator.deviceMemory || 4
  const cores = navigator.hardwareConcurrency || 4
  if (mem <= 2 || cores <= 2) return 'low'
  if (mem <= 4 || cores <= 4) return 'mid'
  return 'high'
}

export const HOLO_PERFORMANCE_PRESETS = {
  high: {
    effectIntensity: 0.85, dispersionStrength: 1.0, diffractionScale: 0.7,
    highlightSpeed: 0.8, highlightWidth: 1.0, fresnelPower: 3.5,
    noiseScale: 1.0, noiseOctaves: 6,
    safeZoneRadius: 0.35, safeZoneSoftness: 0.15,
  },
  mid: {
    effectIntensity: 0.75, dispersionStrength: 0.8, diffractionScale: 0.55,
    highlightSpeed: 0.7, highlightWidth: 1.1, fresnelPower: 3.0,
    noiseScale: 0.8, noiseOctaves: 4,
    safeZoneRadius: 0.35, safeZoneSoftness: 0.15,
  },
  low: {
    effectIntensity: 0.6, dispersionStrength: 0.5, diffractionScale: 0.35,
    highlightSpeed: 0.5, highlightWidth: 1.3, fresnelPower: 2.5,
    noiseScale: 0.55, noiseOctaves: 3,
    safeZoneRadius: 0.38, safeZoneSoftness: 0.18,
  },
}