Write in front
It has been three years since Unity has been studying and working. The first thing I encounter in development is Baidu search. I have never had my own ideas, and I am ashamed. Thinking that I can no longer be so muddled, I also decided to open a blog to record what I found useful in the development. I hope that one day in the future, I won’t feel that my life is in vain. If I can help some students in need, then That's great.
About Shader
Speaking of it, it is also very related to Shader, because I have taught myself C# before, and my first job is the development of the website backend. Since learning Unity, I have been familiar with the road and it is not difficult. After browsing some articles, I realized that I just know a little bit, but I think the interview should not be a big problem. Just the night before the interview, I saw some interview questions and realized the existence of Shader. As a result, the interview on the next day happened to be related to Shader. The first article of the blog is related to Shader, probably to return to the original intention, after all, the first time that year was planted on it.
Regarding this shader, I have to talk about the blogger candycat . After working, I encountered shader problems, and basically they couldn't be solved personally. The person who took me recommended this blogger to me. At that time, I didn’t even bother to log in with a CSDN account, so I learned about the shader by looking at her articles one by one. During the period, I also bought the shader books she published, but I haven't finished reading it yet, so I am very ashamed. After learning so far, although I can't understand the shader, at least read the code of the shader and write some simple shader effects is not a big problem. Speaking of Candycat is still a girl, younger than me, the unconscious admiration adds another point.
I want to write a shadertoy because I finally have time to read the blogger’s shadetoy-related articles recently. But to be honest, I think I already have a certain understanding of the shader, but it is still very difficult to learn. After two weeks of groping, I probably understood a little bit, so I want to use this shadertoy as an intervention point to start my own study notes. Unknowingly, I wrote a lot of nonsense, so let's just start writing the text.
text
Needless to say some effects and principles of shadertoy, you can click here to see if you are interested . Because I am learning Unity, I still prefer to use Shadertoy after turning to Unity's Shaderlab. The first thing I want to talk about is the template of candycat 's shadertoy to shaderlab. Below is the original code of the blogger.
//Design By candycat(https://blog.csdn.net/candycat1992)
Shader "Shadertoy/Template" {
Properties{
iMouse ("Mouse Pos", Vector) = (100, 100, 0, 0)
iChannel0("iChannel0", 2D) = "white" {}
iChannelResolution0 ("iChannelResolution0", Vector) = (100, 100, 0, 0)
}
CGINCLUDE
#include "UnityCG.cginc"
#pragma target 3.0
#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define mat4 float4x4
#define iGlobalTime _Time.y
#define mod fmod
#define mix lerp
#define fract frac
#define texture2D tex2D
#define iResolution _ScreenParams
#define gl_FragCoord ((_iParam.scrPos.xy/_iParam.scrPos.w) * _ScreenParams.xy)
#define PI2 6.28318530718
#define pi 3.14159265358979
#define halfpi (pi * 0.5)
#define oneoverpi (1.0 / pi)
fixed4 iMouse;
sampler2D iChannel0;
fixed4 iChannelResolution0;
struct v2f {
float4 pos : SV_POSITION;
float4 scrPos : TEXCOORD0;
};
v2f vert(appdata_base v) {
v2f o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
o.scrPos = ComputeScreenPos(o.pos);
return o;
}
vec4 main(vec2 fragCoord);
fixed4 frag(v2f _iParam) : COLOR0 {
vec2 fragCoord = gl_FragCoord;
return main(gl_FragCoord);
}
vec4 main(vec2 fragCoord) {
return vec4(1, 1, 1, 1);
}
ENDCG
SubShader {
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
}
FallBack Off
}To be honest, the code is stunned before looking at a few lines. Why is there a large section of shaderlab code outside the sub-shader? Why are three lines of pragma instructions added to the sub-shader channel? What about vertex shaders and fragment shaders? Although the questions came out one by one, but still bit the bullet and wrote the code again (writing code is really important!). I forced myself to check the information, and finally saw a clue, and once again lamented that I was not good at learning.
In fact, I missed a keyword when looking at the code
CGINCLUDEWhen I saw it for the first time, I directly understood CGINCLUDE as shaderlab's CGPROGRAM. When typing the code, I confidently added a # sign in front of it. It was a terrible bet. In the above code, between CGINCLUDE and ENDCG is a custom code segment, and it is still called in the current shaderlab, so there is no include information. The vert and frag references under the channel of the subshader SubShader happen to be the two functions defined in the custom code segment above. Suddenly, now that I understand this template, I restore it to a version that I can understand based on the above template. The code is as follows.
Shader "Shadertoy/Template" {
Properties{
iMouse ("Mouse Pos", Vector) = (100, 100, 0, 0)
iChannel0("iChannel0", 2D) = "white" {}
iChannelResolution0 ("iChannelResolution0", Vector) = (100, 100, 0, 0)
}
SubShader {
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
//使用低精度来提升片段着色器的运行速度 一般指fp16 半精度
#pragma fragmentoption ARB_precision_hint_fastest
#include "UnityCG.cginc"
#pragma target 3.0
//定义各种常用宏
#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define mat4 float4x4
#define iGlobalTime _Time.y
#define mod fmod
#define mix lerp
#define fract frac
#define texture2D tex2D
//_ScreenParams为屏幕的分辨率
#define iResolution _ScreenParams
#define PI2 6.28318530718
#define pi 3.14159265358979
#define halfpi (pi * 0.5)
#define oneoverpi (1.0 / pi)
fixed4 iMouse;
sampler2D iChannel0;
fixed4 iChannelResolution0;
struct v2f {
float4 pos : SV_POSITION;
float4 scrPos : TEXCOORD0;
};
v2f vert(appdata_base v) {
v2f o;
o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
//将顶点转成屏幕坐标
o.scrPos = ComputeScreenPos(o.pos);
return o;
}
/*代码是从上到下读取的，要想在方法前面调用还没定义好的main函数，需要先声main方法
或者将main方法写在调用之前，这里将main方法写在后面是为了代码的可观性 因这之后逻辑大都在main方法上编写
*/
vec4 main(vec2 fragCoord);
fixed4 frag(v2f _iParam) : COLOR0 {
/*
1.在四维中有xyzw四个分量 其中xyz三个点与w相除得到归一化的点
2.(_iParam.srcPos.xy/_iParam.srcPos.w)将得到在屏幕中归一化后的屏幕位置
3.最后与屏幕的分辨率相乘获得具体的位置
*/
vec2 fragCoord = ((_iParam.scrPos.xy/_iParam.scrPos.w) * _ScreenParams.xy);
return main(fragCoord);
}
vec4 main(vec2 fragCoord) {
return vec4(1, 1, 1, 1);
}
ENDCG
}
}
FallBack Off
}Personally, I think the logic is clear if I write this way. After all, I am still used to seeing the effect directly in Unity. The browser looks at shadertoy. After learning some of the effects are hoped to run normally in unity, of course, will be converted to shadertoy to see how the effect is on the web.
There is a lot of nonsense, so I will stop here this time. I don't feel like I can write too much at once, just like I used to learn shaders, I always want to eat a whole big pie at once, and it will be discharged before digestion and absorption. This analogy is a bit disgusting but it is true. It’s been a long time since I started studying hard. I hope this will be a good start and record the whole process of learning shadetoy.
Persevere with water droplets and stones~