WebGL水体 (2010)
WebGL Water (2010)

原始链接: https://madebyevan.com/webgl-water/

加载中…… Evan Wallace 制作 此演示需要性能良好的显卡和最新的驱动程序。如果无法运行演示,您仍然可以在 YouTube 上观看。 交互: * 在水面上绘制以产生涟漪 * 拖动背景以旋转摄像机 * 按空格键暂停和取消暂停 * 拖动球体以移动它 * 按 L 键设置光照方向 * 按 G 键切换重力 功能: * 光线追踪反射和折射 * 解析环境光遮蔽 * 高度场水面模拟 * 软阴影 * 焦散(详情请见此处)* * 需要 OES_texture_float 扩展** * 需要 OES_standard_derivatives 扩展 * 来自 Flickr 上 zooboing 的贴图块纹理

Hacker News 上的一个帖子讨论了 Evan Wallace 2010 年的 WebGL 水面演示,许多用户对其在现代设备(包括手机)上的持续相关性和流畅性能印象深刻。一些评论者提到了 Wallace 之后作为 Figma 创始人取得的成功,以及他对 Rust、WebAssembly 和 esbuild 的贡献。一些用户报告了由于缺少 OES_texture_float 扩展而导致的错误,尤其是在 Android Chrome 上,而另一些用户发现它在 Firefox 或旧设备上运行良好。用户分享了在演示中创建有趣效果的技巧。有些人将其用作基本的“WebGL 是否工作?”测试页面。讨论扩展到了学习 WebGL 2D 效果的资源,推荐了 thebookofshaders.com 和 shadertoy.com。

原文

Loading...

Made by Evan Wallace

This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube.

Interactions:

  • Draw on the water to make ripples
  • Drag the background to rotate the camera
  • Press SPACEBAR to pause and unpause
  • Drag the sphere to move it around
  • Press the L key to set the light direction
  • Press the G key to toggle gravity

Features:

  • Raytraced reflections and refractions
  • Analytic ambient occlusion
  • Heightfield water simulation *
  • Soft shadows
  • Caustics (see this for details) **

* requires the OES_texture_float extension
** requires the OES_standard_derivatives extension

Tile texture from zooboing on Flickr

联系我们 contact @ memedata.com