CG新手们，你们的福音来了~
为了让初学者更好地学习计算机图形学基础知识，一位哈佛小哥创建了graphics-workshop，一周左右的时间，已经在GitHub上获得1K星。
其中包含5个子项目：被子块图案、过程纹理生成、栅格化和着色、风格化渲染，以及光线追踪。
用户需要用npm进行安装，通过运行下面的代码，安装依赖项和启动开发服务器。
$ npm install
...
added 16 packages from 57 contributors and audited 16 packages in 1.459s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ npm run dev
vite v2.1.5 dev server running at:
> Local: http://localhost:3000/
> Network: http://10.250.14.217:3000/
ready in 555ms.具体怎么用？一起来看。
被子块图案
首先，可以将制作被子块图案作为入门项目，它展示了在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
—完—
@量子位 · 追踪AI技术和产品新动态
深有感触的朋友，欢迎赞同、关注、分享三连վ'ᴗ' ի ❤
快抢沙发！
