图形学与人机交互2014iquilezles.org
用两个三角形在 GPU 上渲染世界
Rendering Worlds with Two Triangles on the GPU
进阶 · 约 40 分钟读完前置知识:图形学渲染管线基础、GLSL/着色器编程、向量运算与距离场概念
导读
这篇论文介绍了在GPU上仅用两个三角形(全屏四边形)渲染复杂三维场景的技术。核心是将场景建模为有符号距离函数(SDF)的组合,并在片元着色器中通过光线步进(raymarching)计算每个像素的颜色,从而避免传统多边形网格,实现实时程序化渲染。
HN 关注点:这是demo scene和实时图形学的经典技术,启发了ShaderToy等平台,讨论聚焦于距离场渲染的优雅性、优缺点及实际应用。
后来怎么样
这套基于有符号距离场的光线步进方法经 iq 的分享与 Shadertoy 平台扩散,成为实时图形与 demo scene 的标准技法之一;SDF/距离场后来被主流引擎采纳(如 UE5 Lumen 的网格距离场),程序化建模与体积渲染也广泛沿用其思路。
HN 评论精选
这几条评论里:支持 1 补充 2 亲历 1
支持方法优雅在于用数学距离函数描述场景并利用GPU并行。
这种方法最优雅的地方在于用基本数学3D物体及其变换来描述场景,然后利用GPU的并行性渲染所有像素。
userbinator查看英文原文
I think the most elegant thing about this method is that it describes a scene in terms of its basic mathematical 3D objects and transformations on them (list here: http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm ) and then exploits the massive parallelism of the GPU for rendering all the pixels. Here's a demo of someone playing around with it, complete with a Slisesix-inspired scene: http://www.rpenalva.com/blog/?p=254 This set of slides is also related: http://www.iquilezles.org/www/material/function2009/function2009.pdf
补充推荐ShaderToy平台供实践。
如果你想自己尝试,iq(作者)创建了一个游乐场:https://www.shadertoy.com/
rogerallen查看英文原文
And if you want to try things out yourself, iq has created a playground for you here: https://www.shadertoy.com/
补充指出距离场步进的缺点并预告改进方法。
距离场步进有优缺点(最大缺点是当靠近物体但未足够接近相交时,需要很多步才能确定)。我即将展示一种混合方法。
gavanwoolery查看英文原文
Distance field marching has some pros and cons (the biggest downside is that it takes many steps when you get close to an object but not close enough to intersect it). <self promo> If anyone is interested, I am presenting a new method soon that is a hybrid of distance field marching (explained in this paper) and some other pretty simple techniques. Preview here: https://twitter.com/gavanw/status/590884138871230464
亲历分享程序化建模的启发和移动端性能限制。
他展示怪物腿与球体简单混合的部分(第42页)打开了程序化模型生成的可能性。最终通过FRep(函数表示)理解了其强大。实时raymarching很酷,但移动端做完整游戏仍困难。
westoncb查看英文原文
The part where he shows the super simple blending of the monster's 'legs' with the sphere (page 42), opened up in my mind a lot of possibilities for procedural model generation I hadn't considered before. Eventually I understood why it was possible/powerful (via a certain generalization called 'FRep': http://en.wikipedia.org/wiki/Function_representation). Very different from the sort of 'polygon stitching' I thought was necessary (e.g. when I tried this: https://github.com/westoncb/3D-Mushroom-Generator) The fact that you can do such cool things in real-time with raymarching (as the Shadertoy website is largely a showcase of) is pretty awesome. I have tried building raymarched games on iOS and Android—but I've only gotten to the point of setting up basic scenes and estimating it's still not quite possible to do a full game this way, yet (on mobile anyway). Maybe something very simple at 30fps on a nice device.
相关资源
从这篇论文所有 HN 讨论帖的全部评论里整理出来的链接。
历次讨论
- 2014Hacker News 讨论帖109 分 · 25 评
- 2015Hacker News 讨论帖60 分 · 8 评
同领域还值得读
像素不是小方块 (1995)
A Pixel Is Not A Little Square (1995)
这篇 1995 年的经典备忘录讨论数字图像中像素应如何理解:像素不是有面积的小方块,而是对连续图像的采样点,重建连续图像需要合适的重建滤波器。
图形学与人机交互2014 · 372 分 · 241 评进阶 · 约 20 分钟编辑精选自动化的讽刺(Ironies of Automation,1983)
Ironies of Automation (1983)
这篇 1983 年的经典论文讨论自动化(尤其过程控制)中的悖论:自动化越先进,人类操作员在异常处理和人工接管中的作用可能越关键;自动化常把常规任务拿走,留下监控、诊断和罕见故障处…
图形学与人机交互2019 · 147 分 · 38 评入门 · 约 30 分钟编辑精选GDPR 同意框中的暗黑模式
Dark patterns in GDPR consent boxes
研究 GDPR 同意框中的暗黑模式,即网站如何通过界面设计引导用户同意 Cookie 与追踪。
图形学与人机交互2020 · 328 分 · 122 评 · 引用 6进阶 · 约 30 分钟用稀疏条带在 CPU 上实现高性能 2D 图形渲染(硕士论文)
High-performance 2D graphics rendering on the CPU using sparse strips
这篇硕士论文研究如何在 CPU 上实现高性能的 2D 图形渲染,核心思路是用“稀疏条带(sparse strips)”结构来表示和光栅化路径,以降低内存占用并提升渲染速度。
图形学与人机交互2025 · 281 分 · 35 评专业 · 约 90 分钟GDPR 后的暗模式:同意弹窗及其影响
Dark patterns after the GDPR: consent pop-ups and their influence
研究 GDPR 生效后网站 consent pop-ups 中的 dark patterns,以及这些弹窗如何影响用户的同意选择。
图形学与人机交互2021 · 251 分 · 228 评进阶 · 约 60 分钟