22
2012
X-Ray / CutOut Shader With Mouse
An article by 
X-Ray (or kind of CutOut) Shader With Mouse (using mousecursor position inside shader, compared with worldPos distance)
Interesting effect.. took a while to get transparency working with 2 sided surface shader,
always had the problem that faces were drawn in wrong order (back side of the box was drawn before front..)
Solution was here: http://answers.unity3d.com/questions/209018/cutout-diffuse-shader-visible-from-both-sides-on-a.html
but it lost the smooth alpha transparent (xray), see *image#2
Ideas:
– fake “fluid blob” (double the object, vertex displacement, color transp?)
Webplayer:
http://unitycoder.com/upload/demos/mXRayShaderMouse1/
Download webplayer source:
xRayWithMouse.unityPackage
—
With Cull Back, this smooth transparency works, but with Cull Off, transparency breaks the shader..(?)
— New Shader for Unity 2017 *Note in the comments, there is C# version of the script also by “forsini”
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // xray mouse pos shader test v2.0 – mgear – http://unitycoder.com/blog | |
| Shader "UnityLibrary/Effects/XRay2017" | |
| { | |
| Properties | |
| { | |
| _MainTex ("Base (RGB)", 2D) = "white" {} | |
| _ObjPos ("ObjPos", Vector) = (1,1,1,1) | |
| _Cutoff ("Alpha cutoff", Range(0,1)) = 0.5 | |
| _Radius ("HoleRadius", Range(0.1,5)) = 2 | |
| } | |
| SubShader | |
| { | |
| Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"} | |
| LOD 100 | |
| Cull Off // draw backfaces also, comment this line if no need for backfaces | |
| CGPROGRAM | |
| #pragma surface surf Lambert alphatest:_Cutoff | |
| struct Input | |
| { | |
| float2 uv_MainTex; | |
| float3 worldPos; | |
| }; | |
| sampler2D _MainTex; | |
| uniform float4 _ObjPos; | |
| uniform float _Radius; | |
| void surf (Input IN, inout SurfaceOutput o) | |
| { | |
| half3 col = tex2D (_MainTex, IN.uv_MainTex).rgb; | |
| float dx = length(_ObjPos.x-IN.worldPos.x); | |
| float dy = length(_ObjPos.y-IN.worldPos.y); | |
| float dz = length(_ObjPos.z-IN.worldPos.z); | |
| float dist = (dx*dx+dy*dy+dz*dz)*_Radius; | |
| dist = clamp(dist,0,1); | |
| o.Albedo = col; // color is from texture | |
| o.Alpha = dist; // alpha is from distance to the mouse | |
| } | |
| ENDCG | |
| } | |
| FallBack "Diffuse" | |
| } |
Related Posts
52 Comments + Add Comment
Leave a comment
Recent posts
- MotionVector Effect: Object “disappears” when paused
- [GreaseMonkey] Unity Forum Fixer
- UnityHub: Make Hub application background Translucent
- Customize SpriteShapeRenderer quality (but has issues)
- Editor tool: Copy selected gameobject’s names into clipboard as rows (for Excel)
- Editor tool: Replace string in selected gameobject’s names
- UnityHub: Enable built-in Login Dialog (no more browser login/logout issues!)
- Use TikTok-TTS in Unity (with WebRequest)
- Create Scene Thumbnail Image using OnSceneSaved & OnPreviewGUI
- webgl+javascript TTS
- Using Moonsharp (LUA) + Unity Webgl
- Using 3D gameobject prefabs with Unity Tilemap + NavMesh Surface
Connect
Recent Comments
- on [Asset Store] Point Cloud Viewer & Tools
- on [Asset Store] Point Cloud Viewer & Tools
- on Vector3 maths for dummies!
- on UnityHub: Make Hub application background Translucent
- on UnityHub: Make Hub application background Translucent
- on Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- on Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- on [Asset Store] Point Cloud Viewer & Tools
And again its me posting on your blog. This seems again like the thing i was looking for 😀
im trying to do smokescreens that obscure vision in my top view game. therefore i add a untransparent smokeplane and now i want to cutout a small ellipse sitting on the player so that he can see only a few meters when he is beneath the plane…
am eagerly awaiting the source download you announced.
my game progress if you are interested: http://marrt.elementfx.com/
^ starting to look like a game! : ) ..source download added: let me know what kind of problems or ideas you get from it.
THANKS! already implemented this, i just need to find a nice smokescreen png with unrectangular alpha transparency edges… hmm does this shader even support alphatransparency? didnt tried it… anyway, enjoy this version of the game i uploaded (dont forget to refresh or yould end up trying v0.55)
-ship-tilting scripts to polish the flight feel (try double A or D for a barrel roll :D),
-weapon reload/ROF bars,
-and some smokescreen test stuff
http://marrt.elementfx.com/
very enjoyable i claim.
in this one the alpha is removed..as it didnt work 2 sided..
saw some smokescreen test there,
(i think just use any normal shader with smooth alpha..)
or what kind of effect you are actually looking for?
the edges of the ship-cutoutcircle are perfect! should be sharp as they are now, just the outline of the smoke plane should be able to have that png alpha transparency stuff for a more complex outline like its done with grass textures. Just to have not rectangular smokescreens.
im a shader noob, maybe its already there or i have to add a single line to your shader to make it work.
also
i think i wont get the visibility plane raycasts to check the hole in the cloud if its a cloud mesh… (atm you can see whats behind the cloud but not whats inside) not realistic in terms of cone of sight, but i cant have everything 😀
trying to imagine how it would look like?
hole in the middle, soft edges?
http://unitycoder.com/blog/wp-content/uploads/2012/03/smokes1.jpg
Exactly like that, yes!
btw. just updated some stuff, now the shield collision is much better, i added that “DontGoThroughThings” to all bullets and now they can be blazing fast,
but that wasnt enough, i had to make the impact angle calculation on the shipshield depending on the last fixed update value or fast moving ships will always get their back shield drained if flying towards enemys… now you can fly around like crazy, have fast bullets and impact angle based shield drain is still correct 😀 and that all at standard 0.02 timestep with 2m width-ships
also i decreased the refresh rate of your shadowRaycast2 mesh update to preserve resources at the cost of a not-so-smoothly changing mesh. there will be a slider in the game as soon as i have a menu…
Doesnt seem to work in 4.1 dx11 mode..(doesnt give any errors, but transparency is broken?)
I cant seem to open the package in Unity4 on Mac.
Failed importing package /Users/johndude/Downloads/unitycoder_com_mXRayMouseShader1.unitypackage
UnityEditorInternal.InternalEditorUtility:ProjectWindowDrag(HierarchyProperty, Boolean)
UnityEditor.DockArea:OnGUI()
any ideas?
hmm no idea.. I emailed you re-packed version from 4.1, let me know if that works?
hey i have downloaded this and i am having problems with objs and also fbxs the problem is when i attach the shader and its materials the fbx or the obj turns black and does not take the texture any ideas ??
It appears that the download link has changed to a package called “Normal Map Maker”?
That is the new download page, works without toolbar (still in progress..) with a huge banner 🙂 actual download link is below it.
“Download link expired..”
Pleeeease, I need it so much 🙂
It should work, if click as soon as the timer ends.
(i’ll adjust the timeout threshold soon..)
I did it instantly after timer has ended. but the same effect. I tryed to downloand another links on your site and everything is OK.
Please, can you send me the package on email?(spirit2236@yandex.ru)
“Download link expired..”
Pleeeease, I need it so much (2)
Hello.
This is really a cool shader.
But It shows Download link expired..
can you mail me that please?
thank you!
how to make it work for NGUI UI2DSprite??
No idea.. (havent tested NGUI), but if the ngui shaders are editable, then just have to add the mouseposition code into there.. (so that it changes the alpha based on mouse cursor distance).
This does not work if the selected platform is IOS. What do i need to change to get it working for the iOS platform?
havent tested, could be something similar to:
http://forum.unity3d.com/threads/alpha-test-in-fragment-shader-doesnt-work-on-mac-and-iphone.133130/
maybe alphatest doesnt work there properly..
I test it with one of my project and also use it with 2D sprites it still work. But I import it to my other project it didnt work. Example Scene didnt work either.
What can be the problem?
Now I try with other projects still dont work. I works just one project I cannot understand
Any errors or warnings in console?
Try disabling dx11 mode?
Yeah thanks, it works. But I learned that disabling is not enough, you must delete plug in then diasble than import it again . 🙂
Sorry to bother you again,
Does this shader work on ios?
I try it didnt work I convert script to c#, but still doest work.
Ok adding the “alpha” to this line “#pragma surface surf Lambert” and delete AlphaTest Greater [_Cutoff] solve the problem
Hi ,
I have tried to open the package in unity environment. It does not show the same effect as I saw from the web player. Can you please provide the updated script?
Thanks,
Raj
Package is the latest version..has not been updated.
Try those fixes mentioned in the comments above, (disable dx11, or fix shader for dx11, or modify #pragma surface line)
Has anyone got this working with dx11?
I modified the pragma surface line and added alpha at the end, doesn’t seem to get it going?
Location Based Opacity in Unity5 (with sources)
http://forum.unity3d.com/threads/location-based-opacity-in-unity.312887/
I have tried the xray shader its really good one. And the problem is its working only on the pc version, when i tried to open this on my android device its not working. i have changes the script to touch also even though its not working.
Is there any features we need to add more or it wont support the andoid platform?
Thanks.
Hello, I’m trying to get a similar effect in 2D. What I’m trying to do is create a top down shroud or “fog of war” by using a single tile instantiated and multiplied in a grid format. Now I want the shroud tile to bleed thru the ground map from the camera’s point of view with another image below. Just a note, there will be things going on inside the shroud on the ground. Will this type of effect affect things moving around on the ground level?
Sounds complicated, probably better post to unity forums, with screenshot. (feel free to post link to the thread here)
I tried to do some 2D fog of war also, its using single mesh and setting it transparent around player: (see the links in comments for one fow-tutorial also)
http://unitycoder.com/blog/2014/10/16/2d-fog-of-war-unity/
Hello
This effect looks great and I was just taking a look at it. However, what I would like to do is to apply cutouts of any shape by providing the coordinates, not only circular cutouts. How can I do it?
Thank you
You mean, instead of circle, would have mask texture (any shape).. that might work with some modifications..
Or do you have example image how it should look?
Yes. That’s exactly it. And the result should be something like this:
https://www.assetstore.unity3d.com/en/#!/content/24707
However, instead of referencing a given GameObject like in this Unity asset, I should be able to send explicit coordinates to the shader.
Any updates on how it could be done? I’ve been trying to do it with no luck.
i think first could try adding new mask texture input to it,
then in shader only draw hole if the mask texture is transparent on that position.
then 2nd step,
would need to offset & scale mask texture to the mouse position..
so that center of the mask is center of the circle and border of the mask is at border of the circle radius, then again check mask if want to draw hole or not.
havent had time to test it yet..
Hey this doesn’t seem to work anymore, This is exactly what I need for my sorta top down game to see through walls to see the player, and render the rest of the building (instead of setting the opacity or using parts of a building instead of a whole model) I’m using Unity 2017, and there are no script or shader errors yet nothing happens when I move my mouse over the object.
Did you figure something out for this? I would also love to know how this is done in 2017 and I’m having the same problem.
i tested it briefly in 2017 also, didn’t manage to fix yet.. probably should have checked in frame debugger if can see whats happening.
This doesn’t seem to work in Unity 2017. The cutout is never rendered even though the update function is called. What has changed in Unity that would cause a problem with this?
ok, should be working now, added updated shader to the post ^
just noticed it in the docs,
“alphatest:VariableName – Enable alpha cutout transparency. Cutoff value is in a float variable with VariableName. You’ll likely also want to use addshadow directive to generate proper shadow caster pass.”
https://docs.unity3d.com/Manual/SL-SurfaceShaders.html
Thank you for this, it’s such a great effect! I have one more question though.
How did you get the soft mask in the image #2 above? I don’t see how that is supposed to work in this shader. It doesn’t matter that I would have to cull backfaces, because that’s exactly what I want.
I figured out how you did the soft mask, after all. It was just making the pragma set to alpha:fade instead of alphatest:_cutoff
#pragma surface surf Lambert alpha:fade
I also made two other modifications to the shader.
1. I wanted to be able to increase the radius of the alpha zero area, so I added a variable to control how wide that spreads before your _Radius kicks in.
2. I wanted to poke multiple holes in the texture, so I switched to arrays of positions/radii/etc and set those arrays in code at runtime.
3. Removed the old properties… I didn’t really want misleading widgets in the inspector when they don’t control anything anymore, but I didn’t really know how I would replace them with arrays (or if it would even be a good idea).
Thank you again for posting this! It’s such a cool effect and sorely lacking in Unity’s standard assets.
Hello Tony, I’m trying to extend the alpha zero area very much like you did. I’m not great on shaders and I was hoping you could help me out. Thank you!
It’s not working anymore in Unity 2017.3 🙁 Any idea how to fix it? Would be amazing as this is just what I need right now! Thanks in advance 🙂
did you try the updated source (below 2nd image), not the packaged one,
https://gist.github.com/unitycoder/e64363b9b08285535f22a17680633424#file-xray2017-shader
Oh, I’m stupid… thank you so much. It’s working now! 🙂
Exactly what I was looking for. Well actually was looking for the best way to calculate a position passed into a shader. Using it to reveal an object’s texture when clicked.
Thanks!