3
\$\begingroup\$

What techniques are used in this style? What steps would be required to recreate it?

enter image description here

(Screenshot of this app: https://play.google.com/store/apps/details?id=com.dkeesto.holographlw)

\$\endgroup\$
  • \$\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\$ – Kromster says support Monica Aug 21 '14 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 Groote Aug 21 '14 at 8:24
  • 3
    \$\begingroup\$ This could be simply just textured polygons. \$\endgroup\$ – msell Aug 21 '14 at 9:26
  • \$\begingroup\$ @TimothyGroote: There's no need to blur anything in real-time here ;) \$\endgroup\$ – Kromster says support Monica Aug 21 '14 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\$ – Kromster says support Monica Aug 21 '14 at 10:13
2
\$\begingroup\$

This is generic solution that will work even with FFP:

  1. Sort models from far to near (in the example this is just a matter of 2 planes)
  2. Set blending to additive.
  3. Render opaque outline;
  4. Render half-transparent insides;
  5. Render outlines with half-transparent fading gradient;
  6. Render glowing dots sprites on the corners.
\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$
0
\$\begingroup\$

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!

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.