Anaglyphic 3D (Red/Cyan) using Shaders

Share your Work

sableRaph

Anaglyphic 3D (Red/Cyan) using Shaders

in Share your Work • 6 months ago

I couldn't find a simple method to create anaglyphs in Processing (there was a library but it's deprecated) so I gave shaders a go.

Right now, we're merely taking two PImage objects (one for the left eye, one for the right eye) and combining them using one of two methods: simple Red/Cyan color filters or a channel subtraction somewhat similar to the Dubois method. The first one was ported from straight GLSL and the second one from a Core Image filter by John Einselen (see references below).

I guess the next step will be to add two cameras, deal with divergence, assymetric frustrum and the whole shebang :)

Fork it on Github: https://github.com/SableRaf/Processing-Experiments/tree/master/2013/AnaglyphShader

I'm forever indebted to these people for making the original shaders:

Replies(2)

sableRaph

Re: Anaglyphic 3D (Red/Cyan) using Shaders

6 months ago

A small step forward as I updated this Processing 1.0 stereo viewing example by John Gilbertson to work with 2.0b8.

Here is the code:

// stereo viewing taken from http://wiki.processing.org/index.php?title=Stereo_viewing
// @author John Gilbertson
// Adapted for Processing 2.0 by Raphaël de Courville
// https://twitter.com/sableRaph
float rotation;
PGraphics left, right;
void setup()
{
size(500,300,P3D);
left = createGraphics(width, height, P3D);
right = createGraphics(width, height, P3D);
perspective(PI/3.0,1,0.1,1000); //this is needed ot stop the images being squashed
noStroke();
rotation=0;
}
void draw()
{
rotation+=0.01; //you can vary the speed of rotation by altering this value
// Left Eye
// Using Camera gives us much more control over the eye position
left.beginDraw();
left.ambientLight(64,64,64); //some lights to aid the effect
left.pointLight(128,128,128,0,20,-50);
left.background(0);
left.noFill();
left.stroke(255);
left.camera(-5,0,-100,0,0,0,0,-1,0);
left.pushMatrix();
left.rotateX(rotation);
left.rotateY(rotation/2.3);
left.box(30);
left.translate(0,0,30);
left.box(10);
left.popMatrix();
left.endDraw();
// Right Eye
right.beginDraw();
right.ambientLight(64,64,64); //some lights to aid the effect
right.pointLight(128,128,128,0,20,-50);
right.background(0);
right.noFill();
right.stroke(255);
right.camera(5,0,-100,0,0,0,0,-1,0);
right.pushMatrix();
right.rotateX(rotation);
right.rotateY(rotation/2.3);
right.box(30);
right.translate(0,0,30);
right.box(10);
right.popMatrix();
right.endDraw();
PImage scene;
// Switch between the two images to get the jitter effect.
if(frameCount%8<4) scene=left;
else scene=right;
image(scene,0,0,width, height);
}

sableRaph

Re: Anaglyphic 3D (Red/Cyan) using Shaders

6 months ago

Now in 3D!

Actually, jpeg compression really ruins the effect, for the real thing, get the source on github:

https://github.com/SableRaf/Processing-Experiments/tree/master/2013/stereoCameraAnaglyph

Top Reply