Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (497)
Games in Android Showcase (114)
games submitted by our members
Games in WIP (563)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Out of Texture Fragment Shader  (Read 3184 times)
0 Members and 1 Guest are viewing this topic.
Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Posted 2012-04-07 09:58:34 »

Hey there Smiley

I currently trying to implement a wave/ripple shader simliar to the one of the RPG Maker 2000 (hard so show a picture here Sad). I kinda got it working with a texture shader which goes like this:

Vertex Shader:
1  
2  
3  
4  
void main(void) {
   gl_TexCoord[0] = gl_MultiTexCoord0;
   gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;  
}


Fragment Shader:
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
uniform float time; // time in seconds
uniform sampler2D tex0;

void main(void) {

   vec2 fragment = gl_TexCoord[0].xy;  
   vec2 temp = vec2(fragment.x, fragment.y);
   
   // playing with sinus
  fragment.x += sin(temp.y * 3.0 * 2.0 * 3.14159 + (time)) / 100.0;

   vec4 color = texture2D(tex0, fragment);
   
   gl_FragColor = color;
}


This works as expected and a get a nice wave. BUT this is only in texture spaces. So if I bind the shader and draw a texture, the fragments which will be pushed to the left or the right are jsut ignored:


I also get this strange artifacts as you can see (The rextangle is an FBO and you can also see that there are dirsty areas in the top left part of the fbo image) . I guess there is something wrong with my wave shader too... But want I want to know is, HOW can I tell the shader to set fragments out of the texture bounds?

I hope someone can help Sad
Offline theagentd
« Reply #1 - Posted 2012-04-07 10:35:43 »

You can't edit pixels that are outside of the polygon, so it's probably better if you draw a fullscreen rectangle and adapt the texture coordinates so the (0.0 - 1.0) range is at the middle of the screen. To solve the distortion at the edges (which will fill the whole black frame if you draw a fullscreen rectangle), you can add an if-statement to check if the texture coordinates are out of bounds and return 0 if they are. Another solution is to simply have a 1 pixel black frame around the FBO texture (easily achieved if you render to an FBO, just set the glViewport() and make your texture 1 pixel larger in both horizontal directions) and enable texture coordinate clamping with GL_CLAMP_TO_EDGE.

Myomyomyo.
Offline pitbuller
« Reply #2 - Posted 2012-04-07 13:37:27 »

This can be easily done this at vertex shader. Use grid instead of quad and render that and make wave effect for vertex positions. This give better performance too. I have did heatshimmering and blastwave and some ripple effects with this approach and those work really well on mobile enviroment where you are allways fillrate limited.

Here is really quick and dirty blastwave that I did. Grid is about 24x22 for 800x480 screen. 
http://www.youtube.com/watch?v=BIp0bZPSkoA
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #3 - Posted 2012-04-08 14:27:57 »

Quote
You can't edit pixels that are outside of the polygon, so it's probably better if you draw a fullscreen rectangle and adapt the texture coordinates so the (0.0 - 1.0) range is at the middle of the screen.

I don't understand this .___. btw I do all this stuff in Slick2D and I'm really not good at all of this. I always just black box everything and tend to forget stuff :/

@pitbuller
Grid? Ho do I use this "grid"?
Offline pitbuller
« Reply #4 - Posted 2012-04-08 15:32:06 »

Quote
You can't edit pixels that are outside of the polygon, so it's probably better if you draw a fullscreen rectangle and adapt the texture coordinates so the (0.0 - 1.0) range is at the middle of the screen.

I don't understand this .___. btw I do all this stuff in Slick2D and I'm really not good at all of this. I always just black box everything and tend to forget stuff :/

@pitbuller
Grid? Ho do I use this "grid"?

Its vertex buffer object or vertex array. Really easy to use with libgdx but dont know how it would tranfer to slick2d. Basically I create 1d array that mimic 2d array and then index it so I can draw it with triangle strips. There is some tricks to get winding right but if you want I can poste grid creation code some where.
Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #5 - Posted 2012-04-08 16:24:47 »

Mh, that sounds like quite the work just to get it working :/ Wouldn't the grid give the vertrices an edgy look? May I should just make a bigger FBO. It's 2D anyway so I guess there is no big performance hit.
Offline pitbuller
« Reply #6 - Posted 2012-04-08 17:15:50 »

Mh, that sounds like quite the work just to get it working :/ Wouldn't the grid give the vertrices an edgy look? May I should just make a bigger FBO. It's 2D anyway so I guess there is no big performance hit.

Look the video does it look too edgy?
Postprocess effects have same cost in 2d or 3d cases. But if you don't need performance then there is nothing to gain with grid aproach.
Offline davedes
« Reply #7 - Posted 2012-04-08 17:26:46 »

The grid approach would be a bit overkill here, IMO. You can achieve what you're looking for by applying the shader to the entire screen, rather than only applying it to the quad of the image.

Did you check my reply in the Slick forums PM? It showed how to fix the artifacts (which were caused because you were sampling the texture as it changed iirc). Applying the wave effect to the entire screen would look like this:
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
      // enable the FBO for render-to-texture
     fbo.bind();

      // clear the offscreen FBO image
     g.clear();

      // draw the image to the FBO, centered
     picture.draw(container.getWidth() / 2f - picture.getWidth() / 2f,
            container.getHeight() / 2f - picture.getHeight() / 2f);

      // draw the moving red square
     object.draw(effect.getValue(), 100);
      object.draw(100, effect.getValue());

      // unbind the FBO so we can draw to the screen
     fbo.unbind();

      // bind the wave shader
     wave.bind();
      wave.setUniform1f("time", time / 1000f);

      // draw our full-screen FBO to the screen -- the shader will be applied
     fboImage.draw();

      // disable shaders so we can go back to normal rendering
     ShaderProgram.unbind();


Result:

Offline pitbuller
« Reply #8 - Posted 2012-04-08 17:33:31 »

Yeah grid is overkill for desktop but necessity for mobile. Performance is so much better. Amount of shaders ALU's is about 1/500 of fragment version without almoust any visual impact.
Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #9 - Posted 2012-04-08 18:04:26 »

@davedes
Yepp I checkd your PM but I still get artifacts :/ Dunno why, but's always visible for a short time. I will try it as you said, It's my only option anyway. I still need a way to make it possible for a single object ratehr then the whole scene.

@pitbuller
it was smooth, but was wondering^^
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline davedes
« Reply #10 - Posted 2012-04-08 18:21:09 »

The code could be changed to do it on a per-image basis:


It's not efficient (since the shader is applied to the full screen FBO texture each time we draw a wave-effected image) but it will probably be fast enough for most uses.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
   public void drawWave(Graphics g, Image image, float x, float y) {
      fbo.bind();
      g.clear();
      image.draw(x, y);
      fbo.unbind();
      wave.bind();
      wave.setUniform1f("time", time / 1000f);
      fboImage.draw();
      ShaderProgram.unbind();
   }

   public void render(GameContainer container, Graphics g)
         throws SlickException {
      bg.draw(0, 0, container.getWidth(), container.getHeight());

      drawWave(g, picture, 50, 50);
     
      drawWave(g, picture.getSubImage(125, 70, 100, 100).getScaledCopy(2f), 415, 55);
   }



The end result is the same, though. Why do you think you need it on a "per object" basis? Maybe if you let us know what you're going for we can provide a better solution...

Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #11 - Posted 2012-04-08 19:59:34 »

Looks awesome, I will try that the next days thanks Smiley

I simply want to have the option to make a effect on an object, for a battle system. I used that in the RPG Maker too because it's a nice effect. That's all to it xD
It's also for learning stuff and I couldn't make it work be myself ._.
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

BurntPizza (8 views)
2014-09-21 01:30:30

BurntPizza (9 views)
2014-09-21 00:34:41

moogie (10 views)
2014-09-21 00:26:15

UprightPath (23 views)
2014-09-20 20:14:06

BurntPizza (27 views)
2014-09-19 03:14:18

Dwinin (40 views)
2014-09-12 09:08:26

Norakomi (70 views)
2014-09-10 13:57:51

TehJavaDev (96 views)
2014-09-10 06:39:09

Tekkerue (49 views)
2014-09-09 02:24:56

mitcheeb (70 views)
2014-09-08 06:06:29
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!