子豪 发自 凹非寺
量子位 报道 | 公众号 QbitAI

CG新手们，你们的福音来了~

为了让初学者更好地学习计算机图形学基础知识，一位哈佛小哥创建了graphics-workshop，一周左右的时间，已经在GitHub上获得1K星。

其中包含5个子项目：被子块图案、过程纹理生成、栅格化和着色、风格化渲染，以及光线追踪。

用户需要用npm进行安装，通过运行下面的代码，安装依赖项和启动开发服务器。

具体怎么用？一起来看。

被子块图案

首先，可以将制作被子块图案作为入门项目，它展示了在2D网格中渲染的过程。

作者在「shaders/quilt.frag.glsl」中给出了相应的代码，片段着色器遍历每一个像素，将像素编号传入gl_FragCoord.xy中，绘制2D网格。

新手们可以通过取消注释，来改变图形，包括绘制、翻转形状和改变颜色等。

比如，修改if语句，就可以改变图案的几何形状；

如果想生成更丰富的RGB颜色，可以通过修改变量c实现：

最后，利用gl_FragColor输出像素的颜色。

过程纹理生成

除了制作被子块图案，还可以创建类似「我的世界」中的场景：

为生成自然的外观，开发者使用了一种常见的图形基元，称为单纯形噪声。函数float snoise(vec2)用来接收向量，并在该位置输出一个平滑的标量噪声值。

由于不同位置的噪声值大致独立，改变屏幕右上方的seed ，就能够看到渲染后输出的新形状。

依次取消第一个代码块的注释，学习组合不同音高的噪声，用于改变纹理；取消第二个代码块的注释，学习使用阈值（特别是mix和smoothstep函数）来调整颜色。

此外，还可以添加参数，比如：利用temperature，从噪声图中独立采样来改变阴影等。

栅格化和着色

与大多数视频游戏所用的算法相同，采用栅格化方法渲染3D三角形网格，呈现更逼真的效果：

将3D表面分解为三角形，然后在屏幕上独立绘制每个三角形，并在它们之间插入变量。

图像被储存为三角形网格，片段着色器将对三角形的每个片段评估一次，而不是针对每个像素。

用户可以单击拖动来查看图形的不同角度，通过mesh查看除茶壶之外的其他形状，以及用kd改变对象的颜色。

利用illuminate()函数，可以表示光源的位置，以及光源对当前像素颜色的作用。

代码目前仅支持漫反射，用户也可以更新代码，添加Phong镜面反射组件。

风格化渲染

这一项目的代码和上面的项目非常相似。

但是在进行照明计算之后，不会立刻输出颜色，而是根据亮度强度阈值，进行离散化和不同风格的处理。

光线追踪

光线追踪是照片级真实感渲染中的黄金标准。

通过为每个像素拍摄射线，来用片段着色器进行几何计算，用trace()函数返回与给定射线相对应的颜色，来进行建模。

用intersect() 函数来计算空间中任何射线的第一个交点；illuminate()用于将两个点光源的作用相加，来计算给定点的光照。

在进行照明计算之前，添加条件语句以检查从点到光源的射线是否被遮挡。如果被遮挡，则应立即返回vec3(0.0)模拟阴影。

通过修改代码，还可以选择强度，在不同的位置添加第三个点光源。

作者简介

开发者Eric Zhang，目前是哈佛大学的硕士研究生，主要研究方向是机器学习和编程语言，曾在英伟达实习。

他获得过两届IOI金牌，还为高中学生写了一本物理书，并且提供免费的电子版。

不仅如此，小哥还擅长音乐，凭借中提琴演奏获得过不少奖项。

他经常在个人网站分享文章，也在Github中发布过多个项目，都有着不错的反响。

感兴趣的朋友们，可戳链接了解详情~

参考链接：
[1]https://github.com/ekzhang/graphics-workshop
[2]https://www.ekzhang.com/
[3]https://www.aapt.org/physicsteam/2020/pastexams.cfm