Skip to content

A Javascript implementation of anaglyph image generator using a few HTML5 APIs.

License

Notifications You must be signed in to change notification settings

logicmd/HTML5-Anaglyph-Image

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5-Anaglyph-Image

This is the core api of master. All codes are rewritten to be more simple and efficient.

Setup

  1. add stereoDraw.js in your head of html.
  2. call the function.

Usage

stereoDrawImage(imgSrc, stereoType, anaglyphMode, glassType, cnvsDstID)
  • imgSrc: url of source, NOTICE, the image must be loaded in the html.
  • stereoType: Stereo type of the source image
    • "Flat"
    • "Anaglyph"
    • "StereoLR"
    • "StereoRL"
    • "StereoUD"
    • "StereoDU"
  • anaglyphMode: Anaglyph Mode of the procedure
    • "TrueAnaglyph"
    • "GrayAnaglyph"
    • "ColorAnaglyph"
    • "OptimizedAnaglyph"
  • glassType: Anaglyph Mode of the procedure
    • "RedCyan"
    • "GreenMagenta"
  • scaleRate: Scale the final anaglyph image.
  • cnvsDstID: Destination Canvas ID,NOTICE, the canvas must exist in the html.

Stereo Type

  • "Flat" -> A flat picture.
  • "Anaglyph" -> Already got a anaglyph views.
  • "StereoLR/StereoRL" -> Left-Right/Right-Left Views
  • "StereoUD/StereoDU" -> Up-Down/Down-up Views

Glasses Type

Anaglyph images are used to provide a stereoscopic 3D effect, when viewed with glasses where the two lenses are different (usually chromatically opposite) colors, such as red and cyan.

Red-Cyan Glasses

patent-free, limited color perception, currently the most common in use; images available in full version (red channel has only red color) and half version (red channel is a red-tinted grayscale image, yields worse colors but less retinal rivalry).

Green-Magenta Glasses

Same principle as red-cyan, somewhat newer. Less chromatic aberration, as the red and blue in magenta balance well with green.

Anaglyphs Mode

All the following formula and demo anaglyph picture is based on the Red-Cyan glasses.

True Anaglyphs

  • Dark image
  • No color reproduction
  • Little ghosting

Gray Anaglyphs

  • No color reproduction
  • More ghosting than true anaglyphs

Color Anaglyphs

  • Partial color reproduction (but not as good as color anaglyphs)
  • Less retinal rivalry than color anaglyphs

Optimized Anaglyphs

In addition, we applied a gamma correction (gamma value 1.5) to brighten up final red channel ra. Stereoscopic Player implements a further improved algorithm which partially maps the red channels to green and blue before applying the above formula.

  • Partial color reproduction (but not of red shades)
  • Almost no retinal rivalry

When we talk about retinal rivalry, we just mean the retinal rivalry caused by brightness differences of colored objects. Of course there is an additional form of retinal rivalry, independently of the anaglyph method used: retinal rivalry caused by the different color channels perceived by left and right eye.

Optimized+ Anaglyphs

Highly optimized anaglyphs could give better visual feeling.

About

A Javascript implementation of anaglyph image generator using a few HTML5 APIs.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.7%
  • HTML 12.6%
  • Python 3.7%