- 博客(4)
- 收藏
- 关注
原创 webgpu示例解析4
这个片源部分,直接读到从顶点输出的俩变量,哦不 只读了fragpos,直接输出了。然后定义了一个结构体用于输出 有builtin变量 location变量。这个在Vulkan里叫set binding 我理解为他是个二维数组。uniforms就需要注意两个值一个binding 一个group。builtin的是position 就是MVP。这个fragpos是随便的一个变量。接下来我们看下这个wgsl部分。
2022-10-28 21:22:41
318
原创 webgpu示例解析3
创建了ubobindgroup,binding=0,这是告诉shader UBO的布局,才能和前面js构造的UBO对应上。然后在绑定了pipeline之后,draw了两次,每次会先setVertex bindGroup。第二步 在偏移为0和偏移=offset的地方填充了两个buffer。这代表了两个方块各自的几何变换信息。首先看这个frame函数在做什么。第一步 更新变换矩阵。
2022-10-23 14:29:02
194
原创 webgpu示例解析2
这个例子三个顶点数据都硬编码在vertexShader里了。这是第一个绘制三角形的例子,到这里也就解析完毕。通过内置变量VertexIndex读取。然后片段着色器硬编码输出颜色 红色。这个是三角形的顶点着色器。之后会继续解析其他例子。
2022-10-16 19:34:52
193
原创 webgpu示例解析1
device,navigator,presentationFormat,commandEncoder,textureView 基本都是这么创建。首先是commandEncoder开始一个pass的绘制,而pass的绘制描述在前面设置好,此时传入。然后是设置渲染管线,这个例子中管线设置了着色器,图元绘制模式为triangle-list。然后encoder finish之后,把这一系列记录的操作submit,即可绘制出三角形。看frame函数,可以看见要绘制一个三角形,需要做这么一些事情。
2022-10-09 22:47:45
400
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人