Testing particle effects..
– Read particle colors from bitmap image
– Add some movement effects
19.11.2011: Added webplayer demo
Webplayer:
http://unitycoder.com/upload/demos/mparticlefx1/
Download source: (.js)
Messy & bugged webplayer package: mParticleFx1.unitypackage
(Been busy doing a small 3D simulator for iPad3..)
Customer wanted a thunder sound on the main menu (when entering it),
I also added a brigth flash effect for the gui textures (logo, buttons, background).
Flash also needs to happen at a given time (to match the sound).
Version#1
// variables
– take reference to each GUITexture objects, get their textures
– variable for flash texture (could be just white blurred box..)
Awake()
– Disable gui textures (you could disable them in inspector, but then you cannot see them in editor..)
Start()
– invoke(“FlashGUI(),1.5);
FlashGUI()
– Change GUITexture color to Color.white, that makes it brighter
– If changing color doesnt do it, change gui texture to white texture
– invoke(“ShowGUI(),0.2); // we show the white textures for 0.2sec, then go to switch real gui textures
ShowGUI()
– Change GUITexture color to Color(0.5,0.5,0.5,1), that makes it normal color
– If you didnt change color, change gui texture to correct gui texture
//notes
– It might look better with a fast color fade, from bright to normal(?)
– You could also do this in the Update() loop: check in which part of the sound is playing (audiosource.time)
Testing (fake) animated clouds shader & 3d skydome.. actually looks quite nice already! (original shader is from some dx11 c++ tutorials)
Info v1.0:
– Scrolling seamless cloud texture + perlin texture (shader)
– Skydome 3D mesh (UV mapping is bit broken, its mirrored on the other sides..cannot see in the demo)
– Adjustable cloud speed, scale, brightness
– Ideas: Make the cloud texture support transparency? and make it bigger/better? (now its 256×256..), same for the perlin texture
Info v2.0:
– New skydome mesh
– Adjusted speed, scaling..
– Enabled fog (so that you cannot see the clouds “falling” to the horizon..)
– Added terrain & fps controller to look around
Webplayer:
http://unitycoder.com/upload/demos/AnimatedCloudsSkyDomeFake1/ (v1.0)
http://unitycoder.com/upload/demos/AnimatedCloudsSkyDomeFake2/ (v2.0)
Instant Purchase: *New! (download link will arrive directly to your email account)
3Eur
Download source:
coming later.. (Or if you want it for another price, make some donation & email/message me for the source : )
—
Version 2.0
—
Just by editing the cloud texture, you can get some interesting variations/effects:
Wanted to make underwater caustics effects with projector, but it failed / doesnt work yet..
Its still missing the animated caustics, water surface is not animated, small bokeh planktons and all that.. no time to finish it now, just got a new idea for 3D cloud system with self-casting shadows all-in-one (maybe?) and for unity indie of course..
Webplayer:
http://unitycoder.com/upload/demos/UnderwaterCaustics1/
Download source: (its really no use, just 2 projectors there..)
http://www.mediafire.com/download/8d543nl44fmvyca/underwatertest1.unitypackage
Fullscreen heat/explosion distortion effect shader+script [View animated gif]
Info:
– No rendertextures used, works with unity indie, (but slower of course)
– Could be possible to have multiple heatwaves on screen.. (not tested yet)
– In the webplayer its bit slow moving, too strong effect (and looping) just to see it better..
Webplayer:
http://unitycoder.com/upload/demos/ExplosionHeatDistortUnityIndie/
References:
Normal map for the heatwave is from “Detonator framework” (asset store : https://www.assetstore.unity3d.com/#/content/1 *This package works nicely on 4.3.3, but requires PRO for the heatwave effect..)
Testing some big explosion effect with shader. Still missing most particle effects..
Info:
– Vertex extrusion using noise texture & timer/distance..
– Explosion cloud + shockwave is from particle system
Webplayer:
http://unitycoder.com/upload/demos/ExplosionEffectShader/
Reference:
Armageddon (explosions) video : http://youtu.be/Tq4o-B5vWYk?t=2m25s
Shader source:
Shader "unitycoder/GroundExplo"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_Color ("Color", Color) = (1,1,1,1)
_ExtrudeTex ("Extrusion Texture", 2D) = "white" {}
_Amount ("Extrusion Multiplier", Range(0,5)) = 0
_Pos ("Pos", Vector) = (0,0,0,0)
}
SubShader
{
// Pass {
// Cull Off
// ZWrite On
// ZTest Always
Tags { "RenderType" = "Opaque" "Queue" = "Geometry" }
CGPROGRAM
#pragma target 3.0
#pragma surface surf Lambert vertex:vert
#include "UnityCG.cginc"
struct Input {
float2 vpos;
float2 uv_MainTex;
};
float4 _Color;
float4 _Pos;
float _Amount;
sampler2D _ExtrudeTex;
float4 _ExtrudeTex_ST;
void vert (inout appdata_full v, out Input o)
{
float t = _Time.y*2;
#if !defined(SHADER_API_OPENGL)
float tex = tex2Dlod(_ExtrudeTex, float4(float2(v.texcoord.x,v.texcoord.y),0.0,0.0)).r;
float3 worldPos = mul (_Object2World, v.vertex).xyz;
float dist = distance(worldPos,_Pos.xyz);
float3 dir = -normalize(_Pos.xyz-worldPos)*0.25f;
if (t>dist)
{
float3 extrude = (v.normal+dir)*tex.r* sqrt(_Amount * (t-dist));
v.vertex.xyz += extrude;
}
o.vpos = v.vertex.xy;
#endif
}
sampler2D _MainTex;
void surf (Input IN, inout SurfaceOutput o)
{
half4 tex1 = tex2D (_MainTex, IN.uv_MainTex);
half4 tex2 = tex2D (_MainTex, IN.uv_MainTex*5-_Time.yy*0.5f)+_Color;
half4 col = lerp(tex1,tex2,IN.vpos.y);
o.Albedo = col;//*(1-_Color*IN.vpos.y);
}
ENDCG
}
Fallback "Diffuse"
}
Published simple starter script/plugin for making GUITexture effects (currently just movement transitions).
Sources:
https://github.com/unitycoder/PoorMansGuiFx
*Feel free to suggest/push updates there
Webplayer
http://unitycoder.com/upload/demos/PoormansGUIFx/
Forum thread:
http://forum.unity3d.com/threads/247553-Free-Simple-GUITexture-GUIText-transition-effects
TODO:
– Make it simpler to use: maybe custom inspector for effect dropdowns, movement direction etc.
– Events? Event chaining..(after 1 effect finishes, fire next event/fx..)
– Add fade in/out option (alpha first, maybe color from/to later)
– Option for effect starting event: On Start(), On Enabled(), On Click(), On Awake()…
– Option: [ ] SelfDestruct after finished (script or whole gameobject)
– Some documentation
– More examples
– ..
*Using this Easing library by Renaud Bédard (**included in the github sources with the poormans gui fx script package, but no license mentioned on his website)
Quick test for melting mesh effect using vertex extrusion shader
Forum topic: http://forum.unity3d.com/threads/has-anyone-ever-written-a-mesh-melter.311135/
Info:
– C# Script adjusts mesh vertex colors, based on the distance to heat point gameobject
– Then shader pushes(extrudes) vertices based on that vertex color (alpha)
– Would be probably better to do everything from script (to allow splitting the object, avoid intersecting faces etc..)
Instructions:
– Download sources below
– Add sphere to scene
– Add Melter.cs script to that sphere
– Create new material “meltmat” and assign it to that sphere
– Assign Custom/MeshMelt2 shader to that material
– Add empty gameobject to scene (this is the heat source)
– Assign heatsource gameobject into Melter.cs “HeatPoint” field in inspector
– Hit play, then inside scene view move heat source near to sphere to see effect
Customizations:
– Melter.cs has public bool, [x] Restore Color, this slowly restores vertex colors
– MeshMelt2.shader, see line 23 & 24 for different effects (melt in normal direction or melt downwards)
– Adjust Extrusion amount in shader material
Shader source: MeshMelt2.shader
Script source: Melter.cs
—
Gif anim effect preview:
http://pasteboard.co/1QARh81p.gif
Webgl build progress meter seems stuck at the end sometimes,
so it would be nice to have some “loading/uncompressing” effect there..
WebGL example:
http://unitycoder.com/upload/demos/CustomWebGLLoader/ *its copy of my LudumDare32 entry
– Caching seems to cause some problems though, effect starts too early or too late?
– Probably need to use some background worker, as it hangs on the final step..? (or use CSS animations, they are in separate thread?)
– Could make it as a ready template, so no need to edit code after publish
– Using animated gif as background instead would be better, no need javascript timers
Steps for adding the effect to webgl build: (^or check source of that webgl page)
// OPEN FILE
index.html
// FIND LINES
<p class=”footer”>« created with <a href=”http://unity3d.com/” title=”Go to unity3d.com”>Unity</a> »</p>
<script type=’text/javascript’>
// INSERT AFTER THOSE LINES
var bgTimer=null;
var originalBgColor = document.getElementsByTagName(“body”)[0].style.backgroundColor;
function LoaderEffect() {
document.getElementsByTagName(“body”)[0].style.backgroundColor = “#” + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
function StopLoaderEffect()
{
window.clearInterval(bgTimer);
document.getElementsByTagName(“body”)[0].style.backgroundColor = originalBgColor;
}
// FIND LINE
return function(text) {
// INSERT AFTER THAT LINE
if (text.indexOf(“Creating OpenGLES2.0 graphics device”)>-1) StopLoaderEffect();
// FIND LINE
printErr: function(text) {
// INSERT AFTER THAT LINE
if (text == “run() called, but dependencies remain, so not running”) bgTimer = window.setInterval(“LoaderEffect()”,100);
—
References: (for javascript)
– http://www.w3schools.com/jsref/met_win_setinterval.asp
– http://www.w3schools.com/jsref/met_win_clearinterval.asp
– http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
– http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
http://en.wikipedia.org/wiki/Dolly_zoom
This version only works when target is directly at front (towards z), also viewWidth is manually given..(see for formula on that wikipage)
Source: (attach to camera)
Quick & simple UI text typewriter effect (displays UI text 1 character at a time)
Assign to UI text component, it grabs the text from it at Awake() and clears it,
then starts to type out the text 1 character at a time.
Converted this old godrays shader ( http://unitycoder.com/blog/2012/10/02/fake-godrays-shader/ ) into image effect – interesting results! (see video below)
Source codes below (Attach script to main camera)
Scene has just few spotlights, particles, and 3d objects..
—
References:
Image effects tutorial – http://www.alanzucconi.com/2015/07/08/screen-shaders-and-postprocessing-effects-in-unity3d/
Tried to do this shader mentioned in the forums (link), to have a Bloom image effect only on certain sprites.
See main image^ 2 same sprites, different material, so only 1 gets bloomed (even though the Bloom is full screen image effect)
Instructions:
– Download shader below
– Create new material, assign that shader to it
– Assign the material into sprite renderer
– In the Camera, enable [x] HDR *Disable Antialias from Edit/Quality settings if it complains about it
– Add Cinematic Image Effect, Bloom to the Camera *Download it from asset store or from bitpuke
– Set Bloom threshold to 1.1 (so only pixels with color value over 1.1 will get bloomed)
Shader source: *Note: Currently this uses r+g+b to compare with shader BloomThreshold value..
https://github.com/UnityCommunity/UnityLibrary/blob/master/Shaders/Sprites/SpriteHDRBloom.shader
Founded some mesh wireframe shader in the unity 5.5f2 builtin shader folder (builtin_shaders-5.5.0f2\DefaultResourcesExtra\VR\Shaders)..
Changes:
– Added fillcolor, outline color
– Added [x] Discard option (draws only lines)
– Removed stereo rendering keywords
– Removed color by distance thing
Download shader:
https://github.com/UnityCommunity/UnityLibrary/blob/master/Shaders/Effects/WireFrame.shader
Tip: You can assign this material shader as a 2nd material to your mesh, to draw original material + wireframe (with [x] discard enabled)
Uploaded sources for the old mesh exploder project
https://unitycoder.com/blog/2013/08/02/poor-mans-mesh-exploder/
download project:
https://github.com/unitycoder/SimpleMeshExploder
Converted this fire effect (by The Coding Train) into unity customrendertexture + shader.
Added fire gradient color (by moving the fire calculation into alpha channel).
Unity Project Sources
https://github.com/unitycoder/FireEffect
References
Saw interesting question here https://forum.unity.com/threads/animated-outline-effects-using-shader.600028/
and unity sprite outline https://github.com/wlgys8/Sprites-Outline + stackoverflow https://stackoverflow.com/a/16856878/5452781 to the rescue!
(although this is for 2D sprite..)
Results:
TODO
– Test how this would look with screenspace values (to keep same size even if zoomed)
– Maybe could check neighbor pixel to get “flowing direction” for each pixel ?
Modified shader: *note: hard coded values, could put them into properties, and also download the original github project first to test.
Resources:
– wiki https://en.wikipedia.org/wiki/Marching_ants
– rectangle outline marching ants shader https://www.shadertoy.com/view/XltcR2
– 3d marching ants from uvs https://shaderfrog.com/app/view/1847
– marching ant ideas https://losingfight.com/blog/2007/08/30/an-alternate-way-to-implement-marching-ants/
– marching ants done in Flash http://www.quasimondo.com/archives/000573.php
Comparison (photoshop selection line)
Inspired from https://twitter.com/chiba_akihito/status/1438088953878302725
Part #1 (Project sources)
Part #2 (source not available)
