"毒蘑菇" 设备 GPU 测试网页

https://cznull.github.io/vsbm

https://cznull.github.io/vsv

主要功能

1. 渲染一个 3D 分形(fractal)图形,看起来像蘑菇形状
2. 可以通过鼠标和触摸操作来旋转和缩放查看这个 3D 图形
3. 可以测试设备的 GPU 渲染性能

技术原理

1. 核心渲染技术:

• 使用 WebGL 进行 GPU 加速的 3D 渲染
• 使用 GLSL 着色器语言编写 vertex shader 和 fragment shader
• 主要使用了光线追踪(Ray Marching)技术来渲染 3D 场景

1. 关键算法:

var KERNEL = "float kernal(vec3 ver){ 
   // 这是定义 3D 分形图形的数学函数
   // 通过迭代计算来生成复杂的 3D 形状
   ...
}"

1. 交互控制:

• 左键拖动:旋转视角(ang1, ang2)
• 右键拖动:平移场景(cenx, ceny, cenz)
• 鼠标滚轮:缩放(len)

1. 性能测试原理:

• 由于需要实时进行复杂的数学计算和 3D 渲染
• 对 GPU 性能要求较高
• 如果设备性能较差,会出现卡顿或崩溃

特点

1. 纯前端实现
2. 使用 WebGL 实现 GPU 加速
3. 支持 PC 和移动设备的触摸操作
4. 可以自定义渲染 kernel 函数来改变 3D 效果

⚠ 警告：在性能较弱的设备（如手机）上启动测试可能导致系统卡死、发烫！