What techniques are used in this style? What steps would be required to recreate it?
(Screenshot of this app: https://play.google.com/store/apps/details?id=com.dkeesto.holographlw)
6
-
\$\begingroup\$ Why are you sure this is made with some "magic" shader? There are plenty ways of doing this even with Fixed-Function Pipeline. \$\endgroup\$– KromsterAug 21, 2014 at 8:10
-
\$\begingroup\$ isn't a convincing glow effect kind of hard to do with FFP? (blurring in FFP is terribly slow) \$\endgroup\$– Timothy GrooteAug 21, 2014 at 8:24
-
3\$\begingroup\$ This could be simply just textured polygons. \$\endgroup\$– msellAug 21, 2014 at 9:26
-
\$\begingroup\$ @TimothyGroote: There's no need to blur anything in real-time here ;) \$\endgroup\$– KromsterAug 21, 2014 at 9:26
-
1\$\begingroup\$ @TimothyGroote: Even if shapes changed and glow was pulsing - it could still be made with FFP (by just moving and tweaking gradients transparencies). \$\endgroup\$– KromsterAug 21, 2014 at 10:13
|
Show 1 more comment
3 Answers
\$\begingroup\$
\$\endgroup\$
0
This is generic solution that will work even with FFP:
- Sort models from far to near (in the example this is just a matter of 2 planes)
- Set blending to additive.
- Render opaque outline;
- Render half-transparent insides;
- Render outlines with half-transparent fading gradient;
- Render glowing dots sprites on the corners.
\$\begingroup\$
\$\endgroup\$
To render just the edges of an arbitrary polygon you could use a Solid Wireframe technique. It uses barycentric coordinates to determine which edges to draw. For example you might have a triangle whose barycentric coordinates are (for each vertex) B0: (1, 0, 0) B1: (0, 1, 0) B2: (0, 0, 1). Put it simply, when these values are interpolated the further any of the values are close to zero, then the further you are to an edge. You can use this to shade the edges differently than the inside of a the polygon.
I have used this technique to draw the sphere and hexagon tiles you see in this video. As the others have suggested, you can add a glow/bloom effect to improve the overall effect.
\$\begingroup\$
\$\endgroup\$
In very crude pseudo-code :
- Draw the "laser lines" to an off screen buffer.
in case of openGL, this could be a FrameBuffer
Then draw the off screen buffer to the screen.
Blur the off screen buffer
you could use GLSL shaders, or even a hand coded kernel for this
- Blend the (now blurred off screen buffer) to the screen (using additive blending)
note that additive blending in OPENGL is done by subtraction!
