WebGPU学习笔记
文章平均质量分 73
肥宅Davina
想当码农却学了广告,想搞网安却只会前端。
展开
-
学习笔记 | Orillusion-WebGPU小白入门(七)
Vertex shader中主要就是这三个关键点。核心就是将mvp矩阵拆分开进行传入,用modelView来分别计算顶点和normal在变换后的世界坐标,其他的变量我们正常输出即可。原创 2022-09-23 22:40:45 · 536 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(六)
实际操作过程中,如果原始图像分辨率足够,一般无论使用哪种方法进行缩小的操作,肉眼都很难看出区别,但如果是放大的话效果就比较明显了。临近采样会在边缘呈现非常明显的锯齿感(马赛克效果),而线性采样边缘过渡比较平滑,但也在一定程度上造成了边缘模糊的情况。两者的最终效果不一定谁好谁劣,只是适用的内容不同。一般地,临近采样更适合边缘分割明显,颜色区域少的图像。而颜色丰富,过度较多的图,用线性采样的效果更好。社区中有很多采样优化算法, 但考虑到GPU的运行效率问题,主流图形API中只内置了这两种方法。原创 2022-09-21 23:08:49 · 1002 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(五)
instance draw(demo5):最大的优点是渲染管线的效率非常高,能最大限度地利用GPU的并行能力。对于资源的管理本质上是将group和buffer的切换放到了GPU / Shader里来做。JS中省去了创建多个buffer或group,内存上也没有多余的offset的需求。从buffer的读取性能来说,demo2和demo3虽然也是连续的buffer,但因为要对齐256个字节,其实每次指针切换实际上至少要移动256个字节。原创 2022-09-19 22:54:08 · 508 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(四)
Vertex shader的裁剪空间又称为齐次空间以坐标为原点,建立整个图形的顶点坐标信息利用矩阵变换,将一个图形在世界空间坐标中进行坐标变换利用投影矩阵,用摄像机和视锥模拟不同视角将裁剪空间进行统一的归一化处理,抛弃NDC空间之外的图形把整个NDC空间通过内部的视图变换,得到二维平面结果最后的两步是由GPU驱动自动完成,不需要开发者的参与。我们需要考虑的主要是(第三步)在Vertex Shader中返回裁剪空间的计算结果。前两步主要是在用户的逻辑代码中进行的。原创 2022-09-18 10:56:05 · 610 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(三)
Orillusion官方WebGPU小白入门系列课程学习笔记原创 2022-09-17 10:07:04 · 669 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(二)
Orillusion官方WebGPU小白入门系列课程学习笔记原创 2022-09-17 10:06:30 · 1002 阅读 · 0 评论 -
学习笔记 | Orillusion-WebGPU小白入门(一)
Orillusion官方WebGPU小白入门系列课程学习笔记原创 2022-09-17 10:05:48 · 789 阅读 · 0 评论