What are the correct terms for these effects?
Community Forums/General Help/What are the correct terms for these effects?
| ||
| Hi all, There are a couple of postprocessing effects that I'd like to use in my project, but I don't know what the correct terminology is, and am therefore having a hard time Googling for the right information to learn more about applying them. The first one is "that thing where" you take a normal (or usually greyscale, probably) image and... fiddle with the "Curves" tool in GIMP... so that where a greyscale image might fade the light and shade from white to black, a "curved" image fades from <any colour> to <any other colour>, e.g. red to blue:  By bending the graph instead of reversing it, it's also possible to The second effect I want to steal can also be accomplished using the GIMP's "Curves" tool. This time, leaving the graph pointing in the same direction but clamping its range:  This is similar to "thresholding", but as far as I can tell "thresholding" means splitting the image into strictly either black or white pixels: what I want is to retain some shades of grey so that there is a smooth edge to the black and white areas rather than rough pixels (I've done a terrible job on the image above but it does show the existence of grey). The particular reason I want this is to achieve something similar to the level transitions in Incredipede (and probably many other games but this is the first one that comes to mind), where by shifting the graph rapidly to the left or right the image can "melt" smoothly into a black or white mass, or smoothly "dissolve" elements over a background:  (this is closer to what I actually want to achieve.) Overall what I want to create is a flowing, liquid effect not entirely unlike the ink shadows in the game Okami. My thinking is that these two techniques might go a long way towards creating that, e.g. by applying the not-thresholding to a regular hardware-lit scene to glob the shadows into inky chunks. Unfortunately, I don't know what they're called (I know nothing useful about effects in general) and therefore don't know how to begin researching this sort of thing, or how to implement it in real time (I can think of a couple of fixed-function ways, but I imagine that's terrible). Or for that matter if the real desired technique is actually well-known and there's a completely different standard way of going about it. |
| ||
| Don't know what they're called, but they all look pants. I appreciate this doesn't help. |
| ||
| No, you're entirely right: they do look terrible - but that's mainly because I'm 1) terrible at using GIMP, and 2) want them to be components of a larger effect that hopefully won't look anything like those images. If I inflict a game on the world that looks like those pictures I will indeed deserve a smack! Luckily for all I don't plan on doing that. |
| ||
| No idea what they're called sorry, but as part of all of a transition animation they could look fantastic with the right balance. You could create a very smooth "magic ink" dissolve or appearance effect, which would be much more interesting than a standard fade out/in. What I think okami actually does in a number of places if offset elements and then shrink them with staggered timing so that there's overlap but since they're all shrinking, just with a different start time, they seem to "slurp" up to the end point. It works well for a trail or similar, but for a full picture in/out I think you're better off following the shifting route you're looking at here, since it would require breaking the image up in to lots of different points and managing them all which would be unreasonable and not look as good. |
| ||
| Tbh it looks like 'palette shifting' from the amiga days ;) |
| ||
| Hi. I think you can call these color-mapping or gamma-shifting. You'll need to write pixel shaders for these to work, but it shouldn't be too hard. That Incredipede transition seems to work from brightest to darkest pixels. You can work this out with a pixel shader and some "threshold" functionality: compute the average "brightness" of the pixel and see if it fails the threshold. Then you set its alpha to zero so it's transparent when you render the image with Alpha Blending enabled.
// Pseudo.
/* Consider your threshold a value that goes from 1.0 (fully opaque) to 0.0 (transparent).
If the threshold is set at 0.0, your entire image is transparent. */
uniform float threshold; //Threshold value supplied by your application to the shader program, every time you render.
uniform sampler2D originalTexture; //Image of the menu screen or whatever you want to fade out.
in Data {
vec3 normal;
vec4 eye;
vec2 texCoord;
} DataIn;
//RGBA color values in pixel shaders generally range from 0.0 to 1.0, instead of 255.
vec4 sampledPixel = texture(originalTexture, DataIn.texCoord)
float averageBrightness = (sampledPixel.r + sampledPixel.g + sampledPixel.b) / 3.0 //Cheap average - it doesn't take into consideration the color "sensitivity" weights of 0.2989, 0.5870, 0.1140, for R,G,B respectively.
//Test the brightness against the threshold. Look for documentation on Normalize and Clamp.
float alphaResult = normalize( clamp(threshold - averageBrightness, 0.0, 1.0) )
//Now alphaResult should hold either 0.0 or 1.0 depending if the pixel brightness passed the threshold.
//Pass the original pixel color, but use the computed alpha.
gl_FragColor = vec4(sampledPixel.r, sampledPixel.g, sampledPixel.b, alphaResult)
Further reading: - http://http.developer.nvidia.com/GPUGems/gpugems_ch22.html |
| ||
| Thanks for the suggestions! Especially the shader code. Good reason to get hold of a shader editor (I assume such things exist) and finally learn GLSL. Looking up the search term "magic ink" actually led me to this, amazingly: http://northwaygames.com/?p=1575 ... which answers the question of how Incredipede did the specific transitions. Might prove useful; need to rethink where I'm going with this to see how it can be used on specifics only. I'm getting the feeling that the answer to my question is actually significantly less relevant than learning how to apply shaders and moving forward practically rather than theoretically. (Was asking for an effect name also a relic of the fixed-function mindset? Oh well.) |
| ||
| You can learn GLSL and cgFX, they're both great. Shader editors are great for practicing and learning, checking for syntax errors and others, but they won't be able to fully reproduce your app's rendering environment (that is, you might have some complex custom rendering scheme for full-screen effects in your game, and editors will hardly be able to keep up with something like that). Nevertheless, you can find standalone and some online ones: - http://cgvr.cs.uni-bremen.de/teaching/shader_maker/index.shtml - http://stackoverflow.com/questions/13624124/online-webgl-glsl-shader-editor - http://stackoverflow.com/questions/5593274/tools-for-glsl-editing You might also want to contact user Noobody, he's both a blitzer and pro with OpenGL. |
   |