Horde3D
http://horde3d.org/forums/

Pong!
http://horde3d.org/forums/viewtopic.php?f=4&t=637
Page 1 of 1

Author:  DarkAngel [ 03.02.2009, 08:46 ]
Post subject:  Pong!

Image

Download (310KB)

All the graphics are procedural (rendered with GLSL only), distance fields for circles and boxes are easy to calculate :wink:

Controls
Enter to start each round.
A/Z to move player 1's paddle.
Up/Down to move player 2's paddle.
Escape to quit.
F displays frame-rate.

Author:  DDd [ 03.02.2009, 22:56 ]
Post subject:  Re: Pong!

Ha...

Nice one :mrgreen:

Author:  marciano [ 04.02.2009, 20:12 ]
Post subject:  Re: Pong!

Reminds me of the good old times :)

Author:  Siavash [ 14.02.2009, 07:46 ]
Post subject:  Re: Pong!

Is it possible to use your changes in engine to create a GUI lib? IMHO it's great to have a GUI lib based on shaders to accelerate heavy 2d scenes and adding support for png/mng anims ! Could you explain it a bit more ? It's too interesting for me :D

Author:  DarkAngel [ 14.02.2009, 11:49 ]
Post subject:  Re: Pong!

Siavash wrote:
Is it possible to use your changes in engine to create a GUI lib? IMHO it's great to have a GUI lib based on shaders to accelerate heavy 2d scenes and adding support for png/mng anims ! Could you explain it a bit more ? It's too interesting for me :D
You could use the ideas from my shaders to create a GUI renderer, yes.
These shaders do not use texture data, instead they just use mathematical descriptions of shapes within the fragment shader.

For example, a circle can be expressed mathematically as:
Code:
x^2 + y^2 = radius^2

These variables (x,y and radius) are given to the shader via 2 uniform variables:
Code:
uniform vec4 radius;// vec4(r, 0,0,0);
uniform vec4 offset;// vec4(x, y, 0,0);

The shader utilizes "texCoord" to determine the location of the pixel currently being rendered.

First, the shader measures the distance from the current pixel to the center of the circle:
Code:
distance( texCoord, offset.xy )

If this distance is less than the radius, then this pixel is inside the circle. Otherwise, the pixel is outside the circle.

To make the shaders easier to write, this distance is transformed into a standard distance-field representation.
Code:
float d = distance( texCoord, offset.xy ) - radius.x;

Now, the variable d tells us the distance to the edge of the circle (instead of the distance to the center).
If the distance is less than 0, the current pixel is inside the shape. If it is greater than 0, this pixel is outside the shape.

You can get anti-aliased smooth edges with the smoothstep function:
Code:
float alpha = 1.0-smoothstep( -half_pixel_size, half_pixel_size, distance_field );
gl_FragColor = vec4(color,alpha);


Distance fields can be combined using min and max.
One shape can be subtracted from another with: C = max( A, -1*B )
One shape can be added to another with: C = min( A, B )

E.g. you can cut one circle out of another to make a doughnut:
Code:
float circle_big = distance( texCoord, offset.xy ) - 0.5;
float circle_small = distance( texCoord, offset.xy ) - 0.125;
float doughnut = max( circle_big, -1.0*circle_small );

Page 1 of 1 All times are UTC + 1 hour
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/