【ShaderToy】开篇
2015-09-18 06:49
399 查看
写在前面
呜呼,好久没有写博客了,好惭愧。题外话,感觉越大就越想家,希望可以一直和家人在一起,哪怕只是坐在一起不说话也觉得很温暖,一想到要分开眼睛就开始酸,哎。开学还是爬上来老实更新博客学习吧~今天爬上来一看,发现CSDN的博客编辑终于更新了!进步总是好的,以前的编辑器实在很捉急。使用这种标记语言的确方便了很多,但好像颜色字体没法设置?程序员果然对美观没什么追求。
ShaderToy
如果你还没听过ShaderToy,那你就真的错过了一个很好的shader学习网站。我是在群里有一次听到小伙伴们提到这个网站的。点进去就会发现里面有很多很绚丽的shader展示。说简单点,这个网站是专门让人们分享和编写GLSL的pixel shaders的。换句话说,里面那些绚丽的效果仅仅依靠pixel
shaders就可以完成了(当然还有纹理和模型的配合,如有不对请指出),是不是很强大?里面的强人很多,就像头脑风暴一样,让你一次次发出惊叹,原来还可以这样做!但是,这里面也蕴含了很多数学和算法知识,所以你可能会经常发现自己脑袋不够用,跟不上作者的思路。。。不过,脑袋都是靠锻炼的嘛,没有捷径可走,多看多写总是没错的~
强烈建议大家先去逛一逛,有很多很好玩的东西,例如这个人写了一个莫比乌斯带,而这个人写了一个耀眼的小太阳!一开始你很难相信这些完全都是用shader计算出来的。
特点
之前说了,这个网上的所有shader都是GLSL的pixel shaders。那么什么是pixel shader呢?如果我们需要渲染一个刚好铺盖整个屏幕的全屏的方形平板,那么这个方形的fragmentshader就是一个pixel shader。这是因为此时,每一个fragment对应了屏幕上的一个pixel。也因此,pixel shader的很多输入都是相同的。在ShaderToy的每个shader上方,你都可以看到一个Shader Input:
<code class="language-c++ hljs glsl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec3</span> iResolution; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// viewport resolution (in pixels)</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> iGlobalTime; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// shader playback time (in seconds)</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> iChannelTime[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// channel playback time (in seconds)</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec3</span> iChannelResolution[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// channel resolution (in pixels)</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec4</span> iMouse; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// mouse pixel coords. xy: current (if MLB down), zw: click</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> samplerXX iChannel0.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.3</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// input channel. XX = 2D/Cube</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec4</span> iDate; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// (year, month, day, time in seconds)</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">uniform</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> iSampleRate; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// sound sample rate (i.e., 44100)</span></a></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">1</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">2</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">3</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">4</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">5</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">6</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">7</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">8</a></li></ul>
这些就是ShaderToy提供的公共变量,我们可以直接访问。例如,iResolution存储了屏幕分辨率,iGlobalTime提供了shader运行时间,iMouse提供了鼠标点击位置等等。
由于ShaderToy针对的是pixel shaders,这也意味着它们的vertex shaders都是一样的,只需要计算基本的顶点位置和屏幕位置即可。
在Unity中实践
Unity的出现的确给很多shader学习者一个方便的编译和展示平台,我们不再需要每次都用很多代码准备好顶点数据,每次都设置纹理,每次都设置MVP矩阵等等。Unity提供给我们更方便的可视化操作。ShaderToy中很多shader都可以经过一点修改后在Unity中编译运行。当然,也有人这么干过了。例如这位博主。
为了方便后面的编写,我们可以写一个针对ShaderToy的基本模板shader。在这之前,我们有必要弄清楚ShaderToy的Shaders长什么样。如果你仔细观察,其实ShaderToy中的所有shader只有一个必不可少的函数:
<code class="language-c++ hljs glsl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> mainImage( <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">out</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec4</span> fragColor, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">vec2</span> fragCoord )</a></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">1</a></li></ul>
它的输入是一个类型为vec2的fragCoord,对应输入的屏幕位置;输出一个vec4的fragColor,对应该pixel的颜色。很简单对不对!
那么现在我们就可以写出这个模板shader了。
<code class="language-c++ hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">Shader <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"shadertoy/template"</span> { Properties{ iMouse (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Mouse Pos"</span>, Vector) = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) iChannel0(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iChannel0"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>D) = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span> {} iChannelResolution0 (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iChannelResolution0"</span>, Vector) = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) } CGINCLUDE <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#include "UnityCG.cginc" </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> target 3.0 </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> vec2 float2</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> vec3 float3</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> vec4 float4</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> mat2 float2x2</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> iGlobalTime _Time.y</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> mod fmod</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> mix lerp</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> atan atan2</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> fract frac </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> texture2D tex2D</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 屏幕的尺寸</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> iResolution _ScreenParams</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 屏幕中的坐标,以pixel为单位</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> gl_FragCoord ((_iParam.srcPos.xy/_iParam.srcPos.w)*_ScreenParams.xy) </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> PI2 6.28318530718</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> pi 3.14159265358979</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> halfpi (pi * 0.5)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> oneoverpi (1.0 / pi)</span> fixed4 iMouse; sampler2D iChannel0; fixed4 iChannelResolution0; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">struct</span> v2f { float4 pos : SV_POSITION; float4 srcPos : TEXCOORD0; }; v2f vert(appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.srcPos = ComputeScreenPos(o.pos); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> o; } vec4 main(vec2 fragCoord); fixed4 frag(v2f _iParam) : COLOR0 { vec2 fragCoord = gl_FragCoord; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> main(gl_FragCoord); } vec4 main(vec2 fragCoord) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> vec4(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>); } ENDCG SubShader { Pass { CGPROGRAM <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> vertex vert </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> fragment frag </span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">pragma</span> fragmentoption ARB_precision_hint_fastest </span> ENDCG } } FallBack Off }</a></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">1</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">2</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">3</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">4</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">5</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">6</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">7</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">8</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">9</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">10</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">11</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">12</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">13</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">14</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">15</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">16</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">17</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">18</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">19</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">20</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">21</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">22</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">23</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">24</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">25</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">26</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">27</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">28</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">29</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">30</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">31</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">32</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">33</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">34</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">35</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">36</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">37</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">38</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">39</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">40</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">41</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">42</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">43</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">44</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">45</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">46</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">47</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">48</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">49</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">50</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">51</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">52</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">53</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">54</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">55</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">56</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">57</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">58</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">59</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">60</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">61</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">62</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">63</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">64</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">65</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">66</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">67</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">68</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">69</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">70</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">71</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">72</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">73</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">74</a></li></ul>
代码比较简单。主要是在开头定义了一系列宏来和ShaderToy中的GLSL衔接。其中main函数对应了之前的mainImage函数。在后面,我们只需要在CGINCLUDE中定义其他函数,并填充main函数即可。
为了可以响应鼠标操作,我们还可以写一个C#脚本,以便在鼠标进行拖拽时将鼠标位置传递给shader。
<code class="language-C# hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> UnityEngine; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">using</span> System.Collections; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> ShaderToyHelper : MonoBehaviour { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Material _material = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">bool</span> _isDragging = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use this for initialization</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> Start () { Renderer render = GetComponent<Renderer>(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (render != <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) { _material = render.material; } _isDragging = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Update is called once per frame</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> Update () { Vector3 mousePosition = Vector3.zero; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (_isDragging) { mousePosition = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Vector3(Input.mousePosition.x, Input.mousePosition.y, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { mousePosition = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Vector3(Input.mousePosition.x, Input.mousePosition.y, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (_material != <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) { _material.SetVector(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iMouse"</span>, mousePosition); } } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> OnMouseDown() { _isDragging = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> OnMouseUp() { _isDragging = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>; } }</a></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">1</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">2</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">3</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">4</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">5</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">6</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">7</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">8</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">9</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">10</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">11</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">12</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">13</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">14</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">15</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">16</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">17</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">18</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">19</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">20</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">21</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">22</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">23</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">24</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">25</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">26</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">27</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">28</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">29</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">30</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">31</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">32</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">33</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">34</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">35</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">36</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">37</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">38</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">39</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">40</a></li><li style="box-sizing: border-box; padding: 0px 5px;"><a target=_blank href="/article/1326691.html" style="text-decoration: none; color: rgb(0, 0, 0); font-family: 'microsoft yahei'; font-size: 18px; font-weight: bold;">41</a></li></ul>
代码很简单,在有鼠标拖拽时,mousePositon的Z分量为1,否则为0。这跟ShaderToy中判断鼠标的方式一致。
使用时,只要把该脚本拖拽到材质所在的物体上,同时保证该物体上有绑定Collider即可。
写在最后
ShaderToy绝大部分代码都是依靠强大的数学计算来完成的,因此真的是一次次头脑风暴。当然,一些人会觉得它对于现在火爆的移动终端来说用处不大,因为支持不了呗~不过,我还没工作,觉得锻炼下挺好的~在后面我会尽量定期每周更新一篇ShaderToy中的shader。总之,希望大家havefun~
P.S. 总觉得用新编辑器写出来的文章没原来好看。。。
/article/1326691.html
相关文章推荐
- 【Linux探索之旅】第三部分第四课:后台运行及合并多个终端
- 【ShaderToy】基础篇之谈谈点、线的绘制
- ShaderToy Seascape
- 为何中国GNU/Linux的话语权掌控在外籍人士手中?
- centos 7安装mysql5.5的方法
- C++程序与非C++程序的链接
- rsync详解
- CentOS 7中安装mysql server的步骤分享
- 你应该知道的浮点数基础知识
- Android Api Demos登顶之路(七十二)Graphics-->Color Filters
- [LeetCode] Shortest Palindrome 最短回文串
- mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database
- 【Linux探索之旅】第三部分第四课:后台运行及合并多个终端
- IOS动画中的枚举UIViewAnimationOptions
- 数据加密是新形势下信息安全措施的必然选项
- 揭秘知名网站如何收集个人数据及应对措施
- AMBA
- POJ 2362 解题报告
- 偶有一个计划,希望坚持!
- 9.17学习总结