Page 1 of 2

Improving certain graphical effects

Posted: Thu Jul 04, 2013 2:32 pm
by Suslik
While I do love the looks of lightning, shield effects, vortexes and most others, some effects are just dissatisfying. Especially paradox mages' and solipsists' skills related to spacial disturbances. Does the engine support displacement mapping shaders like this:
Image
There is an option to use glsl shaders but I don't see any effects that are easy to implement with those. Displacement mapping + shockwave texture should look really cool, very lightweight in terms of computing(it's only 1 more texture2D() instruction) and is easy to implement.

So if the engine already supports displacement mapping, why not add it to any related effect? If it does not I'm familiar with shader programming and can easily write a sample program with such effect but I'm not sure I can easily integrate it into t-engine.

Re: Improving certain graphical effects

Posted: Thu Jul 04, 2013 3:11 pm
by darkgod
Interresting !

It would need to be applied on the main framebuffer then to be able to distort the existing pixels I suppose ?
Right now particles are drawn over it, but I could probably change how things work.

Can you log on IRC please ? #tome irc.rizon.net

Re: Improving certain graphical effects

Posted: Fri Jul 05, 2013 3:49 pm
by Suslik
> It would need to be applied on the main framebuffer then to be able to distort the existing pixels I suppose ?
Exactly. So the algorithm is as follows:
1) Render the whole scene regularly into texture
2) Render distortion texture where every texel means displacing from default position. Every distortion effect you want to render is rendered in this texture with additive blending.
3) Render fullscreen quad with framebuffer applying displacement to it in shader

There's just one small issue - you have to be careful using displacement near border(so that you don't read texel outside of framebuffer). Can be fixed by rendering scene slightly larger(by max displacement value) than you normally would.

There's forum discussing similar technique: http://xboxforums.create.msdn.com/forums/t/55922.aspx . Though store displacement in color in a weird way. I recommend just using r and g values for x and y coordinates of offset.

I'll try log into irc every now and then but I'm afraid I won't be there constantly.

Re: Improving certain graphical effects

Posted: Fri Jul 05, 2013 9:19 pm
by darkgod
The game already renders into a FBO and it is always slightly larger :)
The FBO is drawn using a shader too, but you cant have multiple shaders, so it'd need to be able to do that too, and each kind of various particles.

What about: thigns are drawn into the FBO, then particles effects are drawn over that same fbo, but the shader of the particle gets passed the fbo texture.
This way it could read whats "behind" and alter what will be drawn in consequence. This way the main fbo shader doesnt need to be altered each time a new particle effect is added and the particles can keep being isolated in their own little world.

I tried doing that and I managed to get a particle draw a part of the underlying FBO, but I'm too bad to manage to make it read the correct zone and distort it

Re: Improving certain graphical effects

Posted: Fri Jul 05, 2013 10:09 pm
by Suslik
Damn I'd really love to help you on it with shader code but I'm going to a village. There's not electricity(needless to say about internets) and I'm coming back on monday.

About your idea: if particles are already drawn over fullscreen fbo texture then you can totally add distortion effect into the same shader. But are particles really drawn via fullscreen quad? I've thought every particle has its own quad. And if you want particles to be unaffected by distortion, you can simply apply distortion texture to the fbo before rendering them.

Now your fragment shader should look approximately like this:

Code: Select all

//fullscreen fragment shader
void main()
{
  gl_FragColor = texture2D(sceneFBO, gl_FragCoord.xy) + texture2D(particleFBO, gl_FragCoord.xy);
  //particleFBO is fullscreen layer that contains your particles
}
you should alter it to be simply like this:

Code: Select all

void main()
{
  vec3 distortionColor = texture2D(distortionTexture, gl_FragCoord.xy);
  vec2 distortionOffset = vec2(distortionColor.r - 0.5f, distortionColor.g - 0.5f) * distortionPower;
  //distortionPower is an arbitrary constant
  gl_FragColor = texture2D(sceneFBO, gl_FragCoord.xy + distortionOffset) + texture2D(particleFBO, gl_FragCoord.xy);
}
That's all!

Distortion texture for a shockwave-like effect can be as follows:

Code: Select all

void main()
{
  vec2 explosionCenter = vec2(width / 2.0, height / 2.0); // center of the explosion, screenspace coords
  float explosionRadius = 100; // current shockwave radius, can vary with time
  float shockwaveWidth = 10; // current shockwave width, can vary as well
  vec2 centerDist = gl_FragCoord.xy - explosionCenter;
  vec2 distortionOffset = normalize(centerDist) * exp(-length(centerDist) / shockwaveWidth);

  gl_FragColor = vec3(distortionOffset.x, distortionOffset.y, 0) / distortionPower - vec3(0.5, 0.5, 0);
  //distortionPower is the same constant as in previous shader
}
Hope it helps, sorry for mistakes in shader - I was typing directly in browser.

If you are too lazy to generate distortion texture by yourself or for testing purposes you can grab this one:
Image
(it should magnify your image)
And I'm really excited that you can add such feature to the game - it is relatively simple to implement(far simpler than most things you code every day) and should look cool!

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 12:28 am
by Suslik
Allright. We did some development with dg and here's what's going on:
http://www.youtube.com/watch?v=b0pJ9l2JO2c
http://www.youtube.com/watch?v=J1rXy1moFLk
There are several other vids but we're still testing these things.

I've written a simple program to generate this kind of effects:
Full source and project for visual studio 2010:
https://dl.dropboxusercontent.com/u/256 ... nMaker.zip

Source only:
https://dl.dropboxusercontent.com/u/256 ... nMaker.cpp

Program is written on C++ and logic mostly lies within these lines:

Code: Select all

//regular shockwave
Vector2f GetDistortion(Vector2f point)
{
  Vector2f delta = Vector2f(0.5f, 0.5f) - point;
  float radius = 0.35f;
  float wavelength = 0.01f;
  
  float radialForce = 0.0f;
  float twistForce = 1.0f;
  return (delta.GetNorm() * radialForce + delta.GetPerpendicular() * twistForce).GetNorm() * exp(-pow(fabs(delta.Len() - radius), 2) / wavelength);
}
This is actually the function that returns displacement (-1..1, -1..1) of a point that lies within a unit 1x1 box for a simple radial shockwave.

And generated a few effects with it:
https://dl.dropboxusercontent.com/u/256 ... 0tests.zip

Program output consists of a distortion texture where every texel means offset from the original position:
Image
And a sample texture with this distortion effect applied:
Image

A few more effects:

Singularity or vortex-like effects:
Image
Image
For visualizing damage to shield:
Image
For confusing warshout or i dont know what:
Image

Apparently I'm looking for ideas which spells can use such effects and which other effect you guys find interesting to implement.

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 4:51 am
by fuzzynord
Super cool!

I think those effects would be an improvement over the current wave effects (not that those are bad or anything). It's just that instead of drawing what looks like a wave effect, why not actually make the image wavy? - I think you call it "distorted," but whatever.

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 4:55 am
by Crim, The Red Thunder
How concerned are we about processor use? Is this going to function well on older computers, or crash/lag the hell out of our games? (And if the latter, can we turn these fancier effects off, without losing some of the lesser ones?)

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 7:33 am
by fuzzynord
Since it's a one time deal (not like calculating monster moves or something) I think it should be fine. It might slow things down slightly if you run into a bunch of monsters that all have these special effects.

-- Well, hold that thought. Are there any persistent effects? e.g. disruption field or whatever. If that's the case, that has potential to cause problems.
I'm not sure it will, I think someone who knows how the graphics code works said it was only one more line... but how much processor time does that line take?

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 9:14 am
by Suslik
Good news: the code does not use processor at all, it is done fully on gpu. If you have option "opengl shaders" on, the code uses one more gpu read instruction, you will barely notice any performance drop at all - the effect is really super cheap.

But of course someone may find it annoying and I hope DG will add an option to disable it altogether.

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 4:33 pm
by Crim, The Red Thunder
I have no shaders at all, as my graphics card (integrated) doesn't support them. At all. So apparently, I won't even see these new effects. Not sure how that effects the load on the processor, but probably none.

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 5:42 pm
by darkgod
Yeah if your gpu doent support it or if you disabled shaders you'll get the normal effects instead (which funnily enough are probably more CPU intensive ;) )

Re: Improving certain graphical effects

Posted: Tue Jul 09, 2013 9:12 pm
by darkgod

Re: Improving certain graphical effects

Posted: Wed Jul 10, 2013 10:59 pm
by darkgod

Re: Improving certain graphical effects

Posted: Thu Jul 11, 2013 1:30 am
by Grey
Man, this is funky! I'd really like to use this effect in Mosaic for the tile "pulsing" - have a sort of wave come from the centre of the tile to just outside it. What's the best way to implement this?