2021年小结

Posted by lamyoung on January 3, 2022

整理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 rotateAround<Out extends 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 rotateAroundLocal<Out extends 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!

https://www.bilibili.com/video/BV1cf4y1H7Pa

为何要重新写一个轮子呢?

  • Glyph Designer(Mac)BMFont (Windows) 功能完善,但是有平台限制。个人不习惯其操作
  • Cocos Store 中也有许多优秀的 BMFont 插件,但是依赖 Cocos Creator,可能会有对应版本限制。

➡️【原文链接】

关于泰勒公式展开

刚好看书看到泰勒公式展开,白玉无冰重新推导了一遍。

泰勒近似定理: 若$f(x)$在 $x=a$ 光滑,则在所有次数为$N$或更低的多项式中,当 $x$ 在 $a$ 附近时,最近似于 $f(x)$ 的是 $P_N(x)=\displaystyle\sum_{n=0}^N \frac{f^{(n)}(a)}{n!}(x-a)^n$

泰勒定理: 关于$x=a$的N阶余项 $R_N(x)=\frac{f^{(N+1)}(c)}{(N+1)!}(x-a)^{N+1}$,其中c是介于x与a的一个数。于是可以写成$f(x)=P_N(x)+R_N(x)=\displaystyle\sum_{n=0}^N \frac{f^{(n)}(a)}{n!}(x-a)^n+\frac{f^{(N+1)}(c)}{(N+1)!}(x-a)^{N+1}$

主要是大学数学没学好,又重新捡起来看看。

➡️【原文链接】

编辑器 Regenerate Points 实现解析!

论坛里遇到挺多人问到这个按钮用代码是怎么实现的,把研究成果分享给大家。

Regenerate Points

这个问题其实想了挺久,时间跨度也挺大。无意中在 Cocos2d-x 中看到了一个类似逻辑,才想到其中的逻辑。

实现效果

也少不了神秘代码,帮助白玉无冰更好地去理解其中的原理。

➡️【原文链接】

3D数学基础

这是白玉无冰开的新坑。重读《3D数学基础:图形与游戏开发》(第一版),并结合Cocos Creator 引擎及其他相关书籍,整理记录一些笔记。

2021年度已更新两篇,2022年再接再厉!

后语

不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之。

感谢大家一如既往的支持!

往年总结

更多精彩欢迎关注微信公众号


原文链接
原创文章导航