lamyoung

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

膨胀肥胖效果! shader 入门精要! Cocos Creator 3D Shader !

shader 也能让你变胖? 附完整项目! 效果 实现 模型的形状一般都是由三角形围成的,每个顶点一般都会有一个法线信息。 所以我们只需要把每个顶点的位置沿着法线方向,增加一点距离就可以了。 position.xyz + v_normal * fatFactor 那么在 CCC 3D 中怎么融入这个效果呢? 先找到模型的材质,看看默认使用的是什么effect ...

初探雾效果!shader 源码分析与讲解! Cocos Creator 3D Shader Fog !

随便讲讲雾的原理以及旧版本的使用雾的方法。 效果 原理 雾效(fog)是游戏中常用的一种效果,根据远近产生不同的深度的雾效果。 这个效果涉及两个关键字。 距离 颜色 在着色器中,雾效的距离,一般转成换计算雾效因素(factor_fog),这个数字范围是0-1。 1 表示完全不受雾影响 0 表示完全被雾笼罩 接着再根据这个雾效因素去计算颜色,混合...

噪声纹理之消融效果! shader 入门精要! Cocos Creator Shader !

溶解!shader 入门实战之噪声纹理!附完整项目! 效果 原理 什么是噪声纹理? 噪声纹理的特性是不可预测性的随机。 个人理解噪声纹理就是一张图片,每个像素点颜色值(rgba)是按照一定的随机性分布的。 怎么生成噪声纹理? 工具生成 代码生成 网上下载(这里用的噪声纹理是网上下载的) 其他 怎么实现消融? 根据噪声纹理的颜色值和消融阈值(...

隐秘的物理粒子系统与渲染 !Cocos Creator LiquidFun !

让 cocos Q弹起来!物理流体之 LiquidFun 流体纹理 shader ! 效果预览 https://www.bilibili.com/video/BV1hD4y127H2/ 原理 物理粒子系统 引擎内置的 box2d.js 其实已经携带了 google 的 liquidfun(但是没有公开接口和适配)。并且引擎还对 box2d 做了一次适配,绑定到全局...

瞄准器!3D入门实战!拇指射箭!Cocos Creator 3D !

瞄哪打哪!超简单的射线检测! 效果预览 原理 在 Cocos Creator 3D 刚出来时, 写了一个简单的拇指射箭 不过,当时的瞄准发射计算是以某一个系数来控制的。 这感觉不太对。 还是用一个射线检测去处理这个瞄准结果吧。 首先,通过摄像机,把瞄准器的位置转到屏幕坐标。 const screenPoint = this.camera_main.worl...

多边形裁剪与Gizmo!新版!Cocos Creator !

支持缩放旋转,支持合图,支持gizmo添加节点和调整位置,支持顺时针逆时针。 效果预览与使用 原理 回顾 在gizmo入门探索介绍了 gizmo 与多边形裁剪的配合。 在使用 mesh 实现多边形裁剪图片 中介绍了 mesh 和切耳法的相关使用。 相比mask组件,这种meshRenderer的实现可以降低两个draw call。 因为小伙伴使用的比较多,这边...

3D摇杆控制器一种简单实现!Cocos Creator 3D!

一个控制移动和视角的遥感控制器3D示例项目。 效果 原理 在贪吃蛇大作战!蛇移动的思考与实现! 中使用到一个摇杆控制器,不过这是在2D层面上,这次把它改到3D上。 摇杆 摇杆的原理大致是把触摸点的位置传给需要的组件。(参考KUOKUO的摇杆组件改的) 监听触摸事件后,需要做一次坐标转换。在 Cocos 3D 中 ,坐标转换要用 UITransformCompone...

两种方法实现亮度/饱和度/对比度的调整!Cocos Creator !

uniform 方案和 assembler 方案的实现。 效果预览 GT 在Assembler 源码解读及使用 一文中提到自定义渲染可以实现很多酷炫的 shader 特效,目前常用的有两种方法: 创建自定义材质,给材质增加参数。这个参数会作为 uniform 变量传入 shader 由于渲染合批要求材质参数保持一致,所以如果大量对象使用自定义材质时,并且材质参数各不相同...

四叉树与碰撞检测 !Cocos Creator !

四叉树与引擎内置碰撞检测的结合运用。 效果预览 绿色为参加检测的对象(当前四叉树节点),红色为碰撞对象。 如何使用 引入脚本 QuadtreeCollision.ts , 新建一个 QuadtreeCollision ,并初始化为世界坐标系下的对齐轴向的包围盒(AABB)。 // 这边是挂载在canvas下的脚本,用canvas的rect初始化创建。 this._qua...

2D实现背景图3D滚动效果(透视) !Cocos Creator !

战斗地面效果!在 2D 中实现有纵深感(透视)的卷动效果。 效果 回顾 这次的纹理管理仍然是使用 Sprite 组件的渲染模式 Mesh ,需要的可以参考 初探精灵中的网格渲染模式 ! 。 原理 为了达到这种透视效果,把握一个原则,远小近大,远慢近快。 准备一张梯形的图片,让下面的图形快速移动,上面的图形慢速移动,就能有3D滚动的感觉了。 Sprite 组件...