HCF LAB // EXPERIMENTAL SYSTEMS & SHADERS
空間視覺與
著色器實驗室
Inspired by Léo Parpeix 探索極致 WebGL 空間著色器與物理互動系統的未竟之地 我們在此試驗前沿代碼 將前瞻科技轉化為商業品牌無可替代的視覺護城河
System Status
OPERATIONAL
Live Framerate
60.0 FPS
Core Architecture
THREE.JS + GLSL
Rendering Engine
HARDWARE ACCEL
EXP_01 // 2D PROCEDURAL GLSL
Liquid Metal Mesh ｜ 液態金屬扭曲著色器
水銀表面張力模擬 波紋干涉與 RGB 色散位移 Chromatic Dispersion 滑動鼠標即時擾動表面
MOVE CURSOR OVER CANVAS TO PERTURB
波動頻率 (Frequency)
1.6
表面黏度 (Viscosity)
0.65
色散偏移 (Dispersion)
12px
EXP_02 // THREE.JS VERTEX DISPLACEMENT
Kinetic Audio Sphere ｜ 音波幾何律動球
多面體頂點沿法線方向進行動態諧波位移 結合紅金雙色次表面光澤 可拖曳視角旋轉
DRAG TO ORBIT ｜ SIMULATING HARMONICS
振幅強度 (Amplitude)
1.0
脈衝速度 (Pulse Speed)
1.5x
尖刺頻率 (Spikes)
4.0
EXP_03 // NEWTONIAN N-BODY KINEMATICS
Quantum Gravitational Field ｜ 量子粒子引力場
即時模擬 1,200 顆光子粒子之引力牽引 軌道偏折與斥力波 點擊畫布觸發超新星離心爆發
HOVER TO ATTRACT ｜ CLICK TO BLAST REPEL
粒子總數 (Count)
1,200
引力強度 (Gravity Force)
+3.0
軌道阻尼 (Damping)
0.94
EXP_04 // SPATIAL PRISM REFRACTION
Vision Pro Spatial Refraction ｜ 空間折射玻璃體
Apple Vision Pro 等級的多面體空間折射 結合薄膜干涉與雙光源高光計算 點擊切換晶體形態
DRAG TO ROTATE PRISM ｜ CHROMATIC DISPERSION
折射率 (IOR)
1.52
色散分離度 (Dispersion)
0.60
旋轉慣性 (Speed)
1.0x