lamyoung

白玉无冰 | 专注难点 | 每天进步一点点 | 游戏开发 | Cocos Creator | shader

关于泰勒公式展开

Taylor’s Formula! 最近看书,看到泰勒公式展开,对它没有太大的印象,于是写一篇文章,整理一下个人对泰勒公式的理解吧! 先思考🤔一下,泰勒公式展开做的是什么? 对于某个函数(如$f(x)=e^x$),是否可以用该函数的一个点,以及该函数的导数去表示。 先做一个假设,有这么一个点a 使得 $f(x) = c_0 + c_1 (x-a) + c_2 (x...

写一个在线位图字体制作工具!BitmapFont!

简单易用,跨平台,20KB! 效果 效果预览: 视频 https://www.bilibili.com/video/BV1cf4y1H7Pa 无论写代码还是写工具,都要明确输入与输出。 输入:零碎的字体图片(通常是数字) 处理:可动态调整参数,预览实时效果 输出:一张合图以及字体信息文件xxx.fnt 为何要重新写一个轮子呢? Glyph Desig...

Canvas.toDataURL 用不了咋办?

只好自个 encode 了。 事由是这样的,接到一个截图需求(以 base64 输出),但是在某个环境下,Canvas.toDataURL 这个接口返回的数据是错误的。 为此,写一篇文章记录一下,如何绕过 Canvas.toDataURL ,生成 base64 字符串。 以下为 Cocos官网文档中给出的截图事例代码。https://docs.cocos.com/creator...

Fake3d && Depth Map && Cocos Creator Shader

让 2D 图像展示虚拟 3D 的效果。 效果 随着鼠标移动,一张2d图片表现出3d动态的效果。 动图 视频 https://www.bilibili.com/video/BV1Xy4y1L7s6 点击 实现 原理 程序是处理输入和输出的,我们要明确各个条件和结果。 输入条件 一张图片 该图片的深度纹理(越白越近,越黑越远)...

MatCap && Cocos Creator Shader

在某些层面能替代PBR的次世代渲染方案。 效果 动图 视频 https://www.bilibili.com/video/BV1B64y147xc 保留 实现 实现原理是,用一张特制的纹理图(采样出来的纹理),加上一段shader代码(法向量映射纹理),模拟出次世代的效果(场景中无需光照)。 代码 参考 https://github.com/nidorx/m...

如何抄一个 Shader 到 Cocos Creator

保姆级手把手,从头开始写! 效果 效果预览: 视频 前言 感谢大家的观看,感谢大家的点赞留言分享支持,感谢3D折纸效果的实现(视频+文字)中老板们的赞赏支持,非常感谢。 时常有人问我怎么学习shader,其实白玉无冰学的也很浅,推荐几个曾经用过的在线学习网站。 https://thebookofshaders.com/ https://webglfund...

3D折纸效果怎么实现?

Cocos Creator 3.0 演示与实现。 效果 效果预览: 视频预览(视频号[白玉无冰]): https://www.bilibili.com/video/BV11U4y157cz 前言 开始讲解前,先扯些其他的,如果大伙想看原理讲解,可跳过这一节,直奔原理。 首先,感谢大家的观看,感谢大家的点赞支持,感谢老板们的赞赏支持,非常感谢。 写了这么多年的文章了...

水排序中的这个效果怎么实现?

Water Sort Puzzle! 效果 这次咱们来实现杯子倾斜中的水面效果。 效果预览: 视频预览: https://www.bilibili.com/video/BV12o4y1C717 实现 首先,简化模型,杯子当作长方形处理,仅考虑杯子旋转范围-90 ~ 90度。 水面渲染可采用graphics绘图组件处理(把原点移动至杯子左下角作为原点),再添加一层mas...

转向行为! steering behaviors !

寻找 seek 避开 flee 到达 arrive 追逐 purse 躲避 evade 群落 flock ! 效果 转向行为旨在通过使用简单的力来帮助自主角色以逼真的方式运动,这些简单的力结合起来可以围绕角色的环境产生逼真的,即兴的导航。它们不是基于涉及路径规划或全局计算的复杂策略,而是使用本地信息,例如邻居的部队。这使它们易于理解和实施,但仍然能够产生非常复杂的运动模式。...

折纸效果! Cocos Creator 3.0

仅占用一个 drawcall ! 效果 实现 整体思路 思路遵循以下几步 初始化一个多边形。 折叠后分割成两个多边形。 如果需要继续分割,对场上的所有多边形进行折叠,折叠出新的多边形的层级正好与原来的相反。 所以,所有的计算和渲染都可以转换成对一个多边形的操作。 为了简化计算,我们约定初始化的多边形为凸多边形。这么做有几个好处。 折叠后生成的...