Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by agilanbtdw · Jan 10, 2018 at 05:47 PM · shadersshader programmingshaderlabcghlsl

Porting from ShaderToy(GLSL) to shaderlab(HLSL/CG) unity not giving me the desired result.

I came across this beautiful shader from shadertoy which I am trying to implement in Unity. I managed to get the blur box background and also the random dots get generated. But I am not able to get the curl effect as shown in the original shader. Here is my code, where _MainText takes the default colour black and _MainTexBg has this texture attached,

alt text

 Shader "Unlit/MyFirstShader"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "black" {}
         _MainTexBg ("Curl Pattern Texture", 2D) = "white" {}
     }
     SubShader
     {
         Tags { "RenderType"="Opaque" }
         LOD 100
 
         Pass
         {
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             
             #include "UnityCG.cginc"
 
             struct appdata
             {
                 float4 vertex : POSITION;
                 float2 uv : TEXCOORD0;
             };
 
             struct v2f
             {
                 float2 uv : TEXCOORD0;
                 float4 vertex : SV_POSITION;
             };
 
             sampler2D _MainTex;
             float4 _MainTex_ST;
             sampler2D _MainTexBg;
             float4 _MainTexBg_ST;
 
             float2 hash2( float n ) 
             { 
                 return frac(sin(float2(n,n+1.0))*float2(43758.5453123,22578.1459123)); 
             }
 
             // smoothstep interpolation of texture
             float4 ssamp( float2 uv, float oct )
             {
                 uv = uv.xy / oct;
     
                 //return texture( iChannel0, uv, -10.0 );
                 float texSize = 8.;
     
                 float2 x = uv * texSize - .5;
                 float2 f = frac(x);
     
                 // remove fractional part
                 x = x - f;
     
                 // apply smoothstep to fractional part
                 f = f*f*(3.0-2.0*f);
     
                 // reapply fractional part
                 x = x + f;
     
                 uv = (x+.5) / texSize;
     
                 return tex2D( _MainTexBg, uv );
             }
 
             float2 e = float2(1./256., 0.);
             float4 dx( float2 uv, float oct ) 
             { 
                 return (ssamp(uv+e.xy,oct) - ssamp(uv-e.xy,oct)) / (2.*e.x); 
             }
             float4 dy( float2 uv, float oct ) 
             { 
                 return (ssamp(uv+e.yx,oct) - ssamp(uv-e.yx,oct)) / (2.*e.x); 
             }
 
             
             v2f vert (appdata v)
             {
                 v2f o;
                 o.vertex = UnityObjectToClipPos(v.vertex);
                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                 return o;
             }
             
             fixed4 frag (v2f i) : SV_Target
             {
                 i.uv=1-i.uv;
 
                 fixed4 col = tex2D(_MainTex, i.uv);
                 col=mul(col,2.0);
                 col = smoothstep(0.,1.,col);
                 col.xyz = 1.-col.xyz;
                 col.xyz = mul(col.xyz,pow(1. - 1.9*dot(i.uv-.5,i.uv-.5),.07));
 
 
                 float4 res = float4(0.,0.,0.,0.);
                 float scl = _ScreenParams.x/640.;
 
                 // random paint drops
                 //float fr = float(_Time.y);
                 float period = _Time.y < 2.9 ? 30. : _Time.y < 47. ? 8. : 3.;
                 float2 sparkPos = hash2(_Time.y+1.11) * _ScreenParams.xy;
                 if( length(sparkPos-i.vertex)<5.*scl && i.vertex.x > 1. && i.vertex.y > 1. )
                 {
                     // everyones favourite colour gradient
                     res = res + 2.5*float4(i.uv,0.5+0.5*sin(_Time.y),1.0);
                 }
 
                 float2 off = 0.* (float2(128.,128.)/_ScreenParams.xy) * unity_DeltaTime;
 
                 float oct = .25;
                 float2 curl1 = .001*float2( dy(i.uv,oct).x, -dx(i.uv,oct).x )*oct;
                 oct = 5.; float sp = 0.1;
                 curl1 = curl1 + .0002*float2( dy(i.uv+sp*_Time.y,oct).x, -dx(i.uv+sp*_Time.y,oct).x )*oct;
 
                 off = off + curl1;
                 off = mul(off,.4);
 
                 res = res + .999*tex2D( _MainTexBg, i.uv - off);
 
 
 
 
                 return col*res;
 
                 
             }
             ENDCG
         }
     }
 }

I am very new to shader programming. Thanks for your help.

downloads.png (8.2 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by villevli · Jan 12, 2018 at 01:01 PM

I managed to import this shader to Unity. I attached a zip that you can export to your Assets folder.


Relevant parts of the rendering code:

Create a RenderTexture and assign it to bufferA_RT.

In OnPostRender() - (script attached to a Camera):

 var screenTarget = RenderTexture.active;
 
 // pass input channels
 bufferA_Material.SetTexture(iChannel0_Id, bufferA_RT);
 bufferA_Material.SetTexture(iChannel1_Id, bufferA_Channel1InputTexture);
 
 // we need to render to a temporary buffer because rendering to a buffer that is used as shader input causes problems
 var tempBuf = RenderTexture.GetTemporary(bufferA_RT.width, bufferA_RT.height, bufferA_RT.depth, bufferA_RT.format, RenderTextureReadWrite.Linear, bufferA_RT.antiAliasing);
 Graphics.Blit(null, tempBuf, bufferA_Material);
 Graphics.Blit(tempBuf, bufferA_RT);
 RenderTexture.ReleaseTemporary(tempBuf);
 
 // render to screen and use Image shader
 image_Material.SetTexture(iChannel0_Id, bufferA_RT);
 Graphics.Blit(null, screenTarget, image_Material);


Shader for Buf A - ( bufferA_Material uses this):

 Shader "ShaderToy/KindergartenArtClass3-BufA"
 {
     Properties
     {
         _Channel0 ("iChannel0", 2D) = "black" {}
         _Channel1 ("iChannel1", 2D) = "black" {}
     }
     SubShader
     {
         // No culling or depth
         Cull Off ZWrite Off ZTest Always
 
         Pass
         {
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             
             #include "UnityCG.cginc"
 
             struct appdata
             {
                 float4 vertex : POSITION;
                 float2 uv : TEXCOORD0;
             };
 
             struct v2f
             {
                 float2 uv : TEXCOORD0;
                 float4 vertex : SV_POSITION;
             };
 
 
             /*
                 Common variables/functions for ShaderToy fragment programs
             */
 
             #define iChannel0 _Channel0
             sampler2D iChannel0;
 
             #define iChannel1 _Channel1
             sampler2D iChannel1;
 
             #define iResolution _ScreenParams
             // float3;
 
             #define iTime _Time.y
             // float;
 
             #define iTimeDelta unity_DeltaTime.x
             // float;
 
             #define iFrame ((int)(_Time.y / iTimeDelta))
             // int;
 
             #define iMouse _MousePos
             float4 iMouse;
 
             float mod(float x, float y) { return x - y * floor(x / y); }
 
 
             /*
                 Common shader mains for ShaderToy fragment programs
             */
 
             void mainImage(out float4 fragColor, float2 fragCoord);
 
             v2f vert(appdata v)
             {
                 v2f o;
                 o.vertex = UnityObjectToClipPos(v.vertex);
                 o.uv = v.uv * iResolution.xy;
                 return o;
             }
 
             fixed4 frag(v2f i) : SV_Target
             {
                 float4 fragColor;
                 mainImage(fragColor, i.uv);
                 return fragColor;
             }
 
 
 
             /*
                 Kindergarten Art Class III - Buf A
                 https://www.shadertoy.com/view/4ltXR4
             */
 
             float2 hash2(float n) { return frac(sin(float2(n, n + 1.0))*float2(43758.5453123, 22578.1459123)); }
 
             // smoothstep interpolation of texture
             float4 ssamp(float2 uv, float oct)
             {
                 uv /= oct;
 
                 //return tex2D( iChannel0, uv, -10.0 );
                 float texSize = 8.;
 
                 float2 x = uv * texSize - .5;
                 float2 f = frac(x);
 
                 // remove fractional part
                 x -= f;
 
                 // apply smoothstep to fractional part
                 f = f * f*(3.0 - 2.0*f);
 
                 // reapply fractional part
                 x += f;
 
                 uv = (x + .5) / texSize;
 
                 //uv.y = 1 - uv.y;
                 //return tex2D(iChannel1, uv);
                 return tex2Dbias(iChannel1, float4(uv, 0., -10.0));
             }
 
             // it's important to mark this static as otherwise it will not contain the assigned value
             static float2 e = float2(1. / 256., 0.);
             float4 dx(float2 uv, float oct) { return (ssamp(uv + e.xy, oct) - ssamp(uv - e.xy, oct)) / (2.*e.x); }
             float4 dy(float2 uv, float oct) { return (ssamp(uv + e.yx, oct) - ssamp(uv - e.yx, oct)) / (2.*e.x); }
 
 
             void mainImage(out float4 fragColor, float2 fragCoord)
             {
                 float2 uv = fragCoord / iResolution.xy;
                 float4 res = (float4)0.;
                 float scl = iResolution.x / 640.;
 
                 // random paint drops
                 float fr = float(iFrame);
                 float period = iTime < 2.9 ? 30. : iTime < 47. ? 8. : 3.;
                 if (mod(fr, period) == 0.)
                 {
                     float2 sparkPos = hash2(iTime + 1.11) * iResolution.xy;
                     if (length(sparkPos - fragCoord)<5.*scl && fragCoord.x > 1. && fragCoord.y > 1.)
                     {
                         // everyones favourite colour gradient
                         res += 2.5*float4(uv, 0.5 + 0.5*sin(iTime), 1.0);
                     }
                 }
 
                 // mouse paint
                 if (length(fragCoord - iMouse.xy) < 5.*scl && iMouse.z > 0.)
                 {
                     // added sin gives pulsing feel
                     res += .7*float4(uv, 0.5 + 0.5*sin(iTime), 1.0)*(.6 + .5*-sin(iTime*10.5));
                 }
 
                 // lookup offset
                 float2 off = 0.* ((float2)128. / iResolution.xy) * iTimeDelta;
 
                 float oct = .25;
                 float2 curl1 = .001*float2(dy(uv, oct).x, -dx(uv, oct).x)*oct;
                 oct = 5.; float sp = 0.1;
                 curl1 += .0002*float2(dy(uv + sp * iTime, oct).x, -dx(uv + sp * iTime, oct).x)*oct;
 
                 off += curl1;
                 off *= .4;
 
                 res += .999*tex2D(iChannel0, uv - off);
 
                 fragColor = res;
             }
 
             ENDCG
         }
     }
 }

As you can see I used some macros to ease the conversion.


shadertoy2unity-kindergarten-art-class-3.zip (14.4 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image agilanbtdw · Jan 12, 2018 at 02:51 PM 0
Share

Neatly documented. Well explained. Works perfect. You are awesome! Thank you. #myshaderprogram$$anonymous$$gskill++

avatar image
0

Answer by Buckslice · Jan 10, 2018 at 06:24 PM

I believe you need two separate shaders. The main large shader you have here ("Buf A" code in shadertoy) would be rendered into a RenderTexture and then another shader (the "Image" code in shadertoy) would render that RenderTexture to the screen or a quad or something.

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image agilanbtdw · Jan 11, 2018 at 05:50 AM 0
Share

I came across this article and tried to combine both the textures from 'Buf A' and 'Image' together. Can you help me by pointing to some refference where multiple shaders are implemented in unity?

avatar image Buckslice agilanbtdw · Jan 12, 2018 at 08:29 AM 1
Share

Read up about CustomRenderTextures I think they will work for what you are trying to do. Basically modifying a texture over time with a shader is what they are for. Here is a nice project demonstrating their usage, maybe this code will help you.

avatar image agilanbtdw Buckslice · Jan 12, 2018 at 02:01 PM 0
Share

Thanks a ton!

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

82 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Flat Shading / No Vertex Interpolation 2 Answers

regarding Shader Optimization 0 Answers

Obtaining relative speed of vertex in a shader 1 Answer

Can this shader run in unity? 1 Answer

ShaderLab builtin lighting properties are not correct? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges