feat(glass): improve optical quality and controls (#585)

src/components/theme/GlassOpticalLayer.vue

@@ -1,32 +1,113 @@
 <script setup lang="ts">
 import type { ThemeCustomizerGlassAppearance, ThemeCustomizerGlassQuality } from '@/composables/useThemeCustomizer'
-import { useGlassOpticalRenderer } from '@/composables/useGlassOpticalRenderer'
+import {
+  setGlassRendererState,
+  useGlassOpticalInteractionSource,
+  useGlassOpticalRenderer,
+  type GlassRendererState,
+} from '@/composables/useGlassOpticalRenderer'
 
 const props = defineProps<{
   /** 当前玻璃材质，用于选择透明、色调或磨砂的光学参数。 */
   appearance: ThemeCustomizerGlassAppearance
+  /** 用户选择的局部非均匀形变强度。 */
+  deformationStrength: number
+  /** 用户选择的轨迹、尾波与惯性强度。 */
+  flowStrength: number
   /** 当前光学质量；标准档不会挂载该组件。 */
   quality: Exclude<ThemeCustomizerGlassQuality, 'css'>
+  /** 用户选择的亮边、镜面高光与焦散强度。 */
+  reflectionStrength: number
+  /** 用户选择的真实壁纸可见度。 */
+  transparencyStrength: number
+  /** 用户选择的共享壁纸采样平移强度。 */
+  translationStrength: number
   /** 路由变化标识，用于在页面内容稳定后重新发现高价值表面。 */
   routeKey: string
   /** 当前主题主色，用于同步色调材质的光学高光。 */
   tintColor: string
+  /** 外层壁纸交叉淡化的时长，shader 使用同一时钟混合双纹理。 */
+  transitionDuration: number
+  /** 外层壁纸交叉淡化的 performance timeline 起点。 */
+  transitionStartedAt: number
   /** 与 CSS 背景保持一致的活动壁纸。 */
   wallpaperUrl: string
+  /** 切换期保留的上一张壁纸；空值表示当前没有交叉淡化。 */
+  previousWallpaperUrl: string
 }>()
 
-const canvas = ref<HTMLCanvasElement | null>(null)
-const { state } = useGlassOpticalRenderer({
+const fixedCanvas = ref<HTMLCanvasElement | null>(null)
+const scrollCanvas = ref<HTMLCanvasElement | null>(null)
+const interactionSource = useGlassOpticalInteractionSource()
+const fixedRenderer = useGlassOpticalRenderer({
   active: true,
   appearance: () => props.appearance,
-  canvas,
+  canvas: fixedCanvas,
+  deformationStrength: () => props.deformationStrength,
+  flowStrength: () => props.flowStrength,
+  interactionSource,
   quality: () => props.quality,
+  reflectionStrength: () => props.reflectionStrength,
+  transparencyStrength: () => props.transparencyStrength,
+  translationStrength: () => props.translationStrength,
   routeKey: () => props.routeKey,
   tintColor: () => props.tintColor,
+  transitionDuration: () => props.transitionDuration,
+  transitionStartedAt: () => props.transitionStartedAt,
   wallpaperUrl: () => props.wallpaperUrl,
+  previousWallpaperUrl: () => props.previousWallpaperUrl,
+  surfaceSpace: 'fixed',
+  syncDocumentState: false,
+})
+const scrollRenderer = useGlassOpticalRenderer({
+  active: true,
+  appearance: () => props.appearance,
+  canvas: scrollCanvas,
+  deformationStrength: () => props.deformationStrength,
+  flowStrength: () => props.flowStrength,
+  interactionSource,
+  quality: () => props.quality,
+  reflectionStrength: () => props.reflectionStrength,
+  transparencyStrength: () => props.transparencyStrength,
+  translationStrength: () => props.translationStrength,
+  routeKey: () => props.routeKey,
+  tintColor: () => props.tintColor,
+  transitionDuration: () => props.transitionDuration,
+  transitionStartedAt: () => props.transitionStartedAt,
+  wallpaperUrl: () => props.wallpaperUrl,
+  previousWallpaperUrl: () => props.previousWallpaperUrl,
+  surfaceSpace: 'scroll',
+  syncDocumentState: false,
+})
+
+const rendererState = ref<GlassRendererState>('loading')
+
+/** 两个呈现 context 作为同一材质能力接管 CSS，避免部分就绪时出现混合材质。 */
+watchEffect(() => {
+  const states = [fixedRenderer.state.value, scrollRenderer.state.value]
+  const state: GlassRendererState = states.every(value => value === 'ready')
+    ? 'ready'
+    : states.some(value => value === 'loading')
+      ? 'loading'
+      : 'fallback'
+
+  setGlassRendererState(rendererState, state)
 })
 </script>
 
 <template>
-  <canvas ref="canvas" class="glass-optical-layer" aria-hidden="true" :data-state="state" />
+  <canvas
+    ref="fixedCanvas"
+    class="glass-optical-layer glass-optical-layer--fixed"
+    aria-hidden="true"
+    data-presentation-space="fixed"
+    :data-state="fixedRenderer.state.value"
+  />
+  <canvas
+    ref="scrollCanvas"
+    class="glass-optical-layer glass-optical-layer--scroll"
+    aria-hidden="true"
+    data-presentation-space="scroll"
+    :data-state="scrollRenderer.state.value"
+  />
 </template>

src/components/theme/ThemeCustomizer.vue

@@ -12,6 +12,7 @@ import {
 import { usePWA } from '@/composables/usePWA'
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
+import { GLASS_OPTICAL_STRENGTH_DEFAULT } from '@/utils/glassOptics'
 
 const emit = defineEmits<{
   'close': []
@@ -140,7 +141,12 @@ const hasAppModeCustomization = computed(() => {
   return (
     settings.value.primaryColor !== defaultPrimaryColor ||
     settings.value.glassAppearance !== 'clear' ||
+    settings.value.glassDeformationStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassFlowStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.glassQuality !== 'css' ||
+    settings.value.glassReflectionStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassTranslationStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
+    settings.value.glassTransparencyStrength !== GLASS_OPTICAL_STRENGTH_DEFAULT ||
     settings.value.radius !== 'default' ||
     settings.value.shadow !== '0' ||
     settings.value.skin !== 'default' ||

src/components/theme/__tests__/GlassOpticalLayer.spec.ts

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import GlassOpticalLayer from '@/components/theme/GlassOpticalLayer.vue'
+
+const rendererCalls = vi.hoisted(() => [] as Array<Record<string, unknown>>)
+const interactionSource = vi.hoisted(() => ({ subscribe: vi.fn() }))
+
+vi.mock('@/composables/useGlassOpticalRenderer', () => ({
+  setGlassRendererState: vi.fn((state: { value: string }, value: string) => {
+    state.value = value
+  }),
+  useGlassOpticalInteractionSource: vi.fn(() => interactionSource),
+  useGlassOpticalRenderer: vi.fn((options: Record<string, unknown>) => {
+    rendererCalls.push(options)
+
+    return {
+      renderedFrames: ref(0),
+      state: ref('ready'),
+    }
+  }),
+}))
+
+describe('GlassOpticalLayer', () => {
+  it('uses exactly two visible presentation contexts with one interaction source', () => {
+    rendererCalls.length = 0
+    const wrapper = shallowMount(GlassOpticalLayer, {
+      props: {
+        appearance: 'clear',
+        deformationStrength: 50,
+        flowStrength: 50,
+        previousWallpaperUrl: '',
+        quality: 'balanced',
+        reflectionStrength: 50,
+        routeKey: '/dashboard',
+        tintColor: '#8D51F9',
+        transitionDuration: 1500,
+        transitionStartedAt: 0,
+        translationStrength: 50,
+        transparencyStrength: 50,
+        wallpaperUrl: '/wallpaper.jpg',
+      },
+    })
+
+    const canvases = wrapper.findAll('canvas')
+    expect(canvases).toHaveLength(2)
+    expect(canvases.map(canvas => canvas.attributes('data-presentation-space'))).toEqual(['fixed', 'scroll'])
+    expect(rendererCalls.map(options => options.surfaceSpace)).toEqual(['fixed', 'scroll'])
+    expect(rendererCalls.every(options => options.interactionSource === interactionSource)).toBe(true)
+    expect(rendererCalls.every(options => options.syncDocumentState === false)).toBe(true)
+  })
+})