Skip to main content
AR论坛
 首页 » 资源教程

用Shader实现LCD屏幕效果【含源码】

2016年11月29日 22:13:08720蛮牛网

用Shader实现LCD屏幕效果【含源码】 资源教程 第1张

请输入图片描述

本教程将介绍如何是先模拟液晶显示器效果的Shader。开发者Monomi Park最近更新了他的游戏Slime Rancher。其中最有趣的一个效果是添加了一个特殊的LCD(液晶显示器)shader,当我们靠近显示器的时候能看到像素。这效果非常的酷炫,我在这里重新创建一遍。

介绍

有三个不同方面影响LCD的显示效果:

1.像素化效果。显示原始图片像素在屏幕上。

2.LCD渲染。每一个像素都是由更小的R,G和B的小格子组成,由他们共同构成一个像素。

3.放大效果。这个效果只会出现在当我们靠近观察显示器的时候。

4.故障效果。定期改变像素的色彩和分辨率。

这个教程将包含前三点。需要注意的是,真正的液晶显示器是不需要放大效果的。因为它们确实是由小的R,G和B的液晶组成的。但是这不会发生在shader中,如果不用代码特殊处理,一个简单液晶显示器的效果就和其他效果一样了。

最后,这种效果是基于standard模式的shader。这允许我们添加些额外的效果,比如反射和环境光。

1. 像素效果

第一部分包含了一个简单的像素Shader。实现这种效果的途径是通过在使用UV前现实材质的采样。首先,我们添加一个变量来表示我们的显示器有多少像素。

用Shader实现LCD屏幕效果【含源码】 资源教程 第2张

Shader

接下来的代码用于获取UV值,取值范围从0到1,并且只与_Pixels变量相关。这我们已经在之前的教程里介绍过:如何管理网格。

用Shader实现LCD屏幕效果【含源码】 资源教程 第3张

Shader

结果如下图所示:

用Shader实现LCD屏幕效果【含源码】 资源教程 第4张

Shader

需要注意的是这并不是最好的让图片显示成LCD效果的一种方式。变量_Pixels表示了当前网格包含了多少像素,忽略了在真实世界中的大小。如果你在纹理中改变了大小,你的像素大小并不会改变。这样会导致效果不一致。但是如果你不缩放显示器,我们的效果还是不错的。

2.  LCD渲染

LCD渲染看起来是最复杂的,但是实际上很简单。要实现这种效果,我们需要将图片中的没一个像素替换为LCD像素。在google中查找“LCD pixels”你能够找到Monomi Park制作效果所使用的原始图片(资源):

用Shader实现LCD屏幕效果【含源码】 资源教程 第5张

Shader

理论上我们只需要一个单独的RGB单元。为了避免重复,我们可以使用由多过单元组成的纹理;这会让我们的shader看起来更丰富多彩一些。

再将UV乘以_Pixels,我们得到了适合我们像素的LCD纹理采样。变量_LCDPixels包含了由众多RGB单元所组成的图片。

剩下的是将两张图片混合:

用Shader实现LCD屏幕效果【含源码】 资源教程 第6张

Shader

用Shader实现LCD屏幕效果【含源码】 资源教程 第7张

Shader

你会发现现在放大的效果不太好。我们会在下面的步骤修复这个问题。

3.  放大效果

LCD效果只有当我们靠近显示器的时候才会显示。一个远处的观察者只能看到普通的像素。我们用一种严格的方式对其进行区分,当摄像机距离小于_DistanceOne的时候显示完整的LCD效果,当距离大于_DistanceZero的时候,显示完整的像素。在这两个值直接的其他值,使用两种效果的线性插值表现。

要让效果正常工作,我们需要两个额外的信息:摄像机的坐标,和当先绘制效果的坐标。后者可以通过修改输入结构体获得:

用Shader实现LCD屏幕效果【含源码】 资源教程 第8张

Shader

前者我们可以通过内建的变量_WorldSpaceCameraPos获得。

下面的代码计算摄像机到物体的距离,通过回合系数对0和1之间的值进行归一化。

用Shader实现LCD屏幕效果【含源码】 资源教程 第9张

Shader

最终效果:

用Shader实现LCD屏幕效果【含源码】 资源教程 第10张

Shader

4.结论

本教程为模拟一个真实的LCD效果做了一个开头。如你所见,它的效果和Slime Rancher相比还有一定差距。通过shader实现,有一些细节就无法达到。它还有很多的地方需要改进。例如非线性的缩放,混合不同颜色的功能,通过噪点产生颜色震荡效果等。如果大家又改进,一定要告诉我。

评论列表暂无评论
发表评论