你能问出这个问题，原因很简单，因为我们当中，很多同学 都没有经历过系统学习命令行操作的常用指令，我们不能流畅的使用命令行，天天就那几个 cd cp rm..... 你感觉不流畅。而 cli 之所以没被淘汰，是因为 CLI 界面耗费的系统资源相当的少，很廉价省电。 就像，用惯了 vim 的人，他们会觉得使用命令行如此流畅，为什么还有.....

近期，我在知乎上写的东西比较勤。 我的知乎账号： 独元殇 https://www.zhihu.com/people/du-yuan-shang 原因很简单，上瘾 ⊙﹏⊙||| 知乎其实我从很久很久以前就玩，因为过去小时候，我的手机上，一贯都话费流量很差，所以在外头的时候，不习惯刷抖音，知乎很省流量。 不过，知乎是一个.....

上大学的时候，我一个教授，是数据压缩方面的专家，研究过这些东西。然后给我们在讲正课的时候，一不小心就偏离主线（他也经常一不小心讲政治、讲旧社会的事），为我们讲过这方面的东西，当然，大学一节课俩小时，也讲不了太多，不过课下，我还真有段时间对这问....

这张图很有意思，告诉我们，当年牛马也认为以后开拖拉机的仍然是牛马，而不是人。哈哈哈。 事实也如此 ai 图寓言故事说的，美国马匹数量的巅峰出现在1915年，当时共...

对于这个问题，Linux 的发起者，Linus Torvalds 是专业的。如果你从业时间久一点，肯定或多或少听说过他的 代码3大原则 。这个可以说是家喻户晓，如果没听说过，可以简单看一下。 他有个名言呐！代码是写给人看的，只是顺便给机器运行。(*≧∪≦) 笑死我....

很简单，因为 wordpress 是一个运行在 PHP 环境的软件。 题主肯定是初学者，这个问题也是一个 2022 年的老问题了。现在的题主肯定早明白这里面的道理了，那么我就把我知道的给新的 游客朋友 简单说一下，说一下前 500 年和今天。 网站，是运行在服务器上的一个支持 HTTP 协议的软件。你得.....

首先，独立站，是为数不多能算得上你真正拥有的东西。 独立站，本质是一个网址，比如 http://www.google.com ，我们在浏览器输入它，就能打开一个新世界。 只需 5 分钟，你就能注册一个新域名，此时此刻，它就是完全完全属于你的东西，这个很关键！ 比身份证号、亲子鉴定、品牌、版权、专利、指纹识别、人脸识别、自媒体官号认证等等都好....

最近 5 个月，我的浏览器收藏夹里新收藏的网站，有接近 1/3 都是从 AI 的对话里找的。我发现 chatgpt 总是能找到一些很冷门但相当准确的网站，虽然 chatgpt 网络搜索背靠的是 bing 必应搜索引擎，但我直接使用 bing 还真不好能找到相同的结果......

有时候，人很容易失去激情。我的个人博客，一下子就是好久被荒废了。唉，真的，人的注意力就是一个漆黑夜空下的电灯，手电筒吧，只能看到能看到的东西，而看不到的就很容易忽略。play demo： https://ow.ccgxk.com/demo/house?logicadd=1 ...

杨振宁今天静静的离开了，提醒着我们，时光的车轮，在我心中，很独特的存在。在我心中，他的逝世是一个时代的结束，他是如今几乎难以寻觅的犹如张学良一样，生活在 19xx 年初期的人，他的传奇在一个很遥远的时代演绎，但是他一直以来却又和我们现在生活在一个时空，好像一个从遥远的地方到来的旅行者......

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 科三，科二四月考了两次才考过。想到之前挂科的后的精神状态，我不由心里胆战心惊。今天阳光明媚，晒得我腿疼，在候考区焦急等待，终于作为第一波人进入了考区。我是我那辆车第三个考....