效果:使用 WebGL 着色器构建实时 ASCII 和抖动效果

I’m a designer. I don’t write shaders. Or at least, I didn’t.

我是一名设计师。我不写着色器。或者至少,我以前不写。

But I kept seeing these dithered images everywhere—that crunchy, pixelated texture that feels both old and new. And I wanted to make my own. Not by running images through some filter, but in real-time, on 3D models, with controls I could tweak.

但我不断在各处看到这些抖动的图像——那种既古老又新颖的脆脆像素化纹理。我想制作自己的图像。不是通过某种滤镜处理图像,而是在实时中,在3D模型上,使用我可以调整的控件。

My first experiment was actually for Lummi, where I used v0 to prototype an effects tool. It was hacky and limited, but it worked well enough that I got hooked.

我的第一次实验实际上是为 Lummi,我使用 v0 原型一个 效果工具。它很粗糙且有限,但效果足够好,让我上瘾。

The Lummi effects tool I built with v0. Hacky, but it worked.

我用v0构建的Lummi效果工具。虽然有点黑客,但它有效。

So I started building Efecto. What started as a quick experiment kept expanding as I read about different algorithms and got curious about how they worked.

所以我开始构建Efecto。最初作为一个快速实验的项目,随着我阅读不同的算法并对它们的工作原理产生好奇,它不断扩展。

I couldn’t have done any of this without the work others have shared. Shadertoy was where I learned by reading other people’s code. The Book of Shaders by Patricio Gonzalez Vivo taught me the fundamentals. And libraries like postprocessing and React Three Fiber gave me something to build on.

如果没有其他人分享的工作,我无法做到这一切。Shadertoy 是我通过阅读他人的代码学习的地方。Patricio Gonzalez Vivo 的《着色器之书》教会了我基础知识。而像postprocessingReact Three Fiber这样的库给了我构建的基础。

This is what I figured out along the way.

这是我在这个过程中弄明白的事情。

Same image, different algorithms: Floyd-Steinberg, Atkinson, Jarvis-Judice-Ninke, Stucki, Burkes, and Sierra.

相同的图像,不同的算法:Floyd-Steinberg、Atkinson、Jarvis-Judice-Ninke、Stucki、Burkes 和 Sierra。

Dithering is a technique that creates the illusion of more colors than you actually have. If you only have black and white pixels, you can’t show gray. But if you arrange black and white pixels in a pattern, your brain blends them together and perceives gray.

抖动是一种创造比实际拥有更多颜色幻觉的技术。如果你只有黑白像素,就无法显示灰色。但如果你以某种模式排列黑白像素,你的大脑会将它们混合在一起,从而感知到灰色。

The technique comes from newspapers. Before digital anything, printers had to figure out h...

开通本站会员,查看完整译文。

trang chủ - Wiki
Copyright © 2011-2026 iteam. Current version is 2.148.3. UTC+08:00, 2026-01-12 01:19
浙ICP备14020137号-1 $bản đồ khách truy cập$