posts

文章归档

PlumePHP 全站文章的归档入口,按时间倒序汇总各专题的技术文章,并提供按主题浏览的专题分类入口。

这里是全站文章的归档入口,下面是按时间倒序排列的全部文章。若想按主题浏览,请从首页的专题分类进入。

全部文章

全部文章 game golang 客户端开发 Minigame Saas rust Python Java cg Typescript
engine

《游戏引擎实现原理》17.1 渲染线程模型与命令缓冲

主线程一边跑游戏逻辑一边录渲染命令,逻辑一卡帧就掉。本节把录制与提交拆到渲染线程上:主线程只往命令缓冲里塞命令,渲染线程按帧取走执行,用一个双缓冲的生产消费环把「还没消费完就覆写」变成一条确定性异常,并跑出背压的真实时间线,看清三缓冲比双缓冲多出的那一份缓冲垫换来了什么。

8 分钟阅读
游戏引擎 渲染引擎 TypeScript
engine

《游戏引擎实现原理》16.3 UI 与 3D 的合成顺序

精灵和矢量图形都能画了,但它们和 3D 世界还没有规矩:谁先画、谁压在谁上面、半透明怎么混。本节把一帧的绘制定成三段——3D 不透明近到远、3D 透明远到近、UI 永远在最上——再在同一个 render pass 里先画 3D 绿底、再用 alpha 混合叠上左半屏的红色 UI,回读出 0.5 红加 0.5 绿的真实像素。

7 分钟阅读
游戏引擎 渲染引擎 TypeScript
engine

《游戏引擎实现原理》16.2 SDF 文本与矢量 UI

文字和矢量图形由曲线定义,位图放大会糊、图集也装不下任意字号。本节用有向距离场(SDF)把形状变成一段距离函数:距离直接转成抗锯齿覆盖率,一个全屏三角形就能画出边缘半透明的圆角矩形,任意放大都不糊。CPU 参考与 WGSL 逐字对齐,跑出中心全白、角外全黑、边界 128 的真实像素。

7 分钟阅读
游戏引擎 渲染引擎 TypeScript
engine

《游戏引擎实现原理》16.1 精灵批次与图集

2D 与 UI 渲染的第一个问题是「一张界面里成百上千个精灵怎么画」。本节先把小图打进一张 2 次幂图集(货架装箱),再用一条精灵批次键把同层同深度的同页精灵并成一次绘制:10 万个精灵在单页图集下只剩 16 次绘制,最后在真实 WebGPU 设备上跑出一次 draw(6,2) 从图集采出红蓝两个精灵。

8 分钟阅读
游戏引擎 渲染引擎 TypeScript
engine

《游戏引擎实现原理》15.3 后处理链的性能预算

后处理链的代价可以提前算出来:每个全屏 pass 都要把纹理读一遍、写一遍,这就是带宽。本节在 helio 里实现一份带宽账本,把 pass 的读写字节按格式与分辨率算清楚,再在真实 WebGPU 设备上实测 1/5/13 抽样三个全屏 pass 的每帧耗时,看成本到底由「固定开销」还是「像素数」主导。

7 分钟阅读
游戏引擎 渲染引擎 性能预算