Ylisar 发表于 2022-7-28 12:00

像素化风格渲染(一)

我对像素游戏情有独钟。
小时候最早接触的游戏机就是山寨俄罗斯方块游戏机,印象里除了俄罗斯方块还可以开坦克,开赛车和青蛙过河之类的。如此抽象的表现形式在小时候的我看起来充满了无穷的趣味。一直到现在我都很喜欢像素风,高中的时候购买了一台二手java索爱手机,大学大一上学期偷偷攒钱买了psp,3ds,switch。哦对了,还有一个特殊的“游戏机”,是一个图形计算器,可以下载别人编写好的游戏游玩。

Ti-92+游玩马里奥
https://www.zhihu.com/video/1531518058615476224
所以步入正题,我要写一段像素风格的shader。
首先从原理入手。
像素风格我的理解是模仿早期设备低分辨率的条件,做出的一种抽象的画风。早期设备是迫不得已才做成像素风格的,然而我们现有的设备不是2k高清屏幕就是视网膜屏,类似于蔚蓝这样的游戏都是高清马赛克。



The Last Night,完美结合3d光影和2d像素

而以三渲二的方式来表现像素风格的游戏可以有效减少绘制2d帧动画的工作量,把3d的光,动画,角度切换应用到2d上去。有幸接触到了一个Unity插件pixelizer,看到了作者所给的讲解,在此记录研究的过程。
<hr/>总体上像素化原理就像这个视频里展示的一样:原来图片是这样压缩的_哔哩哔哩_bilibili
方法一:不用任何代码,利用Render texture,然后降低分辨率,将其添加到Quad上,用另外一个camera调整好角度对准Quad。

原始图像
https://www.zhihu.com/video/1532469496815595520

使用render texture后(128*128)
https://www.zhihu.com/video/1532469857115545600
这个是unity商店里的免费模型,由于没有硬阴影,所以看起来还不是很‘2d’这种方法最终效果很像以前的怪物猎人,特别是3ds上的怪物猎人,可以看出是有不错的像素化效果的。但是这种风法局限性也很大,因为这相当于降低了物理分辨率。而且这样的渲染每次都需要额外的camera,当有大量物体时性能很捉急,只能用在小场景里。
方法二:剔除像素 + 全屏后处理
首先进行剔除像素代码。原理就是,设置一个固定的数值d,然后每隔d个像素保留该位置的像素点,然后其余的剔除。



原始的



剔除像素之后,这里每隔5个保留一个像素

ps.有种透明的做法就是和这个差不多,前后遮挡的时候剔除像素。
最后写一个屏幕后处理,对于每个屏幕像素,搜索周围5个像素(因为间隔为5),取不透明的那个。



最后的效果


可以成功渲染成像素风格
https://www.zhihu.com/video/1533548277492703232
当然还存才一些问题,比如正反体尖锐边缘会有一些不规则的颜色,因为这个材质贴图在棱处有一条黄边。
还有像素风格光照处理问题等。这个后续讨论。
页: [1]
查看完整版本: 像素化风格渲染(一)