跳到正文
网页珍奇柜Web Curio

线框无尽世界

Wireframe World,Eric Arnebäck (Erkaman),2016 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步基于 regl(函数式 WebGL 封装)绘制网格
  2. 第 2 步网格顶点高度由噪声函数计算,随相机前进平移采样坐标
  3. 第 3 步片元着色器根据重心坐标描出线框而非使用 GL_LINES
  4. 第 4 步雾化与渐变天空营造纵深感

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Draw a fixed grid of triangles in front of the camera and offset the noise sampling coordinate by elapsed distance so terrain appears to scroll infinitely. Pass barycentric coordinates as a vertex attribute and in the fragment shader draw bright lines where any barycentric component is near zero (using fwidth for constant thickness). Fade line color with distance into a gradient sky and add a sun disc with horizontal stripe cutouts for the synthwave look.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Demo loads (200); repo has MIT licence.