华人小哥开发“CG工坊”,帮你快速入门计算机图形学 | GitHub热榜

2021-04-25 20:53 72 阅读 ID:332
量子位
量子位

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技术和产品新动态

深有感触的朋友,欢迎赞同、关注、分享三连վ'ᴗ' ի ❤

免责声明:作者保留权利,不代表本站立场。如想了解更多和作者有关的信息可以查看页面右侧作者信息卡片。
反馈
to-top--btn