# FogOfWar

**Repository Path**: chasing2moro/FogOfWar

## Basic Information

- **Project Name**: FogOfWar
- **Description**: unity下一种基于渲染可见区域的战争迷雾
- **Primary Language**: C#
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 5
- **Created**: 2022-01-27
- **Last Updated**: 2024-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FogOfWar
- 本gitee非原创，引用：https://gitee.com/SimpleAI/FogOfWar

很多"非老手"被网上这个流行的FogOfWar工程 一段猛如虎的操作，看的一头雾水，濒临劝退的边缘。下面希望做一些思想工作，希望更大限度挽回这些"非老手"。

---
运行方法：
1. Unity打开 Assets\Scenes\Example1.unity场景
2. 效果如下
![战争迷雾效果](doc/fog_1.gif)
---
整体思路：  
使用MonoBehaviour.OnRenderImage方法，
```
//Assets\Scripts\FogOfWar\FogOfWarEffect.cs
MonoBehaviour.OnRenderImage(RenderTexture source, RenderTexture destination)
//You can use OnRenderImage to create a fullscreen post-processing effect. 
//These effects work by reading the pixels from the source image, using a Unity shader to modify the appearance of the pixels, and then rendering the result into the destination image.
```
将准备渲染到屏幕的RenderTexture source, 用如下`FogOfWarEffect.shader`做一下“颜色乘法”运算
```
//Assets\Shaders\FogOfWarEffect.shader
fixed4 frag(v2f i) : SV_Target
{
    //获取屏幕的颜色
    fixed4 c = tex2D(_MainTex, UnityStereoTransformScreenSpaceTex(i.uv));    
    ...
    col.rgb = lerp(col.rgb, fixed3(1, 1, 1), visual)...
    ...
    c.rgb *= col.rgb;
    c.a = 1;
    return c;
}
```
再渲染到屏幕，实现战争迷雾。 你可以想象上面的`col` 极端2种情况:
- col.rgb = fixed3(1, 1, 1) 时就是可视区域,      c.rgb *= col.rgb; “颜色乘法”运算后，就是直接显示
- col.rgb = fixed3(0, 0, 0) 时就是不可视区域，c.rgb *= col.rgb; “颜色乘法”运算后，就是不显示
---
于是我们把战争迷雾“庞大”（其实并不庞大）的工程，简化成解决1个大问题：把是否可视区域 映射到`FogOfWarEffect.shader`的`col`。这个大问题可以解剖为如下2点：
1.  把 是否可视区域 存到C#的 FOWMaskTexture.m_MaskTexture 贴图里
2. 用如下方法，应用`FogOfWarEffect.shader`
```
//Assets\Scripts\FogOfWar\Core\FOWRenderer.cs
private static void CustomGraphicsBlit(RenderTexture source, RenderTexture dest, Material fxMaterial)
{
    //Graphics.Blit(source, dest, fxMaterial);
    //return;

    //All rendering goes into the active RenderTexture. If the active RenderTexture is null everything is rendered in the main window.
    RenderTexture.active = dest;

    fxMaterial.SetTexture("_MainTex", source);

    GL.PushMatrix();
    GL.LoadOrtho();

    //`FogOfWarEffect.shader`实例化出来的材质
    fxMaterial.SetPass(0);

    GL.Begin(GL.QUADS);

    GL.MultiTexCoord2(0, 0.0f, 0.0f);
    GL.Vertex3(0.0f, 0.0f, 3.0f); // BL

    GL.MultiTexCoord2(0, 1.0f, 0.0f);
    GL.Vertex3(1.0f, 0.0f, 2.0f); // BR

    GL.MultiTexCoord2(0, 1.0f, 1.0f);
    GL.Vertex3(1.0f, 1.0f, 1.0f); // TR

    GL.MultiTexCoord2(0, 0.0f, 1.0f);
    GL.Vertex3(0.0f, 1.0f, 0.0f); // TL

    GL.End();
    GL.PopMatrix();
}
```
3. 然后在`FogOfWarEffect.shader`里用tex2D(第1步的贴图, xy)方法从贴图里提取出信息，做一下运算存到`col`里
4. 第1步的贴图(是否可视区域贴图)它是对应整个大地图的，需要把归一化的屏幕坐标 映射到整个大地图才能获取正确的像素点：
![归一化的屏幕坐标映射到大地图](doc/map.png)
对应步骤是：
4.1. 获取转置矩阵
```
//Assets\Scripts\FogOfWar\Core\FOWRenderer.cs

WorldToProjector= default(Matrix4x4);
WorldToProjector.m00 = 1.0f / xSize;
WorldToProjector.m03 = -1.0f / xSize * position.x + 0.5f;
WorldToProjector.m12 = 1.0f / zSize;
WorldToProjector.m13 = -1.0f / zSize * position.z + 0.5f;
WorldToProjector.m33 = 1.0f;
```
4.2. 利用转置矩阵把归一化坐标映射到整个大地图(是否可视区域贴图),获取对应的的像素点
```
//Assets\Shaders\FogOfWarEffect.shader

//归一化坐标 映射到整个大地图
pos = mul(WorldToProjector, pos);
...
//获取对应的的像素点
fixed3 tex = tex2D(_FogTex, pos.xy).rgb;
```
---
希望解说到这里，能够换回一些“中手”。更仔细的解说，挽回“新手“”后面继续奉上