Made by Evan 网站上展示了哪些 WebGL 图形项目?

更新时间

Made by Evan（madebyevan.com）是 Evan Wallace 的个人项目展示站，其中“Graphics”板块集中收录了 4 组 WebGL 图形实验：WebGL Water（2010）、WebGL Path Tracing（2010）、WebGL Image Filters（2011）和 Shader Articles（2015）。这些项目都是浏览器端实时渲染演示，页面提供 “View demo” 或 “View demos” 入口，可直接在支持 WebGL 的浏览器中打开体验。它们属于技术实验与代码示例，不是面向普通用户的图形软件产品。

四个 WebGL 项目分别是什么

WebGL Water：实时水面渲染实验

这是 2010 年的 WebGL 实时水面渲染实验。作者明确说明重点在渲染而非物理模拟，因此水面行为并不追求真实。技术实现上，水面高度场用浮点纹理模拟，焦散效果通过 GLSL 导数函数渲染。适合想看 WebGL 如何做实时水面与光学效果的读者，页面提供 “View demo” 入口。

WebGL Path Tracing：实时路径追踪光照演示

同样是 2010 年的项目。路径追踪是一种模拟光线在场景中反复反弹的真实光照算法，这个演示用 WebGL 实现实时性能，并支持漫反射、镜面反射和光泽表面三类材质。想了解浏览器端实时光线追踪能做到什么程度，可以从这个演示入手。

WebGL Image Filters：浏览器端实时图片滤镜

2011 年发布，提供 10 种不同的图片滤镜，在浏览器中实时调整照片。它完全在客户端运行，用 WebGL 加速，源码开源于 GitHub。作者记录该项目是为纽约 HackNY 黑客松从零开始 24 小时内写成，并获得第二名。适合需要“纯前端、不上传图片”的滤镜实现参考。

Shader Articles：着色器代码示例合集

2015 年发布，是一组有趣的着色器代码片段合集。所有演示均使用 WebGL，并可在主流浏览器中运行。相比前三个完整项目，它更像可拆开学习的代码素材库，页面提供 “View demos” 入口。

一览对比

项目 年份 类型 技术要点 适合谁
WebGL Water 2010 实时水面渲染实验 浮点纹理高度场、GLSL 导数函数做焦散 想看水面与光学渲染技巧的人
WebGL Path Tracing 2010 实时光照演示 路径追踪、漫反射/镜面/光泽材质 想了解浏览器端光线追踪的人
WebGL Image Filters 2011 图片滤镜工具演示 纯客户端、WebGL 加速、开源 想找前端滤镜实现参考的开发者
Shader Articles 2015 着色器代码合集 多个 WebGL 着色器片段 想学习或复用着色器代码的人

使用前需要知道的条件

  • 浏览器要求：这些演示依赖 WebGL，需在支持 WebGL 的浏览器中打开；资料未提及具体浏览器版本要求。
  • 访问方式：通过各项目页面的 “View demo” / “View demos” 链接进入，无需安装额外软件。
  • 性质定位：均为实验性演示与代码示例，WebGL Water 的水面行为本身不追求物理真实；不要按生产级工具预期使用。
  • 源码情况：资料仅明确 WebGL Image Filters 在 GitHub 开源，其余项目的源码获取方式未在页面资料中说明。

这些项目与站点其他内容的关系

Graphics 只是 madebyevan.com 的一个板块。同一站点还展示了作者的专业工作（Figma 联合创始人，2012–2021，主要贡献渲染引擎、多人协作服务、矢量与文本编辑器、插件系统）、编译器项目（esbuild、Skew 语言）、游戏（Robots Are People Too）和应用（Tagception、Source Map Visualization）。如果目标是了解 Evan Wallace 的技术背景，WebGL 系列反映的是他在图形渲染方向的早期积累；如果目标是找可直接运行的 WebGL 示例，从上面四个演示入口进入即可。