2026年5月6日
useMemo 到底优化什么？
摘要： 一、useMemo 到底优化什么？ const result = useMemo(() => { return compute(a, b); }, [a, b]); 👉 它做了两件事： ✔ 1. 缓存计算结果 避免每次 render 都执行 compute ✔ 2. 返回“稳定引用” 如果结果是对 阅读全文
posted @ 2026-05-06 16:22 SimoonJia 阅读(0) 评论(0) 推荐(0)
three求交算法对比BVH、AABB、raycaster
摘要： slab:把 3D 相交问题拆成 3 个一维区间问题，然后求区间交集 1.快速剔除（最重要） 2.提供进入/离开信息(还能推导：1.命中哪个面,2.交点位置) 3.作为加速结构基础 BVH（层级包围盒） KD-Tree 八叉树（Octree） Raycaster 优化 流程： P(t) = orig 阅读全文
posted @ 2026-05-06 13:36 SimoonJia 阅读(1) 评论(0) 推荐(0)
AABB求交 slab算法
摘要： 核心思路，轻量化场景时替换射线： function intersectUnitCube(ray) { const min = -0.5; const max = 0.5; let tMin = -Infinity; let tMax = Infinity; let entryAxis = -1; l 阅读全文
posted @ 2026-05-06 13:11 SimoonJia 阅读(0) 评论(0) 推荐(0)
2026年4月28日
GPGPU
摘要： General Purpose GPU：把计算搬GPU GPGPU是利用GPU并行能力做通用计算，常通过纹理存储状态并用shader迭代计算，适用于粒子、流体和大规模并行模拟。 GPGPU = General Purpose GPU 用GPU做通用计算，而不仅仅画图。 本质 原来 GPU 只干： 渲 阅读全文
posted @ 2026-04-28 18:31 SimoonJia 阅读(16) 评论(0) 推荐(0)
2026年4月27日
depthWrite depthTest renderOrder
摘要： 这三个是透明物体、遮挡关系、渲染顺序的高频面试题，而且很容易混。 一句话先区分 depthTest 决定要不要做深度比较 depthWrite 决定要不要写入深度缓冲 renderOrder 决定谁先画 它们解决的是三个不同问题。 1. depthTest（深度测试） 是否做遮挡判断。 在 Thre 阅读全文
posted @ 2026-04-27 15:11 SimoonJia 阅读(7) 评论(0) 推荐(0)
Draw Call 优化
摘要： draw call 多会卡，本质是 CPU 向 GPU 提交命令的开销太高，不只是“画得多”，而是“调度成本高”。 Draw Call 优化核心目标：减少提交次数、减少状态切换、避免无效提交。 1. 什么是 Draw Call 一次 draw call，通常就是一次： gl.drawElements 阅读全文
posted @ 2026-04-27 14:11 SimoonJia 阅读(16) 评论(0) 推荐(0)
2026年4月21日
will-change: transform;
摘要： will-change 有什么用？ 你可以这样答： will-change 用来告诉浏览器某个属性即将发生变化，浏览器会提前进行优化（如创建合成层、启用 GPU 加速），从而减少动画卡顿，提高性能。但不能滥用，否则会增加内存消耗。 will-change: transform; 的核心作用只有一句话 阅读全文
posted @ 2026-04-21 11:57 SimoonJia 阅读(8) 评论(0) 推荐(0)
2026年4月16日
instanceMesh实例模拟普通模型颜色算法（拆分贴图颜色与材质颜色）
摘要： three@126 InstanceMesh实例模拟普通模型颜色算法 如果instanceColor为默认值则计算结果为贴图颜色*inscaneColor*材质color如果不为默认值则混合结果为贴图颜色*inscaneColor 如果没有贴图的情况下，如果instanceColor不为默认值则取i 阅读全文
posted @ 2026-04-16 15:29 SimoonJia 阅读(6) 评论(0) 推荐(0)
2026年4月8日
为什么 延迟渲染>前向渲染
摘要： 一、假设一个真实场景 假设你有： 100 个物体（房间里很多模型） 20 个光源（灯、屏幕、角色光等） 屏幕分辨率：1920 × 1080 也就是： 屏幕像素 = 1920 × 1080 ≈ 200万像素 二、前向渲染计算量 前向渲染逻辑： 每个物体 × 每个光源 计算量： 100 个物体 × 20 阅读全文
posted @ 2026-04-08 19:31 SimoonJia 阅读(6) 评论(0) 推荐(0)
2026年4月7日
Deferred Rendering延迟渲染
摘要： 一、先说结论：Three.js 实现 Deferred 需要 3 步 在 Three.js 中实现 Deferred Rendering： ① 创建 GBuffer（MRT）② Geometry Pass（写入 GBuffer）③ Lighting Pass（计算光照） 我们一步一步来 👇 二、S 阅读全文
posted @ 2026-04-07 17:02 SimoonJia 阅读(14) 评论(0) 推荐(0)
下一页