当前位置：首页 > news >正文

Unity沉浸式/360View/全景渲染

news 2025/7/16 6:59:02

Unity沉浸式/360View/全景渲染

啥是沉浸式

想象一下，在一个房间里，前面、后面、地面、左面、右面、天花板分别安装了铺满墙面的LED显示屏，你坐在房间里观影，是一种什么体验。如果玩游戏呢？？
最近就接到了这样的小活，当然，这个房间里并不是六面都有显示器，而是只有前面、地面、左面、右面四个显示器。
现在需要把Unity里的场景，沉浸式的渲染到这4个显示器上。
在这里插入图片描述

Unity沉浸式/360View/全景渲染

如何实现，排坑及最终实现历程

最先想到的，就是用4个摄像机。建个空物体，底下挂4个Camera，前面的向前，左边的朝左，右边的朝右，地面的朝下，相互垂直。看起来很简单，对吧。但是，问题就出现了，画面没法对其，死活调不好摄像机的参数。手动对了半天，对不上。
4个屏幕的分辨率如下：

正面：3744 * 1560
地面：3744 * 1664
左面：1634 * 1872
右面：1648 * 1872

发现了没，这分辨率很奇葩，地面的高度居然跟侧边的高度不一样，侧边的深度跟地面的深度也不一样，我靠，这怎么能对的上呢。。
然后深入研究了一下，发现摄像机可以自定义透视矩阵。

// Unity API : Matrix4x4.Frustum
public static Matrix4x4 Frustum (float left, float right, float bottom, float top, float zNear, float zFar);
public static Matrix4x4 Frustum (FrustumPlanes fp);

这不就容易了么！！！
半小时就写了一个组件，让摄像机无视输出分辨率，直接分别调整水平和垂直的视野角度，核心的代码如下：

// horizontalFOV : 水平视野角度
// verticalFOV  : 垂直视野角度float near = targetCamera.nearClipPlane;
float far = targetCamera.farClipPlane;// 计算水平和垂直方向的视锥体边界
float horizontalHalfAngle = horizontalFOV * 0.5f * Mathf.Deg2Rad;
float verticalHalfAngle = verticalFOV * 0.5f * Mathf.Deg2Rad;float right = Mathf.Tan(horizontalHalfAngle) * near;
float left = -right;
float top = Mathf.Tan(verticalHalfAngle) * near;
float bottom = -top;// 创建自定义投影矩阵
Matrix4x4 projectionMatrix = Matrix4x4.Frustum(left, right, bottom, top, near, far);
targetCamera.projectionMatrix = projectionMatrix;

当我把每个摄像机的视野参数做成可调整的，发给现场测试的哥们，他调了很久，告诉我还是对不上，主要是地面和侧面对不上。。然后认真分析了一下，主要原因是，他这个房间的地面，是倾斜的，两侧屏幕实际是个梯形。。说是为了更好的显示效果。这TM怎么能对的上。。
开始考虑怎么解决。

方案1：

两侧的摄像机，再增加一个斜压缩矩阵。
手工构造一个斜压缩矩阵，用现有的透视矩阵乘以这个矩阵，最终再赋予摄像机。然而尝试了几次，都失败了，弄出来的总是个斜切效果，可能是因为自己数学功底还是太差，对于矩阵的手工构造，一直停留在云雾状态，果断放弃。

方案2：

两边的相机不再直接输出到显示器，而是先渲染到一个RenderTexture，然后，再建一个RawImage铺满屏幕，把RenderTexture通过RawImage进行显示，这时候，就可以写一个Shader，对RawImage的UV采样进行修改：

fixed4 frag (v2f i) : SV_Target
{float s;if(_CompressRate<0)s = (1 - i.uv.x) * -_CompressRate;elses = i.uv.x * _CompressRate;i.uv.y = clamp((i.uv.y-s)/(1-s), 0, 1);return tex2D(_MainTex, i.uv)；
}

新大陆

至此其实基本上已经解决了，然而，就在这个时候，又发现一个新大陆：

// Unity API : Camera.RenderToCubemap
public bool RenderToCubemap (Cubemap cubemap, int faceMask);

居然有现成的API，他可以以当前摄像机位置为视角，直接把360全景渲染到一个立方体纹理中。要是有了这个，那还要啥4个摄像机。。一个相机就够了。
于是尝试了一下。

private void Awake()
{_cubeTexture = new RenderTexture( size, size, 24 ){name = "CubeRenderTexutre",dimension = TextureDimension.Cube};
}private LateUpdate()
{_camera.RenderToCubemap(_cubeTexture);
}

然而，与想象中不一样的是，他渲染的时候，只参考相机的位置，并不会根据摄像机的朝向去渲染，而是按照世界坐标系进行渲染。也就是说，盒子里的前面始终是世界坐标系的z方向。
那么，要想把纹理从盒子里取出来，输出到屏幕上，就比较麻烦。主要是对立方体纹理的采样。经过研究，弄了一个shader出来，传入观察方向、视野角度，让他渲染到一个RawImage。

Shader "Custom/CubemapProjector" {Properties {_Cubemap ("Cubemap", Cube) = "" {}_Direction ("World Direction", Vector) = (0,0,1,0)_FovFactor ("FOV Factor", Vector) = (0.25,0.25,0,0)}SubShader {Tags { "Queue"="Transparent" "RenderType"="Transparent" }LOD 100Pass {CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata {float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f {float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};samplerCUBE _Cubemap;float3 _Direction;float2 _FovFactor;v2f vert (appdata v) {v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = v.uv;return o;}fixed4 frag (v2f i) : SV_Target {// 计算实际视野角度（度）float horizontalFOV = _FovFactor.x * 360.0;float verticalFOV = _FovFactor.y * 360.0;// 转换为弧度并计算tan值float tanHalfH = tan(radians(horizontalFOV) * 0.5;float tanHalfV = tan(radians(verticalFOV)) * 0.5;// 映射UV到方向平面float2 uv = (i.uv - 0.5) * 2.0; // 转换到[-1,1]uv.x *= tanHalfH;uv.y *= tanHalfV;// 创建局部坐标系float3 forward = normalize(_Direction);float3 worldUp = abs(forward.y) > 0.999 ? float3(0,0,1) : float3(0,1,0);float3 right = normalize(cross(worldUp, forward));float3 up = cross(forward, right);// 计算采样方向float3 viewDir = normalize(uv.x * right + uv.y * up + forward);// 采样立方体贴图fixed4 col = texCUBE(_Cubemap, viewDir);return col;}ENDCG}}
}

研究到这里，发现，其实这个跟四个相机也没有什么差别，因为最关键的还是视野角度和观察方向，这俩个要素是不可能脱离的，然后，Cubemap的方案就没有再继续深入研究下去了，因为经过分析，其实4相机和cubemap的渲染方法各有优劣，在性能上，也相差不大。
这个项目目前还没有竣工，以后最终选取哪一种给方案也还没有定论，目前来看，决定暂时还是用4相机。

记录一下项目历程，主要是以自己以后查看，如果能有幸帮助到后人，那就更好了。