【ShaderToy】开篇

1649 篇文章 11 订阅
1623 篇文章 22 订阅

写在前面

呜呼,好久没有写博客了,好惭愧。题外话,感觉越大就越想家,希望可以一直和家人在一起,哪怕只是坐在一起不说话也觉得很温暖,一想到要分开眼睛就开始酸,哎。开学还是爬上来老实更新博客学习吧~

今天爬上来一看,发现CSDN的博客编辑终于更新了!进步总是好的,以前的编辑器实在很捉急。使用这种标记语言的确方便了很多,但好像颜色字体没法设置?程序员果然对美观没什么追求。

ShaderToy

如果你还没听过ShaderToy,那你就真的错过了一个很好的shader学习网站。我是在群里有一次听到小伙伴们提到这个网站的。点进去就会发现里面有很多很绚丽的shader展示。

说简单点,这个网站是专门让人们分享和编写GLSL的pixel shaders的。换句话说,里面那些绚丽的效果仅仅依靠pixel shaders就可以完成了(当然还有纹理和模型的配合,如有不对请指出),是不是很强大?里面的强人很多,就像头脑风暴一样,让你一次次发出惊叹,原来还可以这样做!但是,这里面也蕴含了很多数学和算法知识,所以你可能会经常发现自己脑袋不够用,跟不上作者的思路。。。不过,脑袋都是靠锻炼的嘛,没有捷径可走,多看多写总是没错的~

强烈建议大家先去逛一逛,有很多很好玩的东西,例如这个人写了一个莫比乌斯带,而这个人写了一个耀眼的小太阳!一开始你很难相信这些完全都是用shader计算出来的。

特点

之前说了,这个网上的所有shader都是GLSL的pixel shaders。那么什么是pixel shader呢?如果我们需要渲染一个刚好铺盖整个屏幕的全屏的方形平板,那么这个方形的fragment shader就是一个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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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="http://blog.csdn.net/candycat1992/article/details/44039077" 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。总之,希望大家have fun~

P.S. 总觉得用新编辑器写出来的文章没原来好看。。。


http://blog.csdn.net/candycat1992/article/details/44039077

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值