当前位置:   article > 正文

序列帧 粒子效果_笔记三十一 —— 使用粒子序列图实现体积云

粒子序列帧

d729ef498ec609091d8b78a01497c5dd.png

最近看到一个效果还不错的体积云,了解了下其实现原理,将其实现思路做一个简单的整理和记录,并重写该Shader
原始效果图:

a054fb1fdba56afa24481cb0182f2f86.png


该效果来自名为CloudPuff的Unity资源包中示例场景截图
实现的主要思路为:

  • 使用MatCap对预先存储的光照进行采样
    MatCap是使用存储了视空间下不同法线方向的球形光照纹理,在计算光照时直接对纹理进行采样,运算效率高,但也有其局限,只能适用于单一材质的模型,并且无法对光源位置和相机位置的变化做出响应。MatCap Shader的基本思路是,使用某特定材质球的贴图,作为当前材质的视图空间环境贴图(view-space environment map),来实现具有均匀表面着色的反射材质物体的显示。考虑到物体的所有法线的投影的范围在x(-1,1),y(-1,1),构成了一个圆形,所以MatCap 贴图中存储光照信息的区域是一个圆形。
    关于MatCap的详细原理,可以参考这里和这里
  • 使用粒子的序列图播放实现云层的变化

328f8c47515c38696562dd1f2984e9cf.png


勾选粒子的 TextureSheetAnimation 的选项,Shader中传入云层的序列帧纹理并设置相关参数即可实现云层的序列帧动画

Shader部分
Shder主要分为两部分,一个是边缘光Pass,另一个是主体光照颜色计算Pass: 边缘光Pass部分
边缘光Pass部分比较简单,主要是对 边缘光的纹理进行采样:

  1. v2f vert(a2v v){
  2. v2f o;
  3. o.pos=UnityObjectToClipPos(v.vertex);
  4. o.uv=TRANSFORM_TEX(v.texcoord,_MainTex);
  5. o.scrPos=ComputeScreenPos(o.pos);
  6. o.color=v.color;
  7. return o;
  8. }
  9. fixed4 frag (v2f i):SV_Target{
  10. fixed4 col=tex2D(_MainTex,i.uv);
  11. col.rgb*=0;
  12. col.a*=i.color.a;
  13. fixed4 edgeCol=tex2D(_EdgeLight,i.scrPos.xy/i.scrPos.w);
  14. col.rgb=(edgeCol)*col.a*_EdgeStrength;
  15. return col;
  16. }

由于边缘光的纹理是通过RenderTexture对当前相机角度下的"场景"进行捕捉,采样时使用当前像素点对应的视口坐标,在计算颜色输出时,使用到了主纹理的Alpha通道值

主体光照计算部分
主体光照计算部分主要是对MatCap的球形纹理进行采样,由于纹理的坐标范围是[0,1],而视空间下的法线范围是在[-1,1],因此需要将视空间下的法线做一个范围映射:
即:

o.cap.xyz=worldNormal*0.5+0.5;

另外,在开启软粒子效果时,为了使粒子与场景中的有深度值的物体之间过渡自然,会有一个深度判断,并将判断结果影响其Alpha值,
雾效的叠加过程中,与边缘光的纹理处理类似,是通过RenderTexture对当前相机角度下的"场景"进行捕捉,采样使用当前像素点对应的视口坐标
着色器代码,附相关注释:

  1. v2f vert(a2v v){
  2. v2f o;
  3. o.pos=UnityObjectToClipPos(v.vertex);
  4. o.uv=TRANSFORM_TEX(v.texcoord,_MainTex);
  5. //法线变换,转置逆矩阵
  6. fixed3 worldNormal=normalize(unity_WorldToObject[0].xyz*v.normal.x+unity_WorldToObject[1].xyz*v.normal.y+unity_WorldToObject[2].xyz*v.normal.z);
  7. //转换法线到视空间
  8. worldNormal=mul((fixed3x3)UNITY_MATRIX_V,worldNormal);
  9. o.cap.xyz=worldNormal*0.5+0.5;
  10. //计算顶点在屏幕空间的位置,未归一化
  11. o.scrPos=ComputeScreenPos(o.pos);
  12. //如果使用软粒子效果,计算视空间下的深度值,后续与场景深度值作比较
  13. #ifdef SOFTPARTICLES_ON
  14. COMPUTE_EYEDEPTH(o.scrPos.z);
  15. #endif
  16. UNITY_TRANSFER_FOG(o,o.pos);
  17. o.color=v.color;
  18. return o;
  19. }
  20. fixed4 frag(v2f i):SV_Target{
  21. //如果使用软粒子效果,通过深度值比较,距离云层近的物体,云层透明度高
  22. #ifdef SOFTPARTICLES_ON
  23. //对相机深度纹理采样(输入的是未归一化的srcPos,方法内部做srcPos.xy/srcPos.w透视除法,得到视口坐标)
  24. //通过LinearEyeDepth方法转换到视空间下的深度
  25. fixed sceneZ=LinearEyeDepth(SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture,UNITY_PROJ_COORD(i.scrPos)));
  26. //这里的i.scrPos.z经过 COMPUTE_EYEDEPTH(o.scrPos.z) 已经存储的是视空间里的深度
  27. fixed partZ=i.scrPos.z;
  28. fixed fade=saturate(_ParticleFade*(sceneZ-partZ));
  29. i.color.a*=fade;
  30. #endif
  31. //光照纹理采样
  32. fixed4 mc=tex2D(_MatCapLight,i.cap);
  33. mc.a=1;
  34. //主纹理采样
  35. fixed4 col=tex2D(_MainTex,i.uv);
  36. col.rgb*=i.color*mc*3;
  37. col.a*=i.color.a;
  38. //雾效叠加
  39. #if ADVFOG_ON
  40. fixed4 advFog=tex2D(_AdvFog,i.scrPos.xy/i.scrPos.w);
  41. col.rgb=col.rgb+(advFog*_FogStrength);
  42. #endif
  43. #if ADVFOG_ON
  44. advFog.rgb*=0.75;
  45. UNITY_APPLY_FOG_COLOR(i.fogCoord,col,advFog);
  46. #endif
  47. #if ADVFOG_OFF
  48. UNITY_APPLY_FOG_COLOR(i.fogCoord,col,UNITY_LIGHTMODEL_AMBIENT);
  49. #endif
  50. return col;
  51. }

场景设置部分
场景设置中,需要提前准备与SkyBox对应的光照纹理,边缘光纹理,环境纹理,即:

76d99cd411b3daca7bce07497f9294b6.png

d4ad457faf2f7b5c35024d85958f05c9.png

25ca6afab150afeb0d84ceecf12c8ceb.png


并将该纹理赋予三个双面球体,为什么要这么做呢?
前面提到过,MatCap的局限在于,使用MatCap的光照效果,由于纹理贴图是静态的,因此在场景中无法对光源和相机的位置变化做出光影反应,同理使用RenderTexture作为边缘光和雾效纹理也会有同样的问题

那如果这个纹理是动态的,会随着相机角度变化而变化呢?

因此,在上述 双面球体的中心分别使用三个相机,并与场景主相机保持同步旋转,这样采到的RendTexture就能随着主相机的角度变化而变化,由于光照纹理是使用MatCap,因此需要将相机改为正交模式,并将近裁剪面设置为 1,远裁剪面设置为-1,这样相机就能够得到一个球外视角,中间球形的动态纹理,
对于边缘光纹理和雾效纹理,相机保持透视模式,设置较小的远近裁剪面范围,只捕捉到双面球体内部的贴图就可以了

Shader的_MainTex为一个云朵的序列帧图:

c4fbe8272bd0cf14f515df74997bd30e.png

新建一个粒子系统,并将该Shader生成的材质赋予该粒子系统,勾选 TextureSheetAnimation 选项,设置相关参数

单个粒子系统生成效果:

10de613cd4d9ccfa3519de3a6d07cf91.png
https://www.zhihu.com/video/1173264466984083456


多个粒子系统生成效果:

9923d9b408c58c550300a32311836c0e.png
https://www.zhihu.com/video/1173264527700799488

相关参考:

天源:Matcap Shader 详解【1】-基础思想与U3D实现​zhuanlan.zhihu.com
747331e3312404e9a7ca1f09ce3601b6.png

https://blog.csdn.net/poem_qianmo/article/details/55803629​blog.csdn.net
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/138377
推荐阅读
相关标签
  

闽ICP备14008679号