Lax Space：用胶带与日常混沌设计
Lax Chee邀请我们深入了解他的实验性作品集幕后，在这里，胶带、设计和代码将日常混沌转化为有趣的数字体验。
创作动机与灵感
在完成一系列偏重实用性的商业项目后，我决定将作品集网站作为实验新想法的空间。我的目标很明确：第一，必须具有交互性并包含3D元素；第二，需要吸引用户注意力；第三，必须在不同设备上表现良好。
这个想法的灵感来自日常时刻——确切地说是在卫生间里。我20个月大的好奇宝宝有一天在我使用卫生间时闯进来，高兴地将长条卫生纸铺满地板。这个场景混乱、有趣，却令人愉悦。随着混乱的扩大，这个想法也逐渐成形：这种与物体玩耍、近乎淘气的互动可以重新构想为数字体验。
当然，卫生纸并不符合美学要求，于是想法转向了胶带。胶带更酷，更符合项目需要的能量。概念确定后，流程转向草图绘制、设计和编码。
设计原则
随着胶带在屏幕上展开，很容易让人感到混乱和视觉沉重。为了平衡这种能量，界面刻意保持简洁干净。目标是让视觉效果占据中心舞台，同时给用户足够的留白空间漫游和玩耍。
体验中还融入了交互层。动画响应用户操作，创造运动和交互感。隐藏的细节，比如倒带选项、环绕元素轨道运行，或提示未见项目的闪烁点。
- 按空格键可倒带胶带卷，使其可以重新绘制新路径
- 按Tab键可解锁轨道视图，允许从不同角度探索场景
体验构建
构建沉浸式交互作品集是一回事，使其在不同设备上流畅运行是另一回事。近70%的精力用于优化体验和榨取每一滴性能。结果是表面看似 playful 的网站，底层却由一系列系统驱动，保持快速、响应灵敏和可访问性。
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。帧仅在需要时渲染，然后在交互后保持稳定节奏以保持响应性。正是这种 playful 与精确之间的平衡，使网站对用户来说感觉毫不费力。
创作者
Lax Space是我的名字Lax和致力于创意的Space的结合。它既是作品集又是游乐场，是设计与代码以有趣、playful 和无压力方式相遇的中心。
我来自新加坡，在那里开始创意工作后移居日本。我的目标很简单：探索新想法，从不同角度学习，挑战旧思维方式。被日本及其他地区一些最具启发性的创作者包围，在创意和技术上推动了我的工作更进一步。
设计和代码构成我工具包的一部分，将它们融合在一起可以打造平衡功能与美学的体验。每个项目都是尝试新事物、实验和突破数字设计边界的机会。
我渴望与其他创意人士联系。如果Lax Space有什么引起你的兴趣，让我们聊聊！