Tips/tricks related to Computer Graphics, GPUs and other programming

I have been meaning to get into WebGL for a while, and a few days ago I discovered this excellent WebGL library called Three.js on Github.

Someone requested an Anaglyph WebGL Renderer for it, so I thought I might give it a try. After reading up on the code I came up with an example you can find here (NOTE: Works best on latest version of Chrome and Firefox).

The author of Three.js has already fixed my version and incorporated an actual anaglyph renderer into his code. Here is an example.

If you are interested in WebGL development I would recommend checking out Three.js.


Comments on: "WebGL Anaglyph 3D using Three.js" (5)

  1. […] Dig out your 3D glasses for this anaglyph demo from Shayan Javed. […]

  2. Hi,

    I’m trying to understand how do you this and reproduce it in a simple WebGL application.

    Can you please telle me if you render the object twice or more ? or all the job is doing in the shader ?

    Can you gie us the shader or a webgl code ?

    Thanks a lot.

  3. Ben Gildenstein said:

    Fantastic work, really. It’s great to see an anaglyph example of WebGL, but there is one major flaw: there is no calibration for the red and cyan! Many monitors display colors differently and many glasses have subtle differences in the filters. A demo like this on my machine/glasses filters the red quite well (in the cyan) but does not filter the cyan well at all (with the red). The result is pretty heavy ghosting, which ruins the 3D effect.

    Once again, great job. It could be stellar with a calibration that allowed users to set the levels of red and cyan to fit their unique screen/glasses combo.

    I hope you are not offended by this suggestion! Keep up the good work.

    • Never offended by a suggestion! Thanks for the comment – I have never really thought about calibration. Though my Anaglyph Renderer was crudely built the author of Three.js has incorporated his own (as you can see in one of the examples). I would suggest giving it as a suggestion to him (through the github repository for Three.js). I’m not even sure how I would do the whole filtering thing with different monitors/glasses.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: