【游戏仿真实验】使用Unity仿真电视机光学三原色显示画面，我是要成为海贼王的男人

「爱情、让人受尽委屈。」 2022-09-07 03:48 245阅读 0赞

本文效果如下  
![请添加图片描述][f874f95ae752426aa561b5fe52c33130.gif]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16]  
![请添加图片描述][5185d394e0574263ac7ba6ce98a2312c.gif]

### 文章目录 ###

*   *   *  一、前言
         *  二、光学三原色
         *  三、Unity制作红绿蓝色块
         *  四、克隆像素块
         *  五、显示图像
         *  六、测试
         *  七、屏幕后处理
         *  七、工程源码
         *  八、完毕

### 一、前言 ###

嗨，大家好，我是新发。  
最近我在尝试用`Unity`制作非游戏的场景，做一些数学、物理的仿真实验，比如上一篇文章我做了一个[《蒲丰投针仿真实验》（点击查看）][Link 1]，今天，我又要做另一个实验，模拟电视机光学三原色的原理来显示画面，话不多说，我们开始吧~

### 二、光学三原色 ###

光学三原色分别为红、绿、蓝，这三个颜色通道色各分为`256`阶亮度，在`0`时最弱，而在`255`时最亮。也就是说，一共可以表现`256 x 256 x 256 = 16777216`种颜色。  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70]  
我们早期的彩色电视机显示器就是利用三原色的叠加来显示不同的色彩的，如果你用放大镜仔细观察电视机的屏幕，就会发现画面其实是由很多很多红绿蓝的小色块排列组合而成的，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]

### 三、Unity制作红绿蓝色块 ###

创建一个`Unity`工程，在`Hierarchy`面板空白处右键鼠标，点击菜单`3D Object / Quad`，创建一个四边形，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]  
调整四边形的`Scale`的`x`缩放为`0.33`，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]  
如下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]  
为它创建一个材质球，`shader`使用`Unlit/Color`，颜色设置为红色，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]  
把材质球赋值给四边形，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]  
如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]  
同理，制作蓝色和绿色，排在一起，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 9]  
层级结构如下，一个`block`就等价于一个像素，一个像素包括`r`、`g`、`b`三个三原色，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 10]  
可以分别对`r`、`g`、`b`进行调整，  
![请添加图片描述][e389b853a72344c5afe8b785b74085bb.gif]

### 四、克隆像素块 ###

接下来我们只需要进行克隆，排列好，理论上就可以做成一个光学三原色显示器了，  
![请添加图片描述][78be924767f743af93b451aa481977de.gif]  
写个函数来执行：

// 创建N个像素块，WIDTH是宽，HEIGHT是高
    private IEnumerator CreateBlocks()
    {
        
        int counter = 0;
        for (int j = HEIGHT; j >= 0; --j)
        {
        
            for (int i = 0; i < WIDTH; ++i)
            {
        
                CreateBlockItem(i, j, Color.white);
                ++counter;
                if (counter > 100)
                {
        
                    counter = 0;
                    yield return new WaitForSeconds(0.3f);
                }
            }
        }
    }
    
    // 创建一个像素块
    private void CreateBlockItem(int i, int j, Color color)
    {
        
        var obj = Instantiate(block);
        var trans = obj.transform;
        trans.SetParent(blockRoot, false);
        trans.localPosition = new Vector3(i, j, 0);
        trans.Find("r").GetComponent<MeshRenderer>().material.color = new Color(color.r, 0, 0);
        trans.Find("g").GetComponent<MeshRenderer>().material.color = new Color(0, color.g, 0);
        trans.Find("b").GetComponent<MeshRenderer>().material.color = new Color(0, 0, color.b);
    }

比如创建一个宽`100`，高`50`的屏幕，效果如下：  
![请添加图片描述][fbbebdfb2f45463aba2507bcf78d9fee.gif]

### 五、显示图像 ###

我们找一张图片，比如海贼王的图片，  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 1]

导入到`Unity`工程中，勾选图片可读，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 2]

我们可以看到图片的尺寸为`1920x1080`，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 3]

我们使用`240x135`的分辨率来显示，我们对图像进行采样，可以使用`Texture2D`的`GetPixel`接口，

public Color GetPixel(int x, int y);

完整代码如下：

using System.Collections;
    using UnityEngine;
    
    public class BlockMgr : MonoBehaviour
    {
        
        /// <summary>
        /// 原图像
        /// </summary>
        public Texture2D texture;
        /// <summary>
        /// 三原色像素块
        /// </summary>
        public GameObject block;
        /// <summary>
        /// 像素块父节点
        /// </summary>
        private Transform blockRoot;
        /// <summary>
        /// 宽
        /// </summary>
        private const int WIDTH = 240;
        /// <summary>
        /// 高
        /// </summary>
        private const int HEIGHT = 135;
    
        void Start()
        {
        
            blockRoot = block.transform.parent;
            StartCoroutine(CreateCreenBlocks());
        }
    
        private IEnumerator CreateCreenBlocks()
        {
        
            int counter = 0;
            var width = texture.width;
            var height = texture.height;
            for (int j = HEIGHT; j >= 0; --j)
            {
        
                for (int i = 0; i < WIDTH; ++i)
                {
        
                    // 对原图像进行采样
                    Color color = texture.GetPixel(width * i / WIDTH, height * j / HEIGHT);
                    CreateBlockItem(i, j, color);
                    ++counter;
                    if (counter > 100)
                    {
        
                        counter = 0;
                        yield return null;
                    }
                }
            }
        }
    
    
        private void CreateBlockItem(int i, int j, Color color)
        {
        
            var obj = Instantiate(block);
            var trans = obj.transform;
            trans.SetParent(blockRoot, false);
            trans.localPosition = new Vector3(i, j, 0);
            trans.Find("r").GetComponent<MeshRenderer>().material.color = new Color(color.r, 0, 0);
            trans.Find("g").GetComponent<MeshRenderer>().material.color = new Color(0, color.g, 0);
            trans.Find("b").GetComponent<MeshRenderer>().material.color = new Color(0, 0, color.b);
        }
    }

脚本挂在`screen`节点上，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 4]

### 六、测试 ###

运行`Unity`，执行效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 5]

![请添加图片描述][fb836bf649f74175aedbdcb5869ca5bb.gif]

### 七、屏幕后处理 ###

亮度有点暗，我们加上屏幕后处理，点击菜单`Window / Package Manager`，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_13_color_FFFFFF_t_70_g_se_x_16]  
搜索`postprocessing`，选中`Post Processing`，点击`Install`，安装后处理插件。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
添加一个后处理层`postprocessing`，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16]  
把`Main Camera`的`Layer`改为`postprocessing`，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
给`Main Camera`添加`Post-process Layer`组件，并设置`Volume Layer`为`postprocessing`层，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16 1]  
给`Main Camera`添加`Post-process Volume`组件，勾选`Is Global`，创建一个`Profile`配置文件，添加`Bloom`泛光效果，如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16 2]  
最终效果，  
![请添加图片描述][f874f95ae752426aa561b5fe52c33130.gif]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16]

### 七、工程源码 ###

本文工程已上传到`CODE CHINA`，刚兴趣的同学可自行下载学习，地址：[https://codechina.csdn.net/linxinfa/UnityTVScreenSimulation][https_codechina.csdn.net_linxinfa_UnityTVScreenSimulation]  
注：我使用的`Unity`版本为`Unity 2020.1.14f1c1 (64-bit)`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 11]

### 八、完毕 ###

好了，今天就到这里吧。

我是林新发：[https://blog.csdn.net/linxinfa][https_blog.csdn.net_linxinfa]  
原创不易，若转载请注明出处，感谢大家~  
喜欢我的可以点赞、关注、收藏，如果有什么技术上的疑问，欢迎留言或私信，我们下期见~

[f874f95ae752426aa561b5fe52c33130.gif]: /images/20220829/6179c5a1fa114e438b385917a07a610b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6b891ead8c25435d9b38b899250d58ef.png
[5185d394e0574263ac7ba6ce98a2312c.gif]: /images/20220829/62844202776e4220a8eb41f28df0d33f.png
[Link 1]: https://blog.csdn.net/linxinfa/article/details/119815354
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70]: /images/20220829/cf1f2f5702264c7fb15d35913f301b5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 1]: /images/20220829/6a6e0acfb9df41428e952ab5874c09e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 2]: /images/20220829/5c8d95eda4e2486a933083b7cc84947f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 3]: /images/20220829/c68794b592a94e9f98d0e9d3d64bf26b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 4]: /images/20220829/16da8312be6c4a55ac6f008b02733e2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 5]: /images/20220829/2e79b97910974047906ce43775eb5924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 6]: /images/20220829/91612cf3d80c42998133a65a4382ff85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 7]: /images/20220829/e715a985a28e4587a4e455135255dd8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 8]: /images/20220829/5eee37c699f84f14971e3d4f1ffa9a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 9]: /images/20220829/82edc629b8474733bc96e86edda55855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 10]: /images/20220829/a1912bbdd892404eab35a2da16308e17.png
[e389b853a72344c5afe8b785b74085bb.gif]: /images/20220829/6f0836f29ebb4ec9a6577448c40ff280.png
[78be924767f743af93b451aa481977de.gif]: /images/20220829/8174c0b9d464457d8096f75114c560b2.png
[fbbebdfb2f45463aba2507bcf78d9fee.gif]: /images/20220829/f26abb47965747c092289c70ec5f1b93.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/c17330e5642b4f4b93f2dab5d3d25d24.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/5ade0f53e26e4d68a335da980d4ca6e7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/a62148d3dc6944e79f43bc9a639bcce1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/be98f466546e409e8b624f1dabc38ba3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/560949b2d77f41bc8aa5e95d25bf88a5.png
[fb836bf649f74175aedbdcb5869ca5bb.gif]: /images/20220829/6fb22efc318e4c2a9f7adc0a9b5ebbcf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/9eb2997a395e48488a7e753b88c94c9f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/efa63785e8ef49c98e65923cae68e645.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b091ef119b7142f1bc5cbd631abba202.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/9a2c6ab3aff64ed692238967b039d01d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/8fbc25acd75b47419534e5649eeced33.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5p6X5paw5Y-R_size_19_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/91da5269d61844ef8a9ce95fb8201cae.png
[https_codechina.csdn.net_linxinfa_UnityTVScreenSimulation]: https://codechina.csdn.net/linxinfa/UnityTVScreenSimulation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnhpbmZh_size_16_color_FFFFFF_t_70 11]: /images/20220829/3ede714cd9bd4b43845d4e1d49cfc757.png
[https_blog.csdn.net_linxinfa]: https://blog.csdn.net/linxinfa