Lax Space：用胶带和日常混乱设计
Lax Chee邀请我们深入了解他的实验性作品集幕后，在这里，胶带、设计和代码将日常混乱转化为有趣的数字体验。
设计初衷与灵感
在完成一系列更注重实用性而非趣味性的商业项目后，我决定将作品集网站作为实验新创意的空间。我的目标很明确：第一，必须具有交互性并包含3D元素；第二，需要吸引用户注意力；第三，必须在不同设备上表现良好。
这个创意来自日常生活场景——确切地说是在卫生间里。我20个月大的孩子在我使用卫生间时好奇地闯进来，高兴地将长条卫生纸铺满地板。这个混乱、有趣又令人愉悦的场景让我萌生想法：这种与物体的趣味互动可以重新构想为数字体验。
当然，卫生纸并不符合美学要求，于是创意转向了胶带。胶带更酷，更符合项目需要的能量。概念确定后，流程转向草图绘制、设计和编码。
设计原则
随着胶带在屏幕上展开，界面很容易显得混乱和视觉沉重。为了平衡这种能量，界面故意保持简洁干净。目标是让视觉效果占据中心舞台，同时给用户足够的留白空间来漫游和玩耍。
体验中还融入了交互层。动画响应用户操作，创造运动和交互感。隐藏的触控功能，如倒带选项、环绕元素轨道运行，或提示未见项目的闪烁点。
- 按空格键可倒带胶带卷，使其可以重新绘制新路径
- 按Tab键可解锁轨道视图，允许从不同角度探索场景
体验构建
构建沉浸式交互作品集是一回事，使其在不同设备上流畅运行是另一回事。近70%的精力用于优化体验和榨取每一滴性能。结果是一个表面看似有趣的网站，但其底层由一系列系统驱动，保持快速、响应灵敏和可访问性。
01. 实时路径绘制
核心魔力在于实时路径绘制。通过射线投射将鼠标或触摸移动捕获并投影到3D空间。使用Catmull-Rom曲线平滑点，创建在展开时感觉自然的流动路径。几何体实时生成，为每个用户提供独特的绘图，可以从不同角度倒带、重放或探索。
02. BVH射线检测
为了保持交互速度，采用BVH射线检测。系统首先检查较大的边界框，而不是测试场景中的每个三角形，将数千次计算减少到仅几次。这种通常用于游戏引擎的优化，将复杂几何体以流畅的60fps带入浏览器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 首先通过添加BVH加速使几何体"智能"
useEffect(() => {
if (planeRef.current && !bvhGenerated.current) {
const plane = planeRef.current
// 步骤1：为平面创建BVH树结构
const generator = new StaticGeometryGenerator(plane)
const geometry = generator.generate()
// 步骤2：构建加速结构
geometry.boundsTree = new MeshBVH(geometry)
// 步骤3：用支持BVH的版本替换旧几何体
if (plane.geometry) {
plane.geometry.dispose() // 清理旧几何体
}
plane.geometry = geometry
// 步骤4：启用快速射线检测
plane.raycast = acceleratedRaycast
bvhGenerated.current = true
}
}, [])
|
03. LOD + 动态设备检测
系统检测每个设备的功能、GPU功率、可用内存甚至CPU核心，并实时调整质量设置。高端机器获得完整体验，而移动设备享受更轻量但仍感觉流畅和吸引人的版本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
const [isLowResMode, setIsLowResMode] = useState(false)
const [isVeryLowResMode, setIsVeryLowResMode] = useState(false)
// 检测低端设备并启用低分辨率模式
useEffect(() => {
const detectLowEndDevice = () => {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
const isLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 4
const isLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 4
const isSlowGPU = /(Intel|AMD|Mali|PowerVR|Adreno)/i.test(navigator.userAgent) && !/(RTX|GTX|Radeon RX)/i.test(navigator.userAgent)
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext | null
let isLowEndGPU = false
let isVeryLowEndGPU = false
if (gl) {
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
if (debugInfo) {
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
isLowEndGPU = /(Mali-4|Mali-T|PowerVR|Adreno 3|Adreno 4|Intel HD|Intel UHD)/i.test(renderer)
isVeryLowEndGPU = /(Mali-4|Mali-T6|Mali-T7|PowerVR G6|Adreno 3|Adreno 4|Intel HD 4000|Intel HD 3000|Intel UHD 600)/i.test(renderer)
}
}
const isVeryLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 2
const isVeryLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 2
const shouldEnableVeryLowRes = isVeryLowMemory || isVeryLowCores || isVeryLowEndGPU
if (shouldEnableVeryLowRes) {
setIsVeryLowResMode(true)
setIsLowResMode(true)
} else if (isMobile || isLowMemory || isLowCores || isSlowGPU || isLowEndGPU) {
setIsLowResMode(true)
}
}
detectLowEndDevice()
}, [])
|
04. 保活帧系统 + 节流几何更新
确保流畅性能而不耗尽电池或过载CPU。帧仅在需要时渲染，然后在交互后保持稳定节奏以保持响应性。正是这种趣味性和精确性之间的平衡，使网站对用户来说感觉轻松。
创作者
Lax Space是我的名字Lax和致力于创意的Space的组合。它既是一个作品集，也是一个游乐场，是设计和代码以有趣、好玩和无压力方式相遇的中心。
我来自新加坡，在那里开始创意工作后移居日本。我的目标很简单：探索新想法，从不同角度学习，挑战旧思维方式。被日本及其他地区一些最具启发性的创作者包围，推动我的作品在创意和技术上更进一步。
设计和代码构成我工具包的一部分，将它们融合在一起可以打造平衡功能与美学的体验。每个项目都是尝试新事物、实验和推动数字设计边界的机会。
我渴望与其他创意人士联系。如果Lax Space的某些内容引起了您的兴趣，让我们聊聊！