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的某些内容引起了你的兴趣，让我们聊聊！