https://git.ccgxk.com/myWorkSpace/webgl_show/cyber_city/cbcity.html 在三维开放世界里记笔记，你听说过吗？我们记笔记有一维的记事本、typora等文本编辑器，Word 也算。我们只能像说话、如绳结记事一样记录。后来有了思维导图，让我们能在二维平面内记录笔记，给我们一个平面，我们能使用更加丰富的联系结构将笔记容纳其中，平铺....

我之前的一篇文章，有分享过一个 2D 的物理引擎，那个是个挺复杂的物理公式，今天这个是三维的，出乎我的意料，用到的物理公式反而更简单！原因是，我看到了今年 js13kgame ，心里痒痒，也想参加一下，写个简易的三维游戏。但游戏画面好写，主要是物理引擎很犯难，于是我就在研究 demo（因为在 13 kb 代码里塞下一个 javascript 物理......

工具地址：https://git.ccgxk.com/vtool/vtool.html ，今天要通过一个精心制作的网页工具，手把手教大家手搓一个 六棱柱。让大家（尤其是图形学初学者）一文搞懂抽象的顶点、UV、索引。我们可能经常见过这些数据，也经常用，但我们很有可能搞了半年三维了，却不一定真的知道它们怎么写，它们的具体概念。毕竟成熟的软件导出模型，直接会帮我们做好这些底层工作，我们完全无需了解......

明朝 朱载堉（朱伯勤）终日奔波只为饥，方才一饱便思衣。衣食两般皆俱足，又思娇娥美貌妻。娶得美妻生下子，恨无田地少根基。买到田园多广阔，出入无船少马骑。槽头扣了骡和马，叹无官职被人欺。县丞主簿还嫌小，又要朝中挂紫衣。做了皇帝求仙术，更想跨鹤登天梯。若要世人心里足，除是南柯一梦兮。

1. 最高领导

把 cannon.js 想象成工厂，里面的 World 是其最高领导者。我们的代码工作原理分析，从这里着手开始。

它，管理着重力、物体列表、秩序员、鉴定员、矛盾调解员（处理冲突）、物体类型、规则手册。

分别是：this.gravity 、 this.bodies 、 this.broadphase 、 this.narrowphase 、 this.solver 、 this.materials 、 this.contactmaterials 。

World 先生，使用 World.prototype.step() 方法，每隔一段时间，比如 1/60 秒（dt），就会让工厂重新运转计算一番。

一切，从 World.prototype.step() 开始。

2. 物体

物体，就是 body 了。 它有很多属性：

• 体重 this.mass

• 位置 this.postition

• 速度 this.velocity

• 旋转 this.quaternion

• 旋转速度 this.angularVelocity

• 推力 this.force 和 this.torque

• 形状 this.shapes

• 类型（动态、静态、移动平台） this.type （Body.DYNAMIC 、 Body.STATIC 、 Body.KINEMATIC）

  这个 body 呀，有一些日常动作：

• 添加外形 Body.prototype.addShape()

• 推力 Body.prototype.applyForce()

• 行动 Body.prototype.integrate()

  第三个【行动】 ，是指在单位时间（dt）内，根据它自己的所受的到力等，精确计算自己该有的状态。其中包含了阻尼、姿态修正，以模拟摩擦力和空气阻力等，以及长时间运动造成的误差。

3. 形状

目前有四种形状（this.type）：

• 弹力球 Shape.types.SPHERE
• 方块 Shape.types.BOX
• 平面 Shape.types.PLANE
• 凸多面体 Shape.types.CONVEXPOLYHEDRON

每个 body 都有一个最小外接球。this.boundingSphereRadius 。

还有一个碰撞回调： this.collisionResponse ，它来决定这个 body 碰撞后，是否会产生反作用力。

不同的 type ，都有各自的计算方法，因为它们的集合特征不同。

4. 筛选物体

在每个时间周期里，都会进行物体碰撞筛选。具体分为两类：Broadphase 和 Narrowphase 。这两者是在筛选那些所有有可能发生碰撞的物体，它们不会考虑每个物体的形状等，只看大概的轮廓。

Broadphase 名为【宽相】，其实就是粗筛，它有两种筛选，NaiveBroadphase 和 SAPBroadphase ，前者实现很简单，但资源耗费大，是每个物体一个不落进行两两计算。后者会假设所有物体都处于同一个轴上，比如 X 轴，然后只检查相挨着的物体。这样效率大大提高。

Narrowphase 学名【窄相】，它会细致来判断两者究竟有没有碰撞，以及撞在哪里、多深、有没有摩擦力等。

【窄相】的工作流程是这样的，主要位于 Narrowphase.prototype.getContacts() 这个方法。

第一步，从【宽相】那边接过名单，然后开始分析每一对。

第二步，使用外接球来进行「初过滤」，如果外接球都碰不到，那肯定没有碰到了 ~

第三部，根据不同形状的物理规则（this.currentContactMaterial 以及该方法内部的 Material），决定碰撞时的弹力、摩擦力等。

第四步，这个【窄相】并不会具体计算各自的碰撞检测，它是一个分配员，它会根据不同的形状的碰撞模式，将任务分配给专业的工具人来处理。比如：

1. 如果是球和球，调用 Narrowphase.prototype.sphereSphere() ，计算是否重叠和碰撞，并得出撞击法线（方向），以及接触点。

2. 球和方块儿，则 Narrowphase.prototype.sphereBox() ，比上面那个复杂，阴为要考虑面、棱、角。

3. 平面和其他凸形状的碰撞，Narrowphase.prototype.planeConvex()。

4. 任意凸形状的碰撞，Narrowphase.prototype.convexConvex() ，它最强大了，可以处理所有凸形状的碰撞。使用了 “分离轴定理” 。

第五步，当确认确实发生了一起碰撞，那么【窄相】还会写一份「纠纷报告」：

1. ContactEquation 负责碰撞报告（双方名称、双方形状、撞击点、撞击法线）。这份报告会辅助后续处理冲突（比如模型穿透了）时，物理世界需要施加多大的力才能将物体推开。

2. 而 FrictionEquation 是记录摩擦的。如果发生了摩擦，则会记录摩擦力的作用方向，以便后续处理冲突，计算多大的力能阻止滑动。

第六步，资源回收。针对上面的「纠纷报告」，它其实不是每次写报告都新开一个，而是在相应的资源池 this.contactPointPool 和 this.frictionEquationPool 里拿取空报告，用完再放回去。这样将大大提高效率！

5. 处理冲突纠纷

上面的两份报告，是交由我们的领导 World 的，之后它再交给处理纠纷的 Solver。之后就是处理纠纷了！

Solver 学名求解器，它的方法 this.equations 里是各种待处理的纠纷。然后使用GSSolver.prototype.solve()（高斯-赛德尔迭代法） 来迭代处理。不是一次性处理，是迭代处理：

第一步，计算和评估每个报告的解决难度：c.computeB() （愤怒值）和 c.computeC() （抵抗力度）。

第二步，审视每个报告，再计算混乱程度 c.computeGWlambda()。

第三部，计算需要多大的力量 deltalambda，以解决这个纠纷。

第四步，保证这个力量在允许范围内（c.minForce 和 c.maxForce），防止出现 bug 。

第五步，每次计算出了那个力量，就立即通知相应的 body ，调整自己的临时速度（bi.vlambda 和 bi.wlambda）

第六步，记录下所有纠纷的 总力量变化 deltalambdaTot

第七步，分析这个【总力量变化】，如果很小，则判定当前已完成纠纷判断，从而结束纠纷处理，否则重复上述过程，继续迭代。

第八步，当纠纷处理结束，Solver 会将累计的临时速度变现，加到各自 body 的真实速度上。添加结束后，Solver 初始化，等待下一次的处理。

6. 报告的模板 Equation

Equation 学名为 方程，它就是报告的模板。每次事件后都会生成一份报告，带有一些特殊格式的信息。

上面有写过，这个报告分两种 ContactEquation （碰撞报告）和 FrictionEquation （摩擦报告），

在 solver 里，有提到过一个愤怒值 c.computeB()，它是使用每个报告都包含的核心计算公式 Equation.prototype.computeB() 计算出来的。它可以计算出其冲突发「不平衡程度」和「问题严重程度」。

7. 材质 和 两材质接触处理表

材质，即 Material ， 是每个 body 都具有是属性，类似于我是木头还是橡胶。

它有 this.friction（摩擦系数） 和 this.restitution （恢复系数，又称弹性），摩擦系数 越小越光滑，而弹性，1 表示完全反弹，0 表示不反弹。

在 ContactMaterial 里定义了两种材质的互动处理方式，这里称为 两材质接触处理表 。在 World 那里，有 World.prototype.getContactMaterial() 供后续的计算查询。如果没有找到某些规则，则使用默认的规则。

8. 时间

在 cannon.js 里，dt 就是一个单位时间周期。每个时间周期，完成一个上面列出的那些计算。

World.prototype.step() 这个是计时器，每个周期开始，World 都会记录当前的时间 this.time 和 步长 this.dt 。

Body.prototype.integrate() 用于更新每个 body 的位置和旋转。它发生在 solver 在求出解后。

World.prototype.clearForces() 可以看做清零器，每个周期的末尾，都会将临时的计算值，比如临时推力 this.force 、临时扭力 this.torque 清零。确保每次计算独立，不发生 bug。

9. 其他必要组件

cannon.js 的运行原理大致就是上面第 4 小节和第 5 小节所诉，为了支持这个过程，还有很多组件作支撑：

Vec3 ：三维向量计算。把数学里的向量工具代码化，能实现加 vadd、叉乘 cross、归一化 normalize （把方向标长度统一为 1）等数学运算。

Quaternion ： 学名为【四元数】，表示旋转。不像 60° 90° 或 π 、 π/2 这种欧拉角复杂，更稳定。（据说可以避免“万向节死锁”）

Transform ： 可以将局部坐标 转化为 世界坐标。

Mat3 ： 一个矩阵计算库，3 × 3 格式的。

EventTarget ： 信息事件广播工具。可以将谁睡眠了啊 谁碰撞了啊什么重要消息，广播给全局。

Pool（资源回收站）和 Vec3Pool ： 资源池，将一些频繁被创建的向量、报告等统一化，重复利用化。提高代码的运行效率。

TupleDictionary、ArrayCollisionMatrix、OverlapKeeper ： 各种状态记录工具，记录上一秒、这一秒的碰撞信息，辅助调解员更精准的处理纠纷，避免重复工作。

在 6.3 号这一天下午，是我第三次去考科目三。那天路上基本没有什么车，温度很高太阳很明晃，让路线看起来很清晰。我在候考室里忐忑不安，之后被考官叫下楼，搭乘考试车到达了地点。是最复杂的二号线。之后就是考试，那些练习了无数遍的动作，如肌肉记忆一样接连使出来，搭配我那对「考试结束，您的...

这几天，一直换着 新加坡 的 IP 访问谷歌的 Gemini 模型。我只是换着玩的，是 vscode 插件上有个 AI 插件，能换着模型问。偶然发现 Gemini 每次都很仔细，但一天只能用两次，感觉不过瘾，然后就上谷歌的 AI Studio 体验预览版了。本来我没当会儿事儿，百花齐放百家争鸣嘛，但很快，我就开始后背发凉....

在前端开发里，canvas 是 HTML5 里最炫酷的工具。我们今天就来搞一个这样的梦幻的效果，学习一下 ES6 的类在开发一个完整项目的思路（即 ES5 的构造函数），还有物理碰撞的程序的实现，当然，效果也很酷炫！

前两天我搞的那个在线 HTML 新标签页预览功能，很好用，最近在我业余“娱乐”上帮了很大的忙，它可以让我不用打开本地代码编辑器就能快速调试一些前端代码，我也逐步完善它的了很多功能。可是，很快它就有了一个问题： 使用 < textarea > 写代码很不舒服。当然，使用它来接受粘贴过后的代码还好，如果...

我一个搞后端开发的朋友，也就是 emlog 的作者 那多记忆，喜欢捣鼓一些有意思的东西，他像个达芬奇一样研究前端技术、研究 VUE、研究 GO，AI 爆炸后也捣鼓了很多很多 AI 工具。去年他在群里说他申请了苹果的开发者，并且一直在研究开发苹果平台的应用，然后在今年四月份在群告知...

今天下午，考科目三。满怀期待等待了将近一个月，终于迎来了这次考试。在今天之前，我 4.25 号挂了 C1 科三，科二四月考了两次才考过。想到之前挂科的后的精神状态，我不由心里胆战心惊。今天阳光明媚，晒得我腿疼，在候考区焦急等待，终于作为第一波人进入了考区。我是我那辆车第三个考....

我们知道，在网页上搞三维，three.js 和 babylon.js 都是成熟最佳的选择，可是有时候它们体积又显得太大了。 我以前有研究过各种网页三维引擎，体积都挺大。我为什么要找体积小的呢？因为我对计算机图形学懂得不多，体积小让我有对它运行方式的探索欲。 我曾经找过一个最小的 https://github.com/wakufactory/wwg ，这个只...

目前，网上很多在线运行 HTML 的页面，大都是这样的逻辑： 上面一个代码框 textera ，下面一个 iframe，然后通过 js，将我们的代码框中的 HTML 给输入到 iframe 里面，这便是一个简单的在线运行 html 的逻辑。 甚至我们可以在一行里写一个在线运行 html 的页面。比如下面这个，一个高度精简的简...

惊恐的发现 这几天没有怎么上网站，昨天下午打开电脑打开我的网站时，突然感觉有点不对劲。 我在浏览器地址栏输入 ccg ,浏览器一如既往地给我补全 ccgxk.com，然后我回车，网页在转动中，突然跳到了一个非法赌博网站，我以为我眼花了，然后重新打开我的网站，发现这次没有跳转。我反复试了几次，感觉应该是浏览器其他页...

在这个AI 纵横的年代，既是强烈的东北西北风乱吹的风口时代，又是一个让很多人迷茫无语的时代？AI 能做的事太多了，让很多人穷尽一生的引以为傲的很多本领，刹那间开始变得透明，开始变得没有意义。 deepseek 前几天又更新的 deepseek V1（就那个没有深度思考的版本），我用它做了几......

十几天前，我在上厕所的时候，接到一个我安阳本地的电话，一个陌生的电话。然后，我小心翼翼的点了接通。是一个陌生的 11 位数电话。平常几乎已经少见的电话通讯了，谁会找我呢？然后，接通电话，说了声喂后，对方不紧不慢的跟我说：“是这样的，这.....

想念大学的图书馆 昨晚入睡时，脑海逐渐迷糊，又想起了几年前在大学的图书馆的日子了。哈哈，毕业有近两年了。这两年，我的世界观变了好多好多，在以前我只是一个简单的图书馆迷，现在变成大烩菜了。 我是一个图书馆迷。大一那年第一次踏入我们...

博客是有友链这种东西的，我有时候会点击我页面下的我的友链，去对面看一下。有时候也会点击对面的友联页面，看一下在别人的网站上，那属于我的头像我的介绍..... 自我陶醉这种奇妙的感觉。可是，有时候难受的事情就发生了，有些人，莫名其妙会将我的友联删除！不知道怎么说，这种感觉并不好...

昨天，我在电脑里发现了以前学习 WebGL 的代码和笔记，然后我就整理了一下，做成了一个教程。做完后，发现字数还不少。如果对浏览器显示三维的玩意儿感兴趣，可以读一下，能当教程，也能当简易的文档查阅。WebGL 是浏览器的三维引擎，但它很原始和底层，就像你买了个计算器，发现这个计算器只有一个加号键一样..... 什么都需要自己去手写...

前几天我将我的日记，又整理到了我的个人独立博客网站上，实话实话，我自己是感到挺震撼的。不知不觉已经练习两年半的日记了。一天没有落下。2022 年九月某天的一个微小想法，只是为了演示一下 emlog 默认主题的 toc 目录显示功能，然后写下了第一篇日记，之后三两天渐渐...

答案的来源 我之前有写过一篇文章，https://www.ccgxk.com/essay/345.html 【对抗「自制力差」「孤独」「轻度疲劳」的立竿见影法宝 --> 做 产出型活动（能帮助别人的事）】，本以为既然能 GET 到那样一个道理，我肯定会做出点什么，但渐渐的，我发现，力不从心.....

古典音乐作曲法的魅力 几天前，我在某个网页的某个链接的点击下，进入一个 B站 视频： 我有感而发：其实这是一个很奇妙音乐，如果初次聆听，大部分人绝对会烦躁的很，觉得这就像一个华中农村的高油高盐高味精之超级大锅菜一样，或者锅碗瓢盆让小孩子叮叮当当乱做一响，能听一分钟不关视频就不错了，别提好不好听，能不能听懂了。 其实，这个“烦躁”、“关闭视频”，就是一个...

独立开发者，就是会敲代码，但想靠代码直接挣钱。 新手避免拍脑子想创意，而是去找现成的需求，然后抄作业。为什么？你想一下你小学初中甚至高中时代，各种对未来的奇思妙想，多么无知与幼稚。现实世界里，创意 95% 都毫无价值和可行性，学生时代抄作业是因为非法，而不是没用，实际上学生时代也是一直在「抄」知识。 不同的方向，各个路径都不一样，目前启动投入最小的（我眼界里...