PDA

View Full Version : combining webgl with anaglyph



Friba77
05-29-2012, 12:31 AM
Hi!

Is it possible zu combine webgl with the anyglyph technique?
The result should be still interactive. Animations should be possible.

Friba77
05-30-2012, 10:25 AM
Is it possible to define 2 vertex-shader (1 for each eye) and 1 fragment-shader? And can this fragment-shader use the data of these 2 vertex-shaders?

On https://github.com/mrdoob/three.js/issues/194 i have found:

gl_FragColor = vec4((color1.x + color2.x)/2.0, (color1.y + color2.y)/2.0, 0.0, 1.0);
Could this help?

I have also found http://paulbourke.net/miscellaneous/ste ... reorender/ (http://paulbourke.net/miscellaneous/stereographics/stereorender/):
// Right eye
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
// For frame sequential, earlier use glDrawBuffer(GL_BACK_RIGHT);
glViewport(0,0,windowwidth,windowheight);
// For side by side stereo
//glViewport(windowwidth/2,0,windowwidth/2,windowheight);
top = widthdiv2;
bottom = - widthdiv2;
left = - aspectratio * widthdiv2 - 0.5 * camera.eyesep * camera.near / camera.fo;
right = aspectratio * widthdiv2 - 0.5 * camera.eyesep * camera.near / camera.fo;
glFrustum(left,right,bottom,top,camera.neardist,ca mera.fardist);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(camera.pos.x + right.x,camera.pos.y + right.y,camera.pos.z + right.z,
camera.pos.x + right.x + camera.dir.x,
camera.pos.y + right.y + camera.dir.y,
camera.pos.z + right.z + camera.dir.z,
camera.up.x,camera.up.y,camera.up.z);
// Create geometry here in convenient model coordinates

// Left eye
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
// For frame sequential, earlier use glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,windowwidth,windowheight);
// For side by side stereo
//glViewport(0,0,windowidth/2,windowheight);
top = widthdiv2;
bottom = - widthdiv2;
left = - aspectratio * widthdiv2 + 0.5 * camera.eyesep * camera.near / camera.fo;
right = aspectratio * widthdiv2 + 0.5 * camera.eyesep * camera.near / camera.fo;
glFrustum(left,right,bottom,top,camera.neardist,ca mera.fardist);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(camera.pos.x - right.x,camera.pos.y - right.y,camera.pos.z - right.z,
camera.pos.x - right.x + camera.dir.x,
camera.pos.y - right.y + camera.dir.y,
camera.pos.z - right.z + camera.dir.z,
camera.up.x,camera.up.y,camera.up.z);
// Create geometry here in convenient model coordinates
But i do not really understand this code.

Friba77
06-13-2012, 07:12 AM
I have read something about "multipass rendering". Does here anybody know a webgl-tutorial? Could this help to create anaglyph webgl animations?

Friba77
06-18-2012, 12:55 PM
I have found something interesting on http://bkcore.com/blog/3d/webgl-three-j ... -glow.html (http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html):


function render() {
glowcomposer.render();
finalcomposer.render();
}
three.js seems to execute 2 render-commands. I think i would need something similar for my anaglyph-problem. Does anybody know how this render-method works?