如何在 WebGPU 上渲染文字

文章将“用三次 lerp 组合求二次样条上一点”的过程称为 Casteljau 算法。它适合按参数 t 追踪曲线轮廓,却不能高效判断任意像素是否落在曲线内部;作者因此改用 Loop–Blinn 的三角映射与 UV 判定,以适配 GPU 的片元着色模型。

De Casteljau's Algorithm

如何在 WebGPU 上渲染文字

Loop 与 Blinn 提出的分辨率无关曲线渲染方法是本文核心。将二次样条的起点、终点、控制点围成三角形,利用 GPU 对 UV 的硬件插值,使曲线在参数空间变为 y=x²;片元只需比较 uv.x² 与 uv.y 即可判定内外并 discard。结合字形耳切网格与内外侧曲线三角形,即可在 WebGPU 上高效画出清晰字体,避免逐像素求最近点或昂贵解析解。

Loop-Blinn Algorithm

如何在 WebGPU 上渲染文字

为渲染完整字符,作者先用耳切算法将字形路径三角化成平面网格,并调整顶点以免与后续曲线三角形重叠;这些三角形做平坦着色,再在拐角处叠加按二次样条规则着色的三角形,从而拼出带圆滑轮廓的字形。

Ear Clipping Algorithm

如何在 WebGPU 上渲染文字

本文主题是在 WebGPU 中快速渲染 TTF 字体。作者为博客动画渲染器在 WebGPU 上实现了基于 Loop-Blinn 的字体绘制:先对字形做耳切三角剖分,再在曲线处附加三点三角形,用片元着色器按 UV 做 y 与 x² 比较以 discard,从而在 GPU 上得到高分辨率、清晰的字形轮廓。文首动态图即用该管线渲染。

WebGPU

如何在 WebGPU 上渲染文字

本文指出 TTF 字形中的每条曲线由起点、终点与控制点三点定义,这类曲线即二次样条。Loop 与 Blinn 的方法把这三点构成的三角形映射到 UV 空间,使样条在片元侧等价于 y=x²,从而用一次比较即可判定像素是否在曲线内侧,实现 GPU 上快速、分辨率无关的曲线填充。

Quadratic Spline

逆向 Sega CD 上的 Silpheed 艺术表现

本文称其为 palette trick:游戏过程中激光与爆炸呈多色流动,靠主 CPU 的 m68k 每帧轮转调色板末尾预留的 4 个颜色实现。因此可玩段落美术实际只能用 12 色作画;过场则无此动效,可占满 16 色。该技巧在极低色数与带宽下增强动感,而不增加图块数据量。

Palette Shifting

逆向 Sega CD 上的 Silpheed 艺术表现

本文中,Mega-CD/Genesis 无帧缓冲,画面由 8×8 图块经 tilemap(nametable)按 32×28 铺成 256×224。Silpheed 每帧自带全部图块与 tilemap;编码器把纯色图块只写一份再在 map 中反复引用(如某帧 896 格中 456 格共用 15 种纯色,约省一半带宽)。tilemap 本身再压缩:768 位位图标出“自增索引”或“读立即数”,相对原本约 960 字节可压到约 652 字节(近 30%)。

Tilemap

逆向 Sega CD 上的 Silpheed 艺术表现

文中 FMV 指 CD 时代把预录影像搬上主机的做法;Sega CD 上大量依赖 FMV 的作品因小窗口、伪影与抖动声名狼藉。核心瓶颈是从光驱读出、CPU 解压再喂给显示的带宽链,且 Genesis 无帧缓冲,需经 8×8 图块与 nametable 拼出约 256×224 画面。《Silpheed》的 FMV 每帧独立、无帧间差分,却用纯色图块复用(示例帧约半数引用 15 块纯色)、ASIC 双色展开、tilemap 约 30% 压缩与降帧等手段把约 8 KiB/帧做到接近全屏、观感接近实时 3D,成为全文逆向与分析的主题。

Full Motion Video

寻找屏幕上无法显示的色彩

1931年绘制的马蹄形图表,展示人类可见光谱与混合颜色空间。外缘为纯波长,内部颜色可线性混合;图中标记的三原色三角形无法覆盖青绿色区域,需负红色才能达到最饱和青色,揭示屏幕色域的根本限制。

CIE色度图

寻找屏幕上无法显示的色彩

本文作者,分析屏幕无法呈现的真实世界颜色尤其是青色。他指出森林透射光、浅水沙地、鸟类结构色等场景能产生超出屏幕色域的饱和色彩,并以交通信号灯为例说明日常中即可观察到这些被忽视的青绿色。

Ryan Moulton

寻找屏幕上无法显示的色彩

国际照明委员会,1931年制定人类色觉空间表征方法。他们选取三种波长作为原色以独立调控视锥细胞响应,但该选择在色度图上留下巨大青绿色盲区,后续显示技术受限于此无法突破。

CIE

寻找屏幕上无法显示的色彩

本文中D65标准光源作为所有物体颜色渲染的统一照明条件,作者基于实测反射率数据在此光源下计算并绘制自然物体的色度轨迹,以准确模拟森林透射光、水体过滤及鸟类羽毛等场景下的色彩表现,确保图表能反映真实色域外颜色。

D65标准光源

寻找屏幕上无法显示的色彩

苹果公司推广的较宽色域,现已成为智能手机与Mac的行业标准。它比sRGB多包含部分青绿色,但仍有约100种鸟类颜色超出其范围,如金尾蓝宝石蜂鸟的部分羽色仍无法完整呈现。

Display P3

寻找屏幕上无法显示的色彩

基于CRT磷光体的标准色域,仅覆盖CIE图中很小的三角形区域。绝大多数显示器、互联网内容和摄影均受限于此,导致森林多次滤光后的饱和绿、浅水青色等自然色彩无法被准确再现。

sRGB

img2bez - 从栅格到矢量

diffvg 是 2020 年发布的可微分光栅化器,以 PyTorch 操作符形式提供,是基于优化的矢量化方法的标准实现。img2bez 借鉴其通过像素对候选轮廓打分的目标,但采用纯 Rust 确定性实现,无需 GPU 或迭代训练即可完成精炼。

diffvg

RGB 归一化除以 255 还是 256

抖动指在颜色深度转换时添加噪声以缓解量化 artifacts。文中指出除256方法让抖动实现更简洁,无需额外处理边缘 bin;标准除255方法则需仔细调整噪声分布以保持一致性。引用博客观点认为前者在抖动场景下更方便,但前提是能同时控制编解码步骤。

抖动

RGB 归一化除以 255 还是 256

文章在讨论量化误差时提及sRGB规范虽声称颜色值为绝对测量,但实际加载陌生图像时并无此前提。使用中升型公式解码按标准方法量化的sRGB图像,会引入微小范围偏移与比例误差。结论强调,对外部sRGB图像仍应采用除255的标准方法,以避免不必要的精度损失。

sRGB

RGB 归一化除以 255 还是 256

本文探讨图像处理中8位整数RGB值与[0,1]浮点数间的转换量化问题。标准方法用除255实现0到0.0、255到1.0的映射,替代方法则加0.5偏置后除256。文章通过直方图实验和误差分析指出,标准量化虽在极值区间宽度减半,但对实际图像往返转换无损,且便于检测黑像素等逻辑处理。

量化

RGB 归一化除以 255 还是 256

浮点数是图像处理中间计算的表示形式。文中指出除255会产生微小舍入误差,如128/255≈0.50196,而非精确0.5;但该误差仅在2^{-23}量级,对实际处理可忽略。文章强调这种不精确更多是美学问题,且原图往返转换仍能无损恢复。

浮点数

RGB 归一化除以 255 还是 256

GPU在硬件层面采用标准除255的UNORM转换方式,将整数0和255分别映射为浮点0.0和1.0。文中以此作为基准,指出该做法与多数图像处理代码一致,便于保持黑白端点检测逻辑;替代除256方法虽可能略降重建误差,但会破坏与GPU默认行为的兼容性。

GPU

RGB 归一化除以 255 还是 256

文章将两种RGB归一化方法归类为均匀标量量化器,分别对应L=255和L=256的不同层级设置。标准除255公式被视为中平型与L=255的组合,替代公式则为中升型与L=256的组合。文中强调,仅当同时控制保存与加载时,标量量化才能通过256获得理论上略低的平均绝对误差(1/1024 vs 1/1020)。

标量量化

RGB 归一化除以 255 还是 256

本文依据Wikipedia定义,将标准除255方法标记为中平型量化器(L=255),其零值重建电平对应阶梯踏板位置。该量化器在分类时使用trunc(x*L+0.5),重建时直接用k/L,能让0精确映射到0.0。文章指出此特性便于图像处理代码保持与浮点黑白值的直观对应,但极值区间会略微超出[0,1]范围。

中平型量化器

RGB 归一化除以 255 还是 256

本文讨论图像处理中将8位RGB颜色通道从整数转换为浮点数时,采用除以255还是加0.5后除以256的差异。标准方法把0精确映射为0.0、255映射为1.0,方便检测纯黑等操作;替代方法则让每个浮点值落在整数区间中点。文章通过量化 bin 分布和重建误差分析,结论是处理外部图像时应坚持除255,以避免与8位范围绑定。

RGB

RGB 归一化除以 255 还是 256

数据归一化指把图像像素从uint8范围映射到[0,1]浮点区间的操作。文中对比了两种公式:直接除255保持端点对应,或加偏置除256使重建值居中。归一化选择影响极端值输出频率和后续处理逻辑,文章认为除255更适合处理陌生来源的图像,因为它不会引入固定偏移。

数据归一化

RGB 归一化除以 255 还是 256

文章将替代除256方法定义为中升型量化器(L=256),零值分类阈值位于两整数中间,对应阶梯升起位置。其公式为(img+0.5)/256后重建(k+0.5)/L,能让浮点值恰好落在整数中点。文中提到该特性对抖动处理更友好,但会使0映射为0.00195,破坏对纯黑的直接检测。

中升型量化器

无需图片的人体建模

本文使用Navy公式在Clad body中估算体脂百分比,进而得到分性别的组织密度值。该公式帮助区分肌肉与脂肪密度差异,使质量预测误差从数公斤降至0.3kg均值,解决了Anny模型原密度980 kg/m³的系统性偏差。

Navy formula

手写英文笔画字体

Hershey字体系统1960年代专为Pen Plotter设计,数据采用中心线单笔画路径、无填充,适合直接用笔绘制。这避免了普通轮廓字体需骨架化处理导致的锯齿问题,成为本文stroke animation的起点。作者在此基础上手动平滑曲线,以匹配目标视觉效果。

Pen Plotter

CSS Doom

文章指出该纯 CSS 3D 渲染方案性能受限,无法取代专业的 WebGL 渲染器,但证明了现代 CSS 在无需 Canvas 或 WebGL 的情况下也能实现完整可玩的 3D 游戏。

WebGL

CSS Doom

文中提到 CSS 渲染方案不会替代 WebGPU 等专业渲染器,强调其目的是探索 CSS 边界而非追求极致性能,实际运行仍依赖浏览器对数千个 3D 变换元素的合成能力。

WebGPU

drawvg 介绍

Cairo是drawvg滤镜执行VGS脚本时用于光栅化的图形库,负责将矢量命令转换为视频帧像素。FFmpeg必须启用对Cairo的支持才能正常运行drawvg滤镜。

Cairo

图片压缩介绍

本文说明每个像素由红、绿、蓝三个 0-255 的数值组成,代表颜色混合比例。一张 1920×1080 的图像因此包含超过 200 万像素,原始存储需要约 6.2MB,这是后续讨论压缩必要性的起点。

RGB

到底能不能让鹈鹕骑好自行车

文章指出,若不统一渲染方式,模型可能自行选用ImageMagick等工具将SVG转为图像。为消除这一变量,实验强制使用Chrome DevTools MCP服务器进行转换,确保所有模型在相同条件下评估输出质量。

ImageMagick

Linear 重构液态玻璃

本文中,Linear 团队用 SDF 以数学方式描述导航栏等元素周围的连续圆角矩形形状。他们先生成该 SDF,再通过其梯度计算表面法线,从而驱动实时光照效果。这种自建方案让玻璃材质的高光能随滚动和点击自然变化,同时兼容 iOS 18 及以上版本,避免依赖苹果官方 API 的限制。

SDF

Paper (Alpha) 体验

Paper 内置丰富 Shader 效果,支持速度、角度、噪点等详细参数调节,Speed 设为 0 可转为静态。Shader 可作为 Frame 使用并设置叠加模式,还能一键导出为 React 组件代码。相比 Figma 依赖 Noise & Texture 插件,Paper 的集成方式被认为更便捷且便于开发者复用。

Shader

Figma 如何升级到 WebGPU 渲染

计算着色器是 WebGPU 新增能力,可将并行计算从 CPU 迁移至 GPU。Figma 目前已在接口层完成支持,未来将用于模糊渲染等场景,以进一步释放 GPU 性能。目前阶段主要为这类优化铺路,未在首次迁移中大规模启用。

Compute Shader

Figma 如何升级到 WebGPU 渲染

WGSL 是 WebGPU 专用的着色语言,与旧 GLSL 在 uniform 分组与结构上差异显著。Figma 通过 shader processor 自动完成从 GLSL 到 WGSL 的转换,并同时输出两种语言版本,确保工程师只需维护单一源码即可同时支持 WebGL 与 WebGPU 渲染路径。

WGSL

Figma 如何升级到 WebGPU 渲染

WebGL 是 Figma 最初选择的浏览器图形 API,原为 3D 设计而生,后用于复杂 2D 无限画布。其依赖全局绑定状态,着色器使用旧版 GLSL,易因状态遗漏引发 bug。迁移中需维持现有 WebGL 实现不变,并作为 WebGPU 失败时的动态回退目标。

WebGL

Figma 如何升级到 WebGPU 渲染

WebGPU 是 Chromium 2023 年引入的 WebGL 继任者,支持计算着色器、避免全局状态,并提供异步错误报告。Figma 为其重新设计渲染后端,使用 uniform buffer 批提交、bindGroup 缓存和 renderPass 合并等优化,同时处理异步读回与设备丢失场景。项目完成后计划进一步利用 MSAA 与 RenderBundles 降低 CPU 开销。

WebGPU

Figma 如何升级到 WebGPU 渲染

MSAA即多重采样抗锯齿,是WebGPU原生支持的渲染特性。Figma计划利用该特性替代现有WebGL方案,进一步降低边缘锯齿并提升整体绘制性能,属于WebGPU迁移后可解锁的优化方向之一。

MSAA

Figma 如何升级到 WebGPU 渲染

GLSL 是 WebGL 使用的着色语言,Figma 现有代码基于 WebGL 1 旧格式编写。项目保留所有 GLSL 源码,通过自定义处理器先升级为较新 GLSL,再借助 naga 工具生成 WGSL,同时提取输入类型与布局信息,避免双版本手动维护。

GLSL

游戏中不适合使用 PNG 格式的纹理

Basis Universal 在文中被提及为移动平台解决方案,因移动设备对 GPU 压缩格式支持差异较大,可在加载时快速转码为目标格式。文章指出桌面平台可直接使用 KTX2 或 DDS,而移动端则适合借助该工具适配不同硬件,维持跨平台发布效率。

Basis Universal

游戏中不适合使用 PNG 格式的纹理

Cubemap 是纹理格式应原生支持的特性,用于环境映射等场景。本文指出 PNG 需为每个面单独存储图像,且正确降采样困难,而 KTX2 或 DDS 可直接打包全部面并保持一致性。作者的 Zex 工具目前尚未实现 cubemap 导出,但表示该功能添加较为简单,欢迎贡献。

Cubemap

游戏中不适合使用 PNG 格式的纹理

bc7enc_rdo为Zex提供BC7纹理压缩及率失真优化能力。结合后续zlib超压缩,可在可接受画质损失下显著降低存储和VRAM占用,同时提升采样性能,契合游戏纹理分发的需求。

bc7enc_rdo

游戏中不适合使用 PNG 格式的纹理

Premultiplied Alpha 是本文列举的纹理格式应具备的特性之一。文章说明 PNG 虽技术上可支持,但实际文件通常未预乘,导致混合效果不佳。使用专用纹理格式可在导出阶段完成预乘,避免运行时额外处理,从而获得正确且高效的 alpha 混合结果。

Premultiplied Alpha

游戏中不适合使用 PNG 格式的纹理

文中提到Alpha to Coverage渲染方式依赖正确生成的mipmap,否则远处树木或栅栏等alpha测试物体容易消失。Zex实现了感知alpha的缩放算法,作者建议在引擎内视觉对比验证其实际效果。

Alpha to Coverage

游戏中不适合使用 PNG 格式的纹理

Oven 是作者开源的 GitHub 仓库,专门用于自动化纹理格式转换流程。文中指出,作者曾为《Way of Rhea》手动处理每张纹理,每次修改都需重复设置,浪费大量时间,因此推荐使用 Oven 这类工具实现自动化。它目前并非通用工具,但可作为引擎集成或自定义实现的参考。

Oven

游戏中不适合使用 PNG 格式的纹理

BC7 是文中推荐的 GPU 纹理压缩格式,作者计划在新项目中搭配 KTX2 与 zlib 使用。它通过块端点与插值方式在轻微画质损失下大幅减少存储、VRAM 占用并提升采样性能,与 PNG 需运行时转码的低效做法形成鲜明对比。

BC7

游戏中不适合使用 PNG 格式的纹理

Tacent View是本文推荐的纹理查看器,支持DDS、KTX2等多mipmap、多面纹理及HDR格式查看。它开源且跨平台,弥补了普通图像查看器无法正确展示纹理复杂结构的问题。

Tacent View

游戏中不适合使用 PNG 格式的纹理

Mipmap 是本文推荐纹理格式必须支持的核心特性。文章对比了加载时生成与预生成两种方式,指出预生成可采用更优滤波并解决远处物体因 alpha 测试而消失的问题。作者的 Zex 工具已实现可配置过滤器和寻址模式的 mipmap 生成,以提升树木、栅栏等半透明材质的远距离渲染效果。

Mipmap

游戏中不适合使用 PNG 格式的纹理

BCn 指 GPU 原生支持的块压缩格式,本文以 BC7 和 DXT5 为例说明其工作原理。每个像素块仅存储端点颜色与插值方式,以轻微画质损失换取存储空间、显存占用和采样性能的显著提升。文章建议在 KTX2 或 DDS 中使用 BCn 替代 PNG,避免加载时进行昂贵格式转换。

BCn

Liquid Glass in the Browser

本文把 Specular Highlight 作为液态玻璃的最后视觉层,通过表面法线与固定光源夹角计算边缘高光强度。它与位移折射图分别生成,再经 feBlend 叠加到最终滤镜中。文中提供不透明度、饱和度等参数供实时调节,强调这是把物理折射与主观光影结合的创意步骤。

Specular Highlight

Liquid Glass in the Browser

文中用 Smootherstep 混合凸凹两种高度函数,生成带凸起边缘和浅凹中心的 Lip 表面轮廓。该混合函数被用于开关组件,使中心区域产生向外放大效果而边缘向内折射内部内容。作者通过此函数演示如何用单一插值实现更复杂的玻璃形态。

Smootherstep

游戏中的模糊 101

本文中Framebuffer作为3D渲染后的中间图像存储,用于后续后处理模糊操作。文章展示了多级Framebuffer的ping-pong切换、下采样链与上采样重建流程,以及分辨率逐级减半的内存写入成本。Framebuffer的多次读写直接影响算法性能,是Kawase与Dual Kawase实现的关键数据结构。

Framebuffer

游戏中的模糊 101

本文重点阐述Marius Bjørge在2015年SIGGRAPH提出的Dual Kawase模糊,将Kawase采样模式与分辨率下采样融合。算法在下采样阶段使用5点采样,上采样阶段使用9点加权重建,显著降低移动端内存带宽消耗。Marius Bjørge的目标是获得运动稳定的高斯-like模糊,同时保持极低额外采样成本。

Marius Bjørge

游戏中的模糊 101

本文引用Jorge Jimenez在2014年SIGGRAPH的Call of Duty Advanced Warfare分享,讨论下采样与上采样链中的网格状伪影问题。文章指出跳过中间上采样步骤会导致双线性重建的热斑,需通过4-tap模糊中间步骤缓解。Jorge Jimenez的分析为Dual Kawase的实际工程权衡提供了依据。

Jorge Jimenez

游戏中的模糊 101

本文中,WebGL 1.0被用于浏览器内实时实现所有模糊演示,通过GLSL片段着色器对帧缓冲进行全屏四边形渲染及多通道处理。文章借助它展示从Box Blur到Dual Kawase的性能权衡与视觉结果,包含FPS、纹理采样次数等实时指标。所有交互可视化均依赖WebGL上下文完成。

WebGL

游戏中的模糊 101

本文在频率空间模糊章节中指出,使用尖锐圆形遮罩去除高频能量时会产生振铃伪影,即Gibbs现象。文章通过交互式FFT演示说明,羽化遮罩可减轻该现象但无法完全消除。Gibbs现象解释了为何纯频域低通滤波不适合实时视频游戏模糊需求。

Gibbs Phenomenon

游戏中的模糊 101

本文介绍的迭代模糊方法,每遍使用四个对角双线性采样,距离随迭代递增,采用ping-pong帧缓冲。采样量随半径线性增长,可获得平滑结果,是Dual Kawase的前身,常与降采样结合用于早期Bloom效果。

Kawase Blur

游戏中的模糊 101

本文中,离散余弦变换被提及作为频域表示的另一种方法,用于图像处理讨论。文章指出其转换速度比FFT慢多个数量级,因此在实时高分辨率模糊场景中不具实用性,仅作为频率空间分析的补充说明。

DCT

游戏中的模糊 101

本文中,双线性插值是GPU纹理采样的默认行为,能对相邻四像素自动加权平均,实现免费的平滑缩放。在模糊演示中,它支持线性高斯近似和50%逐步下采样,避免明显走样,同时限制了超过50%缩放时的信息丢失。文章强调此特性是Kawase及Dual Kawase模糊效率的关键基础。

Bilinear interpolation

游戏中的模糊 101

Mikkel Gjoel 是开发游戏《INSIDE》时的图形程序员,在 2016 年 GDC 演讲中展示了 Dual Kawase Blur 的进一步优化。他基于 Jorge Jimenez 的工作,减少了纹理读取次数,提升了实时渲染性能,与文章主题的模糊算法演进直接相关。

Mikkel Gjoel

游戏中的模糊 101

本文中GPU通过WebGL实现实时模糊后处理效果,是视频游戏Bloom和景深等效果的基础硬件。文章详细测量了不同模糊算法在GPU上的纹理采样次数与帧时间性能,强调现代GPU算术快但内存访问慢的特点。GPU的并行片段着色器执行是所有模糊实现的核心,决定了采样模式与多通道优化的可行性。

GPU

游戏中的模糊 101

将二维高斯核分解为两次一维核,分别沿水平与垂直方向执行,大幅降低纹理采样量并消除平方级性能缩放。文中对比显示其在相同核尺寸下远快于普通高斯模糊,是实时渲染中常用的加速手段。

Separable Gaussian Blur

游戏中的模糊 101

文中与高斯-like模糊对比的镜头模糊类型,用于模拟景深与真实镜头效果,常用泊松盘或复数方法采样。目标是产生特定美学光斑而非通用平滑,与本文追求的实时后处理基础模块需求不同。

Bokeh Blur

游戏中的模糊 101

本文中,景深效果被列为视频游戏后期处理中模糊的典型用例,与Bloom并列。它依赖平滑、高斯-like的模糊作为基础构建块,用于模拟镜头焦点。文章强调此类效果需要运动稳定、无明显特征的模糊结果,而非单纯的数学低通滤波。

Depth of Field

游戏中的模糊 101

最直接的方形核平均算法,用双重循环对邻域像素求均值,kernelSize越大越呈现明显方块状 artifact。文中测量显示其纹理采样量随核尺寸平方增长,移动设备极易掉帧,作为后续算法的起点被反复对比。

boxblur

游戏中的模糊 101

本文最终呈现的算法,将Kawase采样模式与降采样融合,通过专用上采样滤波器实现高斯-like模糊。每次降采样级别下,纹理采样量增长缓慢,性能随模糊强度提升而相对更好,且在强光Bloom模式下无闪烁,适合作为实时后处理基础模块。

Dual Kawase Blur

游戏中的模糊 101

本文介绍Masaki Kawase于2003年GDC提出的Kawase模糊算法,最初用于Xbox游戏DOUBLE-S.T.E.A.L的Bloom效果。该算法采用对角四点双线性采样,迭代增加采样距离,实现线性增长的纹理采样次数。Kawase模糊成为后续Dual Kawase算法的直接基础,强调硬件插值与多通道融合。

Masaki Kawase

游戏中的模糊 101

经典算法用正态分布 bell curve 为核内样本加权,sigma控制曲线平坦度,产生圆润自然模糊外观。核尺寸增大时性能呈平方级下降,与boxblur视觉对比更优,但仍需大量纹理读取,适合作为后处理基本构建块。

Gaussian Blur

将 Minecraft 的立方体世界变为球形

本文中,3D Noise 被用于球形星球的地形生成。通过在球面上采样 3D 噪声函数,可同时解决二维噪声映射带来的接缝问题与形状扭曲问题。作者还可通过改变采样半径实现不同尺度噪声,并利用平移实现随机种子。该方法为后续双生态系统(森林与极地)的高度计算提供了基础。

3D Noise

将 Minecraft 的立方体世界变为球形

在未来工作章节中,作者计划引入体素光照系统以获得更好的全局光照效果。目前游戏仅使用 Unity 的直接光照与阴影,计划将其与类似 Minecraft 的体素光照结合,提升行星内部与洞穴的真实感。该改进被列为待开发功能之一。

Global Illumination

CSS 中的 will-change

本文说明GPU主要负责渲染的合成阶段,将已绘制的图层堆叠并显示到屏幕。will-change可促使元素创建独立GPU合成层,使transform和opacity动画跳过布局与绘制,直接由GPU处理,从而提升流畅度并降低CPU负担。

GPU

使用 AI 渲染 ASCII 游戏的高保真画面

ControlNet 在文中被作者尝试用于控制生成图像的布局一致性,主要测试分割图和轮廓类型,期望通过游戏引擎输出的色块区域引导水、熔岩、草地等元素。实验结果不理想,原因包括区域标签难以准确定义以及块状地形缺乏足够语义信息,最终放弃该方案,转而采用 image-to-image 模型。文章指出即使尝试其他 ControlNet 变体,效果仍不如直接使用源图像作为输入。

ControlNet

太空侵略者生成器

文中光栅化指将向量形状转为网格像素的过程。身体部分通过判断像素中心是否落在多边形内来决定是否填充;触手等细部则额外检查像素中心与向量点的距离,并用中线细分参数减少空隙。作者刻意避免面积计算的复杂方案,仅用简单规则即可在小尺寸网格上获得可接受的像素艺术效果。

Rasterization

缩放图像带来 AI 的即时注入风险

文章指出 bicubic interpolation 是三种主要下采样算法之一,Anamorpher 通过优化高分辨率图像中暗区的高重要性像素,利用 4x4 邻域的立方多项式权重关系,使下采样后背景转为红色而文字保持黑色对比。文中说明该方法对 bicubic 实现效果最佳,也适用于特定 bilinear 实现。

Bicubic interpolation

缩放图像带来 AI 的即时注入风险

本文将 Bilinear interpolation 列为三种主要下采样算法之一,用于把多个高分辨率像素值插值为单个低分辨率像素。攻击需针对其特定权重分配与实现差异设计载荷,Anamorpher 已支持对其特定实现的利用。该算法与最近邻、双三次插值并列,共同构成生产 AI 系统图像缩放攻击的攻击面。

Bilinear interpolation

缩放图像带来 AI 的即时注入风险

本文指出 Nearest-neighbor interpolation 是三种主要下采样算法之一,直接取最近像素值完成缩放。不同库对其实现存在差异,攻击者需单独适配才能触发有效提示注入。文章将其与双线性、双三次插值并列,说明每种算法都需要定制化攻击方法。

Nearest-neighbor interpolation

如何制作宝可梦 TCGP 卡牌

本文中用于色差卡棱镜表现的颜色插值。采用OkLab色空间进行颜色混合,能在保持明度和彩度感知均匀的同时实现自然过渡,提升整体格式的协调感。该处理在Houdini生成的网格顶点着色器中完成。

Oklab

如何制作宝可梦 TCGP 卡牌

本文中指纸质卡牌全息效果的实现原理。纸卡通过回折格子薄膜使光线按波长不同方向衍射产生虹色反射。游戏中用相位纹理和着色器模拟类似干涉图案,再用渐变纹理上色实现棱镜效果,并通过遮罩控制插图可见度。

Diffraction Grating

如何制作宝可梦 TCGP 卡牌

文章中离屏渲染用于在运行时将卡面外观与姿态解耦:在专用空间拍摄卡牌,再将结果渲染到厚卡模型表面的板面多边形上。无论演出中如何自由翻转卡牌,都能保持霍洛图形与视差效果的正确显示,避免角色被遮挡或光效溢出。

Off-screen Rendering

如何制作宝可梦 TCGP 卡牌

文章中视差效果应用于♢♢♢♢与☆☆等高稀有度卡牌,通过着色器依据相机方向与卡牌角度偏移背景图UV,营造立体纵深。背景插画、3D宝可梦模型与多层霍洛图形共同作用,使卡牌倾斜时呈现强烈战斗张力与收藏价值。

Parallax Effect

如何制作宝可梦 TCGP 卡牌

本文中用于控制马赛克背景动画的参数。结合卡牌倾斜方向调整点配置、影响度和扭曲,通过PD控制使动画起点和终点产生延迟,营造液体流动的拖沓质感。最终还加入位移处理以避免有机感过强导致不适。

PD Control

如何制作宝可梦 TCGP 卡牌

文章中Cellular Noise被选作ウルトラビースト☆☆卡背景的大理石纹理核心算法。通过在像素着色器中计算各点到多个控制点的距离与影响度,配合UV扭曲与PD控制,实现随卡牌倾斜而自然流动的有机液体动画。

Cellular Noise

如何制作宝可梦 TCGP 卡牌

本文中指Houdini中用于透视校正的脚本语言。在Wrangle节点中使用VEX脚本,根据相机距离计算并设置各点的缩放值,确保正面观看时还原原画外观。该机制让美术人员可安心调整深度而无需担心比例偏差。

VEX

平板端和移动端的 Blender 如何适配交互

文章宣布将在 2025 年温哥华 SIGGRAPH 大会的 Blender 展位上,首次公开展示 iPad Pro 版 Blender 的技术演示。

SIGGRAPH

缓动函数各有千秋

该滤波器通过卷积为任意运动轨迹添加 anticipation 与 overshoot。作者分析其处理线性运动时,物体在超调阶段反而加速,与物理直觉不符,因此认为该方法在实际动画中不够实用。

Laplacian-of-Gaussian Filter

缓动函数各有千秋

文章引用迪士尼动画师提出的 12 原则,重点讨论其中 slow in slow out、follow through 和 anticipation 原则。线性动画违反这些原则导致运动生硬,而 easing function 被视为遵守原则的常用手段,但灵活性仍不足。

12 Principles of Animation

在 OpenAI 工作是什么感受

文章强调GPU成本几乎是OpenAI所有开销的主导因素,一个Codex功能所用GPU资源就相当于Segment全部基础设施规模。团队需从延迟需求出发进行GPU负载预测与基准测试,而非单纯自下而上分析。测试用例在GPU上并行运行时耗时可达30分钟。

GPU

PNG 第 3 版新标准

本文中 APNG 指动画 PNG,早由 Mozilla 提出并在 Firefox 中实现,新规范首次正式认可其地位。由于实际应用已广泛普及,此举让规范与现实保持一致,避免格式碎片化。

APNG

PNG 第 3 版新标准

Rec. 2020 在文中代表 HDR 图像的宽色域,通过对比图显示其范围远超常见色域。新 PNG 规范以此实现 HDR 支持,仅需额外 4 字节开销,达到面向未来的色彩覆盖。

Rec. 2020

PNG 第 3 版新标准

本文中 Exif 获得 PNG 新规范正式支持,用于存放照片版权、相机镜头参数及 GPS 位置等元数据。这一改动让 PNG 能更好地承载摄影相关信息,与 HDR 功能共同构成规范更新要点。

Exif

苹果新的基座模型性能如何?

文章指出,苹果使用最初为图形管线设计的自适应可扩展纹理压缩技术,将AFM-server模型平均压缩至每权重3.56比特(嵌入层4比特)。此方法帮助服务器端模型在保持多模态能力的同时显著降低存储需求,与设备端模型形成互补。

Adaptive Scalable Texture Compression

PNG 第 3 版新标准

本文将 SDR 作为标准动态范围图像,与 HDR 并列提及。第四版规范重点改进 HDR 与 SDR 的互操作性,确保不同设备间色彩一致。作者表示正在研究相关方案,避免格式分裂。

SDR

PNG 第 3 版新标准

Rec. 709 在文中对应大多数普通图像的较小色域空间,本文用其与 Rec. 2020 的图示对比,说明新规范带来的 HDR 色彩扩展效果。

Rec. 709

PNG 第 3 版新标准

PNG Working Group 的成员完成了新规范的全部制定工作,涵盖 HDR、动画及 Exif 支持等内容。参与者包括 Adobe、Apple、Google 等多家机构代表。

PNG Working Group

PNG 第 3 版新标准

本文指 W3C 刚发布的 PNG 第三版规范,解决了二十多年来的格式停滞问题。核心更新包括 HDR 色彩支持、正式接纳动画以及 Exif 信息存储,仅用少量字节实现扩展。规范由多方参与制定,已在 Chrome、Photoshop 等主流软件中获得支持。

PNG 3

PNG 第 3 版新标准

本文中 HDR 指高动态范围图像,新 PNG 规范为其提供原生支持,仅需额外 4 字节存储色域信息。相比传统色空间,它覆盖更大可见颜色范围,适用于广播与影视场景。文章指出该支持兼具前瞻性,后续版本还将优化其与 SDR 的互操作。

HDR

PNG 第 3 版新标准

本文中 PNG 是停滞二十余年的经典图像格式,新规范发布后重新获得活力,被多家国家图书馆长期推荐。它新增 HDR 支持、动画识别及元数据功能,保持与现代显示和广播需求同步。文章强调这让 PNG 恢复竞争力,后续两版规范已在规划中。

PNG

Mario Kart World 的伪 HDR

本文指出《Mario Kart World》实际输出的HDR格式为HDR10,但采用单斜率静态色调映射,峰值永远锁在约950尼特,且色彩完全限制在Rec.709范围内。测试显示无论主机HDR亮度设为2000尼特还是10000尼特,画面均无额外高光细节或宽色域,实质是将SDR母版拉伸后贴上HDR10标签。作者以此证明该作属于“假HDR”,并强调这种做法既浪费Switch 2的4K60 HDR管线,也让支持HDR10的电视失去应有表现。

HDR10+

Mario Kart World 的伪 HDR

文章引用Hunt Effect说明为何HDR画面看似更饱和:亮度提升会让观者主观感觉颜色更鲜艳,但实际游戏仍完全钳位于Rec.709色域,未真正扩展色彩体积。这导致UI、轮胎火花和爆炸等元素无法获得应有的亮色突出效果,反映出SDR优先制作对HDR潜力的浪费。

Hunt Effect

Mario Kart World 的伪 HDR

本文提到天空出现的明显色带可能源于渲染管线使用了R9G9B9E5作为后备缓冲区以节省带宽。该格式精度较低,若未做抖动处理,过渡区域在HDR下会更明显。作者认为若美术团队在HDR显示器上进行审查,此类问题本可在早期被发现并修正,而非留到最终SDR优先流程中。

R9G9B9E5

Mario Kart World 的伪 HDR

本文将HDR10+列为2025年主流电视标配的动态HDR技术之一,与Dolby Vision及逐帧色调映射并列,代表消费者硬件已能处理每帧亮度变化。文章用它反衬《Mario Kart World》的静态映射缺陷:即使电视支持HDR10+,游戏仍输出固定上限约950尼特的画面,无法发挥动态优势。作者认为开发者若继续SDR优先流程,就等于放弃HDR10+等新标准带来的画质提升空间。

HDR10+

Liquid Glass 之外 Apple 的改变

本文提到 WebGL 是实现类似 Liquid Glass 折射与边缘反射效果的已有技术方案。苹果在此基础上优化了效果精细度,并初步平衡了视觉质量与性能开销。但将该效果嵌入实际界面后,背景干扰问题仍较突出。

WebGL

Mario Kart World 的伪 HDR

本文将Rec.2100作为目标HDR显示空间,游戏通过固定函数从FP16线性缓冲转换至此空间。但实测峰值亮度始终停留在约950尼特,即使将主机HDR设置调至10000尼特也无变化。任天堂自带测试图仅达500尼特,表明动态范围和色域均未真正启用,输出更接近SDR拉伸后的伪HDR效果。

Rec.2100

让 GPU 渲染更清晰的字型

针对OLED非标准子像素结构导致的彩边问题,方案对R/G/B子像素分别采样并累积最高512次样本。支持子像素偏移量化(u0.8定点),使平滑滚动文本无阶梯感,且通过子像素区域重叠模拟光扩散,有效消除彩边。

Subpixel Anti-Aliasing

让 GPU 渲染更清晰的字型

文章采用Z-order曲线(Morton codes)实现图集字形打包。将字形尺寸对齐至下一个2的幂次方后,可从一维比特集中连续分配方形区域,实现高效的2D空间利用;同时支持转置Z-order以适应纵向细长拉丁字母字形,减少内存占用。

Z-order curve

让 GPU 渲染更清晰的字型

文中引用Shadertoy演示R2准随机序列如何随时间分布采样点,用于计算字形覆盖率以实现高质量累积抗锯齿。该演示帮助说明准随机采样在逐帧细化文本渲染中的应用效果。

Shadertoy

让 GPU 渲染更清晰的字型

核心机制是让字形长期驻留图集并逐帧累积光线采样。第一帧投8样本,后续逐帧递减至单样本,最高累积512样本即可获得极高质量子像素抗锯齿;静态或缓慢移动文本因此几乎零额外开销,峰值仅0.1ms@4K。

Temporal Accumulation

让 GPU 渲染更清晰的字型

本文提出将字体字形定义的二次贝塞尔曲线直接发送至GPU,在运行时进行光栅化并累积到图集纹理中,避免离线烘焙。相比SDF方案,此方法显著降低内存占用,支持任意分辨率与子像素抗锯齿,且在静止文本场景下可快速收敛至高品质。实测4K全屏文本峰值耗时约0.1毫秒。

GPU

让 GPU 渲染更清晰的字型

文章将FreeType加载的直线与三次贝塞尔全部转换为二次贝塞尔曲线(直线取中点,三次贝塞尔拆分为两段二次),存储为GPU可直接使用的曲线数据。运行时按水平带位图加速曲线求交,计算非零环绕数得到覆盖值。

Bézier Curve

让 GPU 渲染更清晰的字型

文章推荐Sebastian Lague的Rendering Text视频,作为解释字形光栅化原理和GPU文本渲染方法的参考资源。作者指出该视频与GreenLightning仓库一起,能帮助理解曲线求交与覆盖计算的核心数学过程。

Sebastian Lague

让 GPU 渲染更清晰的字型

Multi-Channel Signed Distance Fields是作者上次落地的方案,能较好处理锐利字形,但仍存在薄特征丢失、图集内存压力大、难以灵活扩展子像素抗锯齿等问题,成为本次重新实现字形渲染的直接诱因。

MSDF

让 GPU 渲染更清晰的字型

作者此前采用SDF方案渲染文本,虽能减少图集分辨率需求,但薄特征字体易丢失细节、需更高分辨率消除伪影,且图集尺寸随字形数量快速膨胀。灵活性不足,难以实时支持子像素抗锯齿或任意矢量图形。

SDF

让 GPU 渲染更清晰的字型

作为离线工具的中间层,用于加载多种字体格式并遍历每个字形的轮廓曲线,随后将曲线转换为二次贝塞尔并写入自定义资产格式,供运行时直接送入GPU进行光栅化。

FreeType

让 GPU 渲染更清晰的字型

文中指出TrueType(.ttf)格式仅包含二次贝塞尔曲线,可直接避免将三次曲线拆分为两个二次曲线的近似转换过程。通过离线工具将字体转为该格式,能进一步简化GPU着色器中的曲线处理逻辑。

TrueType

Bethesda 当年的 Radiant AI 到底是什么?

文章提到《Oblivion重制版》以原版2006年游戏引擎和内容为基础,仅用Unreal Engine 5处理音画呈现。该引擎能生成令人惊叹的视觉效果,但核心游戏逻辑仍依赖旧版Creation Engine。

Unreal Engine 5

提取 iPhone 照片的深度图

本文中HDR Gain Map是从iPhone 15 Pro HEIC文件中提取的辅助图像,分辨率为2856x2142,文件名为IMG_E2153_hdrgainmap_48.tiff。在转换流程中,它被转为EXR格式,通过HDRGainMapHeadroom值缩放后与基础图像相乘,生成HDR基础图,最终作为独立通道嵌入最终EXR文件。

HDR Gain Map

提取 iPhone 照片的深度图

高效率图像文件格式 (HEIF) 是苹果用来封装多张图像及大量元数据(含深度图)的容器格式,2013-2015 年设计并于 2017 年被采用。iPhone 默认以其 HEIC 变体存储照片,若不需要深度或 HDR 可改用 JPEG。

HEIF

提取 iPhone 照片的深度图

HEIC 是苹果 2017 年采用的 HEIF 变体,成为 iPhone 默认照片存储格式,可同时保存深度图、HDR 增益图等数据。示例 1.57MB 的 HEIC 文件经脚本处理后分离出深度图和元数据 JSON,便于转换为 EXR 文件用于专业后期。

HEIC

提取 iPhone 照片的深度图

本文中OpenImageIO的oiiotool工具承担了HEIC转EXR的核心图像处理任务,包括色彩空间转换(sRGB到ACEScg)、通道重命名、增益图缩放、深度图调整以及多层EXR合成。脚本通过多次调用oiiotool完成从基础图像到最终ACEScg EXR的完整流程。

OpenImageIO

提取 iPhone 照片的深度图

本文中OpenColorIO作为色彩管理工具,其studio-config-v1.0.0_aces-v1.3_ocio-v2.1.ocio配置文件被heic_to_exr.py脚本调用,实现iPhone图像从sRGB曲线经Linear P3到ACEScg的转换。该文件含1242行内容,支持后续OpenEXR格式的HDR处理流程。

OpenColorIO

提取 iPhone 照片的深度图

本文中OpenEXR作为最终输出的HDR图像格式,由heic_to_exr.py脚本生成468MB的ACEScg EXR文件。该文件整合了基础图像、HDR增益图、深度图等多个通道,通过oiiotool多次处理得到。文章展示了如何将iPhone 15 Pro的HEIC内容转换为专业VFX可用的OpenEXR格式,并用DJV查看结果。

OpenEXR

提取 iPhone 照片的深度图

ACES即Academy Color Encoding System,在本文色彩管线中作为目标空间(ACEScg),通过OpenColorIO配置完成从iPhone 15 Pro基础图像的sRGB到Linear Rec.709再到ACES的转换,以生成兼容VFX的HDR EXR文件。

ACES

提取 iPhone 照片的深度图

Academy Software Foundation在文中被描述为电影电视行业开源项目与标准的推动者,其孵化的OpenEXR、OpenColorIO和OpenImageIO项目直接用于iPhone HEIC到EXR的转换、色彩管理和图像处理流程。

Academy Software Foundation

提取 iPhone 照片的深度图

本文使用DJV v2.0.8查看转换生成的468MB EXR文件,展示包含SDR、HDR增益图和深度通道的最终图像效果。作为验证工具,DJV帮助确认oiiotool处理后的多通道OpenEXR文件内容是否正确。

DJV

提取 iPhone 照片的深度图

本文讨论 iPhone 15 Pro 生成的深度图存储于 HEIC 文件中,作为图像元数据的一部分。示例中深度图分辨率为 768x576 像素,远小于基础图像的 5712x4284 像素,可通过脚本提取为 TIFF 并转换为 EXR 用于影视后期。深度图与 HDR 增益图共同支持高级图像处理和视觉特效需求。

Depth Map

早期游戏像素适配对比

文章核心讨论计算机游戏的宽高比问题,指出正确还原原始宽高比是实现超真实性的关键因素。通过C64演示说明,不同宽高比会直接影响像素艺术的视觉呈现和历史准确性。

Aspect Ratio

早期游戏像素适配对比

本文中的像素艺术特指Commodore 64平台上的复古图形风格,由The 8-Bit Guy的演示展示其工作原理。该内容服务于宽高比讨论,强调像素在原始显示条件下的真实外观对游戏还原的重要性。

Pixel Art

2025 年怎么不用引擎做游戏

文中 DirectX 是 SDL3 GPU 抽象层支持的渲染后端之一,作者此前曾自行实现 OpenGL 和 DirectX 以达成跨平台渲染。SDL3 的 GPU 抽象让开发者无需再手动维护这些后端,即可在 Windows 等平台稳定运行游戏。

DirectX

2025 年怎么不用引擎做游戏

本文将 Vulkan 列为 SDL3 GPU 抽象层覆盖的渲染 API 之一,与 DirectX、Metal 并列。借助 SDL3,开发者可通过统一接口使用 Vulkan,无需单独编写平台特定代码,显著降低自定义引擎的渲染维护成本。

Vulkan

Nintendo 64 上的利用调色板模拟光照

本文中的Normal Mapping通过CPU在运行时将光照直接写入纹理实现,无需专用硬件支持。作者将其与调色板结合,仅着色少量颜色索引即可影响整张纹理,解决了N64性能瓶颈。最终演示中同时支持方向环境光与太阳直射光,并通过顶点通道分别存储。

Normal Mapping

Nintendo 64 上的利用调色板模拟光照

本文指出常规Tangent-space Normal Mapping支持重复纹理与平滑调制顶点法线,但作者因城堡模型重复纹理问题,转而拆分网格并近似使用物体空间方案。最终结果因切线空间不插值而出现分面光照,这是该方法的最大缺点。

Normal Mapping

Nintendo 64 上的利用调色板模拟光照

文章采用基于图像的光照实现定向环境光:使用等距柱状投影的模糊HDRI作为灰度辐照度图,与顶点RGB相乘得到环境项。该方法仅靠着色顶点AO与低频环境图即可让重复纹理的建筑立面呈现出较高质感的光照细节。

Image-based Lighting

color-contrast() 的不足与弥补

文章把 Oklab 与 OKLCH 并列,视为 Lab/LCH 的改进版感知均匀色彩空间,用于解释为什么单纯比较 Lightness 即可近似判断黑白文本的可读性。文中指出 Oklab/OKLCH 虽不能完全等同于对比度,但与实际可读性存在显著相关性,因此可作为 RCS 方案的数学基础。

Oklab

Nintendo 64 上的利用调色板模拟光照

本文作者此前在N64上自行尝试过Emboss Bump Mapping黑客方法,作为对WadeTyhon与Spooky Iluha等人法线贴图实验的补充。该方法同样属于无需专用硬件、在CPU上运行任意着色代码的纹理空间光照思路,但速度较慢。文章将其与本次提出的调色板着色技术对比,说明后者在性能上的改进。

Emboss Bump Mapping

Nintendo 64 上的利用调色板模拟光照

文章结尾提到2003年一篇论文已在Nvidia RIVA 128上实现了与本文完全相同的“调色板着色”技术,只是该方案支持的调色板规模可达数千色,而N64受限于硬件仅使用极小的调色板。

Nvidia RIVA 128

Nintendo 64 上的利用调色板模拟光照

演示中尝试在调色板着色框架下实现实时镜面高光,但因多个表面点共享同一调色板索引,无法正确处理依赖观察方向V的计算。作者将物体近似为球体,用法线直接计算高光位置,在Fresnel效果上获得一定视觉效果,却呈现明显分面外观。尽管结果不够精确,仍成功迷惑多数观众,被视为技术折中下的成功尝试。

Specular Shading

Nintendo 64 上的利用调色板模拟光照

Revision 2025是本文演示程序参赛的聚会,作者为该活动制作了一款Nintendo 64程序,包含基于调色板的烘焙光照与实时镜面反射。程序的美术资源与音乐均针对此次活动准备,展示了该平台在限制条件下的高级渲染技巧。

Revision 2025

Nintendo 64 上的利用调色板模拟光照

本文采用Object-space Normal Mapping,将法线直接存储为绝对方向而非切线偏移,简化了运行时计算。代价是每个表面点需唯一纹素,无法重复使用纹理,类似光照贴图。作者通过K-means将高分辨率法线图压缩至32色调色板进行验证。

Normal Mapping

Nintendo 64 上的利用调色板模拟光照

Palette Shading是本文核心技巧:通过K-means让漫反射纹理与法线贴图共享调色板索引,仅对调色板进行CPU着色即可更新整张纹理。适用于方向光与烘焙环境光,但无法正确处理逐点镜面反射或阴影。作者在演示中用球体近似处理高光,效果虽不完美但仍具欺骗性。

Palette Shading

在 Playdate 上渲染伪 3D 画面

Amortised Rendering指每帧仅计算屏幕1/6像素,采用2×3循环或chunky模式更新剩余像素。高速运动时切换chunky渲染以3帧完成全屏,低速时使用精细模式实现6帧循环。该方法使游戏在Playdate上维持约50帧,避免每帧全屏计算导致的帧率崩溃,同时产生轻微运动模糊效果。

Amortised Rendering

在 Playdate 上渲染伪 3D 画面

Castle Kellmore的核心渲染方法,仿照Wolfenstein 3D,每像素列发射一条2D平面射线以获取墙壁距离。距离决定垂直跨度高度,再结合头部晃动与水平地板绘制实现伪3D效果,全部计算限制在整数范围内以保证性能。

Raycasting

在 Playdate 上渲染伪 3D 画面

本文中的Depth Buffer是每像素列的线性深度缓存,仅记录墙壁与精灵的距离值。渲染流程中先填充墙壁深度,再按前后顺序绘制精灵并更新深度,墙壁随后从精灵边界开始绘制以消除重叠像素。由于Playdate内存和CPU不足以支持全屏深度缓冲,这种列式方案成为避免过绘的关键优化手段。

Depth Buffer

Zed 如何将界面优化到 120 fps

本文中 CAMetalLayer 作为 GPUI 每个窗口根视图的底层支持层。通过设置 presentsWithTransaction 属性,它让 Metal 呈现与 Core Animation 事务同步,避免系统对旧帧内容进行拉伸插值而产生抖动。文章对比了 direct mode 与 composited mode 下的行为,最终改用 waitUntilScheduled 代替 waitUntilCompleted,既保持同步又避免主线程被过度阻塞。

CAMetalLayer

Zed 如何将界面优化到 120 fps

为解决切换到 waitUntilScheduled 后出现的竞争条件,文章引入实例缓冲池实现 triple buffering。帧开始时从池中获取缓冲区,绘制完成后通过 completed handler 异步归还,避免 GPU 读取第 N 帧时 CPU 同时写入同一内存导致的图形损坏和闪烁。

Triple Buffering

Zed 如何将界面优化到 120 fps

Metal 是苹果低级图形 API,在 GPUI 中用于直接向帧缓冲绘制内容。优化过程包括切换同步等待方式、采用多缓冲池防止 GPU 读写冲突、改用 presentDrawable 提交,并通过 CADisplayLink 保持恒定刷新率,最终在直接模式下实现稳定 120 FPS,避免了 ProMotion 降频导致的掉帧。

Metal

将代码编译成诗歌和艺术

本文作者实践涵盖实时模拟,HyperDog中屏幕呈现的盒子展开、物体漂浮、代码矩阵级联并重组成活体狗的连续变化,体现了这一技术应用。模拟过程将用户输入实时转化为视觉与二进制结果,展示计算如何动态承载叙事而非静态展示。作品以此探索新兴科技作为替代时间与历史叙事媒介的可能性。

实时模拟

HDR Emoji

本文中 HDR 指为 Slack 反应图标添加的高动态范围版本,能在支持硬件上呈现极高亮度。这些表情符号通过特定图像处理实现,在兼容设备上视觉冲击更强。文章说明该效果主要依赖 Rec. 2020 色彩配置文件,且仅在部分浏览器和平台生效。

HDR

HDR Emoji

ImageMagick 是本文生成 HDR 表情符号所使用的命令行工具。作者提供了完整脚本,包含色彩空间转换、亮度乘法调整、伽马校正以及应用 16 位深度和 Rec. 2020 配置文件等步骤。通过这些处理,普通 PNG 图片可被转换为适合 Slack 的 HDR 格式。

ImageMagick

HDR Emoji

Rec. 2020 是本文中用于 HDR 图片输出的色彩配置文件(对应 2020_profile.icc 文件)。脚本通过 -profile 参数将其应用到处理后的图像,使其具备高动态范围特性。该配置文件是实现 Slack 中刺眼亮度效果的关键步骤之一。

Rec. 2020

HDR Emoji

本文中 sRGB 出现在 ImageMagick 处理脚本的结尾,作为从 RGB 色彩空间转换回的目标空间,随后搭配 2020 配置文件和 16 位深度输出 HDR emoji,确保图像能在 Slack 中正确渲染高动态范围效果。

sRGB

深入锚点链接

本文借用计算机图形学中的smoothstep三次多项式函数,构造自定义映射函数,将标题归一化位置映射为上移调整因子。该函数满足起点为0、终点为1、两端导数为0的平滑要求。作者先对输入做线性缩放与夹紧,再套用smoothstep,从而让前半部分标题几乎不动,后半部分平滑上移,解决长页面底部标题不可达问题。

Smoothstep

纯 CSS 实现图像的占位图

本文将双线性插值作为低分辨率图像缩放时的基础平滑方式,用于避免径向渐变产生的硬边缘。作者通过在 CSS 渐变中插入多个停靠点并应用二次缓动公式来近似这种插值,从而实现更自然的模糊占位符效果。

Bilinear interpolation

纯 CSS 实现图像的占位图

文章提到双三次插值在图像放大时效果优于双线性插值,并将其作为 CSS 模拟目标的参考。作者展示了不同插值方式的视觉对比,说明径向渐变的二次缓动可接近双三次插值的平滑程度。

Bicubic interpolation

纯 CSS 实现图像的占位图

Oklab 色彩空间被用于 LQIP 编码中的 base 颜色:低 8 位中用 2 位存亮度、3 位各存 a/b 分量。作者认为其主观平衡效果优于 RGB,便于后续 CSS 通过 oklab() 函数直接构造颜色变量并叠加亮度层。

Oklab

CSS、iOS 和 Android 的阴影参数转换

本文指出 Android 渲染依赖 Skia 库,其模糊半径按 1/sqrt(3) 缩放,源于早期 Safari 的代码注释。该做法导致 Android 投影比 CSS 更模糊,需 1.155 倍缩放才能与网页、Sketch、Figma 匹配。

Skia

CSS Relative Colors

本文将 HSL 作为相对颜色的基础用法示例,通过 hsl(from #9333ea h s calc(l+10)) 生成浅色或深色变体。但文章强调其 lightness 不具感知均匀性,导致相同 lightness 的颜色对比度不一致,标签与按钮示例中对比度测试均不及 OKLCH。

HSL

CSS Relative Colors

文章用 rgb(from #000 r g b / 0.1) 演示相对颜色修改透明度,适用于按钮边框、阴影、渐变叠加及模态背景。计算后颜色仍保留在 sRGB 空间,文中多次展示通过调整 alpha 值实现动态效果,并作为 color-mix() 的现代替代方案。

RGB

纽约曼哈顿最勤奋的字体 Gorton

Hershey Fonts是早期计算机开发的矢量字体,直接源自Gorton/Leroy形状,将曲线简化为直线序列绘制。它至今仍广泛用于CAD应用,展示了Gorton从机械雕刻向数字矢量字体的演变与影响。

Hershey Fonts

Designing Depth

本文讨论Depth of Field在界面中的应用:启动叠加层时模糊背景,模拟人眼自然景深。iOS上下文菜单示例显示,若不模糊主屏幕会误导交互范围;模糊处理能正确传达只有菜单可操作,从而增强界面维度。

Depth of Field

Vercel 的设计工程师

Three.js 是 Vercel Design Engineer 团队工具箱中的一项,用于创建网页 3D 体验。团队成员可通过它与 Blender 模型结合,快速验证品牌或营销概念。文章指出该技能帮助团队实现更具探索性的设计方案。

Three.js

Vercel 的设计工程师

文章在设计工程工具箱部分提到GLSL着色器编写能力,作为团队可执行的技能之一。它用于实现复杂视觉效果和性能优化,与调试浏览器性能等其他能力共同支撑高质量用户界面。GLSL并非个人必备,而是团队整体覆盖的专长,助力Vercel产品和营销内容的视觉表现。

GLSL

Console delight

文章指出css-doodle最近增加了对GLSL着色器的支持,使其能创建更复杂的控制台渲染效果。

GLSL

Google 推出开源模型 Gemma

本文强调 Gemma 在 NVIDIA GPU 上实现行业领先性能,支持从数据中心到 RTX AI PC 的跨平台运行。GPU 是 Gemma 优化硬件平台之一,与 TPU、CPU 共同构成成本高效的基础设施选项,支撑模型在云端及本地部署。

GPU

素型纽结 SVG

作者用半边结构从组合嵌入中提取各面,方法是沿四度顶点依次绕行,并将结果存为 combined.json,供后续元图构建使用。

Half-Edge Data Structure

素型纽结 SVG

本文提及 WebGL 用于作者早期 3D 带光照的结图展示,与本次 2D SVG 方案形成对比,强调数学上结更接近 4-正则平面图嵌入。

WebGL

素型纽结 SVG

本文指出 Tutte 弹簧嵌入能满足无边交叉且确定性要求,但无法生成美观的曲线边,因此未被采用,转而选择圆 packing。

Tutte Spring Embedding

电影风格分析

文中分析《The Batman》使用老式镜头制造景深浅、边缘失真与锐度衰减,使画面有效区域集中于中心,背景大幅虚化;《The Dark Knight》则保持大景深与全程清晰。对比显示,前者虽技术上“不够完美”,却因减少无关细节而让构图更简洁有力,雨景进一步增强主体突出效果。

Depth of Field

着色器深度介绍

本文中的Metaballs是通过多个圆形SDF结合smin函数生成的平滑动画blob,可随时间与鼠标交互变形,常用于模拟熔岩灯般的有机形状。

Metaballs

着色器深度介绍

文章将GPU描述为并行处理像素的设备,虽逻辑简单但速度极快,与CPU形成对比,是着色器高效生成图形和动画的核心硬件基础。

GPU

着色器深度介绍

文中推荐其二维距离函数列表,作为扩展学习SDF各种形状定义的资源链接,帮助读者探索更多复杂图形构建方式。

Inigo Quilez

一些艺术家分享使用 AIGC 工具的工作流

本文中 Houdini 作为节点式工作流的例子,与 TouchDesigner、Blender 并列,用来说明 Dom Harwood 使用的 AI 接口如 Comfy UI 的操作逻辑。它帮助读者理解 AI 工具如何支持复杂的视觉研究与动画流程。

Houdini

The Pudding Cup

Dithering — Part I 项目以动画形式讲解抖动算法,通过黑白网格演示如何用有限颜色模拟渐变,获得评委认可并入选 2025 年 Pudding Cup 获奖作品,续作值得期待。

抖动算法

着色器深度介绍

文章选择 GLSL 作为 shader 语言,因其浏览器友好,适合 WebGL 环境。所有示例代码均使用 GLSL 语法,包括 varying、uniform、step、smoothstep 等内置函数。

GLSL

着色器深度介绍

本文核心技术,通过带符号距离函数定义形状,支持min运算和平滑最小值,实现圆形融合与metaball动画,是创建blob效果的关键方法。

SDF

着色器深度介绍

本文作者,通过交互式代码示例,分享从简单梯度到metaball动画的GLSL片段着色器学习历程,并提供完整可运行示例与参数调节。

Antoine Mayerowitz

一些艺术家分享使用 AIGC 工具的工作流

本文中ControlNet是Stable Diffusion的开源扩展工具,通过神经网络为图像生成添加额外条件约束。用户可根据需求设置参数,控制生成结果的具体特征。它被归类为Stable Diffusion Control Net,与其他工具共同构成Dom Harwood的工具链。

ControlNet

着色器深度介绍

本文中Smooth Minimum指用于融合多个SDF距离值的平滑最小函数smin,通过参数k控制过渡平滑度,避免min()产生的尖锐不连续,实现果冻般柔和融合效果。

Smooth Minimum

着色器深度介绍

本文将 Shader 定义为在 GPU 上运行的小型程序,输入像素坐标并输出颜色,因并行化而极快,适合生成渐变、形状与动画。作者用它替代原有简单图形效果,展示从基础到 metaball 的实现过程。

Shader

着色器深度介绍

文章重点聚焦 fragment shader,说明其通过坐标到颜色的映射实现图形绘制,如用 step 和 SDF 创建圆形与融合效果。所有代码示例均为 fragment shader,强调其在浏览器中的实时交互特性。

Fragment Shader

着色器深度介绍

文中指出掌握本文介绍的片段着色器与SDF技术,能帮助理解Unity Shader Graph等节点化编辑器的实现原理。

Unity Shader Graph

着色器深度介绍

文中推荐作为深入学习着色器入门的资源,提供了全面的GLSL教程链接,适合希望进一步掌握片段着色器和数学基础的读者。

The Book of Shaders

Vision Pro 空间视频前瞻

文章说明 Vision Pro 采用注视点渲染技术,借助眼动追踪仅对注视中心区域以高分辨率渲染,其余周边区域降低画质以减轻负载。注视移动时系统能极快更新显示,几乎察觉不到过渡;快速扫视时偶尔可短暂捕捉到分辨率切换瞬间。

注视点渲染

一些艺术家分享使用 AIGC 工具的工作流

文章中 Dom Harwood 将 Comfy UI 等 AI 节点界面与 TouchDesigner 相比较,指出两者均为节点式工作流,便于创建自定义流程。TouchDesigner 被用来解释 AI 工具的复杂操作方式,突出 Dom 的技术背景与实践。

TouchDesigner

着色器深度介绍

文章简要提及顶点着色器可操作顶点位置,但主题聚焦片段着色器,将其作为读者自行练习的延伸内容,未展开详细讨论。

Vertex Shader

JetBrains 的 AI 创作历程

本文指出 CPPN 的计算图可轻松转换为 GLSL 代码,生成可在浏览器中直接运行的 WebGL 片段着色器。动画视频完成后导出为 GLSL,实现无缝循环动画效果。Qodana 落地页即采用了该方式展示 CPPN 生成的动态图形。

GLSL

Google 地图渲染

LOD 在文中指 .hda 中控制纹理与网格细节等级的设置,最高细节为 2,最低可达 60000。较高 LOD 会产生数百万点与多边形,下载量大且耗时。作者通过调整 LOD 实现 500m 高细节区域与外部低细节填充,以控制场景规模。

LOD

JetBrains 的 AI 创作历程

本文介绍 Textual Inversion(p-tuning)通过冻结 UNet、VAE 和文本编码器权重,仅训练文本编码器中每个嵌入的新词(768 参数)。该方法支持最多 77 个可组合嵌入,训练约 2 小时即可在 RTX 4090 上完成。文章展示了使用“digital art in the style of ”提示词随训练步数增加逐步显现风格的过程。

Textual Inversion

JetBrains 的 AI 创作历程

WebGL 是 JetBrains 早期主要采用的技术,可在浏览器中实时随机生成图像。该方法曾用于 IDEA 2016.1 和 PyCharm 2019.3 等启动画面,目前交互归档仍可在线查看。

WebGL

Google 地图渲染

本文中作者在下载的旧金山 Google Maps 网格上添加了群集模拟(flocking simulation),让数十万个物体沿街道移动,同时保持与建筑表面 1-2 米的距离。模拟结合了 Houdini Labs 工具和 MapBox API 获取的 OSM 街道数据,使物体既避开建筑又形成有趣的群飞图案。作者计划未来渲染更长视频,但目前仅展示了静态效果。

Flocking Simulation

JetBrains 的 AI 创作历程

CPPN 将像素坐标映射为 RGB 值,JetBrains 使用随机初始化版本生成抽象图案。通过引入虚拟参数(a,b,c,f),可实现形状控制、颜色校正和基于样条曲线的无缝循环动画。最终还能导出为 WebGL 着色器运行。

CPPN

Stable Diffusion 二维码

本文标题为 ControlNet for QR Code,聚焦于将 ControlNet 技术应用于 QR Code 的生成场景。文章由倪豪撰写并发布于微信公众平台,核心探讨 ControlNet 在二维码相关图像任务中的具体用法与效果。

ControlNet

谈谈 web GPU

本文将Khronos Group追溯为ARB演变而来,负责OpenGL ES、Vulkan及WebGPU相关标准制定。其决策日益受硬件厂商驱动,曾设计Vulkan供中间件使用,而非直接面向终端开发者。

Khronos Group

谈谈 web GPU

本文将 wgpu 定位为 Rust 生态中的 WebGPU 实现,提供官方教程与示例仓库。它支持在桌面端与浏览器(通过 wasm)上使用相同 API,编译后的二进制体积较小,且已成为若干新兴 Rust GUI 框架的底层图形层。

wgpu

谈谈 web GPU

文章梳理OpenGL自SGI时代演进至固定功能与可编程着色器阶段的历史,指出其因遗留功能、驱动碎片化及移动端ES分支而变得臃肿,最终被更现代的API取代。WebGL即源自其ES版本,暴露出原有API的诸多局限。

OpenGL

谈谈 web GPU

本文中AZDO指Approaching Zero Driver Overhead理念,源于GDC演讲,奠定了Vulkan、DirectX 12和Metal的设计基础。它主张让图形API调用直接映射GPU硬件操作,消除驱动程序的猜测与优化开销,从而提升性能与可预测性。

AZDO

谈谈 web GPU

本文建议仅想在简单网页中嵌入脚本而不想处理低层 WebGPU 细节的开发者,改用 Three.js 等高层库。它可通过 CDN 直接以 script 标签引入,避免手动管理管线对象与着色器等复杂初始化流程。

Three.js

谈谈 web GPU

在本文中,GPGPU指2010年代兴起的通用GPU计算趋势。程序员发现显卡性能优于CPU向量单元,便通过将非图形程序塞入像素着色器等hack方式进行加速。这推动了图形API向支持计算着色器发展,也加剧了OpenGL的复杂性问题,最终促进了Vulkan和WebGPU等新标准的诞生。

GPGPU

谈谈 web GPU

文章指出Metal是苹果推出的专有图形API,苹果拒绝支持Vulkan和后续OpenGL,转而强制使用Metal。WebGPU规范受苹果影响极大,其设计风格与Metal高度相似,被认为是三款现代API中最易用的。WebGPU被形容为ANGLE与Metal的结合产物。

Metal

谈谈 web GPU

本文将DirectX描述为微软开发的图形API,曾与OpenGL竞争并推动PC 3D加速标准化。它后来演进为DirectX 12,成为与Vulkan、Metal并列的现代AZDO低开销API。文章指出开发者常优先为Windows选择DX12后端,而非Vulkan。

DirectX

谈谈 web GPU

本文描述Vulkan为现代低开销图形API,允许程序直接控制GPU内存与管道,却因结构复杂、文档晦涩而难以直接编写,主要面向中间件开发者。作者认为WebGPU可作为其人体工学封装层,并有望在跨平台场景取代它。

Vulkan

谈谈 web GPU

文章认为Canvas API是当前浏览器2D绘制的标准,但WebGPU因性能与灵活性优势可能取而代之。作者提到可通过Canvas纹理与WebGPU互操作来弥补文本渲染等短板,但整体仍视WebGPU为更优选择。

Canvas API

谈谈 web GPU

本文说明OpenGL ES是Khronos为移动设备精简OpenGL而推出的版本,去除了大量遗留功能和CPU回退陷阱。WebGL直接基于OpenGL ES设计,但浏览器实际通过ANGLE在DirectX上模拟实现。文章提到OpenGL ES 2.0与桌面OpenGL 3.3存在对应关系。

OpenGL ES

谈谈 web GPU

本文回顾Direct3D在PC 3D加速时代与OpenGL竞争,最终通过更好可用性与微软生态主导市场。它推动了着色器等早期特性落地,也促使OpenGL在功能迭代上落后多年,成为WebGPU所要超越的传统API之一。

Direct3D

谈谈 web GPU

文章提及GLSL是OpenGL使用的类C文本着色器语言。WebGPU并未采用GLSL,而是统一使用WGSL;作者对比指出Vulkan通过SPIR-V摆脱了对单一着色器语言的依赖。GLSL被归为传统固定管线之后的着色器方案之一。

GLSL

谈谈 web GPU

本文提到 HLSL 是 DirectX 使用的着色器语言,与 OpenGL 的 GLSL 相对。文章指出 Vulkan 采用字节码 SPIR-V,允许开发者从任意着色器语言编译目标代码,而非绑定特定文本语言。

HLSL

谈谈 web GPU

本文提到rust-gpu是实验性项目,能将Rust编译为SPIR-V,进而通过现有转换器支持WGSL。作者设想用它实现着色器与CPU代码共享数学函数,并在纯Rust程序中灵活切换计算着色器与缓冲区过滤。

rust-gpu

谈谈 web GPU

本文将WebGPU定位为WebGL的继任者,用于浏览器内绘制3D图形。它已随Chrome 113发布,计划年内覆盖所有桌面浏览器,并被作者认为可能取代Canvas API实现2D绘制,甚至成为跨平台通用图形标准。其设计兼顾低级控制与人体工学,源自ANGLE与Metal的结合,提供管道对象等现代特性,同时支持JavaScript、Rust和C++无缝使用。

WebGPU

谈谈 web GPU

本文指出WebGL是基于OpenGL ES改编的浏览器3D API,曾通过添加类型化数组实现,但因全局状态过多、碎片化及缺乏AZDO支持而逐渐过时。它无法满足现代GPU编程需求,成为WebGPU诞生的直接背景。

WebGL

谈谈 web GPU

本文介绍SPIR-V是Vulkan采用的字节码着色器格式,可支持多种前端语言。WebGPU原本计划采用SPIR-V,但苹果反对后改为WGSL;桌面WebGPU实现仍保留SPIR-V支持。文章强调其避免了文本着色器语言的歧义问题。

SPIR-V

谈谈 web GPU

本文将 ANGLE 描述为由 Google 发起、Firefox 与 Apple 共同贡献的 BSD 许可 OpenGL 模拟器,用于在所有浏览器中实现 WebGL 支持。它最初为解决 Windows 上 OpenGL 兼容问题而开发,后被用作非网页应用的独立库,并启发了 WebGPU 的跨平台设计。

ANGLE

谈谈 web GPU

文章说明 Dawn 是 Chrome 团队为 C++ 提供的 WebGPU 库实现,允许桌面应用直接嵌入浏览器相同的 WebGPU 组件。用户可通过它在非浏览器环境中获得与浏览器端一致的 WebGPU 行为与特性支持。

Dawn

谈谈 web GPU

文章将WGSL称为WebGPU专用的着色器语言,因苹果拒绝SPIR-V而新开发。它是WebGPU在浏览器中的唯一着色语言,支持直接以文本形式上传;桌面版本仍保留SPIR-V选项。作者称其尚可但缺乏语言选择自由。

WGSL

WebGPU 进展

本文指WebGPU着色语言,是WebGPU API的配套着色器语言。Chrome计划在后续版本中为其增加更多人体工学改进,以支持更深入的机器学习优化。WGSL规范已随WebGPU规范一同发布,开发者可通过在线导览工具学习其语法。

WGSL

WebGPU 进展

本文宣布 WebGPU 在 Chrome 113 默认开启,支持网页端高性能 3D 图形渲染与数据并行计算。相比 WebGL,它显著降低 JavaScript 开销并将机器学习推理性能提升三倍以上,同时提供更灵活的 GPU 编程接口。首发支持 ChromeOS、macOS 和 Windows,后续将扩展至其他平台。

WebGPU

WebGPU 进展

文章提到 PlayCanvas 已在 1.62 版本引擎中宣布初步支持 WebGPU。该引擎通过适配新 API,为网页 3D 应用提供更高效的 GPU 访问路径,减少 JavaScript 开销并提升整体性能表现。

PlayCanvas

WebGPU 进展

文章提到 WebGPU 类似 Vulkan,可进行渲染与计算操作。ChromeOS 设备需具备 Vulkan 支持才能运行初始版 WebGPU。

Vulkan

非预测概念模型的短板

本文描述Textual Inversion技术,用户提供少量示例图像后,模型可学习并关联特定文本标记与对象,在新提示中使用该标记即可生成对应内容,建立用户与AI的共享基础。

Textual Inversion

WebGPU 进展

文章表示 Three.js 的 WebGPU 支持正在开发中,目前可在示例页面查看粒子系统等演示效果。该库计划通过 WebGPU 提供更现代的 GPU 编程接口,逐步替代现有 WebGL 后端以获得更高性能与灵活性。

Three.js

WebGPU 进展

本文指出 WebGPU 相比 WebGL 家族 API 提供了更多高级 GPU 功能,并原生支持通用计算。使用 WebGPU 可大幅减少相同图形任务所需的 JavaScript 工作量。众多 WebGL 库正逐步添加 WebGPU 支持。

WebGL

WebGPU 进展

本文将 WebGPU 与 Metal 并列,指出两者均可让网页访问底层 GPU 高级特性。Chrome 在 macOS 平台借助 Metal 提供 WebGPU 支持。

Metal

WebGPU 进展

文章说明 WebGPU 的设计理念与 Direct3D 12 相似,能直接暴露现代 GPU 硬件能力。Chrome 在 Windows 平台通过 Direct3D 12 实现 WebGPU 后端。

Direct3D 12

WebGPU 进展

本文指出 Babylon.js 已实现对 WebGPU 的完整支持。作为主流 WebGL 库之一,它让开发者只需简单修改一行代码即可切换至新 API,从而直接利用 WebGPU 在图形渲染和计算性能上的优势。

Babylon.js

iPhone 14 Pro GPU 设计失误

本文所述GPU原计划加入光追等新特性,但因过于激进导致iPhone 14 Pro原型功耗异常,最终被放弃并大致恢复A15方案。该设计失误造成图形性能进步有限,并直接引发团队重组。事件凸显了功耗与性能平衡在芯片开发中的关键性。

GPU

iPhone 14 Pro GPU 设计失误

本文中Ray Tracing是Apple为iPhone 14 Pro GPU新增的照明技术,旨在提升游戏真实感,但其加入使原型功耗大幅增加,最终成为被迫取消的功能之一。该特性被视为开发团队过于激进的典型例子,直接导致项目回退与性能提升受限。

Ray Tracing

简单摄影入门

本文将HSL工具描述为针对特定源色(红、橙、黄、绿、青、蓝、紫、洋红)的色相、饱和度、明度调节功能。文中举例说明其可用于使植被更绿、天空更蓝,或选择性修正肤色。作者强调HSL是实现局部色彩风格化调整的重要手段。

HSL

OKLCH in CSS

文章指出 HSL 的圆柱形空间导致不同色相的最大饱和度被强制拉平,亮度值不真实。使用 hsl() 修改颜色或生成调色板时容易出现意外的对比度变化,影响无障碍访问,且无法表示 P3 颜色。

HSL

OKLCH in CSS

本文提到 Oklab 是 OKLCH 对应的笛卡尔坐标空间,由 Björn Ottosson 提出以修正 Lab 的色相偏移问题。文章指出其在渐变插值中表现良好,已被 Photoshop 和 CSS 规范采用。

Oklab

OKLCH in CSS

文中说明 RGB、hex 及 color(display-p3) 用红绿蓝分量表示颜色,对开发者可读性极差,难以直观修改或比较颜色,也无法直接编码 P3 广色域颜色,仅适合作为最终输出格式。

RGB

多邻国使用 Rive 的案例

Viseme是Duolingo根据语言学特征设计的嘴型视觉单元,每个音素对应特定嘴型。角色各自拥有20多种专属Viseme设计,确保动画时口型自然且符合角色个性。

Viseme

Open Graph 生成艺术

文中提到 Perlin Noise 是 Ken Perlin 为《Tron》开发的平滑噪声算法,能避免完全随机导致的尖锐折线。但实际实现中,作者并未直接使用 Perlin Noise,而是选择了其后继者 Simplex Noise。

Perlin Noise

Open Graph 生成艺术

作者用 Simplex Noise 替代纯随机数,为 Flow Field 的每个点生成平滑连续的方向与强度值,从而产生类似河流的自然曲线。配合多条线条绘制后,形成富有有机质感的图案,是作品视觉效果的关键。

Simplex Noise

Open Graph 生成艺术

为实现 Tyler Hobbs 风格的均匀线条分布,作者采用 Poisson-Disc Sampling 结合 Jobard & Lefer 算法:用网格结构检测邻近点以避免线条相交,并维护起点队列确保线条均匀铺满画布。最终获得一致纹理的生成图像。

Poisson-Disc Sampling

图解 Stable Diffusion 的原理

文章引用Imagen论文指出,更大的语言模型对图像生成质量的提升效果超过单纯增大图像生成组件,并说明其同样采用扩散框架。

Imagen

iPhone 激光雷达扫描试玩

文章指出Scaniverse支持本地3D Gaussian Splatting(splat模式),可在数分钟内生成半透明物体或细部更清晰的3D场景,突破以往仅能云端处理的限制,成为iPhone 3D扫描的新亮点。

3D Gaussian Splatting

好莱坞特效行业的危机与困境

文章指出CGI已成为观众眼中粗制滥造的代名词,因工作室为赶档期将大量后期工作外包且反复修改,造成光影不一致、物理规律违背等明显瑕疵。即便预算高达数千万美元,CGI仍常因时间不足而无法达到预期水准。

CGI

好莱坞特效行业的危机与困境

文中VFX指电影电视后期制作中添加的数字视觉效果,承担从清理现场失误到生成复杂镜头的重任。由于工作室忽视后期排期、频繁改动和多外包商协作,VFX团队常面临14小时以上连续工作、预算被压低等问题,导致最终画面质量下降,甚至出现CBB(Could Be Better)级别的效果。

VFX

好莱坞特效行业的危机与困境

文章中提到《曼达洛人》采用Unreal Engine构建虚拟场景,取代传统绿幕。这项原为游戏开发的技术被影视业快速采纳,能帮助演员入戏并提供灯光等预览信息。制片方认为其可减少后期修补工作,目前仍有约七成镜头需额外处理,但未来比例有望大幅下降。

Unreal Engine

10 条 DALL·E 2 使用经验

文章指出 Imagen 在生成文字方面优于 DALL·E,可避免出现无意义乱码。作者还建议将 Imagen 直接集成到 Google Slides 中,实现通过提示词快速生成演示文稿配图。文中将其视为未来可能尝试的工具,与当前 DALL·E 使用形成对比。

Imagen

好莱坞特效行业的危机与困境

文中说明虚拟制片可充当先进预可视化工具,尤其在灯光布局方面优于传统方式。虚拟场景让后期人员更早掌握画面需求,减少后期返工可能。

Pre-visualization

好莱坞特效行业的危机与困境

《The Mandalorian》被文章视为虚拟制作的成功范例,使用Unreal Engine构建虚拟场景,提升演员表演和后期预可视化效率。尽管仍有约70%的镜头需后期修饰,但它证明了该技术可用于系列剧制作,预示VFX行业未来方向。

The Mandalorian

好莱坞特效行业的危机与困境

合成师负责将实拍素材、特效与背景合并为最终画面。文中举例《复仇者联盟》直升机航母戏中,仅斯嘉丽·约翰逊假发与天空的融合就耗时两周;合成工作还包括修复 wig 线、去双下巴等美容修图,常因前期拍摄疏漏而成为救火主力。

Compositing

好莱坞特效行业的危机与困境

渲染农场是VFX公司将渲染任务外包的在线平台。文中提到效果工作室为节省本地资源,常把渲染交给此类农场,导致内部人员闲置或多项目并行,增加沟通成本与交付延误风险。

Render Farm

好莱坞特效行业的危机与困境

渲染是将低分辨率素材转为最终画质的关键步骤。文章描述渲染常被外包,期间艺术家需等待或切换其他工作,造成“赶工后等待”的低效循环;高分辨率归档需求进一步延长渲染时间并放大画面瑕疵。

Rendering

Warp 界面字体渲染优化过程

本文将anti-aliasing定义为消除栅格化后锯齿边缘的过程,通过提高采样频率获得更准确的近似。文中对比了黑白二值栅格化产生的锯齿问题,并说明anti-aliasing可使三角形和字形边缘更平滑。该技术是矢量字形转为位图的关键步骤,直接影响终端文本显示质量。

Anti-aliasing

Apple Silicon Mac 虚拟机性能测试

文中指出 Apple 声称访客系统可获得与宿主相同的 Metal 性能,但作者因测试工具限制未能实际验证 GPU 加速表现。Metal 支持被视为轻量虚拟化的优势之一。

Metal

Warp 界面字体渲染优化过程

本文核心主题,涵盖从字体数据到屏幕像素的完整流程。作者将其拆解为 shaping(字符转带位置的字形)与 rasterization(矢量转位图)两大部分,重点讨论 GPU 环境下如何通过 glyph atlas 缓存实现高性能渲染,同时兼顾比例字体的精确 kerning。

Text Rendering

Warp 界面字体渲染优化过程

文章将supersampling描述为一种anti-aliasing方法,即在每个像素内检查多个采样点并按比例着色。示例中通过4点采样平均改善了字母“e”的栅格化效果。supersampling能提升精度但成本线性增加,是Warp文本渲染中平衡质量与性能的考虑因素。

Supersampling

Warp 界面字体渲染优化过程

本文说明subpixel anti-aliasing利用LCD显示器红绿蓝子像素独立控制特性,在子像素级别采样以优化结果。相比普通anti-aliasing,它在低分辨率屏幕上效果更好,但macOS Mojave后因高DPI显示器而移除支持。该技术与glyph atlas缓存策略相关,影响最终文本清晰度。

Subpixel Anti-Aliasing

Figma 深色模式的背后

本文中,CIELAB Color Space 被用于内部工具,将查询颜色与 350 个语义 token 映射到同一感知空间,计算并推荐感知距离最近的 token,帮助工程师在迁移时快速选择合适变量,同时避免大幅改变浅色模式外观。该工具提升了重构效率与准确性。

CIELAB Color Space

Warp 界面字体渲染优化过程

文章指出该 PR 除 Rust 外,还对 Metal shader 代码做了少量修改。Metal 用于 Warp 在 macOS 上的 GPU 渲染管线,负责从字形图集纹理复制像素到输出缓冲区。

Metal

Warp 界面字体渲染优化过程

本文提出的性能优化方案,即 GPU 纹理缓存所有已光栅化的字形。作者先用整数像素对齐避免模糊,后改为 1/3 子像素对齐的缓存键,在控制内存增长的同时显著改善比例字体 kerning 效果,最终实现接近精确位置的渲染质量。

Glyph Atlas

Warp 界面字体渲染优化过程

本文中 rasterization 将矢量字形转为位图,涉及黑白、灰度及子像素抗锯齿等策略。作者强调其结果依赖字形与像素网格的对齐方式,因此 glyph atlas 的缓存键必须加入 sub-pixel 偏移信息,才能在不显著增加内存的前提下保留良好 kerning 效果。

Rasterization

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

本文中程序生成是Townscaper的核心引擎,根据玩家放置或移除方块实时扩展和重构城镇。它整合先前项目的技术,实现混合主动式AI,让系统评估当前形状并注入有效建筑模块。该机制确保输出一致且多样,支持从海滨小镇到大型都市的各种地形。

Procedural Generation

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

行进立方体启发了Brick Block和Townscaper中方块的放置,通过离散化三维网格点生成多边形网格。它让建筑模块能适应不规则四边形单元的形状,重点处理建筑角落的拟合。Townscaper中此技术将完整模块改为角落片段,以适应三角化网格。

Marching Cubes

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

约束求解器是AI算法类别,用于在规则限制下为变量赋值,如数独问题。文中将波函数坍缩归为此类,通过约束传播解决城镇或岛屿的模块放置问题。它确保生成结果满足硬约束与软约束,避免不可行布局。

Constraint Solver

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

波函数坍缩在Bad North和Townscaper中用于根据相邻规则决定地形或建筑模块的放置。它作为约束求解器,通过可能性空间收缩确保导航和美学约束得到满足。Townscaper中该算法经实时优化,先确定模块再进行装饰,并支持优先级配方生成独特结构。

Wave Function Collapse

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

模型合成由Paul Merrell于2007年开发,能生成二维和三维形状。文中指出Bad North的波函数坍缩实现与之相似,均基于相邻约束进行3D地形生成。该算法被视为波函数坍缩在三维应用上的先驱。

Model Synthesis

Townscaper 开发者访谈:从《全境封锁》工具到独立游戏

六边形网格的理念源自Amit Patel的解释,用于Townscaper生成不规则四边形网格。通过将固定六边形分解为四边形并移动顶点,实现更自然的建筑布局。该方法摆脱方形网格的刚性,创造符合真实城市拓扑的有机形态。

Hexagonal Grids

数据可视化颜色指南

文章建议在设计高级色彩调色板时选用Oklab等感知均匀色彩空间,以实现比HSL更精确的明度、饱和度和色相调整,避免随机生成导致的色彩不协调问题。

Oklab

数据可视化颜色指南

文章指出设计分类色板时,可在HSL(或HSV、HSB、HCL)等空间中调整明度、饱和度和色相,使颜色既美观又易区分,且无需依赖复杂工具即可完成迭代。

HSL

数据可视化颜色指南

文章中LCh色彩空间用于展示渐变色的明度、色度(饱和度)和色相数值,帮助创建适合 choropleth 地图的顺序色阶。它强调需覆盖较大明度范围以区分数据差异,并可通过色相偏移优化视觉效果。

LCh Color Space

GIF 格式深度解析:你所不知道的 GIF 特性

GIF87a是1987年最初发布的版本,仅支持基础图像数据,无动画延迟等89a新增特性。本文上传示例文件到Tenor、Giphy、Imgur等平台,发现多数会重写为89a,仅Imgur保留原87a格式。文章用十六进制验证了其头部为474946383761。

GIF87a

GIF 格式深度解析:你所不知道的 GIF 特性

本文介绍 Graphic Control Extension 以 0x21 0xF9 开头,块大小固定为 0x04,用于控制动画帧间延迟、处理方法、用户输入标志和透明色标志。移除块大小后,Chrome 渲染异常而 Firefox 与 Preview 仍能正常显示,体现各渲染器合规程度差异。

Graphic Control Extension

OpenAI Codex 展示游戏编程能力

本文仅简要提及 Three.js 是 A-Frame 底层依赖的 3D 渲染库,用于支持 VR 迷宫的 3D 展示,未直接生成或调用 Three.js 代码。

Three.js

GIF 格式深度解析:你所不知道的 GIF 特性

本文指出 Global Color Table 是可选的 RGB 颜色表,位于逻辑屏幕描述符之后,最多 768 字节(256 色)。若图像段没有 Local Color Table,则使用该表;若两者都缺失,渲染器可任意指定颜色。示例图片中该表存在且未按重要性排序。

Global Color Table

GIF 格式深度解析:你所不知道的 GIF 特性

GIF89a是1989年对GIF格式的补充版本,引入了图形控制扩展、应用扩展等特性,支持动画延迟和透明等功能。本文通过对比示例文件头部字节确认其标识为474946383961,并指出主流托管平台上传后会自动重编码为该版本。文章还测试了移除部分固定块大小后的兼容性表现。

GIF89a

GIF 格式深度解析:你所不知道的 GIF 特性

本文说明 Local Color Table 可出现在每个图像段,优先级高于 Global Color Table。通过为每个段设置不同 Local Color Table,可实现真彩色 GIF,但文件体积会显著增大,且现代浏览器常因默认延迟而无法正确渲染。

Local Color Table

GIF 格式深度解析:你所不知道的 GIF 特性

本文主要分析了GIF这种网络上常见的动画图像文件格式,其起源与实际用途不同于最初设计预期。文章通过十六进制解析示例文件,详细拆解了GIF的文件结构、头部标识及各种扩展块。讨论了GIF在现代浏览器和托管平台中的实际表现与限制。

GIF

GIF 格式深度解析:你所不知道的 GIF 特性

本文提到 GIF 可通过为每个数据段单独指定 Local Color Table 实现真彩色显示,从而突破全局 256 色限制。作者指出这种做法会让文件体积大幅增加(每个新调色板额外占用 768 字节),且现代浏览器常因默认插入帧间延迟而无法正确渲染。只有严格遵循规范的查看器才能正常显示。文中附有示例 truecolor.gif 并建议参考维基百科相关章节。

True Color

主流界面设计工具性能特征评测

测试显示 Figma 在绘制阴影时会占满 GPU,其它工具如 Sketch、Affinity Designer 则几乎不使用 GPU。XD、Illustrator 和 Photoshop 在画布严重卡顿时,GPU 仍有大量空闲。文章认为理想的设计工具应让 GPU 接近满载,以发挥其图形渲染优势。

GPU

Figma 研究笔记:Product-Led Growth 的误区与思考

本文指出Figma创始人Dylan Field在大学时看到Mozilla推出的WebGL后,与CTO Evan Wallace共同意识到浏览器可承载更复杂设计应用,从而萌生Figma想法。WebGL被视为技术触发点,使设计从桌面工具转向网页协作成为可能,直接促成Figma早期定位。

WebGL

Okhsv 和 Okhsl 新颜色空间模型

本文提出的一种新型色彩空间,基于Oklab构建,用于改进传统HSL色彩拾取器。它优化了亮度估计和色相匹配,同时将sRGB色域拟合到圆柱体中,避免超出 gamut 的问题。文章对比了其与HSLuv的差异,强调内部平滑性和感知一致性。

Okhsl

iconmap: 网站 Favicon 趋势分析

研究中使用ImageMagick进行图片处理与主色分析,同时指出其对ICO文件缺少magic number的处理问题。该工具帮助完成425909个图标的格式识别与尺寸统计。

ImageMagick

Okhsv 和 Okhsl 新颜色空间模型

本文作者,提出了Oklab色彩空间,并在此基础上设计Okhsl和Okhsv两种新拾色空间,以在保持简单几何形状的同时改善感知均匀性;文章末尾附有其MIT许可的转换源码。

Björn Ottosson

Okhsv 和 Okhsl 新颜色空间模型

Abney效应指色相感知不遵循加色混合直线,导致HSLuv等空间的色相参数在深蓝和紫色区域出现明显偏差;本文指出这是HSLuv无法完全匹配感知色相的主要原因。

Abney effect

Okhsv 和 Okhsl 新颜色空间模型

CIELAB 是 20 世纪重要的感知色彩空间,常被用来与 Munsell 系统比较。它能较好预测 lightness、hue 和 chroma,但在 sRGB 色域内形状不规则,导致调色时易超出范围。文章将其归为 Lab-like 模型,强调其在色彩挑选中的优缺点。

CIE LAB

Okhsv 和 Okhsl 新颜色空间模型

本文提出的一种新型色彩空间,基于Oklab构建,旨在改进传统HSV色彩拾取器。它通过将sRGB色域映射为圆柱体形状,实现更接近感知的色相,同时保持简单几何结构,便于独立调整参数。文章详细描述了其从OkLCh到HSV-like参数的转换方法及视觉均匀性改进。

Okhsv

Okhsv 和 Okhsl 新颜色空间模型

HWB是HSV的一种变换形式,将颜色描述为色相、白度和黑度,与NCS结构相似,但基于sRGB色域且未考虑感知研究;Okhsv也可转换为HWB形式以提供类似参数。

HWB

PlayStation 3 架构深度解析

本文中Cg是Nvidia为PS3提供的着色器编译器,用于生成顶点与像素程序。它支持类似HLSL的语法,并提供fp40与vp40 profile。RSX的着色单元可直接使用Cg编译的代码。

Cg

Okhsv 和 Okhsl 新颜色空间模型

本文讨论的传统色彩空间,常用于色彩拾取器,是sRGB的简单变换。它提供色相、饱和度和亮度参数,但感知匹配度低,尤其在饱和色下亮度不准。文章将其与Okhsl等新空间对比,指出其几何形状简单但均匀性不足。

HSL

Okhsv 和 Okhsl 新颜色空间模型

本文色彩拾取讨论的目标色域,所有空间均围绕其展开。传统HSL/HSV能将其映射为简单圆柱体便于操作,而感知空间如Oklab则形状不规则。文章重点探讨如何在保持简单形状的同时提升感知准确性。

sRGB

Okhsv 和 Okhsl 新颜色空间模型

本文讨论的传统色彩空间,广泛用于色彩拾取器,是sRGB的简单变换。它以色相、饱和度和明度参数描述颜色,结构类似NCS但感知偏差较大。文章分析了其色相扭曲问题,并提出Okhsv作为改进替代。

HSV

Okhsv 和 Okhsl 新颜色空间模型

本文作者此前提出的感知色彩空间,作为Okhsv和Okhsl的基础模型。它提供接近人眼感知的亮度、色相和色度估计,但sRGB色域在其内形状不规则。文章通过新增亮度估计函数,使其更适合色彩拾取应用。

Oklab

Okhsv 和 Okhsl 新颜色空间模型

HSLuv 基于 CIELChuv 构建,旨在改善 HSL 的感知一致性。它用同一 hue 参数、按最饱和 sRGB 颜色重新缩放的 saturation,以及与感知 lightness 匹配较好的 lightness。文中指出其仍存在 hue 失真和 saturation 不平滑变化的问题。

HSLuv

Okhsv 和 Okhsl 新颜色空间模型

本文提及ZCAM是继Oklab之后出现的一种色彩外观模型,用于预测颜色感知,性能优于早期模型如CIELab,但直接用于拾色器时sRGB色域形状不规则的问题依然存在。

ZCAM

Okhsv 和 Okhsl 新颜色空间模型

CIELUV 是 HSLuv 的基础,其圆柱形式 CIELChuv 允许同一 hue 下颜色通过加色混合白与饱和色得到。文章说明该特性使 HSLuv 的 saturation 定义更直观,但同时受 Abney 效应影响导致 hue 感知偏差。

CIELUV

Okhsv 和 Okhsl 新颜色空间模型

CAM16 是现代色彩外观模型,能更准确预测 lightness、hue 和 chroma。文中将其与 CIELAB、Oklab 并列,说明这类模型在 sRGB 色域内形状不规则,限制了直接用于色彩挑选的实用性。

CAM16

PlayStation 3 架构深度解析

本文中OpenGL ES由psGL库提供,作为RSX的图形API接口。VPE支持OpenGL 2.1模型,开发者可通过psGL调用OpenGL ES接口进行渲染。

OpenGL ES

Accessible Palette:更易用的颜色系统构建工具

HSL(色相、饱和度、亮度)是文章批判的主要对象,它仅为 RGB 的简单数学变换,无法反映人眼对亮度的真实感知。Postmark 旧版色板因使用 HSL,导致蓝红明显偏暗、黄绿偏亮,且相邻色阶对比度不可预测。

HSL

Accessible Palette:更易用的颜色系统构建工具

文中简要提及HCL(即LCh(uv))作为CIELCh的变体,其Chroma在0-100的均匀尺度上变化,与LCh(ab)不同。它同样基于感知均匀空间,被视为HSL之外的备选方案,用于色彩系统构建。

HCL

Accessible Palette:更易用的颜色系统构建工具

RGB 是显示设备底层使用的色彩模型,文章将其视为 HSL、HSV 的基础,但强调其数值变化与人眼感知不一致。重建后的 Postmark 色板改用 CIELAB/LCh 空间,以弥补 RGB 在亮度一致性上的缺陷。

RGB

Accessible Palette:更易用的颜色系统构建工具

文章介绍CIELCh是CIELAB的圆柱坐标表示形式,用Chroma(饱和度)和Hue替代a*、b*,Lightness保持不变。它能生成明度一致的色阶,适合构建设计系统。文中强调其色相角度与HSL不同,且部分LCh值对应不可能色。

CIELCh

像素的传记:从数学概念到图像基本粒子

本文将图像处理定义为数字光的另一领域,侧重对真实世界的二维采样以获取像素,如手机拍照。文章指出其与计算机图形学互为分析与合成的古典区分,但均统一于采样定理。像素文件不论来源,显示时均通过相同扩散与叠加过程还原。

图像处理

像素的传记:从数学概念到图像基本粒子

计算机科学家,1986年与作者共同创立Pixar公司,旨在利用计算机生成完整数字电影,推动了《玩具总动员》等作品的诞生。

埃德·卡特姆

像素的传记:从数学概念到图像基本粒子

本文指出采样定理由弗拉基米尔·科捷尔尼科夫于1933年首次完整证明,是现代图像世界的理论基础。它基于傅里叶分析,证明以最高频率两倍的间隔采样即可完整保留信号信息,再通过扩散函数重建原信号。文章说明该定理统一了图像获取与生成,使像素成为数字汇聚的关键。

采样定理

像素的传记:从数学概念到图像基本粒子

文中指用于从采样点恢复原始信号的展开函数,也称spreader。其理想形式在数学上无限延伸,实际使用有限宽度的近似版本,如横截面为理想一维展开函数的小山丘状二维形式。通过在每个像素处放置该函数并叠加结果,即可重建可见图像。

重建滤波器

像素的传记:从数学概念到图像基本粒子

本文将像素定义为图片的基本粒子,即从采样定理得到的零维采样点,本身不可见,仅存在于特定位置。像素通过傅里叶波的最高频率以两倍速率采样获得,可存储于文件并经扩散函数重建为可见画面。文章强调像素并非小方块,而是数字光时代所有图像(包括手机、电影、游戏)的核心,区别于显示器上的模拟发光点。

像素

像素的传记:从数学概念到图像基本粒子

本文将计算机图形学定义为数字光的两大领域之一,侧重通过计算机合成像素,即对虚拟世界的建模与渲染。早期例子包括1967年阿波罗模拟器的彩色三维图形,其遵循欧几里得-牛顿-文艺复兴中心 dogma。文章强调它与图像处理共同依赖像素与采样定理,由摩尔定律推动实现数字电影等应用。

计算机图形学