扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了Unity Shader实现图形绘制的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站专业为企业提供枣强网站建设、枣强做网站、枣强网站设计、枣强网站制作等企业网站建设、网页设计与制作、枣强企业网站模板建站服务,十年枣强做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
Unity Shader学习:2D图形绘制(蓝天白云大海),供大家参考,具体内容如下
基本是一些数学上的算法
shader部分:
Shader "Unlit/2D-Ocean" { Properties { _MainTex ("Texture", 2D) = "white" {} _SunColor("SunColor",Color) = (1,1,1,1) _SunRoundColor("SunRoundColor",Color) = (1,0,0,1) _WaveColor1("WaveColor1",Color) = (1,1,1,1) _WaveColor2("WaveColor2",Color) = (1,1,1,1) _WaveColor3("WaveColor3",Color) = (1,1,1,1) _WaveColor4("WaveColor4",Color) = (1,1,1,1) _WaveColor5("WaveColor5",Color) = (1,1,1,1) _SkyColor("SkyColor",Color)=(0,1,0,1) _CloudPos1("CloudPos1",Vector)=(0,0,0,0) _CloudPos2("CloudPos2",Vector) = (0,0,0,0) _CloudPos3("CloudPos3",Vector) = (0,0,0,0) _CloudPos4("CloudPos4",Vector) = (0,0,0,0) _CloudPos5("CloudPos5",Vector) = (0,0,0,0) _WaveFactor1("WaveFactor1",Vector)=(0,0,0,0) _WaveFactor2("WaveFactor2",Vector) = (0,0,0,0) _WaveFactor3("WaveFactor3",Vector) = (0,0,0,0) _WaveFactor4("WaveFactor4",Vector) = (0,0,0,0) _WaveFactor5("WaveFactor5",Vector) = (0,0,0,0) _SunPos("SunPos",Vector)=(0,0,0,0) _SunRoundFactor("SunRoundFactor",Range(0.0,2.0)) = 0.1 _SunSize("SunSize",Range(0.0,1.0)) = 1.0 } SubShader { Tags { "RenderType"="Transparent" } LOD 100 Blend SrcAlpha OneMinusSrcAlpha Pass { 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; }; sampler2D _MainTex; float4 _MainTex_ST; float4 _CloudPos1; float4 _CloudPos2; float4 _CloudPos3; float4 _CloudPos4; float4 _CloudPos5; float4 _WaveColor1; float4 _WaveColor2; float4 _WaveColor3; float4 _WaveColor4; float4 _WaveColor5; float4 _WaveFactor1; float4 _WaveFactor2; float4 _WaveFactor3; float4 _WaveFactor4; float4 _WaveFactor5; float4 _SunColor; float4 _SunRoundColor; float4 _SunPos; float _SunRoundFactor; float _SunSize; float4 _SkyColor; //画单个圆(uv,位置,大小,抗锯齿) float4 Circle(float2 uv, float2 center, float size, float blur) { uv = uv - center; uv = uv / size; float len = length(uv); //长度大于一个半径单位透明度为0,小于透明度为1 float val = smoothstep(1.0,1.0-blur, len); return float4(1, 1, 1, val); } //画单个云 float4 DrawCloud(float2 uv, float2 center, float size) { uv = uv - center; uv = uv / size; float4 col = Circle(uv, float2(0.0, 0.0), 0.2, 1); //将圆中不想要的部分剪切掉 col = col * smoothstep(-0.1, -0.1 + 0.01, uv.y); //圆摆放不同位置组成云 col += Circle(uv, float2(0.15, -0.05), 0.1, 1); col += Circle(uv, float2(0.0, -0.1), 0.11, 1); col += Circle(uv, float2(-0.15, -0.1), 0.1, 1); col += Circle(uv, float2(-0.3, -0.08), 0.1, 1); col += Circle(uv, float2(-0.2, 0.0), 0.15, 1); return col; } //画复数云 float4 DrawClouds(float2 uv) { uv.x += 0.03*_Time.y; //使得左右连续 uv.x = frac(uv.x + 0.5) - 0.5; float4 col = DrawCloud(uv, _CloudPos1.xy, 0.1); col += DrawCloud(uv, _CloudPos2.xy, 0.12); col += DrawCloud(uv, _CloudPos3.xy, 0.14); col += DrawCloud(uv, _CloudPos4.xy, 0.16); col += DrawCloud(uv, _CloudPos5.xy, 0.18); return col; } //画太阳光环 float4 DrawSunCircle(float2 uv,float2 center,float size) { uv = uv - center; uv = uv / size; //atan2返回点(x,y)与x轴的夹角,范围(-π,π] //获取极坐标的θ角度 float degree = atan2(uv.y , uv.x ) + _Time.y * -0.1; //uv向量离中心点距离 //获取极坐标的r=x2+y2开方 float len = length(uv); //根据极坐标玫瑰线:r(θ)=a*sin(kθ) //求得r;a为扩散幅度,k为花瓣数*0.5 float r = 0.3*abs(sin(degree*5.0)); //画花瓣 //保留r值小于到中心点距离的所有像素 float sunRound= smoothstep(r + 0.1 + _SunRoundFactor, r + _SunRoundFactor, len); return float4(1,1,1,sunRound)*_SunRoundColor; } //画波浪(参数:uv,频率,振幅,整体高度,移动速度) float4 DrawWave(float2 uv,float waveFrequency,float waveAmplitude,float waveHeight,float speed) { uv.x += speed * _Time.y; uv.y += sin(_Time.y+waveHeight)*0.02; //uv.y大于sin函数的部分透明度为0,小于的部分透明度为1 float val = uv.y - sin(uv.x*waveFrequency)*waveAmplitude - waveHeight; val = smoothstep(0.001,0.0, val); return float4(1, 1, 1, val); } //画背景 float4 DrawBackground(float2 uv) { float4 val = lerp(float4(1,1,1,1), _SkyColor, uv.y); return val; } //混合图层(b为前景,a为背景) float4 LerpImages(float4 a, float4 b) { return float4(lerp(a, b, b.a).rgb, a.a + b.a); } v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } float4 frag (v2f i) : SV_Target { //太阳中心 float4 sunCoreColor = Circle(i.uv, _SunPos.xy, _SunSize, 0.05)*_SunColor; //太阳光环 float4 sunAroundColor = DrawSunCircle(i.uv, _SunPos.xy, _SunSize); //云 float4 cloudsColor = DrawClouds(i.uv); //波浪 float4 wave1 = DrawWave(i.uv, _WaveFactor1.x, _WaveFactor1.y, _WaveFactor1.z, _WaveFactor1.w)*_WaveColor1; float4 wave2 = DrawWave(i.uv, _WaveFactor2.x, _WaveFactor2.y, _WaveFactor2.z, _WaveFactor2.w)*_WaveColor2; float4 wave3 = DrawWave(i.uv, _WaveFactor3.x, _WaveFactor3.y, _WaveFactor3.z, _WaveFactor3.w)*_WaveColor3; float4 wave4 = DrawWave(i.uv, _WaveFactor4.x, _WaveFactor4.y, _WaveFactor4.z, _WaveFactor4.w)*_WaveColor4; float4 wave5 = DrawWave(i.uv, _WaveFactor5.x, _WaveFactor5.y, _WaveFactor5.z, _WaveFactor5.w)*_WaveColor5; //背景 float4 backgroundColor = DrawBackground(i.uv); //图层叠加 float4 finalColor = LerpImages(backgroundColor, sunAroundColor); finalColor = LerpImages(finalColor, sunCoreColor); finalColor= LerpImages(finalColor, wave1); finalColor = LerpImages(finalColor, wave2); finalColor = LerpImages(finalColor, wave3); finalColor = LerpImages(finalColor, wave4); finalColor = LerpImages(finalColor, wave5); finalColor = LerpImages(finalColor, cloudsColor); return finalColor; } ENDCG } } }
看完上述内容,是不是对Unity Shader实现图形绘制的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流