2021年小结

白玉无冰

共 2982字,需浏览 6分钟

 ·

2022-01-10 03:09

整理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 实现解析!

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

Regenerate Points

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

实现效果

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

➡️【原文链接】

3D数学基础

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

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

后语

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

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

往年总结


“点赞“ ”在看” 鼓励一下

浏览 43
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报