Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Apply anaglyph 3D filter using Javascript

Anaglyph3D class creates a stereoscopic 3D effect for images or texts by means of encoding each eye's image using filters of different colors .

It is possible to specify color filters for each eye to use, thus adapting image or text for all type of anaglyphic glasses.

Package contains anaglyph3d.js and anaglyph3d.packed.js (packed javascript)and two example files: example_photo.html and example_text.html to demonstrate class functionality.

Contents

Download

Example codes

var imgLeft = "1.jpg";
var imgRight = "2.jpg";

//red green
var rg = new Anaglyph3D({
	left: "magenta",
	right: "green"
});
rg.image("red_green", imgLeft, imgRight);

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew Anaglyph3D(config);
DescriptionCreate an anaglyphic 3D filter with specified colors
Input parameters

json config - Json structure with configuration properties

  • string left - color to use for left eye, possible values: ('red','blue','green','yellow','magenta','cyan')(default: 'red')
  • string right - color to use for right eye, possible values: ('red','blue','green','yellow','magenta','cyan')(default: 'cyan')
  • int offset - offset in pixels to use for 3D text (default: 3)
Example input
//red green
var rg = new Anaglyph3D({
	left: "magenta",
	right: "green"
});

Apply filter to images

Back to method list

Method nameimage(id, image1, image2)
DescriptionApply created filter to left eye and right eye images and output it to specified container
Input parameters

string of object id - id of element or HTML element itself where to output the result. Container must be in same dimensions as image to output full image

string image1 - path to left eye image

string image2 - path to right eye image

Apply filter to texts

Back to method list

Method nametext(id)
DescriptionApply created filter to the text of specified container
Input parameters

string of object id - id of element or HTML element itself, which containing text to modify.

Latest changes

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus