设计与产品madebyevan.com
WebGL 水面模拟
WebGL Water
2011 — 2025，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是 Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。它从 2011 年起多次登上 Hacker News，是早期 WebGL 技术演示中的经典作品。
为什么经久不衰：它用直观漂亮的小 demo 展示了 WebGL/GPU 的实时渲染能力，十几年后仍是理解水面模拟与图形编程的经典入口。
HN 评论精选
作者现身确认这是其早期作品，并借机为公司招聘图形方向的后端工程师。
我是作者。做完这个 demo 后，我用 WebGL 做过更酷的东西，但那是为我创业公司做的，还没公开。我们目前正在招有图形学经验的后端工程师，有兴趣可以发邮件到 evan@figma.com。
constexpr查看英文原文
Author here. I've done much more awesome stuff with WebGL since I made this demo but it's for my startup and is not public yet. We're actually looking for a backend engineer with graphics experience at the moment. Send me an email at evan@figma.com if you're interested.
提出焦散需要非局部信息，询问其是否依赖 CPU 预计算并通过 uniform 传入 shader。
问一个简单的 OpenGL 问题：折射/焦散能完全在 shader 里计算吗？还是必须先在 CPU 上做一部分处理，再把结果传回 shader？我见过的 shader 都是“局部”的，只能访问当前多边形插值后的顶点数据和已设置的 uniform。在我看来，焦散这类效果需要非局部信息。这些非局部信息是通过 uniform 传进去的吗？如果是，那个 uniform 的数据格式是什么？
jarrett查看英文原文
Simple OpenGL question: Can the refractions/caustics be computed entirely in the shaders? Or do you have to do some of the processing in the CPU* and pass the results back to the shaders? All the shaders I've seen are "local," in the sense that they only have access to the interpolated vertex data for their polygon, plus whatever uniforms have been set. It seems to me that things like caustics would require non-local information. Is that non-local information passed via a uniform? If so, I wonder what the data format of that uniform is. * I know that shaders aren't guaranteed to execute on the GPU, depending on the OpenGL implementation. But for simplicity let's just assume they do.
当时 iOS Safari 未正式开放 WebGL，评论讨论其兼容性与平台限制。
如果 Apple 能在 iOS 上启用 WebGL 就好了！官方只在 iAd 中提供（iOS 4.2 及以上，除第二代 iPod Touch 或 iPhone 3G 及更早设备）。不过越狱设备有办法为 Mobile Safari 和其他 WebKit 浏览器启用它。如今连微软的 IE 11 都支持 WebGL，希望 Apple 在 iOS 8 中启用。
frik查看英文原文
It would be great if Apple would activate WebGL on iOS! Officially only available through iAd on iOS 4.2 and higher, for all devices except for 2nd Gen iPod Touch or iPhone 3G and earlier. However, there is a tweak for jailbroken devices to enable functionality for Mobile Safari and all other WebKit browsers. http://en.wikipedia.org/wiki/WebGL Today, even Microsoft supports WebGL with IE 11, so hopefully Apple activates it with iOS8...
对比 2D canvas 线条渲染与 GPU 水体模拟，说明 GPU 加速在合适任务上的巨大优势。
而我还在努力让一堆二维线条在 2D canvas 里快速渲染，用来做图表。让我觉得很奇怪的是，画 20,000 条线这种“简单”的事只能跑到约 20fps，而带焦散的水体模拟却能以 30fps 正常运行。这说明把 GPU 用在它擅长的事情上，收益有多大。
vmind查看英文原文
And here I am trying to get a bunch of 2d lines rendering quickly in a 2d canvas for some charts. So strange to me that something 'simple' like drawing 20,000 lines chugs along at ~20fps and a water simulation with caustics is there running at 30fps just fine. Goes to show how much you gain from a GPU if you're using it for something it's designed to do.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com在抽象阶梯上上下下
Up and Down the Ladder of Abstraction
Bret Victor 的交互式长文，以“抽象阶梯”为隐喻，讲如何在不同抽象层级之间上下移动来理解、设计和可视化复杂系统。
设计与产品上首页 4 次 · 2011–2021worrydream.com编辑精选