lamyoung

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

Canvas.toDataURL 用不了咋办？

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

Posted by lamyoung on August 9, 2021

Fake3d && Depth Map && Cocos Creator Shader

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

Posted by lamyoung on July 21, 2021

MatCap && Cocos Creator Shader

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

Posted by lamyoung on July 16, 2021

如何抄一个 Shader 到 Cocos Creator

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

Posted by lamyoung on July 7, 2021

3D折纸效果怎么实现？

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

Posted by lamyoung on June 23, 2021

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

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

Posted by lamyoung on June 7, 2021

转向行为! steering behaviors ！

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

Posted by lamyoung on May 25, 2021

折纸效果！ Cocos Creator 3.0

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

Posted by lamyoung on April 29, 2021

如何让文本从右向左竖直布局？Cocos Creator 3.0

朕回来了! 前言最近韭菜长的不错，公众号也有点长草了，出来割一波。逛论坛看到这么一个需求，有人想要圣旨一样布局的文本。于是白玉无冰梭哈一下，写了一个简易的组件供在座的各位参考。本字体组件支持(就是原本系统字组件Label的阉割版本) ：系统字体空格，斜体，粗体字体大小、行高但暂未支持字体资源，对齐模式，缓存模式，排版模式，下划线。（...

Posted by lamyoung on March 1, 2021

弹性跟随相机！3D入门教程!

默默地在背后关注她！前言在3d游戏中经常会用到镜头跟随效果，这次我们就来实现它！阅读本文需要一些的基本知识：向量基本运算（加法/减法/乘积）会调用四元数API接口运动学（速度/加速度/位移）效果预览如下（可调远近上下/弹性跟随）：实现相机跟随的原理就像是，你暗中跟随观察(尾随)你心仪的对象(Object)。既然是观察，就要与对象保持...

Posted by lamyoung on January 18, 2021