RAYMARCHING · GLSL · FPS ·
SCENE · 融合体
01 / Live Lab

不是截图,是正在跑的着色器

下面每一帧都由 GPU 实时求解光线与曲面的交点。拖动参数,画面立刻跟着变 —— 右侧就是你正在看到的这段源码,一字未改。

实时参数

形变融合 (球体/方块/圆环液态融合)0.55
旋转速度0.45
机位高度0.42
辉光强度0.60

切换场景

fragment.glsl运行中

每个像素发射一条光线,最多步进 76 次求交,再做 4 次法线采样与 4 次环境光遮蔽采样。全部手写,未引入任何图形库。

02 / Spec

为什么这能体现技术

这不是贴图、不是视频,是逐像素的实时光追近似。

0依赖
纯原生 WebGL1

手写着色器,不含 three.js / babylon 等任何引擎。

76步/像素
光线步进

每像素沿视线行进最多 76 次,收敛到曲面交点。

60FPS 目标
帧率守卫

弱设备自动降内部分辨率,保证交互不卡顿。

4场景
程序化几何

SDF 定义,实时切换,无需任何模型文件。

03 / How

实现原理(一段话)

用符号距离函数(SDF)描述物体表面:空间中任一点到表面的距离。相机发射光线,沿光线反复"走最短距离"逼近表面,命中后用法线算光照、用 smin() 做形体液态融合。所有计算都在 fragment shader 里完成 —— 这就是你看到的画面来源。

想要这种级别的实时视觉?

把它放进你的官网首屏、产品页或发布会大屏。告诉我们场景,我们调参、接线、上线。

聊需求 →