首页 > 代码库 > Unity 3D 海水的实现2 折射与反射 离屏相机的渲染
Unity 3D 海水的实现2 折射与反射 离屏相机的渲染
版本:unity 5.4.1 语言:C#
在上节博文实现后,我添加了一些场景的元素,海水的效果大概是这个样子的:
接下来的目标是实现海水的折射和反射,书中使用的Unity应该是4.x时代的,Unity自带基础包是5.x的,然后我再在网上看了一个例子,看了下来基本原理都差不多。
还记得移动端简单阴影的实现吧,对,就是添加一个相机把照到的玩家传给Shader后,显示在地上,原理是一样的。
首先获取到玩家的相机,新建相机到玩家当前相机,经过一个反射矩阵的旋转后,截取海平面以上的渲染,然后再将渲染出来的Texture传递给Shader处理;折射更加简单,不用矩阵旋转,当前位置的海平面以下渲染出Texture,再传递给Shader。
下面是代码,生成Mesh的代码,我就去掉了:
public class Ocean : MonoBehaviour { // 一片区域网格横纵数量 public int width = 32; public int height = 32; int g_height; // 组成网格横纵的线条数量 int g_width; Vector2 sizeInv; // 区域的数量和大小 public int tiles = 2; public Vector3 size = new Vector3(150f, 1f, 150f); // 材质 public Material material; public Shader oceanShader; public Transform player; public Transform sun; public Vector4 SunDir; // 网格相关 Vector3[] vertices; //顶点 Vector3[] normals; //法线 Vector4[] tangents; //三角 Mesh baseMesh; // LOD,越在靠后List的Mesh,网格越少 int maxLOD = 4; List<List<Mesh>> tiles_LOD; // 折射反射相关 public bool renderReflection = true; //是否启用反射折射 public int renderTexWidth = 128; public int renderTexHeight = 128; RenderTexture reflectionTexture = null; RenderTexture refractionTexture = null; Camera offscreenCam = null; bool reflectionRefractionEnabled = false; //是否初始化完成 // Use this for initialization void Start() { // 折射反射 sizeInv = new Vector2(1f / size.x, 1f / size.z); SetupOffscreenRendering(); // 添加离屏相机 if (!renderReflection) EnableReflection(false); else EnableReflection(true); // 计算线条数量 g_height = height + 1; g_width = width + 1; // LOD,Mesh所在的List的LOD List编号越小,Mesh的网格越多 tiles_LOD = new List<List<Mesh>>(); for (int LOD = 0; LOD < maxLOD; LOD++) { tiles_LOD.Add(new List<Mesh>()); } for (int y = 0; y < tiles; ++y) { for (int x = 0; x < tiles; ++x) { Debug.Log("创建了一片水"); float cy = y - Mathf.Floor(tiles * 0.5f); float cx = x - Mathf.Floor(tiles * 0.5f); // 创建一片水 GameObject tile = new GameObject("WaterTile"); // 坐标以当前节点为中心 tile.transform.parent = transform; tile.transform.localPosition = new Vector3(cx * size.x, 0f, cy * size.z); // 添加Mesh渲染组件 tile.AddComponent<MeshFilter>(); tile.AddComponent<MeshRenderer>().material = material; tile.layer = LayerMask.NameToLayer("Water"); tiles_LOD[0].Add(tile.GetComponent<MeshFilter>().mesh); } } GenerateHeightmap(); } // 设置折射反射 void SetupOffscreenRendering() { // 创建折射反射图 RecalculateRenderTextures(); // 创建Camera实现离屏渲染 GameObject cam = new GameObject(); cam.name = "DeepWaterOffscreenCam"; cam.transform.parent = transform; offscreenCam = cam.AddComponent<Camera>(); offscreenCam.clearFlags = CameraClearFlags.Color; offscreenCam.depth = -1; offscreenCam.enabled = false; } // 当设置reflection和refraction被禁用的时候,设置lod为1 void EnableReflection(bool isActive) { renderReflection = isActive; if (!isActive) // 关闭反射折射,使用波光粼粼的图片替代 { material.SetTexture("_Reflection", null); material.SetTexture("_Refraction", null); oceanShader.maximumLOD = 1; } else // 启用反射折射 { OnDisable(); oceanShader.maximumLOD = 2; RecalculateRenderTextures(); } } // 重新生成反射折射的缓存图片 void RecalculateRenderTextures() { if (renderReflection) { reflectionTexture = new RenderTexture(renderTexWidth, renderTexHeight, 0); refractionTexture = new RenderTexture(renderTexWidth, renderTexHeight, 0); reflectionTexture.wrapMode = TextureWrapMode.Clamp; refractionTexture.wrapMode = TextureWrapMode.Clamp; reflectionTexture.isPowerOfTwo = true; refractionTexture.isPowerOfTwo = true; material.SetTexture("_Reflection", reflectionTexture); material.SetTexture("_Refraction", refractionTexture); material.SetVector("_Size", new Vector4(size.x, size.y, size.z, 0f)); } } // 删除反射折射使用的缓存图片 void OnDisable() { if (reflectionTexture != null) { DestroyImmediate(reflectionTexture); } if (refractionTexture != null) { DestroyImmediate(refractionTexture); } reflectionTexture = null; refractionTexture = null; } // 折射反射渲染物体 void RenderObject() { if (Camera.current == offscreenCam) return; if (reflectionTexture == null || refractionTexture == null) return; if (renderReflection) RenderReflectionAndRefraction(); } public LayerMask renderLayers = -1; // 具体的渲染,使用第二个相机拷贝当前相机的设置 void RenderReflectionAndRefraction() { // 获取当前角色身上的主相机 Camera renderCamera = Camera.main; Matrix4x4 originalWorldToCam = renderCamera.worldToCameraMatrix; // 获取世界到相机的矩阵,如果改变了相机的矩阵就不会再根据原Transform渲染,除非调用ResetWorldToCameraMatrix int cullingMask = ~(1 << 4) & renderLayers.value; //剪裁Mask,忽略水本身 // 计算反射矩阵 float d = -transform.position.y; Matrix4x4 reflection = Matrix4x4.zero; CameraHelper.CalculateReflectionMatrix(ref reflection, new Vector4(0f, 1f, 0f, d)); //这里不明白,总是弄出了反射矩阵 // 根据反射矩阵计算离屏相机位置和矩阵 offscreenCam.backgroundColor = RenderSettings.fogColor; offscreenCam.transform.position = reflection.MultiplyPoint(renderCamera.transform.position); //当前相机置换到反射矩阵中 offscreenCam.transform.rotation = renderCamera.transform.rotation; offscreenCam.worldToCameraMatrix = originalWorldToCam * reflection; offscreenCam.cullingMask = cullingMask; //设置剪裁mask offscreenCam.targetTexture = reflectionTexture; //将反射缓存图片添加到离屏相机里,跟之前阴影是一个原理 // 因为反射截取到的图片是翻转的,所以需要设置翻转 GL.SetRevertBackfacing(true); // 获取剪裁平面,transform.position.y是当前海水的高度,最后两个值的正负表示剪裁的方向 Vector4 cameraSpaceClipPlane = CameraHelper.CameraSpacePlane(offscreenCam, new Vector3(0.0f, transform.position.y, 0.0f), Vector3.up, 1.0f); Matrix4x4 projection = renderCamera.projectionMatrix; //获得渲染相机的投影矩阵 Matrix4x4 obliqueProjection = projection; offscreenCam.fieldOfView = renderCamera.fieldOfView; //设置FOV offscreenCam.aspect = renderCamera.aspect; //设置宽高比 CameraHelper.CalculateObliqueMatrix(ref obliqueProjection, cameraSpaceClipPlane); // 开始真正的渲染 offscreenCam.projectionMatrix = obliqueProjection; if (!renderReflection) offscreenCam.cullingMask = 0; offscreenCam.Render(); GL.SetRevertBackfacing(false); // 折射渲染 offscreenCam.cullingMask = cullingMask; offscreenCam.targetTexture = refractionTexture; obliqueProjection = projection; // 将渲染相机的各个参数设置给离屏相机 offscreenCam.transform.position = renderCamera.transform.position; offscreenCam.transform.rotation = renderCamera.transform.rotation; offscreenCam.worldToCameraMatrix = originalWorldToCam; // 获取剪裁平面,计算投影矩阵 cameraSpaceClipPlane = CameraHelper.CameraSpacePlane(offscreenCam, new Vector3(0.0f, transform.position.y, 0.0f), Vector3.up, -1.0f); CameraHelper.CalculateObliqueMatrix(ref obliqueProjection, cameraSpaceClipPlane); offscreenCam.projectionMatrix = obliqueProjection; offscreenCam.Render(); offscreenCam.projectionMatrix = projection; offscreenCam.targetTexture = null; } // 初始化Mesh信息,请参考上一节 void GenerateHeightmap(){} // 这边应该是Update的,但写在Update中会报GUI Window tries to begin rendering while something else has not finished rendering的错误 void OnGUI() { // 设置玩家、太阳角度,并更新反射折射,折射反射是根据玩家视角来计算的 if (player == null) player = GameObject.FindGameObjectWithTag("Player").GetComponent<Transform>(); if (sun != null) { SunDir = sun.transform.forward; material.SetVector("_SunDir", SunDir); } if (renderReflection) RenderObject(); } }
然后是CameraHelper的脚本:
public class CameraHelper { private static float sgn(float a) { if (a > 0.0f) return 1.0f; if (a < 0.0f) return -1.0f; return 0.0f; } public static void CalculateObliqueMatrix(ref Matrix4x4 projection, Vector4 clipPlane) { Vector4 q = projection.inverse * new Vector4(sgn(clipPlane.x), sgn(clipPlane.y), 1.0f, 1.0f); Vector4 c = clipPlane * (2.0F / (Vector4.Dot(clipPlane, q))); projection[2] = c.x - projection[3]; projection[6] = c.y - projection[7]; projection[10] = c.z - projection[11]; projection[14] = c.w - projection[15]; } public static Vector4 CameraSpacePlane(Camera cam, Vector3 pos, Vector3 normal, float sideSign) { Vector3 offsetPos = pos + normal * 0.02f; Matrix4x4 m = cam.worldToCameraMatrix; Vector3 cpos = m.MultiplyPoint(offsetPos); Vector3 cnormal = m.MultiplyVector(normal).normalized * sideSign; return new Vector4(cnormal.x, cnormal.y, cnormal.z, -Vector3.Dot(cpos, cnormal)); } public static void CalculateReflectionMatrix(ref Matrix4x4 reflectionMat, Vector4 plane) { reflectionMat.m00 = (1F - 2F * plane[0] * plane[0]); reflectionMat.m01 = (-2F * plane[0] * plane[1]); reflectionMat.m02 = (-2F * plane[0] * plane[2]); reflectionMat.m03 = (-2F * plane[0] * plane[3]); reflectionMat.m10 = (-2F * plane[1] * plane[0]); reflectionMat.m11 = (1F - 2F * plane[1] * plane[1]); reflectionMat.m12 = (-2F * plane[1] * plane[2]); reflectionMat.m13 = (-2F * plane[1] * plane[3]); reflectionMat.m20 = (-2F * plane[2] * plane[0]); reflectionMat.m21 = (-2F * plane[2] * plane[1]); reflectionMat.m22 = (1F - 2F * plane[2] * plane[2]); reflectionMat.m23 = (-2F * plane[2] * plane[3]); reflectionMat.m30 = 0F; reflectionMat.m31 = 0F; reflectionMat.m32 = 0F; reflectionMat.m33 = 1F; } }
花了三天时间终于整理出来了比较精简的代码,不过渲染部分的矩阵,我还是没有太理解。
这边提一下作者的Shader,因为是老版本创建的Shader,所以如果颜色空间不使用Gamma的话,反射的倒影会用问题。还有作者的代码是有点问题的,如果想直接用他的代码,最好对比一下我这边的代码,把一些错误排掉。
完成之后的效果是这样的:
有折射和反射效果,但总感觉这个颜色很不对劲,没错,这是上一节留下的一个BUG,Mesh中没有添加法线,你可以自己尝试在Mesh初始化的时候添加,或者像我这样马后炮:
normals = new Vector3[baseMesh.vertices.Length]; for (int i = 0; i < baseMesh.vertices.Length; ++i) normals[i] = Vector3.Normalize(new Vector3(0, 1f, 0)); for (int k = 0; k < tiles_LOD[0].Count; ++k) { Mesh meshLOD = tiles_LOD[0][k]; meshLOD.vertices = baseMesh.vertices; meshLOD.normals = normals; meshLOD.tangents = baseMesh.tangents; }
这段代码放到OnGUI中,不过只要运行一次就好,不然电脑会很卡。。
最终效果:
功夫不负有心人啊,花了我很长的时间,不过对比第一张图和最后一张图的效果,我感觉一切都是值得的,也了解了Unity4.x和5.x的一些区别,总的来说大概明白了折射反射的原理。
下一节的文章,我想挑战一下自己深入了解一下反射矩阵,波浪的东西留到后面再做。
Unity 3D 海水的实现2 折射与反射 离屏相机的渲染