- 博客(515)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 AI帮我忙之webgpu实时路径追踪
由于工作是2D，可能下一步要玩的就是vector font了。并且经过验证 AI可以直接写wgsl shader。做了个webgpu的仿cycles的demo。最近体验了VIBE CODING。
2026-05-19 12:55:12
139
1
原创 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
2729
原创 基于three.js的shader入门教程 十
threejs交流群511163089threejs交流群511163089threejs交流群511163089这是第300篇文章，咱们说点技巧吧。这个怎么做的喃 bloom就不说了 直接用的官网的那个东西。这些一蹦一跳的怎么做的喃。基于一个planebuffergeometry。interval里面更新数据就行了。这里基于plane的话，你可以在shadertoy学到神级操作。shader做了啥，就读当前像素的localY，看看是不是足够矮，高的就删除，是不是很清
2021-01-29 14:48:02
2145
原创 web端的shader效果十 three.js里shader实现钻石
光栅化实现的，样子还行，还可以加个bloom看看效果，锯齿还需想办法去掉
2021-01-14 14:12:29
1651
2
原创 基于three.js的shader入门教程 九
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
2020-06-18 14:14:10
1360
原创 基于three.js的shader入门教程 八
threejs交流群511163089后期特效先说下概念。比喻一下，就像先将物体都画在一张纸上，再对纸进行涂鸦（写一些shader），最后给你看这张纸。还能将纸画在另外一张纸上，继续涂鸦，涂鸦很多层造出神奇的效果。实质是使用了FBO,frame buffer object。在three里头封装之后名字是WebglRenderTarget，或者你都不用设置这个，使用他的EffectComposer。用target的栗子是webgl_rtt.html。别的就是webgl_p.
2020-05-14 10:37:51
905
原创 基于three.js的shader入门教程 七
threejs交流群511163089想想，最终显示的那个颜色，是不是vec4的一个东西。gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);尾巴上的position就是模型最原始的坐标，也就是建模软件里头看得见那种，不出意外应该是的。如果是一个20米的楼，那position.y是就是0-2...
2020-04-17 16:46:37
932
2
原创 基于three.js的shader入门教程 六
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...
2020-03-10 15:12:06
1002
原创 基于three.js的shader入门教程 五
threejs交流群511163089UV贴图模型长的五颜六色的，一般都不是靠每个顶点带个color的attribute来的而是用的贴图那么贴图呐 图 是一个平面 坐标只有x和y 这就构成UV了 u就是x v就是y怎么贴 每个顶点还是带attribute 但是只需要带uv带上一个的xy这样在渲染这个顶点的时候 能在图上取xy处的颜色作为渲染色THREE里头你的模型如果带了U...
2019-12-19 15:32:21
978
原创 基于three.js的shader入门教程 四
threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...
2019-12-09 18:13:53
1077
原创 基于three.js的shader入门教程 三
threejs交流群511163089片源着色器前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...
2019-11-20 17:20:55
1040
2
原创 基于three.js的shader入门教程 二
threejs交流群511163089顶点着色器这个是决定你那个点最后画在屏幕哪个位置的，最后xyz都是[-1,1]这么一个区间的值 z用来处理遮挡关系点的位置怎么传入呐 有VAO，VBO这些东西 但是我们基于threejs，emm，threejs给你封装了一下叫attributeattribute下有position字段normal字段uv字段等等，里面会装很多float像这样...
2019-11-19 15:38:56
1517
2
原创 基于three.js的shader入门教程 一
threejs交流群511163089扫盲一下shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。threejs用的是glsl这款,语法跟C差不多。这个在web端暂时只有顶点着色器 片源着色器可以用，这俩是啥？模型是三角面构成的，每个点有个三维坐标。顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候，你如果想看得见这个点，必须投到屏幕的可视坐标...
2019-11-15 08:57:38
2748
6
原创 cesium修改源码加pass记录
* 创建 shader/framebuffer/texture */},/* 释放资源 */},/* 每帧执行 */},initialize负责异步准备资源，execute直接拿到当前场景颜色纹理进行绘制。实现 Pass 类：提供initializeexecutedestroy三个方法。在View.js中创建实例：跟随场景生命周期初始化和销毁（也可以直接放Scene.js，但推荐View.js在中插入执行点：选择合适时机，通常是在后处理之前。注意 state、HDR 和 depth。
2026-09-01 10:44:28
319
原创 AI帮我补知识牛顿迭代之体会牛顿老师的天才之处
之前对于牛顿迭代的根本原因没有去细想过 最近想了一下 然后让AI润色输出了一个好看的文档 牛老师还是太超前了 从原始函数无法求解联想到他的切线可以求解 然后直接求其实也没法做 思路又转换到发现可以随便给一个初始值迭代求出最终值 无法想象牛老师的脑子装的啥系统 如下就是AI润色后的文档 enjoy :）
2026-07-16 10:55:50
46
原创 AI帮我补知识之光栅化渲染的GPU性能优化指导和原理
✅ 性能影响因素准确表述: "对于内存密集型程序，Cache 命中率是主要因素之一；但对于计算密集型程序，Cache 命中率影响较小，反而是计算吞吐量、占用率和分支效率更重要"GPU 性能 = min(内存带宽 × Cache命中率 × Coalescing效率,计算吞吐量 × 占用率 × (1 - Divergence损失),纹理单元吞吐量,ROP 吞吐量性能由最慢的环节决定（木桶原理）CPU → GPU 数据传输:应用程序驱动 (内存管理)
2026-07-01 14:38:23
267
原创 AI帮我补知识之计算着色器传参
这样，一个 SM 上可以同时驻留多个 Block，当一个 Block 在等待数据时，SM 可以立刻切换到另一个 Block 执行计算，从而保持计算单元的高效运转。每个线程块的最大线程数限制：CUDA 规定，一个线程块（Block）的线程总数不能超过 1024。这意味着，无论你用多少共享内存，一个 32x32 (1024线程) 的图块就已经是线程数的极限了。一个 SM 需要同时驻留多个 Block，才能在有 Block 等待数据（如访存延迟）时，立刻调度其他 Block 的线程来执行计算，从而“隐藏”延迟。
2026-06-30 10:01:10
236
原创 【AI帮我忙之补知识 显存和卡顿的关系】
物理上显存是一块 但是实际和CPU的malloc类似，地址加偏移涵盖一片内存空间，GPUI硬件访问纹理 FBO 计算张量时 硬件接口要求 单个资源必须要放在。就会腾空间分配内存 这块是显存内部高速拷贝 带宽高 卡顿轻微 但总归是有开销的。1 总资源小于8G 不会触发VRAM内存的PCle低速交换 这是最严重的那种。不能两个非连续的存，当需要一大块连续空间 但是没有这么大的空闲空间。cache存不下当前需要采样的像素 只能反复去取新数据 这里的损耗是。
2026-06-25 12:31:12
200
原创 AI帮我忙之补知识
数据切块 切到单卡能渲染的粒度，然后每一帧把每一个块按全屏绘制 然后带着他的color buffer depth buffer跟其他的块绘制的结果进行mix 那如果有10个显卡机器 先五个合一批 最后两个合一批 这样操作。问：那如果硬生生渲染1T的模型 就把数据拆块 放到每一个显卡上 渲染就利用你说的高速传输对吧 第一个屏幕tile可能同时于切好的几块模型分片有交集 就要挨个传输过来用了再拉取下一个。AI：不对 虽然确实全程依赖高速传输 但不会串行阻塞。问：GPU集群是怎么搭建的。
2026-06-24 11:18:32
229
原创 AI帮我忙之webgpu实时路径追踪 下级 three.js接入OIDN
这个双设备架构虽然引入了 CPU 内存的中转，但带来了以下优势：✅完全隔离：两个库互不干扰，各自管理自己的设备状态✅灵活性高：可以轻松切换不同的降噪模型或渲染器✅易于调试：可以在中间步骤检查和验证数据✅性能可控：传输开销小于总处理时间的 10%在 WebGPU 多库集成场景中，允许每个库拥有独立的设备，通过 CPU 内存桥接数据，往往比强行共享设备更加稳定和高效。
2026-06-13 22:57:49
396
原创 pixi.js 7.x版本源码之program
最近有一个需要自己写个Mesh的需求参考了一下简单的demo问题是怎么被发现的呢，我是使用了Shader材质，Shader材质的创建使用了一个from的写法然后我回忆起他的Texture也有类似的cache,纹理的释放是有一个多少帧进行一次检测，满足条件释放的一个机制但是这个program不太一样我在后面找到一个叫做GLProgram的class他的destroy函数如下这个直接使用null，并没有调用gl.deleteProgram然后可以搜索整个代码库。
2026-04-07 14:43:07
88
原创 three实现一个体积云
大概拷打了他有半天时间，就是重写noise，重写框架，然后重写main，加上自己理解代码纠正错误可能花了一天多时间，未来可期，最值得一提的是AI默认的antitude是那种不仅不怪你菜，还有鼓励你那种，只要我知道了整体架构，逐步让他提供函数应该慢慢拷打是能得到结果的:)哦对了 这个机器上只有2FPS机器配置如下。
2025-12-30 14:39:46
457
原创 pixi.js源码解析 anchor pivot
可以仅仅接受了一个texture，意味着他在00位置创建一个sprite 宽高是texture的宽高。注释说明了是rotate的中心，那么自然就是translate过去再旋转再移动到最终位置。这里默认w1 = 0 w0 = width h1 = 0 h0 = height。所以给一个anchor其实是让sprite计算vertex的坐标进行了一个偏移。首先利用sprite来观察，从效果来看，是移动了sprite的图片。anchor是让他进行0-1的一个位移。那么先回到sprite的入参。
2025-11-19 20:45:18
272
原创 PIXI源码解析 鼠标点击判定逻辑
其中只有一处地方和我固定思维里的3D有点不同，那就是他的这些判定，其实都是判定自身局部空间的localbounds,那对于一个空node,显然他这个逻辑才能走通他这里的todo也提到了是否使用bounds 也就是我固定思维那种逻辑，即使是空node，也有worldbounds这里我们考虑一下如果使用worldbounds的时候怎么做每个node先打中worldbounds，然后打localbounds，打中local才算hit。
2025-10-28 10:03:19
450
原创 纹理压缩的一个误区记录
之前使用buffer创建纹理的时候，总是需要输入RGBA数组，这带来了一个固定思维，纹理一定是RGBARGBA这样的，再到shader里采样的时候，结果仍然是对应位置的RGBA，很自然的想到纹理会在显存那边被存储为RGBARGBA这样的内容，无法进一步优化。
2025-09-30 17:05:31
342
原创 2D字体知识补充 二
摘要 本文解释了EM在字体设计中的概念。EM可以理解为字体绘制的虚拟画布，以网格为单位（通常约定为1024或2048格）。字体设计时会定义ascender和descender值（合计约等于网格数），实际字体大小由这些值与font-size共同决定。例如：1000格画布配500/-500的ascender/descender，当font-size为100px时，每个网格占0.1px，实际绘制高度为100px。虽然理论上ascender/descender总和可能远超网格数，但实际设计会遵循行业惯例，使这些值在
2025-08-11 14:26:15
298
原创 2D字体知识补充 一
这里说em是很多个grid构成，但他没说究竟一个Grid实际多大啊，怎么映射到pixel的，比如上面的pt是有具体物理映射的。按我理解pt就是一个板子上一个图钉thumbtack 图钉的大脑袋的面积是1/72。文中的例子是12pt的字体在300 * 300的dpi的resolution下。pt就是真的point，是物理单位，值是1/72 inch。他的pixel = 12/72 * 300 = 50。PPI对应的是pixel per inch。pixel的值等于pt*dpi。
2025-07-30 17:42:07
339
原创 RenderDoc抓webgl 1
就只能直接抓浏览器了，拿PIX抓是成功了，但是DXIL转HLSL有点麻烦，干脆看下RenderDoc吧。有一个特别的情况，遇到一个高手，不知道为甚他的界面spector找不到那个canvas。这里就要刚刚记住的ID，搜到之后，右下角点击inject就算进去了。勾选Enable process injection。打开他，点击Tool->Setting。这时候浏览器会被拦住，记住那个ID。然后打开renderdoc。接下来的操作就是抓来看了。首先要下老一点的版本。然后写一个bat脚本。
2025-06-20 16:41:33
433
原创 OSG编译wasm尝试
然后你cd到那个webbuild里，再然后你去web里把cmakelist.txt里限制一下cpp只能是11，然后就可以按教程开始了，不出意外的话就能成功了！于是顺着看了看，默认教程是xubuntu的一个系统跑的，但是我本着试一试的想法，拉下来直接在windows上跑，奇奇怪怪的报错简直头皮发麻。于是我就在windows用vs code开发完了 打开WSL执行一下make -j10即可，真舒服啊。然后新建一个文件夹all cd进去创建一个webbuild文件夹，然后拉web和OSG源码。
2025-05-30 17:17:03
588
原创 PIXI的一个trick
好了，这里来一个trick解决一下，直接几何创建的时候R放大100倍，mesh的scale = 0.01，最后套娃一个parent，然后再绘制出来，就是圆润的了，但是这存在的问题就是面数可能非常非常大，具体问题再具体分析，比如这个圆他可以SDF直接KO，如果是任意vector的话，就另寻他法了。RX RY就是radius，那么如果你的圆R=1和R=1000，肯定段数是完全不一样的。R=1的圆肯定会这个鬼样子。
2025-05-06 10:10:39
354
原创 【大坐标处理】
这种做法每个坐标都需要存储两倍大小的坐标信息high low两个vector3，但是似乎如果要支持double的话，没有其他好法子。
2025-03-21 17:42:38
670
原创 unity大坐标抖动处理测试
那么这里可以知道的是坐标太大了导致的，那么把所有物体共同偏移一下，即可得到第一幅图的效果，圆润的sphere又回来了。如果要做到最合理的offset，我觉得用camera的position的int部分最合理。第二幅图就是相机坐标是0 6360094 0的地方看见的模型，可以看见这个球体已经烂了。浮点数的计算是需要位数的，这种大坐标占的整数位数有点多了其实，所以我的验证代码是。
2025-03-02 11:13:24
510
原创 U3D支持webgpu阅读
为什么这么说，因为客户端方向unity肯定会做一个类似nanite的builtin的东西，好像已经有了，叫resident啥的，然后只要webgpu用户旺盛，早晚他会做成webgpu的支持，什么意思，也就是等等党就有福了，我反正觉得是这样，之前参与开发类似nanite的东西，太费神了。另外是VFX，如果要做点炫酷的效果，说老实话，web3D如果不做炫酷的效果真的约等于是没什么能做的事了。剩下这个没支持的说不定后来也有，因为他webgpu本身是支持的。这里看到已经该有的差不多都有了。
2025-02-09 20:48:44
548
原创 UE5材质篇5 简易水面
波纹感就是normal map混合，这个就是细节，也就是离近了的时候的normal map用法，一个base的，一个加一点scale的，各自设置speed。不得不说，UE5里搞一个水面实在是相比要自己写各种反射来说太友好了，就主要是开启一堆开关，lumen相关的，然后稍微连一些蓝图就几乎有了。参考 https://www.youtube.com/watch?这里要改一个shading model，要这个。那么接下来一个是反射，一个是折射，一个是波纹感。
2024-11-23 21:27:38
1120
原创 UE5材质篇 4 材质表面雨滴打落
教程里本质上其实是先实验确定了湿滑表面的roughness和specular的值metallic这些，然后根据time来给表面的某些点这几个属性进行变换，主要是roughness和normal的变化。具体的变化是依赖了一张noise，这图在作者油管有放出这是RGBA四个通道都有用途，RG是normal的XY，Z直接给1。其中小雨点是static的，就不参与time的效果，time的部分，用大点的块作为动态的雨滴。materials 101的教程的灵感，特此记录一下。核心是法线乘一个系数得到动态效果。
2024-11-15 20:33:46
715
原创 UE5材质篇 3 MaterialFunction
这个可以避免一部分的蜘蛛网，这样就用的时候很多蜘蛛网缩小成为一个节点。首先创建一个，这里这个名字他就是函数名，后面用的时候搜就搜这个。然后暴露出去的函数的字段在蓝图的位置，由这个决定。双击进去，input和output就右键搜就行。然后选中状态就可以修改type。勾上这里就能暴露出去。
2024-11-12 21:18:36
1119
VulkanSDK.zip
2020-08-09
boost 无法使用的问题
2016-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人