跳到正文
网页珍奇柜Web Curio

拜耳抖动背景

Three.js Bayer Dither Playground,Vsevolod Dolgopolov (zavalit),2025 年

正在布展…

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

它是怎么做的

  1. 第 1 步片元着色器先生成连续灰度场(噪声 + 形状遮罩 + 涟漪)
  2. 第 2 步像素化:把坐标量化到大像素格
  3. 第 3 步与 8×8 Bayer 矩阵阈值比较输出 1-bit 颜色
  4. 第 4 步点击记录位置与时间,作为 uniform 数组生成环形涟漪

复刻配方

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

Write a full-screen fragment shader that first computes a continuous grayscale value from fbm noise, an SDF shape mask and expanding ring ripples. Snap fragment coordinates to a coarse pixel grid so each 'pixel' is several screen pixels. Compare the grayscale value against the corresponding entry of an 8x8 Bayer threshold matrix (indexed by pixel coordinate mod 8) and output either the ink or paper color. On click, push the click position and timestamp into a small uniform array so each ripple's radius grows with time and fades out.

档案

能不能拿来用

原作不是开源许可(unknown (no LICENSE file)):只能作为视觉参考,不要复制它的代码或素材,自己按技术思路实现。

性能开销

视觉强度

实现难度

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

核实记录:Repo exists (README links Codrops article and live demo); no LICENSE file; tympanus.net returns 403 to automated fetch.