2D光影系统-光源一全局方向光

unity的urp有自己的Light2D系统,但cocos没有,所以我模拟urp的2d的光影系统,造了个简易的cocos的2d光影,先看效果!

截屏2024-02-26 11.26.28
截屏2024-02-26 11.26.41

图一是夜晚,三个火把点亮了周围,图二是白天,三棵树投射了阴影。

前言

unity的light2D比较强大,光源有全局光,sprite灯,点光(也可以模拟探照灯),自定义形状灯等,我这里只模拟了方向光和sprite灯
如图所示,方向光除了控制环境光,模拟白天黑夜,还控制阴影投射方向,sprite灯就是火堆的光,照亮周围。

本篇先说全局方向光。

一、unity的2d光影理念

熟悉urp的人大概清楚,unity的2d光影最核心的思想其实就是把所有光照和阴影绘制到一张RenderTexture中,后面简称光影rt,然后接受光照的物体在渲染时读取这张rt,和自己的颜色做混合,所以后面我也是这个理念。

二、全局方向光

方向光的目的有两个,一个是提供全局光照,一个是提供光的方向,给阴影的朝向用,本篇不讲阴影,所以只考虑全局光,最简单的思维是提供一个sprite做全局光,我们姑且取名叫Sun(太阳),然后我们不关心它的图,而关心其颜色,其他物体渲染时读取Sun的颜色,做混合,这确实是简单直接的方案,但难于扩展,我们的思维如上,是要把光影渲染到一张rt中

先创建一个空物体,起名叫Sun,我要模拟一个昼夜系统,光照会在一天中变化,创建一个脚本,脚本里加入一个渐变色编辑器(Gradient),模拟24小时光的颜色,再提供一个一天的时间,为了快一点,我控制60s就是一天

image

WeChatdf1426bc9f9143f3c1dac4df0de3884b

WeChat06a084d911dc185a3bc3f6c00e568601

光源搞完了,我们要渲到一张rt中,这不得不用cocos的自定义后效,如果对cocos的自定义后效不甚了解的同学可以去看后面的参考,这里就不详细说明了。
新建一个camera,专门负责渲染光照,再新建一个rt,丢给该camera,然后就是给该camera自定义后效了。

这个阶段自定义后效还很简单,只有个环境光,创建一个shader,shader中只是简单把传入的环境光输出出来

WeChatb38b9f493ea76cd9220b4b6261518d4d

然后把该shader的材质丢给自定义后效输出

WeChat4292c721d1ce93a10a9ee05e6f079352

最终将该自定义后效赋给光照的camera,输出到rt中

WeChat898b9a73b3221ca4d242ab8be5928b2b

这样一个简单的有昼夜的rt就出来了,有一点需要注意,light的camera优先级要高于主camera,因为光影图要先绘制出来,才能交给后面场景渲染使用

三、渲染场景物体

由于我们场景中的物体要接受光影,也就是读取光影图,所以不能用系统自带的shader,还是得用自定义shader,核心代码如下

WeChat329bd997e9d0246760f1db6442b918e4

WeChat9f576da99fb1444dc1af6aab23667cec

这里的LightPassMap即为我们之前得到的光影图,采样光影图,和自己的sprite的色值简单的相乘,就得到了受光后的色值。
这里注意采样光影图的uv,要使用在顶点着色器中获取的该顶点在屏幕上的uv

这就是基本的基于2d的光影系统的框架

下一篇: 2D光影系统-光源二Sprite光

参考:
https://forum.cocos.org/t/topic/151046
https://forum.cocos.org/t/topic/151605

15赞

这是个好东西,连楼主一起搬走

不明觉厉!先马克一下

本系列教程已介绍的比较清楚,如果实在有同学想要看源码,本工程已上架Cocos Store,研发不易,敬请赞助顿饭钱,万分感谢:2D昼夜光影系统

必须要支持你一手

已赞助LZ一顿双拼猪脚饭
image
73F91BD341BD6F8B3A82F74A4B8CA73A

万分感谢 :smiling_face_with_three_hearts:

万分感谢 :star_struck:

辛苦的是你们这些基建工作者,这本来是官方应该做的,但官方太那啥只能让你们辛苦了,加油
2047a6c21b963f375a546d05fc107bd2

足够加个卤蛋百事了

谢谢支持啊,给了我很大的创作动力,也期待官方会越来越完善,确实照unity的urp有一定的距离,用Camera做后处理不如自定义管线绘制mesh,可能是我刚入cocos不久,还不会用cocos的自定义管线,后面我会继续提供有意思的效果,你们的支持就是我最大的动力,再一次感谢 :pray: