15 年专注游戏引擎与游戏开发，分享实用方案、经验与干货教程！

编辑器内置预览、渲染调试、可视化多语言编辑器等等功能增强，好香！

和原生性能问题、粒子性能问题、2D渲染性能问题说再见！

- **环境反射卷积（Reflection Convolution）**- **级联阴影（CSM, Cascaded Shadow Maps）**- **粒子噪声模块（Noise Module）**- **动态模型（Dynamic Mesh）**- **各向异性光照（Anisotropic Lighting）**- **表面着色器（Surface Shader）**...

90%的3D项目都在用的实时水面渲染方案

希望大家读完本文后，深度图相关知识再无死角。

今天玉兔更新了一个关于卡通水面渲染的视频，视频中提到了 炫烨 大佬的文章。 【玉兔 | 图形学与游戏开发】超简单的卡通风格水体渲染Shader | 新手入门友好 抱着蹭一波热度的心态，将文章搬运了过来，并微调了格式。接下来，有请大家重温一下炫烨大佬的卡通水体渲染，感受大佬对细节的掌控力。通过本篇教程你将学到如何做风格化水体的渲染，包含的知识点有:如何使用天空立方体贴图作反射如

简单高频的Shader知识点

在「万物皆可元宇宙」的现在，我们如何在 Cocos Creator 中，制作一个漂亮的 3D 汽车渲染呢？无论是.

Cocos Shader入门基础五：是纹理给了你这个花花世界！

麒麟子收到了许多研发负责人的反馈，说自己的技术团队开发效率一流，已经开发了不少2D/3D游戏。但遇上渲染优化、性能优化、内存优化、兼容性处理等项目后期问题的时候，就束手无策了。

获取方式本框架已上架Cocos Store，请打开store.cocos.com并搜索kylins即可点击文末阅读原文即可跳转到对应页面写在前面之前麒麟子写过一套框架，但使用很不方便。最近麒麟子就在想，能不能实现一套，不依赖prefab、不污染场景节点树、简单调用几个参数就能使用的后期效果解决方案。经过一个多星期的设计与编码，终于把它弄出来了，希望大家能够喜欢。开发环境引擎版本：Cocos Creator 3.3.2编程语言：TypeScript特色功能支持原生 H5 小游戏 平

零、获取方式本框架已上架Cocos Store，请打开store.cocos.com并搜索kylins即可点击文末阅读原文即可跳转到对应页面一、客官，请留步上面的丑图，各位可能看不出来是干嘛的，不过不担心。阅读完本文后，保证解除你所有疑惑。在开始我们的正题之前，我想问问，大家有没有遇到过下面这些问题1、游戏渲染性能优化，就只有DrawCall吗？2、材质系统中的合批(Batching)和几何体实例化（GPU Instancing)有何异同？3、Cocos Creator

一、啊，这夜又是一个静谧的夜，用来写作是再好不过的了。说来也奇怪，C姐催我稿子的时候，我绞尽脑汁，也想不出来写什么好。现在轮到自己自由发挥了，却发现保底可以写上十多篇。（不信？关注公众号：麒麟子随笔，走着瞧）这篇文章其实是我即将发布的文章《Cocos Creator 3.x后期效果框架源码剖析》的序。但这个序太长了，甚至写着写着就跑题了，面对这思如泉涌的结晶又舍不得删。怎么办呢？于是开了一个新贴发出来，顺便回答一些关于2D开发者如何快速掌握3D游戏开发、非Cocos引擎的开发者如何快速掌握Coc.

注：本文既有经验上的总结，又有实现方式上的讲解。既有流程上的描述，又有代码细节上的剖析。全文字数5000+，看的时候最好带上笔和纸。零、你的序感谢大家的厚爱，KylinsPostEffects上架Cocos Store两星期销量破百。现在应广大用户的要求，写一篇关于这个3D后期效果框架的源码剖析文章，以供大家学习和文档查阅之用。说实话，篇文章重写了好几稿，但左思右想觉得不妥，所以那几稿都没有发出来。一开始给它的定位是源码剖析。所谓源码剖析的意思就是说，只需要写清楚一些关键的源码是什么意..

零、这个时代，太快如果有朋友年龄和麒麟子相仿的话，小时候应该玩过DVD播放机，就下面图里这东西。那么问题来了，你还记得，如果想要播放自己想看的内容，一共分几步吗？和把大象装进冰箱一样简单，只需要三步：第一步、出仓：弹出光盘托盘第二步、换碟：把想放的光碟放进去第三步、关仓：收回光盘托盘如果我们想从刘德华的专辑切换到张学友的专辑，你需要重复上面的步骤。如果我们想从听歌切换到某电影，你需要重复上面的步骤。如果我们想从电视剧的某一集切换到另一集，你还是需要重复上面的步骤。现在让你这样去.

随便截的一、启发客官，请留步。您没有走错门，就是这里。这是《Cocos Shader入门基础三：Hello World与可编程管线浅析》的开头部分。上面这个图，是今天晚上我给孩子的英语测试。短短两个月的时间，他就能正确的指读这些句子并理解他们的意思。别急，我不是来炫耀孩子的学习成果的。他的英语水平目前在班上应该是倒数的，没有什么可炫耀的。但比起两个月前的他，确实有不小的进步。我认为他之所以进步的原因，在于“分级绘本”孩子从最简单的分级绘本开始，逐步增加新的知识..

零、菜鸡麒麟子每个人都是从菜鸡过来的，在写这篇文章的时候，让我想起了10几年前的自己。我还能清晰地感受到自己接触3D编程第一天时的兴奋和当初学而不进的焦虑。说来也巧，我正式学习3D编程，是2008年5月12号，也就是汶川地震那天。我记得上午有两节高等数学课，由于前一天晚上睡太晚，起来的时候发现已经迟到了。索性就旷课吧，反正我高数怎么考也只有49，不在乎这点平时成绩。睡太晚的原因，是刚学会C++教程的我，突然在群里接触到了一个叫D3D的东西，这东...

零、别看广告，看疗效阿子最近沉迷于学英语和写代码，可HIGH了。一看时间，竟然已经十天没发稿了。但这不能怪阿子，要怪就怪Cocos Creator 3D可玩性太高了，我竟然有一丝丝沉迷。突然好想轮播一遍影帝们的台词渣渣辉：你知道我这五年是怎么过的吗？这五年.....我每天都躲在家里玩Cocos Creator 3D，你是不知道，它对一个男人来说，有多重要。轱舔乐：大嘎吼，我系轱舔乐，介里有磊没有玩过的船新版本，几需三番钟，磊造会干我一样，爱向节款引擎。山鸡：是兄弟，就来砍我.

零、先看一些图图1：边缘光因子检查图2：黄色，一般用于霸体效果图3：红色，一般用于特殊技能特效图4：白色，一般用于受击效果图5：绿色，一般用于人物，NPC选中时高亮看着群里的小伙伴们都很热衷于Shader的编写，麒麟子刚好做到了这个需求：焦点对象高亮、受击变色、霸体、特殊技能角色周身氛围增强，所以在此分享一下Cocos Creator 3D版本下，Shader的编写。在此也提醒一下各位小萌新，Shader的编写于图形引擎而言，就好比SQL的编写于数据...

夜深了，咱就直接进入正题吧，容麒麟子先上张图。截自cc.d.ts我们主要用到的就是这个CameraComponent中的converToUINode函数。它这个注释有点问题。第一个参数 wpos:传入的是世界坐标点，比如人物头顶某个位置的世界坐标点第二个参数 uiNode:传入的是你想要观察的UI节点的父节点，注意是父节点。不要问我为什么，因为传子节点不顶用。第三个参数 out:如果你需要获得位置，那么你传入一个自建的vec3变量，用于获取转换后的2d坐标点。这篇文章告诉大...

主要看气质负的九十九、前言再正式通知一遍，以后文章中，麒麟子会自称为阿子，觉得这更样让自己显得更年轻。不要问阿子为什么老喜欢用这张封面图片。真要问，那答案就是：耐看。飘逸的发型，英俊的脸，就连他手中的剑也显得格外耀眼。看到这图片就能想到一句诗：天下风云出我辈，一入江湖岁月催。霸葛(BUG)需求谈笑中，不胜人生一场醉。阿子今天写这篇文章，并没有说要停更《Cocos Creator 3D研究笔记》的意思，阿子保证这个系列会更新至少过百篇，除非需上人力不可抗拒因素。下面请...

零、效果展示这两天在研究Cocos Creator 3D骨骼动画部分，网上找了些模型。为了方便查看模型的各个动作，所以顺便写了这个模型&骨骼动画查看器。项目包含了以下几个内容1、QFW(qilinzi framework)框架最新版2、天空盒设置、内置10款天空盒3、第三人称摄相机控制器4、一个主角模型以及配套的40个动画拿到这套代码的小伙伴们，可以很容易地制作属于自己的DNF类ACT RPG，MMORPG等。DEMO在线查看地址和源码获取地址在本文末尾。一.

麒麟子Cocos Creator 3D研究笔记之材质IBL与天空盒动态切换

先来两张图在线演示地址：https://showcase.ukylin.net/avatar/3D换装有两种情况，一种是身体各部件（如头发、上衣、裤子、手套、鞋子等身体各部分），另一种是挂接件 （如耳环、武器等等）一、换装原理1、部件换装3D的换装原理比2D简单多了。只需要满足三个原则就行。1、使用同一套骨骼进行蒙皮。2、每套模型在蒙皮的时候，骨骼的TPOSE要一致。3、各部件接缝处要自然，一般是皮肤处接缝或者衣物遮挡处设计接缝。我们在网上找到的支持换装的..

前言麒麟子在开发中搞出来的框架，都是遵守“大道至简，实用至上”这两个基本原则。接触一个引擎的第一件事，就是搞出一个实用的框架，方便在此基础上做开发。由于目前的引擎已经是对象+组件模式，所以在场景对象管理上，不需要花太多功夫了。我们主要集中在界面管理这块。一、常见的几种游戏类型。既然我们的框架想要满足日常开发，就不得不满足星辰大海般的需求。从客户端的角度，我们可以把游戏分为三类。1.1、纯界面玩法像一些SLG、卡牌、象棋等可以视作纯界面玩法。（也有某些大作要求3D表现效果的，我们不

图片资源在Cocos Creator 3D里面，有两种状态，一种用于3D纹理，另一种用于2D界面。如下图所示，sprite-frame用于2D,其余都用于3D。如果你试图把一个标记为texture的图片资源拖到UI上，你会发现拖不上去。对于拖拽方式的使用，只要我们选对了类型就可以了。而动态加载，则需要满足两个条件1、动态加载的图片必须直接或者间接位于resources目录下2、使用loader加载时，需要指定特定类型。动态加载spriteFrame的代码cc.loader.l.

编辑器状态截图不要在意名字，我临时借用的小游戏APPID一、前言Cocos Creator,我回来了。2016年6月，大家都觉得Cocos Creator 2D不够成熟的时候，我就开始商用了。因为我感受到了市场对Cocos Creator商业游戏源码框架的需求，看到了Cocos Creator对商业案例的迫切。2020年，也在这个差不多的时间点，我把工作重点放到了Cocos Creator 3D上来。我不能保证我对未来的判断是正确的，但我以我自己掌握的信息和对市场的敏感来看，我觉得目.

源码和资源地址：https://gitee.com/qilinzi/qlz_ccc_tips base/10_3dmj在线演示:https://qilinzi.ukylin.net/?lesson=10愉快的六天五一假期就要结束了，麒麟子机智地选择了在家撸码，顺便看看朋友圈堵车。幼麒棋牌其实已经有一个2.5D版本的麻将了，但今天突然心血来潮，想试试Cocos Creato...