https://cznull.github.io/vsbm https://cznull.github.io/vsv 主要功能

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

技术原理

核心渲染技术:

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

关键算法:

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

交互控制:

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

性能测试原理:

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

特点

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

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