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

2021-04-25 20:53 974 阅读 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