$ npm run dev
vite v2 .1.5dev serverrunning at:
> Local: http://localhost: 3000/ > Network: http:// 10.250.14.217: 3000/
ready in555ms.
详细怎么用？一起来看。
被子块图案
起首，可以将制作被子块图案作为 入门项目，它展示了在 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]http://github.com/ekzhang/graphics-workshop
[2]http://www.ekzhang.com/
[3]http://www.aapt.org/physicsteam/2020/pastexams.cfm
— 完—
本文系网易消息•网易号特色内容鼓励筹划签约账号【量子位】原创内容，未经账号授权，克制随意转载。
参加AI社群，拓展你的AI行业人脉
量子位「AI社群」招募中！接待AI从业者、关注AI行业的小同伴们扫码参加，与 50000+名挚友共同关注人工智能 行业发展&技能希望：
量子位 QbitAI · 头条号签约作者
վ'ᴗ' ի 追踪AI技能和产物新动态
一键三连「分享」、「点赞」和「在看」
科技前沿希望日日相见~返回搜狐，检察更多
|申请友链|小黑屋|手机版|Hlshell Inc.
( 豫ICP备16002110号-5 )
窥视卡
雷达卡
发表于 2020-12-24 03:50:05
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜