webgpu

然后我们如何确认泄露了呢，我们需要把代码梳理清楚，知道哪个时机，在delete，在create，那么这个时候，按道理，delete了n个对象，create了N个对象，那么内存就是N个对象所占的，根据这个地方，你重新执行s次这个流程，看一下是否程序里只有N个对象即可。这个快照的摘要那里，点进去，谷歌里可以选择compare，那么能帮你看上一次和这次的区别，你自己也能看出来的，但是这只是告诉你某个对象泄露了，给你一点思路，具体是怎么回事，你就顺着对象的代码逻辑梳理慢慢找。就能获取一张现在的内存情况了。

这里能看见图片的所有属性，以及能看见图片长什么样子，所以，好好利用这些信息，可以加速你的排查进展。

每走一步，就能找到需要哪些tile,就能画一个FBO，然后有aabb,拿着射线直接SDF Ray march，好了，思路就是这样了，有空再写代码实现吧。这个做法的影子，精度感觉是蛮高的，不过直接多画一次，只给主角的话，也不是不行，整体场景的话，还是算了吧。那么可以经过计算得到物体的所有点投影到具体的平面的位置，这些信息，可以构造一个mesh出来。那么这里就出现一个取巧的法子，如果你只考虑投影到平面上，光源是directional的。你希望有很高的精度，就必定要用大size的图片，这显然是不太妙的。

我遇到一个问题，我写了一份shader在不同的用户的机器上，会爆显存崩溃，我合成了几张巨大的纹理，一次上传，如果我分几个批次，就不会发生这个事情，然后性能就会相对下降。我们根据读到的字符串，检索到NVIDIA之后，再检索20 30 40这些字眼，进行区分高端机还是打火机。那么要处理这种事情，该怎么办，想了想，干脆就根据硬件级别来切换shader效果。webgl根据这个接口，还是能查看一点硬件信息的。当然，这样功能实现可能就要写几份，但没办法。

之前OpenGL有个glVertexAttribDivisor的api，这个设置好之后，就可以绘制instance啦。呐 这里 也就是说传入的desc写清楚你的buffer用来给instance的，那么就可以。为什么要找这个东西，因为UBO的size好像是65535，反正就是很容易就超标了，懂了吧。location=0 someattribute了。然后用instance_ID去读。webgpu对应的在哪呢。

本来array的stride是4，4是查询StrideOf查询到的 RequiredAlignOf。下面这个例子，表达的是另外一个规则，数组必须满足他的stride是16的倍数。这里表达的是规则之一，如果嵌套了结构体U，那么从结构体U，要是16的倍数，重点是他用了另外一个结构体包一下，把f32包成了size是16的结构体。这个例子就是演示了S只有4，不够，需要align16。这样感觉好奇怪噢，f32非要撑大到16.这里直接搬运官网代码进行学习记录。

然后给法线也乘一个世界矩阵，然后乘一个size再把结果加到position上，俩顶点就有了，一根针就做好了。然后把新的position收集起来，用line画出来就可以了。然后取出顶点的position，都乘上世界矩阵。先看看他的构造函数，传入一个obj，比较朴素。然后，update做了啥呢。先保证obj世界矩阵是最新。

在有很多的物体的时候，我们第一时间会想到merge或者instance如果merge这些物体，绘制帧率会大幅上涨，此时，迎来一个需求，让模型用edgegeometry显示那这个东西是drawline的方式进行的绘制，俩个不同模型之前会被加一根线。就连起来了。

然后画正面，buffer-- 这时候，shader里discard的画 这个部分的buffer就不会减1。最后画一个plane，要buffer是1的地方且深度测试通过的地方才显示。真实代码你可以沿着这个思路看看three给出的demo。有一个显而易见的方法，就是真的去计算几何，把面给补上。之前试了一下简单的剖面，利用平面方程，就可以做到。如图 如果直接挖了，那红色那里就是空的。背面先画一个给buffer设置到1。这次说模板stencil怎么操作。第一步，给这个球设置一下。

思考BRDF

512的块，然后得到每个点的坐标，然后和mesh的所有三角面求距离，得到最近的一个，然后，判断一下是否已经在三角面背面了，如果在背面，就算进入了，否则最近的距离就是这个空间点的sdf。Mesh是由三角面构成的，那么怎么得到空间一个点到这个mesh的最近距离，那么有个问题，是不是要区分他在物体内部，那么这里可能要求物体是凸的，且封闭，否则不太好判断是否在物体内部。那么我们有一个封闭的物体之后。

我有12个uniform变量，我以为达到了上限，但上限应该是16个，我只能排查别的原因，我最后删掉了和viewMatrix有关的逻辑，画面恢复了正常，我进行猜测，我外面传入的值是否不正确？我这样写了一个材质，但是他不报错，只是简单的画面全黑，没有警告，没有报错。尽量别用引擎内置关键字。最后我猜测变量名字不能用。...

如何给shader传递结构体数组

sdf

threejs交流群511163089

THREE的core里面的Object3D竟然是继承自dispatcher为啥呢然后会为对象注册一个dispose方法 像下面这种最后dispose是触发事件来销毁可是 我搜了一下 好像只绑定了dispose方法 那个session目前不知道是啥那么这里我的疑惑是为啥要用dispatch来dispose 为啥不直接给对象一个dispose方法。这两者有啥不同之处，有啥优劣之分。想不明白， 希望有大佬解惑...

这个公式如何来的Zview= -B/(D+A)A B替换为透视投影矩阵的内容D这里是[-1,1],但接口读入的可以是最终0-1的depth,D就是depth*2-1;继续带入threejs交流群511163089

threejs交流群511163089sRGBsRGB是个啥 s是standard 是大厂为了统一标准搞的色彩空间 对应了gamma0.45空间。然后是伽马矫正gammaxx空间就是那个幂 伽马2.2就是2.2次方 1.0就是1次方。从0-1这个区间，l=u这个函数才是直线，2.2次方会导致凹陷，于是要给他补回去，欸对 这就是矫正。然后怎么矫正，你最后一步输出之前需要来个1/2.2也就是约0.45次方的调整。然后为啥有这一步，由于显示器输出的时候会给你的数据来一个2.2次方。.

threejs交流群511163089首先是像素拾取物体，这个先看看官方DEMO哈，每个颜色编码一个物体，像素的颜色对应物体。框选怎么弄喃第一步，筛选出renderlist第二步，绘制，以ID颜色绘制第三部 剔除 框选的范围是个矩形，而且本身就是屏幕坐标，那么框选的范围以外的全部置为黑色，所以前面黑色就不编码物体了，留着当没有。最后绘制的图片上 全是框选范围内的物体的ID，readpixel然后解编码物体就拿到了因为是像素拾取，所以只能拿到面前的第一排物体，被挡住的就没有了.

光栅化实现的，样子还行，还可以加个bloom看看效果，锯齿还需想办法去掉

threejs交流群511163089进去他们官网玩一下，发现有点意思。那么想一下大概怎么模仿(发出白嫖的声音)呢操作看看，鼠标向上，相机向上，鼠标向右，相机向右。这里你如果觉得方向反了拿起你身边的物体试试，你看看头移动看见的视觉效果。于是乎，劣质版就可以做出来了首先mousemove里看看鼠标方向然后以鼠标往上为例，camera的移动方向就向当前的up方向的方向移动，然后保持lookat的方向不变，这里不是lookat不变，是那个direction不变。向left up rig

threejs交流群511163089这两天做计算数学表达式，这个就要用到后缀表达式来做，这是数据结构课会教的东西，发现规律的大神真牛批咱们就看看js怎么做这种东西，普通算式就是中缀表达式。规则如果遇到左括号则直接入栈如果遇到右括号,则弹出站内只到出现左括号为止如果站外操作符的优先级高于站内的优先级则入栈如果栈外的操作符优先级低于或等于栈内的优先级，输出栈内的符号，并入栈栈外的符号中缀表达式遍历完成，但是栈中还有符号存在，一一出栈输出输出就是装进后缀表达式栈这样出来的

threejs交流群511163089但是webgpu出来的话,shader就不是glsl了，需要花时间学新语法。开始更新gizmo将所有物件都塞进handles；开始遍历这里解释一个情况，别的差不多helper就是那根虚线，我测试感觉旋转的时候才触发这个条件。如果是轴是X轴，那么初始就是X 不用管如果是Y轴，那么就绕Z轴转动90度，变成与Y轴重合的方向的指示线别的也差不多这样。这里处理的是辅助线几乎垂直于脸的时候的情况，隐藏下面也基本这样处理一些

threejs交流群511163089插句题外话，three121版本已经有webgpu的sandbox了，webgpu指日可待。这个control代码相当长，可能要点时间解剖。这个control进来就new了个这个我们先看看这个是啥定义了两种材质然后改改颜色透明度作为每一根axis然后是箭头几何体和缩放用的几何体还有这个应该是一根线，当你平移操作的时候你可以看见定义了很多很多层级结构，显示不同的axis样式，具体怎么映射后面看顺着

threejs交流群511163089function SubV(a, b, normalize = false) { if (normalize) return a.clone().sub(b).normalize(); return a.clone().sub(b);}function AddV(a, b, normalize = false) { if (normalize) return a.clone().add(b).normalize(); retur

threejs交流群511163089function intersectObject( object, raycaster, intersects, recursive ) { if ( object.layers.test( raycaster.layers ) ) { object.raycast( raycaster, intersects ); }raycaster进入object.raycast开始raycast: function ( raycaster, i

threejs交流群511163089上回说到这个后期，可以涂鸦，或许你的作品是一张静止的很好看的图片，所以想要保留呐，咋个将图片弄到本地呐。let pixelBuffer = new Uint8ClampedArray(4 * w * h);renderer.readRenderTargetPixels(renderTarget, 0, 0, w, h, pixelBuffer);let imgData = new ImageData(pixelBuffer, w, h);createIm

threejs交流群511163089后期特效先说下概念。比喻一下，就像先将物体都画在一张纸上，再对纸进行涂鸦（写一些shader），最后给你看这张纸。还能将纸画在另外一张纸上，继续涂鸦，涂鸦很多层造出神奇的效果。实质是使用了FBO,frame buffer object。在three里头封装之后名字是WebglRenderTarget，或者你都不用设置这个，使用他的EffectComposer。用target的栗子是webgl_rtt.html。别的就是webgl_p.

threejs交流群511163089merge这个功能，做优化的都知道merge了会提升性能，减少drawcall。instance或者merge都合并了物体，物体合在一起了怎么选择单独的物体呐？。？其实raycaster点的本就不是你的物体，只是测试的与包围盒是否相交，那么你只需要保留之前的包围盒，直接用raycaster来进行与这些包围盒的相交测试就可以点到单个物体了。为了...

threejs交流群511163089首先看一下GIS大佬那几篇最长的一帧，我觉得有必要，大佬解析的版本虽然可能有点老，但是看完了就会有点映像了，知道大概走向。然后入手看源码。因为需要，这次着重看了他的瓦片加载部分，感叹巨佬的技能，从根节点到可见节点，一层层嵌套加入到加载队列渲染队列，最终展现在界面上。收获1 加载任务 可以通过重复设置任务和检测完成度来拆分到每一帧，这在不需要实时...

threejs交流群511163089UV效果可以做啥为了简单操作 使用PlaneBufferGeometry这个的uv会从00-11给你排好varying vec2 vUv;void main(){ vec2 uv=vUv;//这里不说if不好这个问题 简单的写一个效果if(uv.x<0.25)gl_FragColor=vec4(1.0,0.0,0.0...

threejs交流群511163089这东西。。今天研究worker读url那。发现这个可以用这种bitmap可以读来传给主线程 然后创建CanvasTextureloader.load(url, function (res){self.postMessage}这样可以在worker里读图片了 当然你可以直接读数据传过去给dataTexture...

threejs交流群511163089sphere.applyMatrix4( object.matrixWorld );判断与圆相交就是看到圆心距离是不是小于等于半径。这中间发生了一些事情，圆心变过去了，但是半径喃。sphere.radius*matrix.getMaxScaleOnAxis这个东西getMaxScaleOnAxis: function () { v...

threejs交流群511163089先看看真·大佬https://blog.csdn.net/qq_16756235/article/details/78303695CustomDepth和Pixeldepth Unreal里面有这个东西然后看完之后 就是我的理解和思路了CustomDepth小的情况 就是物体被挡住了 这时候可以剔除了如果大 那就是在可见区域最前头 那保留自...

threejs交流群511163089这种方式不适合半透明物体局部描边 你首先能知道哪些地方你要描边 也就是或者你有描边的整个mesh或者你有描边的所有顶点 然后构造mesh第一步画这个描边的物体 side=THREE.BackSide 以及 scale一个尺寸这样会得到一个只看得见背部且比原来大一丢丢的mesh第二步side=THREE.FrontSide画物体...

threejs交流群511163089一般矩阵求逆都是那种数学求法考虑情况 在gl框架中 一般模型矩阵 都是 旋转加缩放加平移构造的这矩阵 是不是可以通过缩放抵消 旋转抵消 位移抵消来构造一个新的矩阵而不是对原矩阵求逆来实现呐Ap得到p2 但是p2如果抵消了所有变换 不就是恢复到了p吗？ 感觉可行 emmm...

threejs交流群511163089UV贴图模型长的五颜六色的，一般都不是靠每个顶点带个color的attribute来的而是用的贴图那么贴图呐 图 是一个平面 坐标只有x和y 这就构成UV了 u就是x v就是y怎么贴 每个顶点还是带attribute 但是只需要带uv带上一个的xy这样在渲染这个顶点的时候 能在图上取xy处的颜色作为渲染色THREE里头你的模型如果带了U...

threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...

threejs交流群511163089片源着色器前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...

threejs交流群511163089顶点着色器这个是决定你那个点最后画在屏幕哪个位置的，最后xyz都是[-1,1]这么一个区间的值 z用来处理遮挡关系点的位置怎么传入呐 有VAO，VBO这些东西 但是我们基于threejs，emm，threejs给你封装了一下叫attributeattribute下有position字段normal字段uv字段等等，里面会装很多float像这样...