Anaglyphic 3D in GLSL

r3dux | May 9, 2011

I’ve been playing around with getting some red/cyan stereoscopic 3D working of late, and it’s all turned out rather well – take a look… (Red/Blue or Red/Cyan glasses are required for the effect to work):

Anaglyphic 3D in GLSL

Click for bigger version.

If you’ve got suitable glasses you should definitely see a 3D effect, although I don’t think me rescaling the image has done it any favours – so click the image to see the full sized version for the full effect.

The trick to this has been to render the scene twice to two separate FBO textures, then sample from the left and right textures to draw a fullscreen quad with a combined version as follows:

// Fragment shader to perform Analyphic 3D conversion of two textures from the left and right eyes
#version 330
 
uniform sampler2D leftEyeTexture;
uniform sampler2D rightEyeTexture;
 
in vec2 vTexCoord;
 
out vec4 vFragColour;
 
void main(void)
{
	vec4 leftFrag = texture(leftEyeTexture, vTexCoord);
	leftFrag = vec4(1.0, leftFrag.g, leftFrag.b, 1.0); // Left eye is full red and actual green and blue
 
	vec4 rightFrag = texture(rightEyeTexture, vTexCoord);
	rightFrag = vec4(rightFrag.r, 1.0, 1.0, 1.0); // Right eye is full green and blue and actual red
 
	// Multiply left and right components for final ourput colour
	vFragColour = vec4(leftFrag.rgb * rightFrag.rgb, 1.0); 
}

In the code itself, the torus’ spin around on the spot and look pretty good, although there’s no anti-aliasing as yet as I need to create some multisample buffers instead of straight/normal buffers for the FBO, but it’s not decided to play ball just yet – not to worry though, the hard part’s done and I’m sure multisampling will be sorted in a day or so. After that, I might give ColorCode3D (TM)(R)(C)(Blah) a go, as it seems to give a better colour representation whilst still allowing the same amount of depth as traditional anaglyphic techniques. Also, I’ve got to start using asymmetric frustums for the projection to minimise the likelihood of eye-strain, but I don’t see that as being too much of a problem.

Good times! =D

Related posts:

  1. C++/OpenGL/GLSL Texture Manipulation
  2. How To: Syntax highlight GLSL shaders in Gedit
Categories
Coding
Tags
, , , , , , ,
Comments rss
Comments rss
Trackback
Trackback
Print This Post Print This Post

« »

10 Responses to “Anaglyphic 3D in GLSL”

  1. Nuclear says:
    September 21, 2011 at 1:02 am

    After trying out various anaglyph glasses, I believe red-cyan are the best. Colorcode try to retain more color, but I find the extreme difference in brightness levels between the left and right eyes very tiring.

    Reply
    • r3dux says:
      September 21, 2011 at 10:08 am

      I never had any ColorCode glasses to try it out with, although I did try with Green/Magenta TrioScopic glasses – and, well, it works – but I wouldn’t have been able to call one over the other, they were just different. Which reminds me that I should prolly post up a final multisampling buffer version with anaglyph cycling options… But regardless, I guess colour reproduction is always going to be dreadful with any anaglyphic method.

      Thanks for your anaglyph post, btw – I found it really useful in getting my own stuff up and running. Much appreciated.

      Reply
  2. tuxy says:
    November 14, 2011 at 7:30 am

    is there any source code?? download??

    Reply
    • r3dux says:
      November 14, 2011 at 8:53 am

      The non-anti-aliased code works fine so I could post that up, but the multisample buffer version complains at one point (even though it works and runs as expected) – lemme take a look this evening and I’ll post something up, even if it’s just the non-AA version.

      Reply
      • r3dux says:
        November 14, 2011 at 4:09 pm

        Alright – try this: ORIG-Anaglyphic-GLSL-with-AA.zip.

        It’s a Code::Blocks project and I’ve fixed it so that it doesn’t moan about allocating multisampled buffer storage – keys are W/A/S/D and mouse to move around and F1 to maximise/restore window size.You’ll also need red/cyan 3D glasses ;)

        This project is in desperate need of refactoring into classes – as it stands it’s all just mashed together so I could get something up and running in the quickest time possible. Unfortunately, I just don’t have the time to refactor it at the moment, but when/if I do I’ll post an updated version. Also, it doesn’t use asymmetric frustums so it’s quite likely to cause some eye-strain if used for long periods – so use at your own risk!

        The best thing to play around with is probably the eyeSeparation value defined on line 54 of main.cpp – larger values increase the separation to increase the 3D effect and make objects appear infront of the screen (up to a certain point where your brain just won’t gel the two images together anymore) , but even small values where the “front” is at the physical screen’s location look pretty good!

        Have fun…

        Reply
  3. caramish says:
    November 26, 2011 at 6:04 am

    hey friend! I have a question… what are the combinations for the left and right frags if i want to make this work for:
    red/blue
    red/green
    as I can see, the one in your code works fine for red/cyan… but what about this other 2?
    sorry for my english, thak you.

    Reply
    • r3dux says:
      November 27, 2011 at 10:45 am

      I’ve used the following for trioscopic 3D (green/magenta):

      // Final colour output
vFragColour = vec4(rightFrag.r, leftFrag.g, rightFrag.b, 1.0);

      And I believe the following will work for ColorCode 3D:

      vec3 coefficient = vec3(0.15, 0.15, 0.7);
 
// Take the dot product of the right-eye colour components and specified coefficients
float mixedRightFrag = dot(rightFrag.rgb, coefficient);
 
// Final colour output
vFragColour = vec4(leftFrag.r, leftFrag.g, mixedRightFrag, 1.0);

      There’s a good article which shows how do do all this and also remove/minimise the ghosting effect here:
      http://iaian7.com/quartz/AnaglyphCompositing.

      Reply
  4. Raphaël de Courville says:
    March 23, 2013 at 2:51 pm

    This is very helpful!

    I ported the code to Processing and posted the result on the forums: https://forum.processing.org/topic/anaglyphic-3d-red-cyan-using-shaders

    I hope it’s okay (otherwise, let me know).

    Thanks again.

    Raphaël de Courville

    Reply

Leave a Reply