![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgpu
DBBH
成都有合适webgl/webgpu岗位的请私信我
展开
-
z-fighting多视锥方案缺失depth information的思考2
这里可以通过MRT输出depth,然后绘制一个layer后,还是clear depth,继续绘制。这样最面前可能精度还是能用,但是后两层layer可能会比较奇怪,甚至第一层也不对劲了。那么只能说尽量少的分组,然后输出到2 3个buffer进行绘制。这里有一个取巧的法子,但是估计layer的内部会出现不好的效果。最远的layer的depth变为D * 0.01+0.99。原创 2024-07-25 16:03:57 · 316 阅读 · 1 评论 -
z-fighting多视锥方案缺失depth information的思考
好 这样就可以正常绘制了,这样减少了near far 中间的range,起到了作用。绘制第三个,这里通过深度测试的片源可以输出颜色,SO,手动输出Z。绘制第二个,只有新出现的mesh才会被绘制,重复的位置就无关紧要。Cesium采用了多视锥的方案,具体就是划分几个视锥,从远画。如果我要做SSR这种效果,这个操作把深度其实相当于干掉了啊。如果所有东西都在一个draw call里,怎么办。注意这里,画完每一个都要clear depth。最后一个 绘制结束 留下了深度也留下了颜色 好。原创 2024-07-19 17:17:25 · 235 阅读 · 0 评论 -
【bitonicSort学习】
这个是用来并行排序的一个操作之前学过一些CPU排序,快排 冒泡 归并啥的,有一些能转成并行,有一些不适合像快排这种二分策略就可以考虑转一下,今天看一下这个双调排序。原创 2024-01-31 10:39:20 · 269 阅读 · 0 评论 -
webgpu demo阅读 A-Buffer
这个是OIT里的链表方式,说的是首先把每个像素搞一个链表,然后把深度<opaque的存起来,最后排序,然后混合。可以看到,确实是排序之后,进行mix得到最终结果,这样就可以实现透明无关排序了。这里就有这么一个depht判断。原创 2023-12-17 19:42:32 · 87 阅读 · 0 评论 -
web3d调试
这时候了解到了PIX RenderDoc这种也能调浏览器,不过他会把画canvas以外的也抓住,看的时候有点费劲。然后我查API,发现有个api用来query timestamp,然后兴致冲冲的把他写好了。然后我去搜了一下谷歌,结果前面某个版本把这个功能去掉了,也就是没法用了。然后发现报错需要开谷歌的一个设置,而且要在谷歌运行加命令行参数。我希望看见某个shader的执行耗时,这个无法做到诶。web里嘛,Spector当然是首选。但是也没办法,总比没有好。然后我就加了,继续报错。原创 2023-08-25 10:26:15 · 101 阅读 · 0 评论 -
webgpu之旅05
主体就是这样更新粒子的,还有个probablityMap.cs可以看看。这里是着色部分,看起来没什么特别的,接下来看cs部分。演示了一个粒子如何用cs动起来。原创 2023-08-02 09:57:08 · 152 阅读 · 0 评论 -
webgpu之旅03
然后看看是不是需要update,然后需要更新就把原来的pipeline删了,重新构建一个,放进cache。很多函数名和Webgl一样的, 比如getClearAlpha啥的,这些行为都和以前一样的。_acquirePipeline就是把shader啥的作为参数构建新的pipeline。我们找个例子看看别人的renderer three.js v152。然后这个是把通过裁剪判断的物体收集一下,再排序一下。东西收集好了,要开始了,但是有点长,下次继续。remove dispose比较简单。原创 2023-06-09 10:31:57 · 718 阅读 · 0 评论 -
webgpu之旅 01
然后是drawcalllist怎么得到,通常场景都是tree,拍平一个array出来怎么知道list.descripor,computeLogic,当然是给mesh打Tag,拍平的时候,tag一致的拍一起,就比如quad,他自己一个list,剔除的meshs应该都是同一套cull Logic。这里想想,万一有好几种list呢,不能一次直接submit吧,也不一定,但是很可能一共只需要一次submit。假如画N个东西,也就是正常的物体,也是输出N个target。所以当然是往list上面挂!原创 2023-05-19 10:58:02 · 489 阅读 · 0 评论 -
webgpu记一下之画instance
之前OpenGL有个glVertexAttribDivisor的api,这个设置好之后,就可以绘制instance啦。呐 这里 也就是说传入的desc写清楚你的buffer用来给instance的,那么就可以。为什么要找这个东西,因为UBO的size好像是65535,反正就是很容易就超标了,懂了吧。location=0 someattribute了。然后用instance_ID去读。webgpu对应的在哪呢。原创 2023-03-24 18:52:56 · 147 阅读 · 0 评论 -
webgpu之wgsl内存对齐记录
本来array的stride是4,4是查询StrideOf查询到的 RequiredAlignOf。下面这个例子,表达的是另外一个规则,数组必须满足他的stride是16的倍数。这里表达的是规则之一,如果嵌套了结构体U,那么从结构体U,要是16的倍数,重点是他用了另外一个结构体包一下,把f32包成了size是16的结构体。这个例子就是演示了S只有4,不够,需要align16。这样感觉好奇怪噢,f32非要撑大到16.这里直接搬运官网代码进行学习记录。原创 2023-03-14 11:00:09 · 220 阅读 · 0 评论 -
webgpu思考obj携带属性
首先开始createCommandEncoder,然后beginRenderPass,分歧就在这里了。第一个box,他有自己的pipeline,第二个也有,那么这里就要切换一次pipeline。那么维护一个pipelinePool,是一个map再说吧,反正就是状态加shader名字这类组合感觉还行。今天在搞dbbh.js的时候,想到一个问题,啥问题呢,先看看情况。emmmm,那这个属性直接挂material上?不知道大家伙还有别的想法么?感觉太粗鲁了,改一点?原创 2023-03-05 17:49:09 · 440 阅读 · 0 评论 -
webgpu零散API学习
看官方demo的时候,想起了webgl的clear操作,看了一下这个attachment的depthLoadOp想不到竟然有个小建议首先 这个Op有四个选项。原创 2023-02-21 20:50:22 · 117 阅读 · 0 评论 -
webgpu思考renderpass怎么封装
思考了一下一个pass下对应一个render scene对应多个输出texture感觉该这样然后object大概就这样XMind不花钱就这样了,我也不太会用,就弄个大概表达一下就行了原创 2021-11-22 22:06:51 · 373 阅读 · 0 评论 -
webgpu里的drawinstance
TS代码中,简短,很容易看出来,这个直接第二个参数就是instance的数量wgsl顶点着色器用builtIn instanceIdx就可以使用自己的matrix了threejs交流群511163089原创 2021-11-17 19:37:32 · 171 阅读 · 0 评论 -
webgpu的bundle理解
webgpu里的渲染循环,看demo基本都是创建一个createCommandEncoder,然后进行一系列操作,最后提交,发现有个叫做executeBundles的东西,就是record一次提交时候创建的那些信息,下一次就不用重复那些操作 直接execute这个bundle,直观上是很厉害的东西,我理解上,是类似instance可以省去CPU传输GPU这种感觉。有个demo 但是没太确定是不是那个record的时候不能绘制,待我细细学习一下再说。...原创 2021-11-13 09:31:42 · 240 阅读 · 0 评论 -
webgpu wsgl语法貌似不会再改了,可学习了
struct VertexOutput { [[builtin(position)]] Position : vec4<f32>; [[location(0)]] fragPosition: vec3<f32>; // position in world space [[location(1)]] fragNormal: vec3<f32>; // normal in world space [[location(2)]] fragUV: vec2原创 2021-10-17 22:26:06 · 208 阅读 · 0 评论 -
WGSL shadow map demo的fragment代码理解
threejs交流群511163089来看看这个shader。shadow是实现思路就是传入灯光镜头下的矩阵,将点投影过去,对比深度。累加起来除一下权值和, 可以柔和一下影子边缘。里面有个没有学过的新东西就是这个对比采样器。textureSampleCompare,有点意思 像是硬件帮你做计算。第一个参数是纹理,第二个是采样器 这个采样器的类型sampler_comparison,第三个是uv,第四个是对比值,别的代码都很朴素 那个$符号是js的字符串替换[[block]] str原创 2021-03-25 18:21:55 · 384 阅读 · 0 评论 -
webgpu初体验新版shader语言WGSL
threejs交流群511163089目前webGPU好像还没正式登场,但是迫不及待的体验了一下现在的测试版本 vertex: `const pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>( vec2<f32>(0.0, 0.5), vec2<f32>(-0.5, -0.5), vec2<f32>(0.5, -0.5));[[built原创 2021-03-12 09:30:16 · 2358 阅读 · 0 评论