WebGPU-7

第四个例子，fractal_cube

首先，个人觉得这个名字取好像有点问题，fractal是分型的意思，大致意思应该是下面这张图的效果。


这个例子中渲染的出来的效果更类似这种：

利用上一张的效果合入下一张中，应该叫德罗斯特（Droste Effect）更合适吧。-_-!!!
Anyway，还是继续分析代码吧：

首先分析shader，照例还是和上一章的shader做比较。

右边是上一章的shader，我们看到，在vertex中，这一章输出了两个内容，一个是颜色，一个是UV信息。
在fragment shader中这里利用收到的数据，判断是否用纹理的信息，还是颜色的信息。
我们应该有映像，这几个例子中，背景色都被设置成了0.5， 0.5，0.5的灰色值。那么通过texColor和vec3(0.5)的差值加length计算就是判断当前值是不是背景色，然后和0.01比较后得到一个0或者1的值，用mix算法一合并，其实等价于

if (f == 1) {
	use background color
} else {
	use texture color
}

只是因为GPU的运算方式，我们会尽量避免if case，因为这样GPU就不用分情况处理，可以加快渲染速度了。

再来看下几何数据。

不同处用红色标出了，和上一章不同，这一章把该加到数据来了个包圆儿，除了点数据，还有颜色数据和UV数据。三类都在了。

接下来是init函数，基本的相同部分就不提了。
看一下，swapChain对buffer的设置。

这里的usage是新加的项，我们再来看下spec中对swapChain的定义：

dictionary GPUSwapChainDescriptor {
    required GPUDevice device;
    required GPUTextureFormat format;
    GPUTextureUsageFlags usage = GPUTextureUsage.OUTPUT_ATTACHMENT;
};

我们可以看到，默认的情况是使用的OUTPUT_ATTACHMENT，即只用于输出，也就是说，如果是之前的情况，那就是输出到屏幕上这一个作用而已。现在多了一个设置TRANSFER_SRC。也就是说，这份buffer的作用还多了一个作用，可用于src texture用来提供下一帧需要的数据。
上一帧绘制到了buffer之后，不是只拿来送到屏幕上，而是也拿来作为shader中的sample texture的source用作输出用。

接下来的pipeline这里略过，因为没有什么特别不同的地方。
重点看一下frame的绘制函数。

多了一个设置buffer的过程。我们之前就为上一帧的texture设置好了layout，uniform等各种需要设置好的数据。
然后在绘制过程中，我们将数据从swapChainTexture拷贝到之前开辟好的cubeTexture中。

大致流程梳理一下就是：
第一帧的时候，我们背景是灰色的一张图，然后texture也是灰色，那么进入shader之后，判断和背景色一直，然后就选择cube的vertex对应的color的颜色，我们得到了一张类似sample-2，rotate-cube一样的图片。
第二帧的时候，我们的src texture就是上一帧，带一个cube的图片，背景部分仍然被判定为灰色-不变，而cube的范围内的颜色不再是灰色了，则采样了texture的像素，绘制到cube的面上，看起来就是上一帧贴到了cube上。如此往复，我们可以一帧一帧的继续绘制下去，然后每一遍的cube看起来就不断的延续下去。生成了最开始我提到的德罗斯特效果。
从这个例子中，我们需要知道的是，texture的来源不再仅限于image一种，而是和WebGL中的FBO一样，来自上一帧图片渲染出来的数据。就和我上几章提过的一样，WebGPU中的“可拆卸模块”的味道非常重，开发人员的自由度得到了很大的提升，而且用起来也真的非常方便。还是要给谷歌吹点彩虹屁的，确实真香~~ ^_

感觉挺有趣的一个例子。

统一结尾：以上均为个人理解和一家之言，有任何错漏之处欢迎留言讨论，共同进步，一经发现错漏，必立刻更新，且会在修改处指明reporter。谢谢