CODEWITHSUNDEEP
c++openglopengl-3
user1232465
user1232465

Reputation: 73

Screen / glass break effect

I want to do something like that in screen transition using OpenGL(with shaders). I have been looking for some tutorial or something like that, but without any effect. How can I achieve that effect? enter image description here

Upvotes: 3

Views: 2827

Answers (3)

Alink
Alink

Reputation: 394

Here is a method avoiding to fiddle with polygons and also allowing more varied effects:

Simply use a mask. I explain for one piece first: just draw your main textured quad falling in a random direction, but use a second texture to get its alpha. That second texture(the mask) is just a black image with a white piece drawn on it. Note that it allows to have any shape, not just a polygon. Now, it's already possible to do the effect you want by simply drawing the main quad several times using different masks, but that need many textures.

So, to use only one mask texture for all pieces, you can use shaders and instead of directly using the value of the mask as alpha, instead use the value N (or a range around N) to mean only opaque for piece N. You now just need to increment N before rendering each piece. To create the mask, draw a bitmap (with an image editor) with black zigzag and flood fill the created polygons with each shade of gray from your palette. If you need a lot of pieces you can use more than one channel.

BtW it should be easy to generate that mask using bitmap functions : simply create a bitmap, draw some random lines, scan it and use flood fill on each empty pixel, incrementing the color each time. At least that seems simpler than handling polygons cutting.

Now, what I like is that you can have irregular edges for free, and since you have a second texture, you can also use it to add effects on the main one, like your black borders or even shatered glass edges with various transparency levels.

Upvotes: 0

Giel
Giel

Reputation: 397

Just some ideas of how you can make a start..

  1. If you do start from a 3D scene, render it to a texture using a rendertarget for example.
  2. Draw, in the same size canvas random polygon shapes*
  3. Determine random offset for translation/rotation per polygon
  4. redraw the image, find in which original polygon the original shape is, if so, transform the pixel with the same transformation as the new random transformed polygon
  5. finish with a black pixel border around every polygon *only thing is, how to get the initial polygons, you could start drawing a line from random pos with random direction and a random length, then from that line you draw another one, until you hit the edge, then start from a vertex of the existing line and repeat...

google for random polygon code, or triangulating a rectangle Perlin noise, Voronoi Diagrams (as mentioned above) etc

Upvotes: 3

stinky472
stinky472

Reputation: 6797

One of the most popular algorithms for this kind of shattering effect involves Voronoi Diagrams. Researching that subject will give you details on an algorithm that can be highly controllable and give you a similar effect.

However, it produces convex polygons as cells. Your image has some concave pieces but a VD would be a very good start. You could, for example, achieve similar effects by merging some of the resulting polygons from a Voronoi Diagram.

Upvotes: 1

Related Questions