├── .gitignore
├── images
    ├── side-by-Side-LCI.jpg
    ├── side-by-side-3d.jpg
    ├── G-Force-trailer-3D.jpg
    ├── 5305857371_a7b21074a2.jpg
    ├── 5310631602_dc8361d16e.jpg
    ├── masters3dsidebyside1.jpg
    └── statue2-3D-side-by-side-960.jpg
├── LINKS.txt
├── README.md
├── License.txt
└── poc.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | 


--------------------------------------------------------------------------------
/images/side-by-Side-LCI.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/side-by-Side-LCI.jpg


--------------------------------------------------------------------------------
/images/side-by-side-3d.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/side-by-side-3d.jpg


--------------------------------------------------------------------------------
/images/G-Force-trailer-3D.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/G-Force-trailer-3D.jpg


--------------------------------------------------------------------------------
/images/5305857371_a7b21074a2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/5305857371_a7b21074a2.jpg


--------------------------------------------------------------------------------
/images/5310631602_dc8361d16e.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/5310631602_dc8361d16e.jpg


--------------------------------------------------------------------------------
/images/masters3dsidebyside1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/masters3dsidebyside1.jpg


--------------------------------------------------------------------------------
/images/statue2-3D-side-by-side-960.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moul/3d-stereo-html5/master/images/statue2-3D-side-by-side-960.jpg


--------------------------------------------------------------------------------
/LINKS.txt:
--------------------------------------------------------------------------------
1 | http://www.stereoscopy.com/downloads/
2 | http://www.3dtv.at/knowhow/anaglyphcomparison_en.aspx
3 | http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
4 | http://coding.smashingmagazine.com/2011/08/30/optimize-images-with-html5-canvas/
5 | http://spyrestudios.com/html5-canvas-image-effects-black-white/
6 | 
7 | http://gifdrole.com/gifs3d/bv000032.gif
8 | 
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 3d html5 canvas viewer
 2 | ======================
 3 | 
 4 | by Manfred Touron
 5 | 
 6 | Example
 7 | -------
 8 | 
 9 | The side-by-side image :
10 | 
11 | <img src="http://c387484.r84.cf1.rackcdn.com/jr/Screen%20Shot%202012-08-10%20at%202.42.18%20PM.png" />
12 | 
13 | Optimized anaglyph result :
14 | 
15 | <img src="http://c387484.r84.cf1.rackcdn.com/jr/Screen%20Shot%202012-08-10%20at%202.43.08%20PM.png" />
16 | 
17 | Half-color anaglyph result :
18 | 
19 | <img src="http://c387484.r84.cf1.rackcdn.com/jr/Screen%20Shot%202012-08-10%20at%202.43.54%20PM.png" />
20 | 
21 | Demo
22 | ----
23 | 
24 | * [POC](http://moul.github.com/3d-stereo-html5/poc.html): a proof of concept
25 | 
26 | © 2012 Manfred Touron - [MIT License](https://github.com/moul/3d-stereo-html5/blob/master/License.txt).
27 | 


--------------------------------------------------------------------------------
/License.txt:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2012 Manfred Touron. All rights reserved.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/poc.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <title>test</title>
  4 |   </head>
  5 |   <body>
  6 |     <select onChange="javascript:img.src=this.value">
  7 |       <option value="images/statue2-3D-side-by-side-960.jpg">statue2-3D-side-by-side-960.jpg</option>
  8 |       <option value="images/5310631602_dc8361d16e.jpg">5310631602_dc8361d16e.jpg</option>
  9 |       <option value="images/masters3dsidebyside1.jpg">masters3dsidebyside1.jpg</option>
 10 |       <option value="images/side-by-Side-LCI.jpg">side-by-Side-LCI.jpg</option>
 11 |       <option value="images/G-Force-trailer-3D.jpg">G-Force-trailer-3D.jpg</option>
 12 |       <option value="images/side-by-side-3d.jpg">side-by-side-3d.jpg</option>
 13 |       <option value="images/5305857371_a7b21074a2.jpg">5305857371_a7b21074a2.jpg</option>
 14 |     </select>
 15 | 
 16 |     <select onChange="javascript:algorythm=this.value;handleImg(img);">
 17 |       <option value="default" selected>Default</option>
 18 |       <optgroup label="3d renderers">
 19 |         <option value="true-anaglyphs">True Anaglyphs</option>
 20 |         <option value="optimized-anaglyphs">Optimized Anaglyphs</option>
 21 |         <option value="gray-anaglyphs">Gray Anaglyphs</option>
 22 |         <option value="color-anaglyphs">Color Anaglyphs</option>
 23 |         <option value="half-color-anaglyphs">Half Color Anaglyphs</option>
 24 |       </optgroup>
 25 |       <optgroup label="not 3d effects">
 26 |         <option value="grayscale">Grayscale</option>
 27 |         <option value="brightness">Brightness</option>
 28 |         <option value="threshold">Threshold</option>
 29 |       </optgroup>
 30 |     </select>
 31 | 
 32 |     <hr />
 33 | 
 34 |     <script>
 35 |       var canvas = document.createElement('canvas');
 36 |       var canvas2 = document.createElement('canvas');
 37 |       var algorythm = 'default';
 38 |       var img = new Image;
 39 |       img.onload = function() {
 40 |         handleImg(img);
 41 |       };
 42 | 
 43 |       function handleImg(img) {
 44 |         halfWidth = img.width / 2;
 45 |         canvas.width = img.width;
 46 |         //canvas.width = halfWidth;
 47 |         canvas.height = img.height;
 48 |         var ctx = canvas.getContext('2d');
 49 |         ctx.drawImage(img, 0, 0);
 50 |         var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 51 |         var pixels = imageData.data;
 52 |         console.info('canvas.width', canvas.width);
 53 |         console.info('canvas.height', canvas.height);
 54 |         console.info('pixels.length', pixels.length);
 55 |         for (var i = 0, il = pixels.length; i < il; i+= 4) {
 56 |           //var color = Math.random() * 255;
 57 |           if ((i / 4) % img.width < img.width / 2) {
 58 |             var r1 = pixels[i + 0],
 59 |               r2 = pixels[i + 0 + img.width * 2],
 60 |               g1 = pixels[i + 1],
 61 |               g2 = pixels[i + 1 + img.width * 2],
 62 |               b1 = pixels[i + 2],
 63 |               b2 = pixels[i + 2 + img.width * 2],
 64 |               ra = 0,
 65 |               ga = 0,
 66 |               ba = 0;
 67 | 
 68 |             switch (algorythm) {
 69 |             case 'true-anaglyphs':
 70 |               ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
 71 |               ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
 72 |               break;
 73 |             case 'optimized-anaglyphs':
 74 |               ra = 0.7 * g1 + 0.3 * b1;
 75 |               ga = g2;
 76 |               ba = b2;
 77 |               break;
 78 |             case 'gray-anaglyphs':
 79 |               ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
 80 |               ga = ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
 81 |               break;
 82 |             case 'color-anaglyphs':
 83 |               ra = r1;
 84 |               ga = r2;
 85 |               ba = b2;
 86 |               break;
 87 |             case 'half-color-anaglyphs':
 88 |               ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
 89 |               ga = r2;
 90 |               ba = b2;
 91 |               break;
 92 |             case 'grayscale':
 93 |               var v = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
 94 |               ra = ga = ba = v;
 95 |               break;
 96 |             case 'brightness':
 97 |               var adjustment = 100;
 98 |               ra = r1 + adjustment;
 99 |               ga = g1 + adjustment;
100 |               ba = b1 + adjustment;
101 |               break;
102 |             case 'threshold':
103 |               var v = (r1 + 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1) ? 255 : 0;
104 |               ra = ga = ba = v;
105 |             break;
106 |             case 'default':
107 |               ra = r1;
108 |               ga = g1;
109 |               ba = b1;
110 |               break;
111 |             default:
112 |               break;
113 |             }
114 |           } else {
115 |             ra = 255;
116 |             ga = 255;
117 |             ba = 255;
118 |           }
119 |           pixels[i + 0] = ra;
120 |           pixels[i + 1] = ga;
121 |           pixels[i + 2] = ba;
122 |         }
123 |         ctx.putImageData(imageData, 0, 0);
124 | 
125 |         canvas2.width = img.width;
126 |         canvas2.height = img.height;
127 |         canvas.style.display = 'block';
128 |         var ctx2 = canvas2.getContext('2d');
129 |         ctx2.drawImage(img, 0, 0);
130 | 
131 |         document.body.appendChild(canvas);
132 |         document.body.appendChild(canvas2);
133 |       }
134 |     img.src = 'images/statue2-3D-side-by-side-960.jpg';
135 |     </script>
136 |   </body>
137 | </html>
138 | 


--------------------------------------------------------------------------------