Cocos 的布道师正在论坛陆续更新 Cocos Creator 3.x 游戏常用效果技术实现 Demo,Demo 将随着 Cocos Creator 更新迭代,确保在最新版本中可以运行。点击文末【阅读原文】直达论坛专贴,各位开发者有什么想要实现的效果,欢迎留言告诉我们。
阴影对于提升场景的真实感和质感有至关重要的作用。Cocos Creator 支持两种 3D 阴影的实现方式:Planar 和 ShadowMap。
Planer:通过将阴影生成体投射到阴影接受体的平面来制作阴影;
ShadowMap:通过对在光源位置放置相机拍摄 ShadowMap(阴影贴图)来实现的。
这两种方式不仅操作简单,而且实现效果很好。但是对于 2D 游戏,就不那么适用了。很多 2D 游戏的阴影都是通过贴片来实现的。但今天,我们要基于 Cocos Creator 3.3.2 来介绍另一种实现方案:通过一维纹理生成 2D 实时阴影。
Demo 效果预览
Demo 实现了基于 2D 点光源的动态阴影,且对于 Demo 内所有不透明的像素都做了阴影处理,光源和阴影的边缘也做了柔和处理,符合我们对阴影的观察。
接下来我将为大家拆解实现步骤、并深入了解一下实现原理,开发者可选择对应的部分观看。
章节目录
PART 1. 使用方法
PART 2. 实现原理
PART 3. Shader 渲染解析
PART 4. 性能影响
PART 5. 资源链接
PART 1
使用方法
1、创建层级:1dmap
2、创建 render texture:rt_1dmap 和 rt_picture
3、创建3个相机:
CameraPicture:使用 rt_picture 作 TargetTexture
CameraShadow:使用 rt_1dmap 作为 TargetTexture
Camera:作为 Cocos Creator 创建 UI 时的默认相机
4、创建场景
创建渲染到阴影贴图的场景 sprite:shadow_1
dmap
。
注意:其 Layer 必须是 1dmap, 这个作用是用于渲染场景到阴影贴图,具体的原理我们会在后文解释。