Schreiben Sie vor
Es ist drei Jahre her, seit Unity studiert und gearbeitet hat. Das erste, was mir in der Entwicklung begegnet, ist die Baidu-Suche. Ich hatte nie meine eigenen Ideen und schäme mich. Da ich dachte, dass ich nicht mehr so durcheinander sein kann, beschloss ich auch, einen Blog zu eröffnen, um aufzuzeichnen, was ich für die Entwicklung nützlich fand. Ich hoffe, dass ich eines Tages in der Zukunft nicht das Gefühl habe, dass mein Leben umsonst ist. Wenn ich kann einigen bedürftigen Schülern helfen, dann könnte es nicht besser sein.
Über Shader
Apropos, es ist auch sehr verwandt mit Shader, weil ich mir vorher C # beigebracht habe und mein erster Job die Entwicklung des Website-Backends ist. Seit ich Unity gelernt habe, bin ich mit der Straße vertraut und es ist nicht schwierig Beim Durchsuchen einiger Artikel wurde mir klar, dass ich nur ein wenig weiß, aber ich denke, das Interview sollte kein großes Problem sein. Erst in der Nacht vor dem Interview sah ich einige Interviewfragen und erkannte die Existenz von Shader Das Interview am nächsten Tag hatte zufällig mit Shader zu tun. Der erste Artikel des Blogs bezieht sich auf Shader, wahrscheinlich um zur ursprünglichen Absicht zurückzukehren, schließlich wurde das erste Mal in diesem Jahr darauf gepflanzt.
In Bezug auf diesen Shader muss ich über den Blogger Candycat sprechen . Nachdem ich gearbeitet hatte, stieß ich auf Shader-Probleme, die im Grunde unmöglich persönlich zu lösen waren. Die Person, die mich nahm, empfahl mir diesen Blogger. Zu dieser Zeit habe ich mich nicht einmal mit einem CSDN-Konto angemeldet, also habe ich den Shader kennengelernt, indem ich mir ihre Artikel einzeln angesehen habe. Während dieser Zeit habe ich auch die Shader-Bücher gekauft, die sie veröffentlicht hat, aber ich habe ' Ich habe es noch nicht zu Ende gelesen und schäme mich sehr. Nachdem ich bisher gelernt habe, obwohl ich den Shader nicht verstehen kann, ist es kein großes Problem, zumindest den Code des Shaders zu lesen und einige einfache Shader-Effekte zu schreiben. Apropos Candycat ist immer noch ein Mädchen, jünger als ich, die unbewusste Bewunderung fügt einen weiteren Punkt hinzu.
Ich möchte ein Shadertoy schreiben, weil ich endlich Zeit habe, die Shadetoy-bezogenen Artikel des Bloggers zu lesen. Aber um ehrlich zu sein, ich glaube, ich habe bereits ein gewisses Verständnis für den Shader, aber es ist immer noch sehr schwer zu lernen. Nach zwei Wochen Herumtasten habe ich wahrscheinlich ein wenig verstanden, deshalb möchte ich dieses Shadertoy als Interventionspunkt verwenden meine eigenen Studiennotizen zu beginnen. Ohne es zu wissen, habe ich viel Unsinn geschrieben, also fangen wir einfach an, den Text zu schreiben.
Text
Natürlich können Sie hier einige Effekte und Prinzipien von Shadertoy anklicken , um zu sehen, ob Sie interessiert sind . Da ich Unity lerne, bevorzuge ich Shadertoy, nachdem ich mich an Unitys Shaderlab gewandt habe. Das erste, worüber ich sprechen möchte , ist die Vorlage von Candycats Shadertoy zu Shaderlab. Unten ist der Originalcode des Bloggers.
//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
}Um ehrlich zu sein, ist der Code verblüfft, bevor einige Zeilen betrachtet werden. Warum befindet sich außerhalb des Sub-Shaders ein großer Teil des Shaderlab-Codes? Warum werden dem Sub-Shader-Kanal drei Zeilen Pragma-Anweisungen hinzugefügt? Was ist mit Vertex-Shadern und Fragment-Shadern? Die Fragen kamen zwar einzeln heraus, haben aber trotzdem die Kugel gebissen und den Code erneut geschrieben (das Schreiben von Code ist wirklich wichtig!). Ich zwang mich, die Informationen zu überprüfen, sah schließlich einen Hinweis und beklagte mich erneut, dass ich nicht gut lernen konnte.
Tatsächlich habe ich beim Betrachten des Codes ein Schlüsselwort übersehen
CGINCLUDEAls ich es zum ersten Mal sah, verstand ich CGINCLUDE direkt als CGPROGRAMM von Shaderlab. Als ich den Code eingab, fügte ich sicher ein # -Zeichen davor hinzu. Es war eine schreckliche Wette. Im obigen Code gibt es ein benutzerdefiniertes Codesegment zwischen CGINCLUDE und ENDCG, das im aktuellen Shaderlab weiterhin aufgerufen wird, sodass keine Include-Informationen vorhanden sind. Die Vert- und Frag-Referenzen unter dem Kanal des Subhaders SubShader sind zufällig die beiden Funktionen, die im obigen benutzerdefinierten Codesegment definiert sind. Nachdem ich diese Vorlage verstanden habe, stelle ich sie plötzlich auf eine Version zurück, die ich anhand der obigen Vorlage verstehen kann. Der Code lautet wie folgt.
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
}Persönlich denke ich, dass die Logik sehr klar ist, wenn ich so schreibe. Schließlich bin ich es immer noch gewohnt, den Effekt direkt in Unity zu sehen. Der Browser schaut auf Shadertoy. Nach dem Lernen wird gehofft, dass einige der Effekte normal in Einheit ablaufen. Natürlich werden sie in Shadertoy konvertiert, um zu sehen, wie sich der Effekt im Web auswirkt.
Es gibt viel Unsinn, also werde ich diesmal hier aufhören. Ich habe nicht das Gefühl, dass ich zu viel auf einmal schreiben kann, so wie ich früher Shader gelernt habe. Ich möchte immer einen ganzen großen Kuchen auf einmal essen, der vor der Verdauung und Absorption entladen wird. Diese Analogie ist ein bisschen ekelhaft, aber es ist wahr. Es ist lange her, dass ich angefangen habe, hart zu lernen. Ich hoffe, dass dies ein guter Anfang ist und den gesamten Prozess des Lernens von Shadetoy aufzeichnet.
Ausdauer ~