2021年小结
共 2982字，需浏览 6分钟
· 2022-01-10
整理2021年发过的文章
前言
这是白玉无冰第三篇年度合集文章整理。
2020年一共发布了47篇原创内容，2021年一共发布了16篇原创内容，同比负增长65.96%。总得来说，从每1.1周一更进步到每3.3周一更。
争取在2022年有新的进步！
开始
按时间顺序梳理，随白玉无冰一起遨游2021吧！
四元数与3D旋转实例
用几个实用的例子去理解四元数。
当时发这篇文章的时候，四元数的单词拼错了，正确的应该是 Quaternion 。
有时候，白玉无冰也会忘了怎么使用四元数，经常翻这篇文章回忆。
其中，绕指定轴旋转四元数要特别注意是本地空间(局部坐标)的轴，还是世界空间下轴。
/**
* @en Sets the out quaternion to represent a radian rotation around a given rotation axis in world space
* @zh 绕世界空间下指定轴旋转四元数
* @param axis axis of rotation, normalized by default
* @param rad radius of rotation
*/
public static rotateAroundextends IQuatLike, VecLike extends IVec3Like> (out: Out, rot: Out, axis: VecLike, rad: number) {
// get inv-axis (local to rot)
Quat.invert(qt_1, rot);
Vec3.transformQuat(v3_1, axis, qt_1);
// rotate by inv-axis
Quat.fromAxisAngle(qt_1, v3_1, rad);
Quat.multiply(out, rot, qt_1);
return out;
}
/**
* @en Sets the out quaternion to represent a radian rotation around a given rotation axis in local space
* @zh 绕本地空间下指定轴旋转四元数
* @param axis axis of rotation
* @param rad radius of rotation
*/
public static rotateAroundLocalextends IQuatLike, VecLike extends IVec3Like> (out: Out, rot: Out, axis: VecLike, rad: number) {
Quat.fromAxisAngle(qt_1, axis, rad);
Quat.multiply(out, rot, qt_1);
return out;
}
基础光照模型
这是一篇记录最基础的光照模型(冯氏光照模型(Phong Lighting Model)的笔记。基础光照模型可分为三项去考虑
环境( Ambient) [常数，全局环境光]漫反射( Diffuse) [入射角与法向量]镜面高光( Specular) [入射角，观察点，指数]
2D 素材 3D 效果
这篇文章非常详细地记录了如何巧妙的运用Quad (四方形) ，用2D素材表现出3d场景效果。
标志板 Billboard
讲述了布告板的含义以及如何改造代码，在 Cocos Creator 3.0 中实现。
入侵式的日志大法
讲述了使用装饰器实现快速打印日志。
不过当时写的有点bug，详见该文的评论区～
弹性跟随相机
参考《游戏编程算法与技巧》实现一个简易的相机跟随效果。
竖直文本
一个简易的竖直字体组件(原本系统字组件Label的mini版本) ：
系统字体 空格，斜体，粗体 字体大小、行高
折纸效果
玩转向量与Assembler实现折纸效果。
转向行为(steering behaviors)
参考《游戏人工智能编程案例精粹》 实现简易的AI智能体。
水排序效果
利用数学公式模拟杯子倾斜中的水面效果。
各路大神在评论区给出了更多的思路。
3D折纸
总体思路，细分化网格，旋转网格点。
抄一个 Shader 到 Cocos Creator
保姆级别的教程，从头开始抄一个简单的shader！
MatCap && Cocos Creator Shader
在某些层面能替代PBR的次世代渲染方案。
现在已经忘记是从哪看到这个词了，当时翻了一些资料，记录了一些笔记。作为课外阅读，拓宽思维。
2D 图像展示虚拟 3D 的效果
Fake3d && Depth Map && Cocos Creator Shader
生成深度图与巧用深度图表现出3d动态的效果。
Canvas.toDataURL 一种替代方案
记录遇到的截图问题，并给出一个解决方案。
写了一个在线位图字体制作工具！BitmapFont!
简单易用，跨平台，20KB！
为何要重新写一个轮子呢？
Glyph Designer(Mac) 与 BMFont (Windows) 功能完善，但是有平台限制。个人不习惯其操作 Cocos Store中也有许多优秀的 BMFont 插件，但是依赖Cocos Creator，可能会有对应版本限制。
关于泰勒公式展开
刚好看书看到泰勒公式展开，白玉无冰重新推导了一遍。
泰勒近似定理： 若在 光滑，则在所有次数为或更低的多项式中，当 在 附近时，最近似于 的是
泰勒定理： 关于的N阶余项 ，其中c是介于x与a的一个数。于是可以写成
主要是大学数学没学好，又重新捡起来看看。
编辑器 Regenerate Points 实现解析！
论坛里遇到挺多人问到这个按钮用代码是怎么实现的，把研究成果分享给大家。
这个问题其实想了挺久，时间跨度也挺大。无意中在 Cocos2d-x 中看到了一个类似逻辑，才想到其中的逻辑。
也少不了神秘代码，帮助白玉无冰更好地去理解其中的原理。
3D数学基础
这是白玉无冰开的新坑。重读《3D数学基础：图形与游戏开发》(第一版)，并结合Cocos Creator 引擎及其他相关书籍，整理记录一些笔记。
2021年度已更新两篇，2022年再接再厉！
后语
不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之。
感谢大家一如既往的支持！
往年总结
“点赞“ ”在看” 鼓励一下
▼