├── .gitignore
├── LICENSE
├── README
├── bin
    └── obj_to_bin.rb
├── bundle.sh
├── demos
    ├── bin_loader.html
    ├── bouncing_cube.html
    ├── chemdoodle.jpg
    ├── complex_hello_world.html
    ├── glge.jpg
    ├── learningwebgl.jpg
    ├── obj_loader.html
    ├── shadertoy.jpg
    ├── spidergl.jpg
    ├── stereo.html
    ├── tar_bin_loader.html
    ├── tar_loader.html
    ├── tram.bin.tar
    ├── tram.jpg
    ├── tram.obj
    ├── tram.obj.bin
    ├── tram.obj.tar
    ├── tram.png
    ├── walas.binm
    ├── walas.obj
    ├── webgl_esitys.html
    └── webgl_presentation.html
├── minify.sh
├── slides
    ├── editor.html
    ├── slides.css
    └── slides.js
└── src
    ├── bin_loader.js
    ├── gl_util.js
    ├── magi.js
    ├── matrix.js
    ├── obj_loader.js
    ├── scene_util.js
    ├── scenegraph.js
    ├── tar.js
    └── util.js


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


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


--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
 1 | Sketching a small WebGL scene graph library
 2 | 
 3 | Goals: [- planned, + implemented, x started]
 4 |   Put together quick presentation graphics
 5 |     x slides/ -- semi-complete HTML slideshow app
 6 | 
 7 |   Write documentation
 8 |     + matrix.js changes -- glMatrix.js fork
 9 |     x gl_util.js -- WebGL utils, DOM utils, Colors, Curves, Klass
10 |     - scenegraph.js -- Basic scene graph
11 |     - scene_util.js -- More advanced stuff, default shaders
12 |     - tar.js -- Tar archive loader
13 |     - obj_loader.js -- Quite incomplete OBJ model format loader
14 |     - bin_loader.js -- Custom binary model format loader
15 | 
16 |   Make simple things simple
17 |     Drawing text
18 |       + Draw text using the 2D canvas
19 |       + Billboard text (buggy)
20 |       - Extruded text (hmm?)
21 |     Drawing images
22 |       + Load image to textured quad
23 |     Applying post-processing filters
24 |       + Displays with FBO render targets
25 |       + Material system
26 |       - Easy way to chain filters
27 |     Animation
28 |       + Move along Bezier curves & Catmull-Rom splines
29 |       x Animation vocabulary
30 |       - Transformation tweens
31 |     User inputs
32 |       + Default camera navigation
33 |       - Event handlers
34 |     Loading and displaying simple textured models
35 |       x Load archives with model and textures using XMLHttpRequest
36 |       - Multiple lights
37 |     Drawing presentation geometry
38 |       + Quads, mesh quads
39 |       + Fullscreen quads
40 |       x Spheres
41 |       x Cubes, mesh cubes
42 |       x Ring segments, capped rings
43 |       - Capped cylinders
44 |       - Ribbons (along Bezier paths)
45 |       - Dice
46 |       - Layouted arrays of objects (grids, circles, ...)
47 | 
48 |   Not-so-complex stuff
49 |     x Rewrite scene graph so that it can handle multiple passes easier.
50 |     x Have a structure that's somewhat like this:
51 |       - Display == render target + scene
52 |         - to draw, bind FBO and render scene
53 |         - write a custom draw method to do fancy stuff like envmaps or shadows
54 |       x Camera == perspective & lookat matrices, used by display
55 |       - Light == per-scene list of light attribs, for use in shaders
56 |       x Scene == graph of nodes
57 |       + Node == matrix + model + material + subgraph
58 |       + Model == geometry
59 |       + Material == shader + uniforms
60 | 
61 |   Complex stuff
62 |     - Shadow maps
63 |     - Depth-peeling
64 |     - Envmaps
65 | 


--------------------------------------------------------------------------------
/bin/obj_to_bin.rb:
--------------------------------------------------------------------------------
 1 | lines = File.readlines(ARGV[0]).map{|l|l.strip}
 2 | verts = lines.grep(/^v /).map{|v| v[2..-1].strip.split(/\s+/).map{|i| i.to_f}}
 3 | normals = lines.grep(/^vn /).map{|v| v[3..-1].strip.split(/\s+/).map{|i| i.to_f}}
 4 | texcoords = lines.grep(/^vt /).map{|v| v[3..-1].strip.split(/\s+/).map{|i| i.to_f}}
 5 | faces = lines.grep(/^f /).map{|f| f[2..-1].strip.split(/\s+/).map{|v| v.split("/").map{|i|i.strip.to_i-1}}}
 6 | 
 7 | larges = faces.find_all{|f| f.length > 4}
 8 | quads = faces.find_all{|f| f.length == 4}
 9 | tris = faces.find_all{|f| f.length == 3}
10 | 
11 | larges.each{|l|
12 |   (2..l.size-1).each{|i|
13 |     tris.push([l[0], l[i-1], l[i]])
14 |   }
15 | }
16 | 
17 | flat_verts = verts.flatten
18 | xmax = verts.map{|v| v[0]}.max
19 | xmin = verts.map{|v| v[0]}.min
20 | ymax = verts.map{|v| v[1]}.max
21 | ymin = verts.map{|v| v[1]}.min
22 | zmax = verts.map{|v| v[2]}.max
23 | zmin = verts.map{|v| v[2]}.min
24 | xscale = xmax - xmin
25 | yscale = ymax - ymin
26 | zscale = zmax - zmin
27 | 
28 | normalized_verts = verts.map{|x,y,z|
29 |   [(x - xmin) / xscale, (y - ymin) / yscale, (z - zmin) / zscale]
30 | }.flatten
31 | fixed_verts = normalized_verts.map{|v| (v * 65535).to_i }
32 | fixed_texcoords = texcoords.flatten.map{|v| ([1,[0,v].max].min * 65535).to_i }
33 | fixed_normals = normals.flatten.map{|v| (0.5 * ([1,[-1,v].max].min + 1.0) * 65535).to_i }
34 | 
35 | File.open(ARGV[0]+".bin", "w"){|s|
36 |   # write vert counts
37 |   s << [verts.size, texcoords.size, normals.size, quads.size, tris.size].pack("N*")
38 | 
39 |   # write scale factors and translate vector
40 |   if [1].pack("N") == [1].pack("I") # big-endian machine
41 |     s << [xscale, yscale, zscale, xmin, ymin, zmin].pack("f*")
42 |   else # little-endian machine
43 |     s << [xscale, yscale, zscale, xmin, ymin, zmin].map{|f| [f].pack("f").reverse }.join
44 |   end
45 | 
46 |   # write verts
47 |   s << fixed_verts.pack("n*")
48 |   s << quads.map{|q| q.map{|v| v[0] } }.flatten.pack("n*")
49 |   s << tris.map{|q| q.map{|v| v[0] } }.flatten.pack("n*")
50 | 
51 |   if texcoords.size > 0
52 |     # write texcoords
53 |     s << fixed_texcoords.pack("n*")
54 |     s << quads.map{|q| q.map{|v| v[1] } }.flatten.pack("n*")
55 |     s << tris.map{|q| q.map{|v| v[1] } }.flatten.pack("n*")
56 |     if normals.size > 0
57 |       # write normals
58 |       s << fixed_normals.pack("n*")
59 |       s << quads.map{|q| q.map{|v| v[2] } }.flatten.pack("n*")
60 |       s << tris.map{|q| q.map{|v| v[2] } }.flatten.pack("n*")
61 |     end
62 |   end
63 | }


--------------------------------------------------------------------------------
/bundle.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | cat src/{matrix,util,gl_util,scenegraph,scene_util,tar,obj_loader,bin_loader}.js > src/magi.js &&
4 | echo "Created src/magi.js";
5 | 
6 | cat slides/slides.js > slides/slides.base.min.js &&
7 | echo "Created slides/slides.base.js";
8 | 
9 | 


--------------------------------------------------------------------------------
/demos/bin_loader.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <title>Demo</title>
 5 |     <script type="text/javascript" src="../src/matrix.js"></script>
 6 |     <script type="text/javascript" src="../src/util.js"></script>
 7 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 8 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 9 |     <script type="text/javascript" src="../src/scene_util.js"></script>
10 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
11 |     <script type="text/javascript">
12 | 
13 |       init = function() {
14 |         var c = byId('c');
15 |         c.style.position = 'fixed';
16 |         c.style.top = '0px';
17 |         c.style.left = '0px';
18 |         c.width = window.innerWidth;
19 |         c.height = window.innerHeight;
20 |         byId('info').innerHTML = "Loading model (560kB)...";
21 |         var w = Magi.Bin.load('walas.binm');
22 |         w.flatNormals = false;
23 |         w.onload = function() {
24 |           byId('info').innerHTML = "Downloaded 560kB in " + w.downloadTime + " ms<br>" +
25 |                                 "Parsed model in " + w.parseTime + " ms<br>" + 
26 |                                 (w.vertices.length / 9) + " triangles";
27 |           var s = new Magi.Scene(c, null, null);
28 |           s.useDefaultCameraControls();
29 |           s.bg = [0,0,0,0];
30 | //           s.drawOnlyWhenChanged = true;
31 |           s.camera.position = [0, 2, 7];
32 |           s.camera.lookAt = [0, 0.5, 0];
33 |           var n = new Magi.Node();
34 |           var sc = 4.0 / (w.boundingBox.diameter);
35 |           n.scaling = [sc, sc, sc];
36 |           n.model = w.makeVBO();
37 |           n.position[1] = 0.5;
38 |           n.rotation.axis = [1,0,0];
39 |           n.rotation.angle = -Math.PI/2;
40 |           n.material = Magi.DefaultMaterial.get();
41 |           n.material.floats.LightDiffuse = [1,1,1,1];
42 |           n.material.floats.MaterialShininess = 6.0;
43 |           n.material.floats.MaterialDiffuse = [1,1,1,1];
44 |           s.scene.appendChild(n);
45 |           s.scene.afterTransform(function(m) {
46 |             mat4.set(m, Magi.DefaultMaterial.lightMatrix);
47 |           });
48 |           var lp = n.material.floats.LightPos;
49 |           lp[1] = 3;
50 |           n.addFrameListener(function(t, dt) {
51 |             lp[0] = 7 * Math.sin(t/1000);
52 |             lp[2] = 7 * Math.cos(t/1000);
53 |           });
54 |           var cb = new Magi.Cube();
55 |           cb.setScale(0.2);
56 |           cb.addFrameListener(function(t,dt) {
57 |             vec3.set(lp, this.position);
58 |           });
59 |           s.scene.appendChild(cb);
60 |         }
61 |       }
62 |     </script>
63 |     <style>
64 |       body {
65 |         overflow : hidden;
66 |         font-family : sans-serif;
67 |       }
68 |     </style>            
69 |   </head>
70 |   <body>
71 |     <center>
72 |     <canvas id="c" width="800" height="400"></canvas>
73 |     <p id="info"></p>
74 |     </center>
75 |     <script> init(); </script>
76 |   </body>
77 | 
78 | </html>
79 | 


--------------------------------------------------------------------------------
/demos/bouncing_cube.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>CUBE</title>
 4 |     <script type="text/javascript" src="../src/matrix.js"></script>
 5 |     <script type="text/javascript" src="../src/util.js"></script>
 6 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 7 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 8 |     <script type="text/javascript" src="../src/scene_util.js"></script>
 9 |     <script type="text/javascript">
10 |       window.onload = function() {
11 |         var s = new Magi.Scene(byId('c'),
12 |                                new Magi.Cube().makeBounce().makeRotate());
13 |         var txt = new Magi.Text("CUBE");
14 |         txt.setAlign(txt.centerAlign, txt.bottomAlign)
15 |            .setY(0.5)
16 |            .setScale(1/80);
17 |         s.scene.appendChild(txt);
18 |       }
19 |     </script>
20 |   </head>
21 |   <body style="text-align:center; margin-top:60px;">
22 |     <canvas id="c" width="400" height="400"></canvas>
23 |     <pre id="stats" style="font-family:Sans-serif; font-size: small;"></pre>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/demos/chemdoodle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/chemdoodle.jpg


--------------------------------------------------------------------------------
/demos/complex_hello_world.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 |   <head>
  4 |     <title>Hello, world!</title>
  5 |     <script type="text/x-glsl-vs" id="wave-vert">
  6 |       precision mediump float;
  7 |       attribute vec3 Vertex;
  8 |       attribute vec3 Normal;
  9 |       attribute vec2 TexCoord;
 10 |       uniform mat4 PMatrix;
 11 |       uniform mat4 MVMatrix;
 12 |       uniform mat3 NMatrix;
 13 |       uniform float time;
 14 |       uniform float xScale;
 15 |       uniform float yScale;
 16 |       uniform float magnitude;
 17 |       varying vec2 texCoord0;
 18 |       void main()
 19 |       {
 20 |         vec4 v = vec4(Vertex, 1.0);
 21 |         float dx = xScale*(TexCoord.s);
 22 |         float dy = yScale*(TexCoord.t-0.5);
 23 |         float d = sqrt(dx*dx + dy*dy);
 24 |         v.z += magnitude * (2.0*cos(time+3.14*0.1*TexCoord.s*xScale))*yScale;
 25 |         texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);
 26 |         vec4 worldPos = MVMatrix * v;
 27 |         gl_Position = PMatrix * worldPos;
 28 |       }
 29 |     </script>
 30 |     <script type="text/x-glsl-vs" id="bend-vert">
 31 |       precision mediump float;
 32 |       attribute vec3 Vertex;
 33 |       attribute vec3 Normal;
 34 |       attribute vec2 TexCoord;
 35 |       uniform mat4 PMatrix;
 36 |       uniform mat4 MVMatrix;
 37 |       uniform mat3 NMatrix;
 38 |       uniform float time;
 39 |       uniform float xScale;
 40 |       uniform float yScale;
 41 |       uniform float magnitude;
 42 |       varying vec2 texCoord0;
 43 |       varying float z;
 44 |       void main()
 45 |       {
 46 |         vec4 v = vec4(Vertex, 1.0);
 47 |         float dx = xScale*0.02*(TexCoord.s-0.5);
 48 |         float dy = yScale*0.02*(TexCoord.t-0.5);
 49 |         float d = sqrt(dx*dx + dy*dy);
 50 |         v.z += magnitude * (+pow(1.60, d));
 51 |         texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);
 52 |         vec4 worldPos = MVMatrix * v;
 53 |         gl_Position = PMatrix * worldPos;
 54 |         z = gl_Position.z;
 55 |       }
 56 |     </script>
 57 |     <script type="text/x-glsl-fs" id="dot-frag">
 58 |       precision mediump float;
 59 |       uniform float xScale;
 60 |       uniform float yScale;
 61 |       uniform float opacity;
 62 |       varying vec2 texCoord0;
 63 |       varying float z;
 64 |       uniform sampler2D Texture0;
 65 |       void main()
 66 |       {
 67 |         vec2 scale = vec2(xScale/6.0, yScale/6.0);
 68 |         vec2 gridVec = texCoord0 * scale;
 69 |         float gridX = floor(gridVec.s);
 70 |         float gridY = floor(gridVec.t);
 71 |         vec2 gridCenter = vec2((gridX + 0.5), (gridY + 0.5));
 72 |         float d = length(gridVec - gridCenter);
 73 |         vec4 sample = texture2D(Texture0, gridCenter / scale);
 74 |         float a = sample.a;
 75 |         float f = smoothstep(0.01*z+0.3*a, 0.3*a, d);
 76 |         sample.a *= opacity;
 77 |         sample *= f;
 78 |         gl_FragColor = sample * sample.a;
 79 |       }
 80 |     </script>
 81 |     <script type="text/x-glsl-fs" id="bg-frag">
 82 |       precision mediump float;
 83 |       uniform sampler2D Texture0;
 84 |       uniform float aspect;
 85 |       varying vec2 texCoord0;
 86 |       void main()
 87 |       {
 88 |         float dx = texCoord0.s * aspect;
 89 |         float dy = texCoord0.t / aspect;
 90 |         float d = sqrt(dx*dx + dy*dy);
 91 |         vec4 c = vec4(0.76,0.72,0.78, 0.5-0.8*d);
 92 |         gl_FragColor = c*c.a;
 93 |       }
 94 |     </script>
 95 |     <script type="text/javascript" src="../src/matrix.js"></script>
 96 |     <script type="text/javascript" src="../src/util.js"></script>
 97 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 98 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 99 |     <script type="text/javascript" src="../src/scene_util.js"></script>
100 |     <script type="text/javascript">
101 |       window.onresize = function() {
102 |         var cv = byId('c');
103 |         cv.width = window.innerWidth;
104 |         cv.height = window.innerHeight;
105 |       }
106 |       window.onload = function() {
107 |         var cv = byId('c');
108 |         cv.style.position = 'absolute';
109 |         cv.style.left = cv.style.top = '0px';
110 |         window.onresize();
111 | 
112 |         var input = TEXT("Hello, world!", {
113 |           style: {
114 |             position: 'absolute',
115 |             zIndex: 5,
116 |             right: '20px',
117 |             top: '10px',
118 |             width: '300px',
119 |             fontSize: '18px',
120 |             color: 'white',
121 |             textAlign: 'right',
122 |             backgroundColor: 'rgba(255,255,255,0.2)',
123 |             padding: '4px',
124 |             paddingRight: '8px',
125 |             border: '0px'
126 |           }
127 |         });
128 |         document.body.appendChild(input);
129 | 
130 |         var s = new Magi.Scene(cv);
131 |         s.useDefaultCameraControls();
132 |         App = s;
133 |         s.fpsCanvas = E.canvas(200,20);
134 |         s.camera.position[2] = 7;
135 |         s.camera.position[0] = -1.5;
136 |         s.camera.targetFov = 55;
137 |         vec4.setLeft(s.bg, [0.6, 0.6, 0.6, 1]);
138 |         s.scene.addFrameListener(function(t,dt) {
139 |           var rgb = Magi.Colors.hsv2rgb((t/100)%360, 0.8, 0.9);
140 |           vec3.set(rgb, s.bg);
141 |         });
142 |         
143 | //         s.clearBits ^= s.gl.COLOR_BUFFER_BIT;
144 | //         var a = 0.7;
145 | //         var bg = new Magi.ColorQuad(0.9*a,0.3*a,0.7*a,a);
146 | //         bg.identityTransform = true;
147 | //         bg.depthMask = false;
148 | //         bg.transparent = false;
149 | //         s.scene.appendChild(bg);
150 | 
151 |         var grad = new Magi.FilterQuad('bg-frag');
152 |         grad.material.floats.aspect = 4/3;
153 |         s.scene.appendChild(grad);
154 | 
155 |         var top = new Magi.Node();
156 |         var a = [1,0,5];
157 |         var b = [-4,3,1];
158 |         var c = [4,2, -2];
159 |         var d = [4, -1, 1];
160 |         top.addFrameListener(function(t,dt) {
161 |           Magi.Curves.cubicPoint(a,b,c,d, 0.5+0.5*Math.cos(t/1600), this.position);
162 |         });
163 | 
164 |         var cube = new Magi.Node();
165 |         cube.position[0] = -2.0;
166 |         cube.position[1] = 0.5;
167 |         cube.rotation.angle = -0.5;
168 |         cube.rotation.axis[0] = 0.75;
169 |         cube.rotation.axis[1] = -0.7;
170 |         cube.rotation.axis[2] = -0.25;
171 |         top.appendChild(cube);
172 | 
173 |         var cb = new Magi.Cube();
174 |         vec3.set3(0.8, cb.scaling);
175 |         cube.appendChild(cb);
176 |         vec3.set([0.4,0.6,-1], cb.rotation.axis);
177 |         cb.addFrameListener(function(t,dt) {
178 |           this.rotation.angle = t/400 % (Math.PI*2);
179 |         });
180 |         cb.material = cb.material.copy();
181 |         var fs = cb.material.floats;
182 |         vec4.setLeft(fs.MaterialDiffuse, [0.8,0.9, 1.0, 0.8]);
183 |         vec4.setLeft(fs.LightDiffuse, [1,1,0.5,1]);
184 |         vec4.setLeft(fs.LightSpecular, [0.5,1,1,1]);
185 |         vec4.setLeft(fs.LightAmbient, [0.3,0,0.2,1]);
186 |         cb.transparent = true;
187 |         
188 |         var ncb = new Magi.Cube();
189 |         ncb.transparent = true;
190 |         ncb.material = cb.material.copy();
191 |         vec4.setLeft(ncb.material.floats.MaterialDiffuse, [1,0.95,0.8,0.7]);
192 |         var fs = ncb.material.floats;
193 |         vec4.setLeft(fs.LightDiffuse, [1,1,0.8,1]);
194 |         vec4.setLeft(fs.LightSpecular, [1,0.95,0.8,1]);
195 |         vec4.setLeft(fs.LightAmbient, [0.2,0.1,0.0,1]);
196 |         vec3.set3(0.75, ncb.scaling);
197 |         ncb.addFrameListener(function(t,dt) {
198 |           var p = Math.sin(-0.5+Math.PI*t / 1000);
199 |           var d = p*p;
200 |           var dd = d*d;
201 |           vec3.set3(0.75-0.2*dd*dd*dd*dd*dd, this.scaling);
202 |         });
203 |         ncb.blendFuncSrc = 'SRC_ALPHA';
204 |         ncb.blendFuncDst = 'ONE';
205 |         cb.appendChild(ncb);
206 | 
207 | 
208 |         var mat = ncb.material.copy();
209 |         vec4.setLeft(mat.floats.MaterialDiffuse, [1,0,1,1]);
210 |         var cubes = new Magi.Node();
211 |         for (var i=0; i<20; i++) {
212 |           var cb = new Magi.Cube();
213 |           vec3.set3(0.1, cb.scaling);
214 |           cb.position[0] = Math.sin(i/20 * Math.PI*2);
215 |           cb.position[2] = Math.cos(i/20 * Math.PI*2);
216 |           cb.material = mat;
217 |           cb.phase = i/20 * Math.PI*2;
218 |           vec3.set([1,1,0], cb.rotation.axis);
219 |           cb.addFrameListener(function(t,dt) {
220 |             this.position[1] = 0.2*Math.sin(2*this.phase + t / 200);
221 |             vec3.set3(0.1+0.05*Math.cos(1*this.phase + t / 200), this.scaling);
222 |             this.rotation.angle = t/600 % (Math.PI*2);
223 |           });
224 |           cubes.appendChild(cb);
225 |         }
226 |         vec3.set([1,1,1], cubes.rotation.axis);
227 |         cubes.addFrameListener(function(t,dt) {
228 |           this.rotation.angle = t/500 % (Math.PI*2);
229 |         });
230 |         cube.appendChild(cubes);
231 | 
232 | 
233 |         var txt = new Magi.MeshText(input.value, 72);
234 |         txt.setColor('#ffffff');
235 |         txt.setAlign(txt.leftAlign, txt.bottomAlign);
236 |         txt.alignedNode.material.shader = new Magi.Shader(null, 'wave-vert', Magi.FilterMaterial.frag);
237 |         txt.alignedNode.material.floats.magnitude = 5.0;
238 |         txt.addFrameListener(function(t,dt) {
239 |           if (input.value != this.text)
240 |             this.setText(input.value);
241 |           txt.alignedNode.material.floats.xScale = 0.03*txt.canvas.width;
242 |           txt.alignedNode.material.floats.yScale = 0.03*txt.canvas.height;
243 |           txt.alignedNode.material.floats.time = t / 500;
244 |         });
245 |         vec3.set3(1/144, txt.scaling);
246 |         txt.position[0] = 1.35;
247 |         txt.position[1] = -0.1;
248 |         cube.appendChild(txt);
249 | 
250 |         var fps = new Magi.Text("FPS", 20);
251 |         fps.setColor('#ffffff');
252 |         fps.setAlign(fps.rightAlign, fps.bottomAlign);
253 |         vec3.set3(1/144, fps.scaling);
254 |         fps.position[0] = 2.0;
255 |         fps.position[1] = -0.32;
256 |         cube.appendChild(fps);
257 | 
258 |         s.fpsCanvas.getContext('2d').fillStyle = '#000000';
259 |         var img = new Magi.Image(s.fpsCanvas);
260 |         img.setAlign(img.leftAlign, img.bottomAlign);
261 |         img.addFrameListener(function(){ this.texture.changed = true; });
262 |         img.position[0] = 4;
263 |         img.position[1] = fps.fontSize*0.2;
264 |         fps.appendChild(img);
265 |         fps.addFrameListener(function(t,dt) {
266 |           var sc = parseInt(t/200);
267 |           if (sc != fps.lastUpdate) {
268 |             var ft = s.frameTimes[s.frameTimes.length-1];
269 |             fps.setText(parseInt(ft * 10) / 10 + " FPS");
270 |             fps.lastUpdate = sc;
271 |           }
272 |         });
273 |         
274 |         var date = new Magi.MeshText("", 300);
275 |         date.setAlign(date.leftAlign, date.bottomAlign);
276 |         date.setColor('#ffffff');
277 |         date.setFont("Avant Garde, Century Gothic, URW Gothic L, Tahoma");
278 |         date.rotation.angle = 0.5;
279 |         date.rotation.axis[0] = -0.5;
280 |         date.alignedNode.material.shader = new Magi.Shader(null, 'bend-vert', 'dot-frag');
281 |         vec3.set3(1/32, date.scaling);
282 |         date.position[0] = -6;
283 |         date.position[1] = -5;
284 |         date.alignedNode.material.floats.magnitude = 3.0;
285 |         date.alignedNode.material.floats.opacity = 0.1;
286 |         date.addFrameListener(function(t,dt) {
287 |           var sec = parseInt(t / 60000);
288 |           if (sec != this.lastSec) {
289 |             this.lastSec = sec;
290 |             var d = new Date();
291 |             var pad = function(s) { if (s.length == 1) return '0'+s; return s; };
292 |             this.setText(
293 |               pad(d.getHours().toString())+":"+
294 |               pad(d.getMinutes().toString())
295 |             );
296 |             this.w = this.canvas.width;
297 |             this.h = this.canvas.height;
298 |           }
299 |           date.alignedNode.material.floats.xScale = this.w;
300 |           date.alignedNode.material.floats.yScale = this.h;
301 |           date.alignedNode.material.floats.time = t / 500;
302 |         });
303 | 
304 |         var rings = new Magi.Node();
305 |         vec3.set3(0.05, rings.scaling);
306 |         rings.rotation.axis = [0,0,1];
307 |         rings.rotation.angle = Math.PI/2;
308 |         rings.position[0] = -1.5;
309 |         rings.position[1] = -0;
310 |         rings.counter = 0;
311 |         var rm = Magi.DefaultMaterial.get().copy();
312 |         rm.floats.MaterialDiffuse[3] = 0.3;
313 |         for (var i=0; i<8; i++) {
314 |           var ringSeg = new Magi.Ring(0.01+0.08*Math.random(), Math.PI*1.5);
315 |           vec3.set3(24+i*0.25+12*Math.random(), ringSeg.scaling);
316 |           vec3.set([0,i*5,0], ringSeg.position);
317 |           ringSeg.material = rm;
318 |           ringSeg.transparent = true;
319 |           ringSeg.makeRotate();
320 |           ringSeg.idx = i;
321 |           ringSeg.origY = i*5;
322 |           ringSeg.advance = 0;
323 |           ringSeg.addFrameListener(function(t,dt) {
324 |             if (this.advance) {
325 |               this.position[1] = this.origY - this.advance*15;
326 |               this.advance--;
327 |             } else {
328 |               this.position[1] = this.origY;
329 |             }
330 |           });
331 |           ringSeg.blendFuncSrc = 'ONE';
332 |           ringSeg.blendFuncDst = 'ONE';
333 |           ringSeg.makeRotate(0.5 + i*0.2 + Math.random());
334 |           rings.appendChild(ringSeg);
335 |         }
336 |         input.addEventListener('keydown', function() {
337 |           rings.counter = (rings.counter + 1) % rings.childNodes.length;
338 |           rings.childNodes[rings.counter].advance = 10;
339 |         }, false);
340 |         cube.appendChild(rings);
341 |         
342 |         s.scene.appendChild(top);
343 |         s.scene.appendChild(date);
344 | 
345 |       }
346 | 		</script>
347 | 	</head>
348 | 	<body>
349 |     <canvas id="c" width="500" height="400"></canvas>
350 |     <pre id="stats" style="font-family:Sans-serif; font-size: small; position: absolute; z-index: 4; right: 24px; top: 40px; text-align: right; color: white; opacity: 0.8;"></pre>
351 | 	</body>
352 | 
353 | </html>


--------------------------------------------------------------------------------
/demos/glge.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/glge.jpg


--------------------------------------------------------------------------------
/demos/learningwebgl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/learningwebgl.jpg


--------------------------------------------------------------------------------
/demos/obj_loader.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <title>Demo</title>
 5 |     <script type="text/javascript" src="../src/matrix.js"></script>
 6 |     <script type="text/javascript" src="../src/util.js"></script>
 7 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 8 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 9 |     <script type="text/javascript" src="../src/scene_util.js"></script>
10 |     <script type="text/javascript" src="../src/obj_loader.js"></script>
11 |     <script type="text/javascript">
12 | 
13 |       init = function() {
14 |         var s = new Magi.Scene(byId('c'));
15 |         byId('info').innerHTML = 'Loading model (530kB)...';
16 |         var w = Magi.Obj.load('tram.obj');
17 |         w.onload = function() {
18 |           s.camera.position = [0, 2, 7];
19 |           var tex = new Magi.Texture();
20 |           tex.image = new Image();
21 |           tex.image.src = 'tram.jpg';
22 |           byId('info').innerHTML = 'Loading texture (50kB)...';
23 |           tex.image.onload = function(){
24 |             byId('info').innerHTML = '';
25 |             var n = new Magi.Node();
26 |             var sc = 4.0 / (w.boundingBox.diameter);
27 |             n.scaling = [sc, sc, sc];
28 |             n.model = w.makeVBO();
29 |             n.position[1] = 0.5;
30 | //             n.rotation.axis = [1,0,0];
31 | //             n.rotation.angle = -Math.PI/2;
32 |             n.material = Magi.DefaultMaterial.get();
33 |             n.material.floats.MaterialDiffuse = [0,0,0,1];
34 |             n.material.textures.DiffTex = tex;
35 | 
36 |             s.scene.addFrameListener(function(t,dt){
37 |               this.rotation.angle += dt / 1000;
38 |             });
39 |             s.scene.appendChild(n);
40 |           }
41 |         }
42 |       }
43 |     </script>
44 |     <style>
45 |       body {
46 |         overflow : hidden;
47 |       }
48 |     </style>            
49 |   </head>
50 |   <body>
51 |     <center>
52 |     <canvas id="c" width="800" height="400"></canvas>
53 |     <p id="info"></p>
54 |     </center>
55 |     <script> init(); </script>
56 |   </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/demos/shadertoy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/shadertoy.jpg


--------------------------------------------------------------------------------
/demos/spidergl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/spidergl.jpg


--------------------------------------------------------------------------------
/demos/stereo.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <title>Demo</title>
 5 |     <script type="text/javascript" src="../src/matrix.js"></script>
 6 |     <script type="text/javascript" src="../src/util.js"></script>
 7 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 8 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 9 |     <script type="text/javascript" src="../src/scene_util.js"></script>
10 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
11 |     <script type="text/javascript">
12 | 
13 |       init = function() {
14 |         var c = byId('c');
15 |         c.style.position = 'fixed';
16 |         c.style.top = '0px';
17 |         c.style.left = '0px';
18 |         c.width = window.innerWidth;
19 |         c.height = window.innerHeight;
20 |         byId('info').innerHTML = "Loading model (560kB)...";
21 |         var w = Magi.Bin.load('walas.binm');
22 |         w.flatNormals = false;
23 |         w.onload = function() {
24 |           byId('info').innerHTML = "Downloaded 560kB in " + w.downloadTime + " ms<br>" +
25 |                                 "Parsed model in " + w.parseTime + " ms<br>" + 
26 |                                 (w.vertices.length / 9) + " triangles";
27 |           var s = new Magi.Scene(c);
28 |           s.useDefaultCameraControls();
29 |           s.bg = [0,0,0,0];
30 |           s.drawOnlyWhenChanged = true;
31 |           s.camera.stereo = true;
32 |           s.camera.targetFov = 50;
33 |           s.camera.stereoSeparation = 0.025;
34 |           s.camera.position = [0, 2, 7];
35 |           s.camera.lookAt = [0, 0.5, 0];
36 |           var n = new Magi.Node();
37 |           var sc = 4.0 / (w.boundingBox.diameter);
38 |           n.scaling = [sc, sc, sc];
39 |           n.model = w.makeVBO();
40 |           n.position[1] = 0.5;
41 |           n.rotation.axis = [1,0,0];
42 |           n.rotation.angle = -Math.PI/2;
43 |           n.material = Magi.DefaultMaterial.get();
44 |           n.material.floats.LightDiffuse = [1,1,1,1];
45 |           n.material.floats.MaterialShininess = 6.0;
46 |           n.material.floats.MaterialDiffuse = [1,1,1,1];
47 |           s.scene.appendChild(n);
48 |         };
49 |       }
50 |     </script>
51 |     <style>
52 |       body {
53 |         overflow : hidden;
54 |         font-family : sans-serif;
55 |       }
56 |     </style>            
57 |   </head>
58 |   <body>
59 |     <center>
60 |     <canvas id="c" width="800" height="400"></canvas>
61 |     <p id="info"></p>
62 |     </center>
63 |     <script> init(); </script>
64 |   </body>
65 | 
66 | </html>
67 | 


--------------------------------------------------------------------------------
/demos/tar_bin_loader.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <title>Demo</title>
 5 |     <script type="text/javascript" src="../src/matrix.js"></script>
 6 |     <script type="text/javascript" src="../src/util.js"></script>
 7 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 8 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 9 |     <script type="text/javascript" src="../src/scene_util.js"></script>
10 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
11 |     <script type="text/javascript" src="../src/obj_loader.js"></script>
12 |     <script type="text/javascript" src="../src/tar.js"></script>
13 |     <script type="text/javascript">
14 | 
15 |       init = function() {
16 |         byId('info').innerHTML = 'Loading .tar of model and texture (&lt;200kB)...<br>';
17 |         var t0 = new Date();
18 |         Magi.Tar.load('tram.bin.tar', function(files) {
19 |           var w = new Magi.Bin();
20 |           w.parse(files['tram.obj.bin'].data);
21 |           var tex = new Magi.Texture();
22 |           tex.image = new Image();
23 |           var t = new Date;
24 |           tex.image.src = files['tram.jpg'].toDataURL();
25 |           var elapsed = new Date() - t;
26 |           byId('info').innerHTML += 'Parsed tar in ' + this.parseTime + ' ms<br>' +
27 |                                 'Parsed model ('+(w.vertices.length/9)+' tris) in ' + w.parseTime + ' ms<br>' +
28 |                                 'Parsed texture ('+tex.image.width+'x'+tex.image.height+') in ' + elapsed + ' ms<br>';
29 |           byId('info').innerHTML += 'Total time to load assets: ' + (new Date() - t0) + ' ms<br>';
30 |           var t1 = new Date();
31 |           var s = new Magi.Scene(byId('c'));
32 |           s.camera.position = [0, 2, 7];
33 |           var n = new Magi.Node();
34 |           var sc = 4.0 / (w.boundingBox.diameter);
35 |           n.scaling = [sc, sc, sc];
36 |           n.model = w.makeVBO();
37 |           n.position[1] = 0.5;
38 |           n.material = Magi.DefaultMaterial.get();
39 |           n.material.floats.MaterialDiffuse = [0,0,0,1];
40 |           n.material.textures.DiffTex = tex;
41 |           var frame = 0;
42 |           s.scene.addFrameListener(function(t,dt){
43 |             this.rotation.angle += dt / 1000;
44 |             if (frame == 1) {
45 |               byId('info').innerHTML += 'Time to draw first frame (creating GL resources et al.): ' + (s.firstFrameDoneTime-t1) + ' ms<br>';
46 |               byId('info').innerHTML += 'Total time to end of first frame: ' + (s.firstFrameDoneTime-t0) + ' ms<br>';
47 |             }
48 |             frame++;
49 |           });
50 |           s.scene.appendChild(n);
51 |           byId('info').innerHTML += 'Time to create scene: ' + (new Date() - t1) + ' ms<br>';
52 |           t1 = new Date();
53 |         });
54 |       }
55 |     </script>
56 |     <style>
57 |       body {
58 |         overflow : hidden;
59 |       }
60 |     </style>            
61 |   </head>
62 |   <body>
63 |     <center>
64 |     <canvas id="c" width="800" height="400"></canvas>
65 |     <p id="info"></p>
66 |     </center>
67 |     <script> init(); </script>
68 |   </body>
69 | 
70 | </html>
71 | 


--------------------------------------------------------------------------------
/demos/tar_loader.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <title>Demo</title>
 5 | 
 6 |     <script type="text/javascript" src="../src/matrix.js"></script>
 7 |     <script type="text/javascript" src="../src/util.js"></script>
 8 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 9 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
10 |     <script type="text/javascript" src="../src/scene_util.js"></script>
11 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
12 |     <script type="text/javascript" src="../src/obj_loader.js"></script>
13 |     <script type="text/javascript" src="../src/tar.js"></script>
14 |     <script type="text/javascript">
15 | 
16 |       init = function() {
17 |         byId('info').innerHTML = 'Loading .tar of model and texture (&lt;200kB)...<br>';
18 |         var t0 = new Date();
19 |         Magi.Tar.load('tram.obj.tar', function(files) {
20 |           var w = new Magi.Obj();
21 |           w.parse(files['tram.obj'].data);
22 |           var tex = new Magi.Texture();
23 |           tex.image = new Image();
24 |           var t = new Date;
25 |           tex.image.src = files['tram.jpg'].toDataURL();
26 |           var elapsed = new Date() - t;
27 |           byId('info').innerHTML += 'Parsed tar in ' + this.parseTime + ' ms<br>' +
28 |                                 'Parsed model ('+(w.vertices.length/9)+' tris) in ' + w.parseTime + ' ms<br>' +
29 |                                 'Parsed texture ('+tex.image.width+'x'+tex.image.height+') in ' + elapsed + ' ms<br>';
30 |           byId('info').innerHTML += 'Total time to load assets: ' + (new Date() - t0) + ' ms<br>';
31 |           var t1 = new Date();
32 |           var s = new Magi.Scene(byId('c'));
33 |           s.camera.position = [0, 2, 7];
34 |           var n = new Magi.Node();
35 |           var sc = 4.0 / (w.boundingBox.diameter);
36 |           n.scaling = [sc, sc, sc];
37 |           n.model = w.makeVBO();
38 |           n.position[1] = 0.5;
39 |           n.material = Magi.DefaultMaterial.get();
40 |           n.material.floats.MaterialDiffuse = [0,0,0,1];
41 |           n.material.textures.DiffTex = tex;
42 |           var frame = 0;
43 |           s.scene.addFrameListener(function(t,dt){
44 |             this.rotation.angle += dt / 1000;
45 |             if (frame == 1) {
46 |               byId('info').innerHTML += 'Time to draw first frame (creating GL resources et al.): ' + (s.firstFrameDoneTime-t1) + ' ms<br>';
47 |               byId('info').innerHTML += 'Total time to end of first frame: ' + (s.firstFrameDoneTime-t0) + ' ms<br>';
48 |             }
49 |             frame++;
50 |           });
51 |           s.scene.appendChild(n);
52 |           byId('info').innerHTML += 'Time to create scene: ' + (new Date() - t1) + ' ms<br>';
53 |           t1 = new Date();
54 |         });
55 |       }
56 |     </script>
57 |     <style>
58 |       body {
59 |         overflow : hidden;
60 |       }
61 |     </style>            
62 |   </head>
63 |   <body>
64 |     <center>
65 |     <canvas id="c" width="800" height="400"></canvas>
66 |     <p id="info"></p>
67 |     </center>
68 |     <script> init(); </script>
69 |   </body>
70 | 
71 | </html>
72 | 


--------------------------------------------------------------------------------
/demos/tram.bin.tar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/tram.bin.tar


--------------------------------------------------------------------------------
/demos/tram.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/tram.jpg


--------------------------------------------------------------------------------
/demos/tram.obj.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/tram.obj.bin


--------------------------------------------------------------------------------
/demos/tram.obj.tar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/tram.obj.tar


--------------------------------------------------------------------------------
/demos/tram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/tram.png


--------------------------------------------------------------------------------
/demos/walas.binm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kig/magi/ad5eb7e9e5a35b2c979975f19f2f30cbd14e5723/demos/walas.binm


--------------------------------------------------------------------------------
/demos/webgl_esitys.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 |   <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5 |     <title>WebGL Presentation</title>
  6 |     <link rel="stylesheet" type="text/css" href="../slides/slides.css" />
  7 |     <script type="text/javascript" src="../src/matrix.js"></script>
  8 |     <script type="text/javascript" src="../src/util.js"></script>
  9 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 10 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 11 |     <script type="text/javascript" src="../src/scene_util.js"></script>
 12 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
 13 |     <script type="text/javascript" src="../slides/slides.js"></script>
 14 |     <script type="text/javascript">
 15 |       window.onload = function(){
 16 |         App = new Slides(byId('slides'));
 17 |       }
 18 |     </script>
 19 |   </head>
 20 |   <body>
 21 |     <div id="slides">
 22 |       <div>
 23 |         <h1>WebGL</h1>
 24 |         <h2>OpenGL ES 2.0 + JavaScript</h2>
 25 |         <h2>&lt;CANVAS&gt;</h2>
 26 |       </div>
 27 |       <div>
 28 |         <h1>Kuinka sen saan?</h1>
 29 |         <h2>Firefox 4 beta tai Minefield</h2>
 30 |         <h2>WebKit nightly OS X 10.6:lla</h2>
 31 |         <h2>Chromium</h2>
 32 |         <p>khronos.org/webgl/wiki/Getting_a_WebGL_Implementation</p>
 33 |       </div>
 34 |       <div>
 35 |         <h1>Tukeeko IE9?</h1>
 36 |         <h2>Ei mitään tietoa.</h2>
 37 |         <h2>Chrome Frame?</h2>
 38 |       </div>
 39 |       <div>
 40 |         <h1>HTML:ssä</h1>
 41 |         <h2>Tavan &lt;CANVAS&gt;</h2>
 42 |         <h2>Toimii kuten kuva</h2>
 43 |         <h2>CSS, toDataURL(), jne.</h2>
 44 |       </div>
 45 |       <div>
 46 |         <h1>OpenGL ES 2.0</h1>
 47 |         <h2>OpenGL kännyköille.</h2>
 48 |         <h2>Toimii myös tietokoneella.</h2>
 49 |         <h2>Kiihdytettyä piirtämistä.</h2>
 50 |       </div>
 51 |       <div>
 52 |         <h1>1.1 vs. 2.0</h1>
 53 |         <h2>Fiksattu vs. ohjelmoitava.</h2>
 54 |       </div>
 55 |       <div>
 56 |         <h1>Ohjelmoitava?</h1>
 57 |         <h2>Shaders, baby, yeah!</h2>
 58 |         <h2>Julmetusti laskentatehoa.</h2>
 59 |       </div>
 60 |       <div>
 61 |         <h1>Ihan tosi?</h1>
 62 |         <h2>1000x nopeampi kuin JavaScript</h2>
 63 |         <p>(shaderista riippuen)</p>
 64 |       </div>
 65 |       <div>
 66 |         <h1>Jaa?</h1>
 67 |         <model src="walas.binm"></model>
 68 |         <h2>80 000 kolmiota</h2>
 69 |       </div>
 70 |       <div>
 71 |         <h1>Mitä sillä tekee?</h1>
 72 |         <h2>Kustomia 2D-piirtoa.</h2>
 73 |         <h2>Kustomia 3D-piirtoa.</h2>
 74 |       </div>
 75 |       <div>
 76 |         <h1>Kustomia?</h1>
 77 |         <h2>Kaikki vaatii shaderin.</h2>
 78 |         <h2>Ei oikoteitä.</h2>
 79 |       </div>
 80 |       <div>
 81 |         <h1>Piirtoputki</h1>
 82 |         <h3>Vertex shader</h3>
 83 |         <h3>⇓</h3>
 84 |         <h3>Fragment shader</h3>
 85 |         <h3>⇓</h3>
 86 |         <h3>Piirtopinta</h3>
 87 |       </div>
 88 |       <div>
 89 |         <h1>Vertex shader</h1>
 90 |         <ul>
 91 |           <h2>Laskee</h2>
 92 |           <li>Mihin piirretään</li>
 93 |           <li>Muuttujia fragment shaderille</li>
 94 |         </ul>
 95 |       </div>
 96 |       <div>
 97 |         <h1>Vertex shader</h1>
 98 |         <ul>
 99 |           <h2>Parametreinä</h2>
100 |           <li>Bufferit (pistetaulukot)</li>
101 |           <li>Tekstuurit (pintakuviot)</li>
102 |           <li>Uniformit (kutsuparametrit)</li>
103 |         </ul>
104 |       </div>
105 |       <div>
106 |         <h1>Fragment shader</h1>
107 |         <ul>
108 |           <h2>Laskee</h2>
109 |           <li>Pikselin värin</li>
110 |         </ul>
111 |       </div>
112 |       <div>
113 |         <h1>Fragment shader</h1>
114 |         <ul>
115 |           <h2>Parametreinä</h2>
116 |           <li>Muuttujat vertex shaderilta</li>
117 |           <li>Tekstuurit</li>
118 |           <li>Uniformit</li>
119 |         </ul>
120 |       </div>
121 |       <div>
122 |         <h1>Piirtopinta</h1>
123 |         <h2>&lt;CANVAS&gt;</h2>
124 |         <h2>tai</h2>
125 |         <h2>Framebuffer object (FBO)</h2>
126 |       </div>
127 |       <div>
128 |         <h1>FBO</h1>
129 |         <h2>Näytönohjaimen muistissa</h2>
130 |         <h2>Tekstuuriin piirtämiseen</h2>
131 |         <self></self>
132 |       </div>
133 |       <div>
134 |         <h1>Tekstuurit</h1>
135 |         <ul>
136 |         <h2>WebGL osaa ladata:</h2>
137 |           <li>&lt;CANVAS&gt;</li>
138 |           <li>&lt;IMG&gt;</li>
139 |           <li>&lt;VIDEO&gt;</li>
140 |           <li>Plus pikselitaulukot.</li>
141 |         </ul>
142 |       </div>
143 |       <div>
144 |         <h1>CANVAS</h1>
145 |         <h2>Kaikki tekstit tässä.</h2>
146 |         <p>(Parempi olisi käyttää CSS 3D:tä, mut.)</p>
147 |         <edit></edit>
148 |       </div>
149 |       <div>
150 |         <h1>IMG</h1>
151 |         <img src="tram.jpg" width="360" height="360">
152 |       </div>
153 |       <div>
154 |         <h1>VIDEO</h1>
155 |         <video oncube="true" preload width="480" height="320" controls="on">
156 |           <source  src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm" type='video/webm; codecs="vp8, vorbis"' />
157 |           <source  src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
158 |         </video>
159 |       </div>
160 |       <div>
161 |         <h1>Jos kiinnostaa</h1>
162 |         <p>learningwebgl.com</p>
163 |         <img src="learningwebgl.jpg">
164 |       </div>
165 |       <div>
166 |         <h1>Eiks toi oo vähän...</h1>
167 |         <h2>...kankeeta? Joo.</h2>
168 |         <h2>Tavalliseen piirtoon turhan järeä.</h2>
169 |         <h2>Kirjastot apuun!</h2>
170 |       </div>
171 |       <div>
172 |         <h1>Kirjastoja</h1>
173 |         <h2>Aakkosjärjestyksessä:</h2>
174 |         <h3>C3DL</h3>
175 |         <h3>CopperLight</h3>
176 |         <h3>CubicVR</h3>
177 |         <h3>GLGE</h3>
178 |         <h3>O3D</h3>
179 |         <h3>SpiderGL</h3>
180 |         <h3>X3DOM</h3>
181 |         <h3>XB PointStream</h3>
182 |       </div>
183 |       <div>
184 |         <h1>GLGE</h1>
185 |         <img src="glge.jpg">
186 |         <p>glge.org</p>
187 |       </div>
188 |       <div>
189 |         <h1>SpiderGL</h1>
190 |         <img src="spidergl.jpg">
191 |         <p>spidergl.org</p>
192 |       </div>
193 |       <div>
194 |         <h1>Pelejä</h1>
195 |         <h2>Googlen Quake 2 -portti</h2>
196 |         <h2>O3D biljardi</h2>
197 |         <h2>Muutama Q3 kartankatselin</h2>
198 |       </div>
199 |       <div>
200 |         <h1>Hyötysoftaa?</h1>
201 |         <h3>3D-mallien katselimia</h3>
202 |         <h3>ChemDoodle-molekyylivisualisoija</h3>
203 |         <h3>ShaderToy</h3>
204 |         <h3>WebGL Street View</h3>
205 |       </div>
206 |       <div>
207 |         <h1>ChemDoodle</h1>
208 |         <p>web.chemdoodle.com</p>
209 |         <img src="chemdoodle.jpg">
210 |       </div>
211 |       <div>
212 |         <h1>ShaderToy</h1>
213 |         <p>www.iquilezles.org/apps/shadertoy/</p>
214 |         <img src="shadertoy.jpg">
215 |       </div>
216 |       <div>
217 |         <h1>Status</h1>
218 |         <h2>WebGL 1.0 kohta.</h2>
219 |         <h2>Chrome, Safari, Firefox, Opera(?)</h2>
220 |         <h3>Shaderien validointi ANGLElla.</h3>
221 |         <p>Softarendaus OSMESAlla.</p>
222 |       </div>
223 |       <div>
224 |         <h1>ANGLE?</h1>
225 |         <h2>Almost Native Graphics Layer Engine</h2>
226 |         <h3>angleproject.googlecode.com</h3>
227 |         <h3>OpenGL ES 2.0 -tulkki</h3>
228 |       </div>
229 |       <div>
230 |         <h1>Tulkki?</h1>
231 |         <h2>Kääntää shaderit natiiveiksi.</h2>
232 |         <h2>GLES 2.0 -> OpenGL 2.1</h2>
233 |         <h2>GLES 2.0 -> Direct3D 9</h2>
234 |         <p>(jossain vaiheessa)</p>
235 |       </div>
236 |       <div>
237 |         <h1>OSMESA</h1>
238 |         <h2>Off-Screen MESA GL</h2>
239 |         <h2>Piirtää CPU:lla.</h2>
240 |         <h2>Erittäin hidas.</h2>
241 |         <p>Bugejakin löytyy.</p>
242 |       </div>
243 |       <div>
244 |         <h1>Yhteenveto</h1>
245 |         <h2>Nopeaa kustomipiirtoa.</h2>
246 |         <h2>Melko hyvin tuettu.</h2>
247 |         <h2>Web-yhteensopiva.</h2>
248 |         <h2>Vaatii ohjelmointia.</h2>
249 |       </div>
250 |       <div>
251 |         <h1>Kiitos!</h1>
252 |         <h2>Ilmari Heikkinen</h2>
253 |         <h3>ilmari.heikkinen@gmail.com</h3>
254 |       </div>
255 |       <div>
256 |         <h1>Tiedostokoot</h1>
257 |         <ul>
258 |           <li>30kB esityssofta + slaidit</li>
259 |           <li>85kB minifioity kirjasto</li>
260 |           <li>(yhteensä 30kB gzipattuna)</li>
261 |           <li>250kB kuvia</li>
262 |           <li>2MB video</li>
263 |         </ul>
264 |       </div>
265 |       <div>
266 |         <h1>Xiittejä</h1>
267 |         <p>App.editSlide()</p>
268 |         <p>App.toggleAllSlidesVisible()</p>
269 |         <p>App.toggleApp()</p>
270 |         <p>App.wavyText = false</p>
271 |         <p>App.cycleColors = true</p>
272 |         <p>txt = App.scene.getNodesByKlass(Magi.MeshText)[0]</p>
273 |         <p>txt.alignedNode.material.floats.pitch = 2</p>
274 |         <p>txt = App.scene.getNodesByKlass(Magi.MeshText)[2]
275 |         <p>App.addDotShader(txt)</p>
276 |         <p>txt.alignedNode.material.floats.pitch = 2</p>
277 |       </div>
278 |       <div>
279 |         <h1>Loppu.</h1>
280 |         <p>Klikkaa takaisin alkuun.</p>
281 |       </div>
282 |     </div>
283 | 	</body>
284 | 
285 | </html>
286 | 


--------------------------------------------------------------------------------
/demos/webgl_presentation.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 |   <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5 |     <title>WebGL Presentation</title>
  6 |     <link rel="stylesheet" type="text/css" href="../slides/slides.css" />
  7 |     <script type="text/javascript" src="../src/matrix.js"></script>
  8 |     <script type="text/javascript" src="../src/util.js"></script>
  9 |     <script type="text/javascript" src="../src/gl_util.js"></script>
 10 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
 11 |     <script type="text/javascript" src="../src/scene_util.js"></script>
 12 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
 13 |     <script type="text/javascript" src="../slides/slides.js"></script>
 14 |   </head>
 15 |   <body>
 16 |     <div id="slides">
 17 |       <div>
 18 |         <h1>WebGL</h1>
 19 |         <h2></h2>
 20 |         <h3>Press space for next slide.</h3>
 21 |         <h3>Press backspace for previous slide.</h3>
 22 |       </div>
 23 |       <div>
 24 |         <h1>WebGL</h1>
 25 |         <h2>OpenGL ES 2.0 + JavaScript</h2>
 26 |         <h2>&lt;CANVAS&gt;</h2>
 27 |       </div>
 28 |       <div>
 29 |         <h1>How do I get it?</h1>
 30 |         <h2>Firefox 4 beta or Minefield</h2>
 31 |         <h2>WebKit nightly on OS X 10.6</h2>
 32 |         <h2>Chromium</h2>
 33 |         <p>khronos.org/webgl/wiki/Getting_a_WebGL_Implementation</p>
 34 |       </div>
 35 |       <div>
 36 |         <h1>IE9 support?</h1>
 37 |         <h2>No idea whatsoever.</h2>
 38 |         <h2>Chrome Frame?</h2>
 39 |       </div>
 40 |       <div>
 41 |         <h1>In HTML</h1>
 42 |         <h2>The usual &lt;CANVAS&gt;</h2>
 43 |         <h2>Works like an image</h2>
 44 |         <h2>CSS, toDataURL(), etc.</h2>
 45 |       </div>
 46 |       <div>
 47 |         <h1>OpenGL ES 2.0</h1>
 48 |         <h2>OpenGL for mobile phones.</h2>
 49 |         <h2>Also works on computers.</h2>
 50 |         <h2>Accelerated drawing.</h2>
 51 |       </div>
 52 |       <div>
 53 |         <h1>1.1 vs. 2.0</h1>
 54 |         <h2>Fixed vs. programmable.</h2>
 55 |       </div>
 56 |       <div>
 57 |         <h1>Programmable?</h1>
 58 |         <h2>Shaders, baby, yeah!</h2>
 59 |         <h2>Massive performance.</h2>
 60 |       </div>
 61 |       <div>
 62 |         <h1>No kidding?</h1>
 63 |         <h2>1000x faster than JavaScript</h2>
 64 |         <p>(depending on shader)</p>
 65 |       </div>
 66 | <!--      <div>
 67 |         <h1>Yeah?</h1>
 68 |         <model src="walas.binm"></model>
 69 |         <h2>80 000 triangles</h2>
 70 |       </div>-->
 71 |       <div>
 72 |         <h1>What's it good for?</h1>
 73 |         <h2>Custom 2D drawing.</h2>
 74 |         <h2>Custom 3D drawing.</h2>
 75 |       </div>
 76 |       <div>
 77 |         <h1>Custom?</h1>
 78 |         <h2>Everything requires shaders.</h2>
 79 |         <h2>No shortcuts.</h2>
 80 |       </div>
 81 |       <div>
 82 |         <h1>Drawing pipeline</h1>
 83 |         <h3>Vertex shader</h3>
 84 |         <h3>⇓</h3>
 85 |         <h3>Fragment shader</h3>
 86 |         <h3>⇓</h3>
 87 |         <h3>Render target</h3>
 88 |       </div>
 89 |       <div>
 90 |         <h1>Vertex shader</h1>
 91 |         <ul>
 92 |           <h2>Computes</h2>
 93 |           <li>Where to draw</li>
 94 |           <li>Varyings for the fragment shader</li>
 95 |         </ul>
 96 |       </div>
 97 |       <div>
 98 |         <h1>Vertex shader</h1>
 99 |         <ul>
100 |           <h2>Parameters</h2>
101 |           <li>Buffers (vertex arrays)</li>
102 |           <li>Textures (images)</li>
103 |           <li>Uniforms (call parameters)</li>
104 |         </ul>
105 |       </div>
106 |       <div>
107 |         <h1>Fragment shader</h1>
108 |         <ul>
109 |           <h2>Computes</h2>
110 |           <li>Color of the pixel</li>
111 |         </ul>
112 |       </div>
113 |       <div>
114 |         <h1>Fragment shader</h1>
115 |         <ul>
116 |           <h2>Parameters</h2>
117 |           <li>Varyings from the vertex shader</li>
118 |           <li>Textures</li>
119 |           <li>Uniforms</li>
120 |         </ul>
121 |       </div>
122 |       <div>
123 |         <h1>Render target</h1>
124 |         <h2>&lt;CANVAS&gt;</h2>
125 |         <h2>or</h2>
126 |         <h2>Framebuffer object (FBO)</h2>
127 |       </div>
128 |       <div>
129 |         <h1>FBO</h1>
130 |         <h2>In GPU memory</h2>
131 |         <h2>For rendering to textures</h2>
132 |         <self></self>
133 |       </div>
134 |       <div>
135 |         <h1>Textures</h1>
136 |         <ul>
137 |         <h2>WebGL can load:</h2>
138 |           <li>&lt;CANVAS&gt;</li>
139 |           <li>&lt;IMG&gt;</li>
140 |           <li>&lt;VIDEO&gt;</li>
141 |           <li>And pixel arrays.</li>
142 |         </ul>
143 |       </div>
144 |       <div>
145 |         <h1>CANVAS</h1>
146 |         <h2>All the text here.</h2>
147 |         <p>(CSS 3D would be nicer, but eh.)</p>
148 |         <edit></edit>
149 |       </div>
150 |       <div>
151 |         <h1>IMG</h1>
152 |         <img src="tram.jpg" width="360" height="360">
153 |       </div>
154 |       <div>
155 |         <h1>VIDEO</h1>
156 | <!--        <video oncube="true" preload width="480" height="320" controls="on">
157 |           <source  src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm" type='video/webm; codecs="vp8, vorbis"' />
158 |           <source  src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
159 |         </video>-->
160 |       </div>
161 |       <div>
162 |         <h1>Further reading</h1>
163 |         <p>learningwebgl.com</p>
164 |         <img src="learningwebgl.jpg">
165 |       </div>
166 |       <div>
167 |         <h1>Isn't that a bit...</h1>
168 |         <h2>...cumbersome? Yes.</h2>
169 |         <h2>Overkill for simple drawing.</h2>
170 |         <h2>Libraries to the rescue!</h2>
171 |       </div>
172 |       <div>
173 |         <h1>Libraries</h1>
174 |         <h2>Alphabetically:</h2>
175 |         <h3>C3DL</h3>
176 |         <h3>CopperLight</h3>
177 |         <h3>CubicVR</h3>
178 |         <h3>GLGE</h3>
179 |         <h3>O3D</h3>
180 |         <h3>SpiderGL</h3>
181 |         <h3>X3DOM</h3>
182 |         <h3>XB PointStream</h3>
183 |       </div>
184 |       <div>
185 |         <h1>GLGE</h1>
186 |         <img src="glge.jpg">
187 |         <p>glge.org</p>
188 |       </div>
189 |       <div>
190 |         <h1>SpiderGL</h1>
191 |         <img src="spidergl.jpg">
192 |         <p>spidergl.org</p>
193 |       </div>
194 |       <div>
195 |         <h1>Games</h1>
196 |         <h2>Google's Quake 2 -port</h2>
197 |         <h2>O3D pool game</h2>
198 |         <h2>Some Q3 map viewers</h2>
199 |       </div>
200 |       <div>
201 |         <h1>Applications?</h1>
202 |         <h3>3D model viewers</h3>
203 |         <h3>ChemDoodle molecule visualizer</h3>
204 |         <h3>ShaderToy</h3>
205 |         <h3>WebGL Street View</h3>
206 |       </div>
207 |       <div>
208 |         <h1>ChemDoodle</h1>
209 |         <p>web.chemdoodle.com</p>
210 |         <img src="chemdoodle.jpg">
211 |       </div>
212 |       <div>
213 |         <h1>ShaderToy</h1>
214 |         <p>www.iquilezles.org/apps/shadertoy/</p>
215 |         <img src="shadertoy.jpg">
216 |       </div>
217 |       <div>
218 |         <h1>Status</h1>
219 |         <h2>WebGL 1.0 soon.</h2>
220 |         <h2>Chrome, Safari, Firefox, Opera(?)</h2>
221 |         <h3>Shader validation with ANGLE.</h3>
222 |         <p>CPU rendering with OSMESA.</p>
223 |       </div>
224 |       <div>
225 |         <h1>ANGLE?</h1>
226 |         <h2>Almost Native Graphics Layer Engine</h2>
227 |         <h3>angleproject.googlecode.com</h3>
228 |         <h3>OpenGL ES 2.0 interpreter</h3>
229 |       </div>
230 |       <div>
231 |         <h1>Interpreter?</h1>
232 |         <h2>Converts WebGL shaders to native.</h2>
233 |         <h2>GLES 2.0 -> OpenGL 2.1</h2>
234 |         <h2>GLES 2.0 -> DirectX 9</h2>
235 |       </div>
236 |       <div>
237 |         <h1>OSMESA</h1>
238 |         <h2>Off-Screen MESA GL</h2>
239 |         <h2>Draws on the CPU.</h2>
240 |         <h2>Very slow.</h2>
241 |       </div>
242 |       <div>
243 |         <h1>Conclusion</h1>
244 |         <h2>Fast custom drawing.</h2>
245 |         <h2>Quite well supported.</h2>
246 |         <h2>Web-compatible.</h2>
247 |         <h2>Requires programming.</h2>
248 |       </div>
249 |       <div>
250 |         <h1>Thank You!</h1>
251 |         <h2>Ilmari Heikkinen</h2>
252 |         <h3>ilmari.heikkinen@gmail.com</h3>
253 |       </div>
254 |       <div>
255 |         <h1>Cheats</h1>
256 |         <p>App.editSlide()</p>
257 |         <p>App.toggleAllSlidesVisible()</p>
258 |         <p>App.toggleApp()</p>
259 |         <p>App.wavyText = false</p>
260 |         <p>App.cycleColors = true</p>
261 |         <p>txt = App.scene.getNodesByKlass(Magi.MeshText)[0]</p>
262 |         <p>txt.alignedNode.material.floats.pitch = 2</p>
263 |         <p>txt = App.scene.getNodesByKlass(Magi.MeshText)[2]
264 |         <p>App.addDotShader(txt)</p>
265 |         <p>txt.alignedNode.material.floats.pitch = 2</p>
266 |       </div>
267 |       <div>
268 |         <h1>The End</h1>
269 |         <p>Click to return to start.</p>
270 |       </div>
271 |     </div>
272 |     <script type="text/javascript">
273 |       App = new Slides(byId('slides'));
274 |     </script>
275 | 	</body>
276 | 
277 | </html>
278 | 


--------------------------------------------------------------------------------
/minify.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | cat src/{matrix,util,gl_util,scenegraph,scene_util,tar,obj_loader,bin_loader}.js | yui-compressor --type js > src/magi.js &&
4 | echo "Created src/magi.js";
5 | 
6 | cat slides/slides.js | yui-compressor --type js > slides/slides.base.min.js &&
7 | echo "Created slides/slides.base.min.js";
8 | 
9 | 


--------------------------------------------------------------------------------
/slides/editor.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 |     <title>Presentation</title>
 6 |     <link rel="stylesheet" type="text/css" href="slides.css" />
 7 |     <script type="text/javascript" src="../src/matrix.js"></script>
 8 |     <script type="text/javascript" src="../src/util.js"></script>
 9 |     <script type="text/javascript" src="../src/gl_util.js"></script>
10 |     <script type="text/javascript" src="../src/scenegraph.js"></script>
11 |     <script type="text/javascript" src="../src/scene_util.js"></script>
12 |     <script type="text/javascript" src="../src/bin_loader.js"></script>
13 |     <script type="text/javascript" src="slides.js"></script>
14 |   </head>
15 |   <body>
16 |     <div id="slides">
17 |       <div>
18 |         <h1>Instructions</h1>
19 |         <h2>Click the button in the top-right corner</h2>
20 |         <h2>Edit the text boxes on the right</h2>
21 |         <p>Ctrl-Enter creates a new slide</p>
22 |         <p>Pressing delete or backspace in an empty slide deletes it</p>
23 |         <p>When you're done, close the editor and save this page</p>
24 |       </div>
25 |       <div>
26 |         <h1>Markup</h1>
27 |         <h2>Format: Command Content</h2>
28 |         <h3>E.g. H3 Some text here</h3>
29 |       </div>
30 |       <div>
31 |         <h1>Commands</h1>
32 |         <ul>
33 |           <li>H1 Big title</li>
34 |           <li>H2 Normal title</li>
35 |           <li>H3 Small title</li>
36 |           <li>P Even smaller text</li>
37 |           <li>* Bullet point list</li>
38 |           <li># Numbered list</li>
39 |           <li>IMG image_url.jpg</li>
40 |           <li>VIDEO video.mp4 alternative.webm</li>
41 |         </ul>
42 |       </div>
43 |     </div>
44 |     <script type="text/javascript">
45 |       App = new Slides(byId('slides'));
46 |     </script>
47 | 	</body>
48 | 
49 | </html>
50 | 


--------------------------------------------------------------------------------
/slides/slides.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   background: #333333;
  5 |   font-family: Arial;
  6 | }
  7 | #slides {
  8 |   text-align: center;
  9 | }
 10 | canvas {
 11 |   box-shadow: 0px 0px 20px rgba(0,0,0,1);
 12 |   -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,1);
 13 |   -moz-box-shadow: 0px 0px 20px rgba(0,0,0,1);
 14 | }
 15 | #slides img, #slides video, #slides canvas, #slides audio {
 16 |   display: block;
 17 |   margin-left: auto;
 18 |   margin-right: auto;
 19 | }
 20 | textarea {
 21 |   position: relative;
 22 |   font-family: sans-serif;
 23 |   white-space: pre;
 24 |   width: 474px;
 25 |   min-height: 40px;
 26 |   height: auto;
 27 |   overflow: visible;
 28 |   resize: none;
 29 |   background-color: rgba(255,255,255,0.8);
 30 |   border: 0px;
 31 |   margin: 0px;
 32 |   margin-right: 10px;
 33 |   margin-top: 8px;
 34 |   padding: 4px;
 35 |   padding-left: 8px;
 36 |   line-height: 1.5em;
 37 |   text-align: left
 38 | }
 39 | textarea:focus {
 40 |   background: white;
 41 | }
 42 | h1 {
 43 |   font-family: Century Gothic,URW Gothic L,Tahoma,Arial;
 44 |   font-size: 100px;
 45 | }
 46 | h2 {
 47 |   font-family: Arial;
 48 |   margin-bottom: 0.3em;
 49 | }
 50 | h3 {
 51 |   font-family: Arial;
 52 |   margin-top: 0em;
 53 |   margin-bottom: 0.2em;
 54 | }
 55 | img {
 56 |   max-height: 50%;
 57 | }
 58 | p {
 59 |   margin-top: 0em;
 60 |   margin-bottom: 0.3em;
 61 | }
 62 | #editorToggle {
 63 |   position: fixed;
 64 |   top: 8px;
 65 |   right: 0px;
 66 |   margin-right: 10px;
 67 |   z-index: 1000000;
 68 | }
 69 | #slides div {
 70 |   margin: 40px;
 71 |   padding: 0;
 72 |   margin-bottom: 10%;
 73 |   height: 80%;
 74 |   border: 1px solid #888;
 75 |   box-shadow: 0px 2px 6px rgba(0,0,0,0.75);
 76 |   -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,0.75);
 77 |   -moz-box-shadow: 0px 2px 6px rgba(0,0,0,0.75);
 78 |   padding-top: 20px;
 79 |   padding-bottom: 60px;
 80 |   border-top-left-radius: 20px;
 81 |   border-bottom-right-radius: 20px;
 82 |   background: -webkit-gradient(
 83 |         linear,
 84 |         left bottom,
 85 |         left top,
 86 |         color-stop(0.25, rgb(255,255,255)),
 87 |         color-stop(0.69, rgb(235,235,235))
 88 |     );
 89 |   background: -moz-linear-gradient(
 90 |         center bottom,
 91 |         rgb(255,255,255) 25%,
 92 |         rgb(245,245,245) 69%
 93 |     );
 94 |   font-size: 200%;
 95 | }
 96 | #slides li {
 97 |   list-style: none;
 98 | }
 99 | .editor {
100 |   position: absolute;
101 |   top: 20px;
102 |   right: 40px;
103 |   background-color: rgba(255,255,255,0.2);
104 |   padding: 10px;
105 | }
106 | .editor input {
107 |   border: 0px;
108 |   width: 400px;
109 |   font-size: 20px;
110 |   padding-left: 2px;
111 |   padding-right: 2px;
112 |   margin-bottom: 4px;
113 |   background-color: rgba(255,255,255,0.6);
114 | }
115 | .editor button {
116 |   margin: 0px;
117 |   margin-top: 10px;
118 | }
119 | canvas:focus {
120 |   outline: none;
121 | }
122 | 


--------------------------------------------------------------------------------
/slides/slides.js:
--------------------------------------------------------------------------------
   1 | Slides = Klass({
   2 |   currentSlide : 0,
   3 | 
   4 |   h1FontSize : 100,
   5 |   h2FontSize : 72,
   6 |   h3FontSize : 60,
   7 |   listFontSize : 48,
   8 |   pFontSize : 48,
   9 | 
  10 |   h1Color : 'white',
  11 |   h2Color : 'white',
  12 |   h3Color : 'white',
  13 |   listColor : 'white',
  14 |   pColor : 'white',
  15 | 
  16 |   h1Font : 'Century Gothic,URW Gothic L,Tahoma,Arial',
  17 |   h2Font : 'Arial',
  18 |   h3Font : 'Arial',
  19 |   listFont : 'Arial',
  20 |   pFont : 'Arial',
  21 |   preFont : 'Droid Mono,Monaco,Courier New',
  22 | 
  23 |   listBullet : "\u2605", // filled star
  24 | 
  25 |   pulse : 0,
  26 | 
  27 |   editorWidth: 520,
  28 | 
  29 |   wavyText : true,
  30 |   cycleColors : false,
  31 | 
  32 |   webGLCanvasID : 'webgl-slides-canvas',
  33 |   editorID : 'slides-editor',
  34 | 
  35 |   usingWebGL : false,
  36 |   usingHTML : false,
  37 | 
  38 |   initialize : function(elem) {
  39 |     var et = byId('editorToggle');
  40 |     if (et) et.parentNode.removeChild(et);
  41 |     et = BUTTON("Edit", {id: 'editorToggle'});
  42 |     et.onclick = function() {
  43 |       self.toggleEditMode();
  44 |     };
  45 |     this.editorToggleButton = et
  46 |     document.body.insertBefore(this.editorToggleButton, elem);
  47 |     var ed = byId(this.editorID);
  48 |     if (ed) {
  49 |       ed.parentNode.removeChild(ed);
  50 |     }
  51 |     if (document.location.hash) {
  52 |       this.currentSlide = parseInt(document.location.hash.slice(1));
  53 |     } else {
  54 |       this.currentSlide = 0;
  55 |     }
  56 |     var self = this;
  57 |     window.addEventListener('hashchange', function() {
  58 |       var idx = parseInt(document.location.hash.slice(1));
  59 |       if (!isNaN(idx) && idx != this.currentSlide)
  60 |         self.setSlide(idx);
  61 |     }, false);
  62 |     if (this.isWebGLSupported()) { // render using WebGL
  63 |       this.initializeWebGL(elem);
  64 |       this.usingWebGL = true;
  65 |     } else if (this.isSVGSupported()) { // SVG fallback
  66 |     } else { // JS + CSS fallback
  67 |       window.onkeydown = this.makeKeydownHandler();
  68 |       this.rendererGoTo = this.htmlGoTo;
  69 |       this.usingHTML = true;
  70 |     }
  71 |     this.setSlideElement(elem);
  72 |   },
  73 | 
  74 |   htmlGoTo : function() {
  75 |     var divs = this.slideElement.getElementsByTagName('div');
  76 |     window.scrollTo(0, divs[this.currentSlide].offsetTop-40);
  77 |   },
  78 | 
  79 |   isWebGLSupported : function() {
  80 |     return (Magi.findGLContextId(E.canvas(1,1)) != null);
  81 |   },
  82 | 
  83 |   isSVGSupported : function() {
  84 |     return false;
  85 |   },
  86 |   
  87 |   makeKeydownHandler : function() {
  88 |     var self = this;
  89 |     var skipTags = ['BUTTON', 'INPUT', 'TEXTAREA'];
  90 |     return function(ev) {
  91 |       var t = ev.target.tagName;
  92 |       if (skipTags.indexOf(t) != -1)
  93 |         return;
  94 |       if (Key.match(ev, Key.SPACE)) {
  95 |         if (ev.shiftKey)
  96 |           self.previousSlide();
  97 |         else
  98 |           self.nextSlide();
  99 |         ev.preventDefault();
 100 |       } else if (Key.match(ev, Key.BACKSPACE)) {
 101 |         if (ev.shiftKey)
 102 |           self.nextSlide();
 103 |         else
 104 |           self.previousSlide();
 105 |         ev.preventDefault();
 106 |       }
 107 |     };
 108 |   },
 109 | 
 110 |   initializeWebGL : function(elem) {
 111 |     document.body.style.overflow = 'hidden';
 112 |     var oldCanvas = byId(this.webGLCanvasID);
 113 |     if (oldCanvas) oldCanvas.parentNode.removeChild(oldCanvas);
 114 |     this.canvas = E.canvas(window.innerWidth, window.innerHeight);
 115 |     this.canvas.setAttribute('id', this.webGLCanvasID);
 116 |     this.canvas.id = this.webGLCanvasID;
 117 |     this.canvas.setAttribute('tabindex', '-1');
 118 |     this.canvas.style.position = 'absolute';
 119 |     this.canvas.style.left = this.canvas.style.top = '0px';
 120 |     document.body.insertBefore(this.canvas, elem);
 121 | 
 122 |     this.realDisplay = new Magi.Scene(this.canvas);
 123 |     this.previousFrameFBO = new Magi.FBO(this.realDisplay.gl, this.canvas.width*2, this.canvas.height*2);
 124 |     this.previousFrameFBO.use();
 125 |     this.fbo = new Magi.FBO(this.realDisplay.gl, this.canvas.width*2, this.canvas.height*2);
 126 |     this.fbo.use();
 127 |     var showFBO = new Magi.FilterQuad();
 128 |     var self = this;
 129 |     showFBO.addFrameListener(function(t,dt){
 130 |       this.material.textures.Texture0 = self.fbo.texture;
 131 |       self.display.fbo = self.fbo;
 132 |       self.fbo.setSize(self.canvas.width*2, self.canvas.height*2);
 133 |       self.display.draw(t,dt);
 134 |       var f = self.previousFrameFBO;
 135 |       self.previousFrameFBO = self.fbo;
 136 |       self.fbo = f;
 137 |     });
 138 |     this.realDisplay.scene.appendChild(showFBO);
 139 | 
 140 |     this.display = new Magi.Scene(this.fbo);
 141 |     this.scene = this.display.scene;
 142 |     var s = this.display;
 143 |     s.bg = [0.3, 0.7, 0.9, 1];
 144 |     s.camera.targetFov = 40;
 145 |     s.useDefaultCameraControls(this.canvas);
 146 |     s.yRot.setX(0.02).setY(1.0).setAngle(-0.1);
 147 |     s.xRot.setAngle(-0.05);
 148 |     vec3.set([2.5,-3,7.5], s.camera.position);
 149 |     vec3.set([0.5,-2,0], s.camera.lookAt);
 150 |     s.scene.setScale(1/200);
 151 | 
 152 |     var grad = new Magi.FilterQuad(this.shaders.bgFrag);
 153 |     grad.material.floats.aspect = 4/3;
 154 |     s.scene.appendChild(grad);
 155 | 
 156 |     byId('slides').style.display = 'none';
 157 | 
 158 | 
 159 |     s.scene.addFrameListener(function(t,dt) {
 160 |       if (self.cycleColors) {
 161 |         var rgb = Magi.Colors.hsv2rgb((t/10)%360, 0.9, 0.7);
 162 |         vec3.set(rgb, s.bg);
 163 |       }
 164 |     });
 165 | 
 166 |     window.addEventListener('resize', function() {
 167 |       self.canvas.width = window.innerWidth - (self.editing ? self.editorWidth : 0);
 168 |       self.canvas.height = window.innerHeight;
 169 |       self.display.changed = true;
 170 |     }, false);
 171 | 
 172 |     var downX=0, downY=0, cancelled=true;
 173 |     this.canvas.onmousedown = function(ev) {
 174 |       downX = ev.clientX;
 175 |       downY = ev.clientY;
 176 |       this.focus();
 177 |       cancelled = false;
 178 |     };
 179 |     this.canvas.onmousemove = function(ev) {
 180 |       if (!cancelled) {
 181 |         var x = ev.clientX;
 182 |         var y = ev.clientY;
 183 |         var dx = x - downX;
 184 |         var dy = y - downY;
 185 |         var d = Math.sqrt(dx*dx + dy*dy);
 186 |         if (d > 5) cancelled = true;
 187 |       }
 188 |     };
 189 |     this.canvas.onclick = function(ev) {
 190 |       if (!cancelled) {
 191 |         if (ev.shiftKey)
 192 |           self.previousSlide();
 193 |         else
 194 |           self.nextSlide();
 195 |         s.changed = true;
 196 |       }
 197 |       cancelled = true;
 198 |       ev.preventDefault();
 199 |     };
 200 |     this.canvas.onkeydown = this.makeKeydownHandler();
 201 |     this.canvas.focus();
 202 | 
 203 |     this.targetPos = vec3.create();
 204 |     this.top = new Magi.Node();
 205 |     this.scene.appendChild(this.top);
 206 |     this.cube = this.makeCube();
 207 |     this.top.appendChild(this.cube);
 208 |     this.rendererGoTo = this.webGLGoTo;
 209 |     var d = vec3.create();
 210 |     this.scene.addFrameListener(function(t,dt) {
 211 |       vec3.sub(self.targetPos, self.top.position, d);
 212 |       if (vec3.lengthSquare(d) > 1) {
 213 |         var f = 1-Math.pow(0.75, dt/33);
 214 |         vec3.scale(d, f);
 215 |         vec3.add(self.top.position, d);
 216 |       } else {
 217 |         self.visibleSlides(self.currentSlide, self.currentSlide);
 218 |       }
 219 |       vec3.negate(self.targetPos, d);
 220 |       vec3.sub(d, self.cube.position);
 221 |       var dist = vec3.length(d);
 222 |       if (dist > 1) {
 223 |         var f = 1-Math.pow(0.85, dt/33);
 224 |         vec3.scale(d, f);
 225 |         vec3.add(self.cube.position, d);
 226 |         self.cube.outerCube.setScale(Math.max(0.3, Math.min(0.8, 100.0/dist)));
 227 |         self.cube.outerCube.rotationSpeed = Math.min(50, 1+dist/10);
 228 |         if (dist < 80 && dist > 50 && self.pulse <= 0) {
 229 |           self.pulse = 330;
 230 |         }
 231 |         self.cube.counter = 1000;
 232 |       } else {
 233 |         self.cube.outerCube.setScale(0.8);
 234 |         self.cube.outerCube.rotationSpeed = Math.sqrt(self.cube.counter / 1000);
 235 |         self.cube.counter -= dt;
 236 |         if (self.cube.counter < 10)
 237 |           self.cube.counter = 10;
 238 |       }
 239 |       if (self.pulse>0) {
 240 |         self.cube.innerCube.setScale(0.8-(self.pulse/33)*0.02);
 241 |         self.pulse-=dt;
 242 |       } else {
 243 |         self.cube.innerCube.setScale(0.8);
 244 |       }
 245 |     });
 246 |   },
 247 | 
 248 |   webGLGoTo : function(before, current) {
 249 |     vec3.negate(this.slides.childNodes[current].position, this.targetPos);
 250 | 
 251 |     this.visibleSlides(before, current);
 252 |   },
 253 | 
 254 |   toggleAllSlidesVisible : function() {
 255 |     this.allSlidesVisible = !this.allSlidesVisible;
 256 |     this.visibleSlides(this.currentSlide, this.currentSlide);
 257 |   },
 258 | 
 259 |   visibleSlides : function(first, last) {
 260 |     if (!this.usingWebGL) return;
 261 |     var min = Math.min(first, last);
 262 |     var max = Math.max(first, last);
 263 |     var cc = this.slides.childNodes;
 264 |     if (min == 0 && max == cc.length-1) {
 265 |       min = cc.length-1;
 266 |       max = 0;
 267 |     }
 268 |     for (var i=0; i<cc.length; i++) {
 269 |       if (!this.allSlidesVisible && i != min && i != max && (i < min || i > max)) {
 270 |         cc[i].display = false;
 271 |         this.deleteTextures(cc[i]);
 272 |       } else {
 273 |         cc[i].display = true;
 274 |       }
 275 |     }
 276 |   },
 277 | 
 278 |   deleteTextures : function(node) {
 279 |     node.forEach(function(c) {
 280 |       if (c.material) {
 281 |         for (var i in c.material.textures) {
 282 |           if (c.material.textures[i])
 283 |             c.material.textures[i].clear();
 284 |         }
 285 |       }
 286 |     });
 287 |   },
 288 | 
 289 |   textualize : function(e, level, prefix) {
 290 |     var strs = [];
 291 |     if (level == null) level = 0;
 292 |     switch (e.tagName) {
 293 |       case 'IMG':
 294 |       //case 'MODEL':
 295 |         strs.push(e.tagName + " " + e.getAttribute('src'));
 296 |         break;
 297 |       case 'VIDEO':
 298 |         var src = e.getAttribute('src');
 299 |         var srcs = toArray(e.getElementsByTagName('source')).map(function(c){
 300 |           return c.getAttribute('src');
 301 |         });
 302 |         var srcstr = (src ? src + " " : "") + srcs.join(" ");
 303 |         strs.push(e.tagName + " " + srcstr);
 304 |         break;
 305 |       case 'LI':
 306 |         var indent = "";
 307 |         for (var i=1; i<level; i++) indent += "  ";
 308 |         strs.push(indent + prefix + " " + e.textContent);
 309 |         break;
 310 |       case 'UL':
 311 |         prefix = '*';
 312 |         level++;
 313 |         break;
 314 |       case 'OL':
 315 |         prefix = '#';
 316 |         level++;
 317 |         break;
 318 |       case 'PRE':
 319 |         strs.push('> '+ e.textContent);
 320 |         break;
 321 |       case 'H1':
 322 |       case 'H2':
 323 |       case 'H3':
 324 |       case 'P':
 325 |         strs.push(e.tagName + " " + e.textContent);
 326 |         break;
 327 |     }
 328 |     var cc = e.childNodes;
 329 |     for (var i=0; i<cc.length; i++) {
 330 |       var txt = this.textualize(cc[i], level, prefix);
 331 |       if (txt.length > 0)
 332 |         strs.push(txt);
 333 |     }
 334 |     return strs.join("\n")
 335 |   },
 336 | 
 337 |   parseMarkup : function(str) {
 338 |     var lines = str.split("\n");
 339 |     var top = DIV();
 340 |     var lists = [];
 341 |     for (var i=0; i<lines.length; i++) {
 342 |       var line = lines[i].replace(/^\s+|\s+$/g, '');
 343 |       var ocmd = line.split(" ",1)[0]
 344 |       var cmd = ocmd.toUpperCase();
 345 |       var content = line.slice(cmd.length+1);
 346 |       var endList = true;
 347 |       switch (cmd) {
 348 |         case 'IMG':
 349 |         //case 'MODEL':
 350 |           top.appendChild(E(cmd, {src: content}));
 351 |           break;
 352 |         case 'VIDEO':
 353 |           var srcs = content.split(" ");
 354 |           var e = E('VIDEO', {controls: 'on'});
 355 |           if (srcs.length == 1) {
 356 |             e.setAttribute('src', srcs[0]);
 357 |           } else {
 358 |             srcs.forEach(function(src) {
 359 |               e.appendChild(E('SOURCE', {src: src}));
 360 |             });
 361 |           }
 362 |           top.appendChild(e);
 363 |           break;
 364 |         case '*':
 365 |           var l = lists[lists.length-1];
 366 |           while (lists.length > 0 && l.tagName != 'UL') {
 367 |             lists.pop();
 368 |             l = lists[lists.length-1];
 369 |           }
 370 |           if (lists.length == 0) {
 371 |             l = UL();
 372 |             lists.push(l);
 373 |             top.appendChild(l)
 374 |           }
 375 |           l.appendChild(LI(T(content)));
 376 |           endList = false;
 377 |           break;
 378 |         case '#':
 379 |           var l = lists[lists.length-1];
 380 |           while (lists.length > 0 && l.tagName != 'OL') {
 381 |             lists.pop();
 382 |             l = lists[lists.length-1];
 383 |           }
 384 |           if (lists.length == 0) {
 385 |             l = OL();
 386 |             lists.push(l);
 387 |             top.appendChild(l)
 388 |           }
 389 |           l.appendChild(LI(T(content)));
 390 |           endList = false;
 391 |           break;
 392 |         case '>':
 393 |           top.appendChild(E('PRE', T(content)));
 394 |           break;
 395 |         case 'H1':
 396 |         case 'H2':
 397 |         case 'H3':
 398 |         case 'P':
 399 |           top.appendChild(E(cmd, T(content)));
 400 |           break;
 401 |         default:
 402 |           var oneWord = !(/\s/).test(line);
 403 |           if (oneWord && (/\.(jpe?g|png|gif)$/i).test(line)) {
 404 |             top.appendChild(IMG({src: line}));
 405 |           } else if (oneWord && (/\.(mp4|webm|og[gvm])$/i).test(line)) {
 406 |             top.appendChild(VIDEO({src: line, controls: 'on'}));
 407 |           } else if (oneWord && (/\.(mp3|oga)$/i).test(line)) {
 408 |             top.appendChild(AUDIO({src: line, controls: 'on'}));
 409 |           } else {
 410 |             top.appendChild(E(i == 0 ? 'H1' : 'H2', T(line)));
 411 |           }
 412 |       }
 413 |       if (endList && lists.length > 0) {
 414 |         lists.splice(0);
 415 |       }
 416 |     }
 417 |     return top;
 418 |   },
 419 | 
 420 |   toggleEditMode : function() {
 421 |     this.editing = !this.editing;
 422 |     if (this.editing) {
 423 |       if (!this.editor) {
 424 |         // createNewSlide
 425 |         // gotoCurrentSlide
 426 |         // edit slideshow style (BG, fonts, transitions)
 427 |         // save slideshow html
 428 |         // deleteSlide
 429 |         // change slide style (BG, fonts, transitions)
 430 |         // change slide order
 431 |         var self = this;
 432 |         this.editorButtons = DIV(
 433 |           BUTTON("New slide", {
 434 |             onclick : function(ev) {
 435 |               self.createNewSlide();
 436 |               ev.preventDefault();
 437 |             }
 438 |           }),
 439 |           // BUTTON("Edit global style"),
 440 |           BUTTON("Party on!", {
 441 |             onclick : function(ev) {
 442 |               self.cycleColors = !self.cycleColors;
 443 |               ev.preventDefault();
 444 |             }
 445 |           }),
 446 |           BUTTON("Toggle all slides visible", {style: {marginRight: '2px'},
 447 |             onclick : function(ev) {
 448 |               self.toggleAllSlidesVisible();
 449 |               ev.preventDefault();
 450 |             }
 451 |           }),
 452 |           {style: {
 453 |             position: 'absolute',
 454 |             right: '0px',
 455 |             bottom: '0px',
 456 |             width: '510px',
 457 |             textAlign: 'right'
 458 |           }}
 459 |         );
 460 |         this.editorSlides = DIV(
 461 |           {style: {
 462 |             position: 'absolute',
 463 |             right: '0px',
 464 |             top: '0px',
 465 |             bottom: '32px',
 466 |             width: '510px',
 467 |             overflow: 'auto'
 468 |           }}
 469 |         );
 470 |         toArray(this.slideElement.childNodes).forEach(function(c) {
 471 |           if (!c.tagName) return;
 472 |           var ta = TEXTAREA(T(self.textualize(c)), {
 473 |             onkeyup : self.textareaKeyUpHandler(c),
 474 |             onfocus : self.textareaFocusHandler(),
 475 |           });
 476 |           ta.addEventListener('DOMNodeInserted', function() {
 477 |             var s = this;
 478 |             setTimeout(function() {
 479 |               s.style.height = s.scrollHeight+'px';
 480 |             }, 10);
 481 |           }, false);
 482 |           self.editorSlides.appendChild(DIV(ta));
 483 |         });
 484 |         this.editor = DIV(this.editorSlides, this.editorButtons,
 485 |           {
 486 |             id: this.editorID,
 487 |             style: {
 488 |               position: 'fixed',
 489 |               right: '0px',
 490 |               top: '0px',
 491 |               bottom: '8px'
 492 |             }
 493 |           }
 494 |         );
 495 |       }
 496 |       document.body.insertBefore(this.editor, this.slideElement);
 497 |       if (this.usingWebGL) {
 498 |         this.display.camera.targetFov *= 1.0/0.6;
 499 |         this.canvas.width -= this.editorWidth;
 500 |         this.display.changed = true;
 501 |       }
 502 |       this.editorToggleButton.style.right = this.editorWidth + 'px';
 503 |     } else {
 504 |       this.editor.parentNode.removeChild(this.editor);
 505 |       if (this.usingWebGL) {
 506 |         this.display.camera.targetFov *= 0.6;
 507 |         this.canvas.width += this.editorWidth;
 508 |         this.display.changed = true;
 509 |       }
 510 |       this.editorToggleButton.style.right = '0px';
 511 |     }
 512 |   },
 513 | 
 514 |   saveSlideshow : function() {
 515 |     App.toggleApp();
 516 |     if (this.canvas)
 517 |       document.body.removeChild(this.canvas);
 518 |     document.body.removeChild(this.editorToggleButton);
 519 |     if (this.editor)
 520 |       document.body.removeChild(this.editor);
 521 |     var html = document.documentElement.innerHTML;
 522 |     document.body.insertBefore(this.editorToggleButton,this.slideElement);
 523 |     if (this.canvas)
 524 |       document.body.insertBefore(this.canvas,this.slideElement);
 525 |     document.body.insertBefore(this.editor,this.slideElement);
 526 |     App.toggleApp();
 527 |     return html;
 528 |   },
 529 | 
 530 |   textareaKeyUpHandler : function(e) {
 531 |     var self = this;
 532 |     return (function(ev) {
 533 |       var content = this.value;
 534 |       if (this.previousContent == "" && Key.match(ev, [Key.BACKSPACE, Key.DELETE])) {
 535 |         var a = toArray(this.parentNode.parentNode.childNodes);
 536 |         self.deleteSlide(a.indexOf(this.parentNode));
 537 |       } else if (ev.ctrlKey && Key.match(ev, Key.ENTER)) {
 538 |         self.createNewSlide();
 539 |         ev.preventDefault();
 540 |       } else if (this.previousContent != content) {
 541 |         this.style.height = this.scrollHeight+'px';
 542 |         this.previousContent = content;
 543 |         var dom = self.parseMarkup(content);
 544 |         while (e.firstChild) {
 545 |           e.removeChild(e.firstChild);
 546 |         }
 547 |         while (dom.firstChild) {
 548 |           var d = dom.firstChild;
 549 |           dom.removeChild(d);
 550 |           e.appendChild(d);
 551 |         }
 552 |         if (self.usingWebGL) {
 553 |           var slide = self.parseSlide(e);
 554 |           var a = toArray(this.parentNode.parentNode.childNodes);
 555 |           var idx = a.indexOf(this.parentNode);
 556 |           self.replaceSlide(idx, slide);
 557 |         }
 558 |       }
 559 |     });
 560 |   },
 561 | 
 562 |   textareaFocusHandler : function() {
 563 |     var self = this;
 564 |     return (function(ev) {
 565 |       this.style.height = this.scrollHeight+'px';
 566 |       var a = toArray(this.parentNode.parentNode.childNodes);
 567 |       self.setSlide(a.indexOf(this.parentNode));
 568 |     });
 569 |   },
 570 | 
 571 |   toggleApp : function() {
 572 |     if (this.disabled) {
 573 |       this.canvas.style.display = 'block';
 574 |       this.slideElement.style.display = 'none';
 575 |       this.disabled = false;
 576 |       this.display.paused = false;
 577 |     } else {
 578 |       this.canvas.style.display = 'none';
 579 |       this.slideElement.style.display = 'block';
 580 |       this.disabled = true;
 581 |       this.display.paused = true;
 582 |     }
 583 |   },
 584 | 
 585 |   setSlideElement : function(elem) {
 586 |     if (this.slides && this.scene) {
 587 |       this.scene.removeChild(this.slides);
 588 |       this.slideElement.style.display = 'block';
 589 |     }
 590 |     this.slideElement = elem;
 591 |     this.slideCount = this.slideElement.getElementsByTagName('div').length;
 592 |     if (this.scene) {
 593 |       this.slideElement.style.display = 'none';
 594 |       this.slides = this.parseSlides(elem);
 595 |       this.top.appendChild(this.slides);
 596 |     }
 597 |     this.setSlide(this.currentSlide);
 598 |   },
 599 | 
 600 |   setSlide : function(index) {
 601 |     if (index < 0) index = this.slideCount+(index%this.slideCount);
 602 |     var before = this.currentSlide
 603 |     this.currentSlide = index % this.slideCount;
 604 |     this.rendererGoTo(before, this.currentSlide);
 605 |     if (this.editing) {
 606 |       var c = this.editorSlides.childNodes[this.currentSlide];
 607 |       c.firstChild.focus();
 608 |       if (this.editorSlides.scrollTop > c.offsetTop + (c.offsetHeight-50) ||
 609 |           this.editorSlides.scrollTop + this.editorSlides.offsetHeight < c.offsetTop+50) {
 610 |         this.editorSlides.scrollTop = c.offsetTop - 50;
 611 |       }
 612 |     }
 613 |     document.location.replace("#"+this.currentSlide);
 614 |   },
 615 | 
 616 |   getCurrentTitle : function() {
 617 |     return this.slides.childNodes[this.currentSlide].title;
 618 |   },
 619 | 
 620 |   nextSlide : function() {
 621 |     this.setSlide(this.currentSlide+1);
 622 |   },
 623 | 
 624 |   previousSlide : function() {
 625 |     this.setSlide(this.currentSlide-1);
 626 |   },
 627 | 
 628 |   updateText : function(node, text) {
 629 |     if (node.text != text) {
 630 |       node.setText(text);
 631 |       node.alignedNode.material.floats.xScale = node.width;
 632 |       node.alignedNode.material.floats.yScale = node.height;
 633 |     }
 634 |   },
 635 | 
 636 |   closeEditor : function() {
 637 |     if (this.editor) {
 638 |       this.editor.innerHTML = "";
 639 |       document.body.removeChild(this.editor);
 640 |     }
 641 |   },
 642 | 
 643 |   parseSlides : function(elem) {
 644 |     var cn = toArray(elem.childNodes).filter(function(s){ return s.tagName; });
 645 |     var top = new Magi.Node();
 646 |     var self = this;
 647 |     var x = 0;
 648 |     var cf = cn.length*400;
 649 |     var r = cf / 2*Math.PI;
 650 |     cn.forEach(function(s) {
 651 |       var d = x/cn.length;
 652 |       var slide = self.parseSlide(s, null, x);
 653 |       slide.element = s;
 654 |       slide.position[1] = Math.sin(2*Math.PI*x/10)*2500;
 655 |       slide.position[0] = -x*10000;
 656 |       slide.position[2] = Math.cos(2*Math.PI*x/10)*2500;
 657 |       x++;
 658 |       top.appendChild(slide);
 659 |     });
 660 |     return top;
 661 |   },
 662 | 
 663 |   repositionSlides : function() {
 664 |     if (this.usingWebGL) {
 665 |       var cc = this.slides.childNodes;
 666 |       for (var i=0; i<cc.length; i++) {
 667 |         cc[i].slideIndex = i;
 668 |         var pos = cc[i].position;
 669 |         pos[0] = -i*10000;
 670 |         pos[1] = Math.sin(2*Math.PI*i/10)*2500;
 671 |         pos[2] = Math.cos(2*Math.PI*i/10)*2500;
 672 |       }
 673 |     }
 674 |     this.setSlide(this.currentSlide);
 675 |   },
 676 | 
 677 |   createNewSlide : function() {
 678 |     var e = DIV();
 679 |     var cc = this.slideElement.childNodes;
 680 |     for (var i=0,j=0; i<cc.length; i++) {
 681 |       while (cc[i] && !cc[i].tagName) i++;
 682 |       if (j == this.currentSlide) {
 683 |         if (cc[i] && cc[i].nextSibling) {
 684 |           this.slideElement.insertBefore(e, cc[i].nextSibling);
 685 |         } else {
 686 |           this.slideElement.appendChild(e);
 687 |         }
 688 |         break;
 689 |       }
 690 |       if (cc[i] && cc[i].tagName) j++;
 691 |     }
 692 |     if (this.usingWebGL) {
 693 |       var slide = this.parseSlide(e, null, this.currentSlide+1);
 694 |       this.slides.childNodes.splice(this.currentSlide+1, 0, slide);
 695 |     }
 696 |     if (this.editorSlides) {
 697 |       var self = this;
 698 |       var ta = TEXTAREA(T(self.textualize(e)), {
 699 |         onkeyup : self.textareaKeyUpHandler(e),
 700 |         onfocus : self.textareaFocusHandler(),
 701 |       });
 702 |       ta.addEventListener('DOMNodeInserted', function() {
 703 |         var s = this;
 704 |         setTimeout(function() {
 705 |           s.style.height = s.scrollHeight+'px';
 706 |         }, 10);
 707 |       }, false);
 708 |       var cci = this.editorSlides.childNodes[this.currentSlide];
 709 |       var ediv = DIV( ta );
 710 |       if (cci.nextSibling) {
 711 |         this.editorSlides.insertBefore(ediv, cci.nextSibling);
 712 |       } else {
 713 |         this.editorSlides.appendChild(ediv);
 714 |       }
 715 |     }
 716 |     this.slideCount++;
 717 |     this.repositionSlides();
 718 |     this.setSlide(this.currentSlide+1);
 719 |   },
 720 | 
 721 |   deleteSlide : function(index) {
 722 |     if (this.slideCount == 1) return;
 723 |     if ((this.currentSlide == index && index > 0) || this.currentSlide+1 == this.slideCount)
 724 |       this.currentSlide--;
 725 |     this.slideCount--;
 726 |     if (this.editorSlides) {
 727 |       var c = this.editorSlides.childNodes[index];
 728 |       c.parentNode.removeChild(c);
 729 |     }
 730 |     if (this.usingWebGL) {
 731 |       var ps = this.slides.childNodes[index];
 732 |       this.deleteTextures(ps);
 733 |       this.slides.childNodes.splice(index,1);
 734 |       ps.element.parentNode.removeChild(ps.element);
 735 |     }
 736 |     this.repositionSlides();
 737 |   },
 738 | 
 739 |   replaceSlide : function(index, slide) {
 740 |     var ps = this.slides.childNodes[index];
 741 |     if (!ps) {
 742 |       this.slides.appendChild(slide);
 743 |       this.repositionSlides();
 744 |     } else {
 745 |       this.deleteTextures(ps);
 746 |       var oldChildren = ps.childNodes.splice(0);
 747 |       var cc = slide.childNodes;
 748 |       while (cc.length > 0) {
 749 |         ps.appendChild(cc.shift());
 750 |       }
 751 |     }
 752 |   },
 753 | 
 754 |   parseSlide : function(elem, acc, idx) {
 755 |     var cn = toArray(elem.childNodes);
 756 |     acc = acc || {top: new Magi.Node(), left: 0, xOffset: 0, offset: 0, counter: 0};
 757 |     var self = this;
 758 |     var origOffset = acc.offset;
 759 |     cn.forEach(function(e) {
 760 |       var node;
 761 |       var xOffset = acc.xOffset;
 762 |       var yOffset = acc.offset;
 763 |       var left = acc.left;
 764 |       switch (e.tagName) {
 765 |         case "H1":
 766 |           sz = self.h1FontSize;
 767 |           if (!acc.top.title)
 768 |             acc.top.title = e.textContent;
 769 |           node = self.makeH1(e.textContent);
 770 |           acc.offset += sz*3.5;
 771 |           break;
 772 |         case "H2":
 773 |           sz = self.h2FontSize;
 774 |           node = self.makeH2(e.textContent);
 775 |           if (acc.left < 0) {
 776 |             node.setAlign(node.leftAlign);
 777 |             left -= 100;
 778 |           }
 779 |           acc.offset += sz*1.5;
 780 |           break;
 781 |         case "H3":
 782 |           sz = self.h3FontSize;
 783 |           node = self.makeH3(e.textContent);
 784 |           acc.offset += sz*1.3;
 785 |           break;
 786 |         case "P":
 787 |           sz = self.pFontSize;
 788 |           node = new Magi.MeshText(e.textContent, self.pFontSize, self.pColor, self.pFont);
 789 |           node.setVAlign(node.topAlign);
 790 |           self.addWaveShader(node);
 791 |           acc.offset += sz*1.3;
 792 |           break;
 793 |         case "PRE":
 794 |           sz = self.pFontSize;
 795 |           node = new Magi.MeshText(e.textContent, self.pFontSize, self.pColor, self.preFont);
 796 |           node.setAlign(node.leftAlign, node.topAlign);
 797 |           acc.offset += self.listFontSize*1.25;
 798 |           left = -450;
 799 |           break;
 800 |         case "UL":
 801 |         case "OL":
 802 |           var lt = acc.listType;
 803 |           acc.listType = e.tagName;
 804 |           acc.counter = 1;
 805 |           acc.xOffset += 32;
 806 |           var l = acc.left;
 807 |           acc.left = -300;
 808 |           self.parseSlide(e, acc, idx);
 809 |           acc.left = l;
 810 |           acc.xOffset -= 32;
 811 |           acc.listType = lt;
 812 |           break;
 813 |         case "LI":
 814 |           var prefix = acc.listType == "OL" ? (acc.counter++)+"." : self.listBullet;
 815 |           node = new Magi.MeshText(prefix + " " + e.textContent, self.listFontSize, self.listColor, self.listFont);
 816 |           node.setAlign(node.leftAlign, node.topAlign);
 817 |           self.addWaveShader(node);
 818 |           acc.offset += self.listFontSize*1.25;
 819 |           break;
 820 |         case "IMG":
 821 |           node = new Magi.MeshImage(e);
 822 |           self.addWaveShader(node, 1.0);
 823 |           node.setVAlign(node.topAlign);
 824 |           if (!Object.isImageLoaded(e)) {
 825 |             e.addEventListener('load', (function(node,top,h) {
 826 |               return function() {
 827 |                 var idx = top.childNodes.indexOf(node);
 828 |                 for (var i=idx+1; i<top.childNodes.length; i++) {
 829 |                   top.childNodes[i].position[1] -= this.height-h;
 830 |                 }
 831 |                 self.addWaveShader(node, 1.0);
 832 |               }
 833 |             })(node, acc.top, e.height), false);
 834 |           }
 835 |           acc.offset += node.height + 8;
 836 |           break;
 837 |         case "CANVAS":
 838 |           node = new Magi.Image(e);
 839 |           node.setVAlign(node.topAlign);
 840 |           if (e.getAttribute('animated')) {
 841 |             node.addFrameListener(function() {
 842 |               if (self.currentSlide == this.slideIndex) {
 843 |                 this.texture.changed = true;
 844 |               }
 845 |             });
 846 |           }
 847 |           acc.offset += node.height + 8;
 848 |           break;
 849 |         case "VIDEO":
 850 |           node = new Magi.MeshImage(e);
 851 |           node.alignedNode.transparent = false;
 852 |           self.addWaveShader(node);
 853 |           node.setVAlign(node.topAlign);
 854 |           node.elapsed = 100;
 855 |           node.addFrameListener(function(t,dt) {
 856 |             if (self.currentSlide == this.slideIndex) {
 857 |               if (e.paused) e.play();
 858 |               if (e.currentTime != this.currentTime) {
 859 |                 this.texture.changed = true;
 860 |                 this.currentTime = e.currentTime;
 861 |               }
 862 |               if (e.getAttribute('oncube')) {
 863 |                 self.cube.outerCube.material.textures.EmitTex = this.texture;
 864 |               }
 865 |             } else {
 866 |               if (!e.paused) e.pause();
 867 |               if (e.getAttribute('oncube') && self.cube.outerCube.material.textures.EmitTex === this.texture)
 868 |                 self.cube.outerCube.material.textures.EmitTex = null;
 869 |             }
 870 |           });
 871 |           acc.offset += node.height + 8;
 872 |           break;
 873 |         case "SELF":
 874 |           node = new Magi.Image(self.previousFrameFBO.texture, true);
 875 |           node.addFrameListener(function() {
 876 |             this.setSize(Math.max(self.previousFrameFBO.width, self.previousFrameFBO.height)/4);
 877 |             this.setImage(self.previousFrameFBO.texture);
 878 |           });
 879 |           node.setVAlign(node.topAlign);
 880 |           acc.offset += node.height + 8;
 881 |           break;
 882 |         case "MODEL":
 883 |           node = new Magi.Node();
 884 |           var w = Magi.Bin.load(e.getAttribute('src'), (function(node){
 885 |             return function(model) {
 886 |               var sc = 1000.0 / (model.boundingBox.diameter);
 887 |               var n = new Magi.Node();
 888 |               n.setScale(sc);
 889 |               n.setY(-150);
 890 |               n.model = model.makeVBO();
 891 |               n.rotation.axis = [1,0,0];
 892 |               n.rotation.angle = -Math.PI/2;
 893 |               n.material = Magi.DefaultMaterial.get();
 894 |               n.material.floats.LightDiffuse = [1,1,1,1];
 895 |               n.material.floats.MaterialShininess = 6.0;
 896 |               n.material.floats.MaterialDiffuse = [1,1,1,1];
 897 |               node.appendChild(n);
 898 |             }
 899 |           })(node));
 900 |           w.flatNormals = false;
 901 |           acc.offset += 150;
 902 |           break;
 903 |       }
 904 |       if (node) {
 905 |         node.id = e.id;
 906 |         node.position[0] = left + xOffset;
 907 |         node.position[1] = -yOffset;
 908 |         node.slideIndex = idx;
 909 |         acc.top.appendChild(node);
 910 |       }
 911 |     });
 912 |     acc.top.slideIndex = idx;
 913 |     acc.top.height = acc.offset - origOffset;
 914 |     return acc.top;
 915 |   },
 916 | 
 917 |   makeH1 : function(txt) {
 918 |     var h1 = new Magi.MeshText(txt, this.h1FontSize/3.0, this.h1Color, this.h1Font);
 919 |     h1.setAlign(h1.leftAlign);
 920 |     h1.rotation.axis[0] = 0.4;
 921 |     h1.setAngle(1.2);
 922 |     vec3.set3(600/32, h1.scaling);
 923 |     h1.position[2] = -800;
 924 |     h1.position[0] = -700;
 925 |     h1.setY(120.0);
 926 |     this.addDotShader(h1);
 927 |     var t = new Magi.Node();
 928 |     t.appendChild(h1);
 929 |     return t;
 930 |   },
 931 | 
 932 |   makeH2 : function(txt) {
 933 |     var h2 = new Magi.MeshText(txt, this.h2FontSize, this.h2Color, this.h2Font);
 934 |     h2.setVAlign(h2.topAlign);
 935 |     this.addWaveShader(h2);
 936 |     return h2;
 937 |   },
 938 | 
 939 |   makeH3 : function(txt) {
 940 |     var h3 = new Magi.MeshText(txt, this.h3FontSize, this.h3Color, this.h3Font);
 941 |     h3.setVAlign(h3.topAlign);
 942 |     this.addWaveShader(h3);
 943 |     return h3;
 944 |   },
 945 | 
 946 |   addDotShader : function(node) {
 947 |     node.alignedNode.material.shader = this.getDotShader();
 948 |     node.alignedNode.material.floats.pitch = 1.0;
 949 |     node.alignedNode.material.floats.magnitude = 3.0;
 950 |     node.alignedNode.material.floats.opacity = 0.2;
 951 |     node.alignedNode.material.floats.xScale = node.width;
 952 |     node.alignedNode.material.floats.yScale = node.height;
 953 |   },
 954 | 
 955 |   addWaveShader : function(node, mag) {
 956 |     mag = mag || 5.0;
 957 |     node.alignedNode.material.shader = this.getWaveShader();
 958 |     node.alignedNode.material.floats.magnitude = mag;
 959 |     node.alignedNode.material.floats.xScale = node.width;
 960 |     node.alignedNode.material.floats.yScale = node.height;
 961 |     var self = this;
 962 |     node.addFrameListener(function(t,dt) {
 963 |       node.alignedNode.material.floats.time = t / 500;
 964 |       if (self.wavyText) {
 965 |         node.alignedNode.material.floats.magnitude = mag;
 966 |       } else {
 967 |         node.alignedNode.material.floats.magnitude = 0.0;
 968 |       }
 969 |     });
 970 |   },
 971 | 
 972 |   getDotShader : function() {
 973 |     if (!this.dotShader) {
 974 |       var sh = new Magi.Shader(null, this.shaders.bendVert, this.shaders.dotFrag);
 975 |       this.dotShader = sh;
 976 |     }
 977 |     return this.dotShader;
 978 |   },
 979 | 
 980 |   getWaveShader : function() {
 981 |     return new Magi.Shader(null, this.shaders.waveVert, Magi.FilterMaterial.frag);
 982 |   },
 983 | 
 984 |   makeCube : function() {
 985 |     var cb = new Magi.Cube();
 986 |     cb.setY(-0.2);
 987 |     cb.setAxis(0.4, 0.6, -1);
 988 |     cb.rotationSpeed = 1;
 989 |     cb.addFrameListener(function(t,dt) {
 990 |       this.rotation.angle += (this.rotationSpeed*dt/4000);
 991 |       this.rotation.angle %= (Math.PI*2);
 992 |     });
 993 |     cb.material = cb.material.copy();
 994 |     var fs = cb.material.floats;
 995 |     vec4.setLeft(fs.MaterialDiffuse, [0.8,0.9, 1.0, 0.8]);
 996 |     vec4.setLeft(fs.LightDiffuse, [1,1,0.5,1]);
 997 |     vec4.setLeft(fs.LightSpecular, [0.5,1,1,1]);
 998 |     vec4.setLeft(fs.LightAmbient, [0.3,0,0.2,1]);
 999 |     cb.transparent = true;
1000 | 
1001 |     var ncb = new Magi.Cube();
1002 |     ncb.transparent = true;
1003 |     ncb.material = cb.material.copy();
1004 |     vec4.setLeft(ncb.material.floats.MaterialDiffuse, [1,0.95,0.8,0.7]);
1005 |     var fs = ncb.material.floats;
1006 |     vec4.setLeft(fs.LightDiffuse, [1,1,0.8,1]);
1007 |     vec4.setLeft(fs.LightSpecular, [1,0.95,0.8,1]);
1008 |     vec4.setLeft(fs.LightAmbient, [0.2,0.1,0.0,1]);
1009 |     vec3.set3(0.75, ncb.scaling);
1010 |     ncb.blendFuncSrc = 'SRC_ALPHA';
1011 |     ncb.blendFuncDst = 'ONE';
1012 |     cb.appendChild(ncb);
1013 | 
1014 |     var cube = new Magi.Node();
1015 |     var pos = new Magi.Node().setScale(250).setPosition(-800,60,-470);
1016 |     pos.appendChild(cb);
1017 |     cube.appendChild(pos);
1018 |     cube.outerCube = cb;
1019 |     cube.innerCube = ncb;
1020 |     return cube;
1021 |   },
1022 | 
1023 | 
1024 | 
1025 |   shaders : {
1026 |     waveVert : {type: "VERTEX_SHADER", text: (
1027 |       "precision mediump float;"+
1028 |       "attribute vec3 Vertex;"+
1029 |       "attribute vec3 Normal;"+
1030 |       "attribute vec2 TexCoord;"+
1031 |       "uniform mat4 PMatrix;"+
1032 |       "uniform mat4 MVMatrix;"+
1033 |       "uniform mat3 NMatrix;"+
1034 |       "uniform float time;"+
1035 |       "uniform float xScale;"+
1036 |       "uniform float yScale;"+
1037 |       "uniform float magnitude;"+
1038 |       "varying vec2 texCoord0;"+
1039 |       "void main()"+
1040 |       "{"+
1041 |       "  vec4 v = vec4(Vertex, 1.0);"+
1042 |       "  float dx = ((xScale/800.0)*(TexCoord.s-0.2));"+
1043 |       //"  float dy = yScale*0.03*(TexCoord.t-0.5);"+
1044 |       //"  float d = sqrt(dx*dx + dy*dy);"+
1045 |       //"  v.z += magnitude * (2.0*cos(time+3.14*0.1*TexCoord.s*xScale*0.03))*yScale*0.03;"+
1046 |       "  v.z += 350.0*dx*dx;"+
1047 |       "  texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);"+
1048 |       "  vec4 worldPos = MVMatrix * v;"+
1049 |       "  gl_Position = PMatrix * worldPos;"+
1050 |       "}"
1051 |     )},
1052 | 
1053 |     bendVert : {type: "VERTEX_SHADER", text: (
1054 |       "precision mediump float;"+
1055 |       "attribute vec3 Vertex;"+
1056 |       "attribute vec3 Normal;"+
1057 |       "attribute vec2 TexCoord;"+
1058 |       "uniform mat4 PMatrix;"+
1059 |       "uniform mat4 MVMatrix;"+
1060 |       "uniform mat3 NMatrix;"+
1061 |       "uniform float time;"+
1062 |       "uniform float xScale;"+
1063 |       "uniform float yScale;"+
1064 |       "uniform float magnitude;"+
1065 |       "varying vec2 texCoord0;"+
1066 |       "varying float z;"+
1067 |       "void main()"+
1068 |       "{"+
1069 |       "  vec4 v = vec4(Vertex, 1.0);"+
1070 |       "  float dx = xScale*0.06*(TexCoord.s);"+
1071 |       "  float dy = yScale*0.06*(TexCoord.t);"+
1072 |       "  float d = sqrt(dx*dx + dy*dy);"+
1073 |       "  v.z += magnitude * pow(1.2,d);"+
1074 |       "  texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);"+
1075 |       "  vec4 worldPos = MVMatrix * v;"+
1076 |       "  gl_Position = PMatrix * worldPos;"+
1077 |       "  z = gl_Position.z;"+
1078 |       "}"
1079 |     )},
1080 |     
1081 |     dotFrag : {type: "FRAGMENT_SHADER", text: (
1082 |       "precision mediump float;"+
1083 |       "uniform float xScale;"+
1084 |       "uniform float yScale;"+
1085 |       "uniform float opacity;"+
1086 |       "uniform float pitch;"+
1087 |       "uniform sampler2D Texture0;"+
1088 |       "varying vec2 texCoord0;"+
1089 |       "varying float z;"+
1090 |       "void main()"+
1091 |       "{"+
1092 |       "  vec2 scale = vec2(xScale/pitch, yScale/pitch);"+
1093 |       "  vec2 gridVec = texCoord0 * scale;"+
1094 |       "  float gridX = floor(gridVec.s);"+
1095 |       "  float gridY = floor(gridVec.t);"+
1096 |       "  vec2 gridCenter = vec2((gridX + 0.5), (gridY + 0.5));"+
1097 |       "  float d = length(gridVec - gridCenter);"+
1098 |       "  vec4 sample = texture2D(Texture0, gridCenter / scale);"+
1099 |       "  float a = sample.a;"+
1100 |       "  float f = smoothstep(0.01*z+0.3*a, 0.3*a, d);"+
1101 |       "  sample.a *= opacity;"+
1102 |       "  sample *= f;"+
1103 |       "  gl_FragColor = sample * sample.a;"+
1104 |       "}"
1105 |     )},
1106 |     
1107 |     bgFrag : {type: "FRAGMENT_SHADER", text: (
1108 |       "precision mediump float;"+
1109 |       "uniform sampler2D Texture0;"+
1110 |       "uniform float aspect;"+
1111 |       "varying vec2 texCoord0;"+
1112 |       "void main()"+
1113 |       "{"+
1114 |       "  float dx = (-0.5+texCoord0.s)*1.5 * aspect;"+
1115 |       "  float dy = texCoord0.t / aspect;"+
1116 |       "  float d = sqrt(dx*dx + dy*dy);"+
1117 |       "  vec4 c = vec4(0.76,0.72,0.78, -0.5*d);"+
1118 |       "  gl_FragColor = c*c.a;"+
1119 |       "}"
1120 |     )}
1121 |   }
1122 | 
1123 | });
1124 | 
1125 | 


--------------------------------------------------------------------------------
/src/bin_loader.js:
--------------------------------------------------------------------------------
  1 | Magi.Bin = function(){};
  2 | Magi.Bin.load = function(url, onload, onerror) {
  3 |   var o = new Magi.Bin();
  4 |   if (onload)
  5 |     o.onload = onload;
  6 |   if (onerror)
  7 |     o.onerror = onerror;
  8 |   o.load(url);
  9 |   return o;
 10 | }
 11 | Magi.Bin.prototype = {
 12 |   load: function(url) {
 13 |     var xhr = new XMLHttpRequest();
 14 |     var self = this;
 15 |     self.loadStartTime = new Date();
 16 |     xhr.onreadystatechange = function() {
 17 |       if (xhr.readyState == 4) {
 18 |         if (xhr.status == 200 || xhr.status == 0) {
 19 |           self.downloadTime = new Date() - self.loadStartTime;
 20 |           self.parse(xhr.responseText);
 21 |           if (self.onload)
 22 |             self.onload(self, xhr);
 23 |         } else {
 24 |           if (self.onerror)
 25 |             self.onerror(xhr);
 26 |         }
 27 |       }
 28 |     }
 29 |     xhr.open("GET", url, true);
 30 |     xhr.overrideMimeType("text/plain; charset=x-user-defined");
 31 |     xhr.setRequestHeader("Content-Type", "text/plain");
 32 |     xhr.send(null);
 33 |   },
 34 | 
 35 |   onerror : function(xhr) {
 36 |     alert("Error: "+xhr.status);
 37 |   },
 38 | 
 39 |   makeVBO : function(gl) {
 40 |     if (this.texcoords) {
 41 |       return new Magi.VBO(gl,
 42 |           {size:3, data: this.vertices},
 43 |           {size:3, data: this.normals},
 44 |           {size:2, data: this.texcoords}
 45 |       )
 46 |     } else {
 47 |       return new Magi.VBO(gl,
 48 |           {size:3, data: this.vertices},
 49 |           {size:3, data: this.normals}
 50 |       )
 51 |     }
 52 |   },
 53 | 
 54 |   cache : {},
 55 |   getCachedVBO : function(gl) {
 56 |     if (!this.cache[gl])
 57 |       this.cache[gl] = this.makeVBO(gl);
 58 |     return this.cache[gl];
 59 |   },
 60 | 
 61 |   // read big-endian float
 62 |   readFloat32 : function(data, offset) {
 63 |     var b1 = data.charCodeAt(offset) & 0xFF,
 64 |         b2 = data.charCodeAt(offset+1) & 0xFF,
 65 |         b3 = data.charCodeAt(offset+2) & 0xFF,
 66 |         b4 = data.charCodeAt(offset+3) & 0xFF;
 67 |     var sign = 1 - (2*(b1 >> 7));
 68 |     var exp = (((b1 << 1) & 0xff) | (b2 >> 7)) - 127;
 69 |     var sig = ((b2 & 0x7f) << 16) | (b3 << 8) | b4;
 70 |     if (sig == 0 && exp == -127)
 71 |       return 0.0;
 72 |     return sign * (1 + sig * Math.pow(2, -23)) * Math.pow(2, exp);
 73 |   },
 74 |   readUInt32 : function(data, offset) {
 75 |     return ((data.charCodeAt(offset) & 0xFF) << 24) +
 76 |            ((data.charCodeAt(offset+1) & 0xFF) << 16) +
 77 |            ((data.charCodeAt(offset+2) & 0xFF) << 8) +
 78 |            (data.charCodeAt(offset+3) & 0xFF);
 79 |   },
 80 |   readUInt16 : function(data, offset) {
 81 |     return ((data.charCodeAt(offset) & 0xFF) << 8) +
 82 |            (data.charCodeAt(offset+1) & 0xFF);
 83 |   },
 84 |   readNormalizedFixedPoint16 : function(data, offset) {
 85 |     return 2.0 * (this.readUInt16(data, offset) / 65535.0 - 0.5);
 86 |   },
 87 |   readNormalizedUFixedPoint16 : function(data, offset) {
 88 |     return this.readUInt16(data, offset) / 65535.0;
 89 |   },
 90 | 
 91 |   readVerts : function(data, i, raw_vertices, vertCount) {
 92 |     for (var l=i+vertCount*3*2; i<l; i+=2)
 93 |       raw_vertices.push(this.readNormalizedFixedPoint16(data, i));
 94 |     return i;
 95 |   },
 96 |   
 97 |   readTexVerts : function(data, i, raw_vertices, vertCount) {
 98 |     for (var l=i+vertCount*2*2; i<l; i+=2)
 99 |       raw_vertices.push(this.readNormalizedUFixedPoint16(data, i));
100 |     return i;
101 |   },
102 | 
103 |   readTris : function(data, i, tris, quadCount, triCount) {
104 |     var quads = [];
105 |     for (var l=i+quadCount*4*2; i<l; i+=2)
106 |       quads.push(this.readUInt16(data, i));
107 |     for (var l=i+triCount*3*2; i<l; i+=2)
108 |       tris.push(this.readUInt16(data, i));
109 |     for (var j=0; j<quads.length; j+=4) {
110 |       tris.push(quads[j]);
111 |       tris.push(quads[j+1]);
112 |       tris.push(quads[j+2]);
113 |       tris.push(quads[j]);
114 |       tris.push(quads[j+2]);
115 |       tris.push(quads[j+3]);
116 |     }
117 |     return i;
118 |   },
119 | 
120 |   translateAndScaleVertices : function(v, xs, ys, zs, xt, yt, zt) {
121 |     // readVerts scaled the 0..1 verts to -1..1, so we need to undo that
122 |     xs *= 0.5; ys *= 0.5; zs *= 0.5;
123 |     for (var i=0; i<v.length; i+=3) {
124 |       v[i  ] = xt + xs * (v[i  ] + 1.0);
125 |       v[i+1] = yt + ys * (v[i+1] + 1.0);
126 |       v[i+2] = zt + zs * (v[i+2] + 1.0);
127 |     }
128 |   },
129 | 
130 |   parse : function(data) {
131 |     var t = new Date();
132 |     var geo_tris = [],
133 |         tex_tris = [],
134 |         nor_tris = [],
135 |         raw_vertices = [],
136 |         raw_normals = [],
137 |         raw_texcoords = [];
138 |     var i = 0;
139 |     var vertCount = this.readUInt32(data, i); i+=4;
140 |     var texCount = this.readUInt32(data, i); i+=4;
141 |     var normalCount = this.readUInt32(data, i); i+=4;
142 |     var quadCount = this.readUInt32(data, i); i+=4;
143 |     var triCount = this.readUInt32(data, i); i+=4;
144 |     var xscale = this.readFloat32(data, i); i+=4;
145 |     var yscale = this.readFloat32(data, i); i+=4;
146 |     var zscale = this.readFloat32(data, i); i+=4;
147 |     var xtrans = this.readFloat32(data, i); i+=4;
148 |     var ytrans = this.readFloat32(data, i); i+=4;
149 |     var ztrans = this.readFloat32(data, i); i+=4;
150 |     
151 |     i = this.readVerts(data, i, raw_vertices, vertCount);
152 |     this.translateAndScaleVertices(raw_vertices, xscale, yscale, zscale, xtrans, ytrans, ztrans);
153 |     i = this.readTris(data, i, geo_tris, quadCount, triCount);
154 |     if (texCount > 0) {
155 |       i = this.readTexVerts(data, i, raw_texcoords, texCount);
156 |       i = this.readTris(data, i, tex_tris, quadCount, triCount);
157 |     }
158 |     if (normalCount > 0) {
159 |       i = this.readVerts(data, i, raw_normals, normalCount);
160 |       i = this.readTris(data, i, nor_tris, quadCount, triCount);
161 |     }
162 | 
163 |     this.vertices = this.lookup_faces(raw_vertices, geo_tris, 3);
164 |     if (tex_tris.length > 0 && !this.noTexCoords)
165 |       this.texcoords = this.lookup_faces(raw_texcoords, tex_tris, 2);
166 |     if (nor_tris.length > 0 && !this.overrideNormals)
167 |       this.normals = this.lookup_faces(raw_normals, nor_tris, 3);
168 |     else
169 |       this.normals = this.calculate_normals(this.vertices, geo_tris, this.flatNormals);
170 | 
171 |     this.boundingBox = this.calculateBoundingBox(raw_vertices);
172 |     this.parseTime = new Date() - t;
173 |   },
174 | 
175 |   calculateBoundingBox : function(raw_vertices) {
176 |     var bbox = {min:[0,0,0], max:[0,0,0]};
177 |     for (var i=0; i<raw_vertices.length; i+=3) {
178 |       var x = raw_vertices[i],
179 |           y = raw_vertices[i+1],
180 |           z = raw_vertices[i+2];
181 |       if (x < bbox.min[0]) bbox.min[0] = x;
182 |       else if (x > bbox.max[0]) bbox.max[0] = x;
183 |       if (y < bbox.min[1]) bbox.min[1] = y;
184 |       else if (y > bbox.max[1]) bbox.max[1] = y;
185 |       if (z < bbox.min[2]) bbox.min[2] = z;
186 |       else if (z > bbox.max[2]) bbox.max[2] = z;
187 |     }
188 |     bbox.width = bbox.max[0] - bbox.min[0];
189 |     bbox.height = bbox.max[1] - bbox.min[1];
190 |     bbox.depth = bbox.max[2] - bbox.min[2];
191 |     bbox.diameter = Math.max(bbox.width, bbox.height, bbox.depth);
192 |     return bbox;
193 |   },
194 | 
195 |   lookup_faces : function(verts, faces, sz) {
196 |     var v = [];
197 |     for (var i=0; i<faces.length; i++) {
198 |       var offset = faces[i] * sz;
199 |       for (var j=0; j<sz; j++)
200 |         v.push(verts[offset+j]);
201 |     }
202 |     return v;
203 |   },
204 | 
205 |   calculate_normals : function(verts, faces, no_interpolation) {
206 |     var norms = [];
207 |     var vert_norms = {
208 |       normals : [],
209 |       addNormal : function(idx,n) {
210 |         var za = (this.normals[idx] || (this.normals[idx] = [0,0,0]));
211 |         za[0] += n[0]; za[1] += n[1]; za[2] += n[2];
212 |       },
213 |       getNormal : function(idx) {
214 |         return this.normals[idx];
215 |       },
216 |       normalize : function() {
217 |       	for (var i=0; i<this.normals.length; i++) {
218 |       	  var n = this.normals[i];
219 |       	  if (n) {
220 |       	    var d = 1 / Math.sqrt(n[0]*n[0] + n[1]*n[1] + n[2]*n[2]);
221 |       	    n[0] *= d;
222 |       	    n[1] *= d;
223 |       	    n[2] *= d;
224 |       	  }
225 |       	}
226 |       }
227 |     };
228 |     for (var i=0,fi=0; i<verts.length; i+=9,fi+=3) {
229 |       var normal = this.find_normal(
230 |         verts[i  ], verts[i+1], verts[i+2],
231 |         verts[i+3], verts[i+4], verts[i+5],
232 |         verts[i+6], verts[i+7], verts[i+8]);
233 |       if (no_interpolation) {
234 |         for (var j=0; j<3; j++) {
235 |           norms.push(normal[0]);
236 |           norms.push(normal[1]);
237 |           norms.push(normal[2]);
238 |         }
239 |       } else {
240 |         vert_norms.addNormal(faces[fi], normal);
241 |         vert_norms.addNormal(faces[fi+1], normal);
242 |         vert_norms.addNormal(faces[fi+2], normal);
243 |       }
244 |     }
245 |     
246 |     if (!no_interpolation) {
247 |       vert_norms.normalize();
248 |       for (var i=0; i<faces.length; i++) {
249 |         var normal = vert_norms.getNormal(faces[i]);
250 |         norms.push(normal[0]);
251 |         norms.push(normal[1]);
252 |         norms.push(normal[2]);
253 |       }
254 |     }
255 |     return norms;
256 |   },
257 | 
258 |   find_normal : function(x0,y0,z0, x1,y1,z1, x2,y2,z2) {
259 |     var u = vec3.create([x0-x1, y0-y1, z0-z1]);
260 |     var v = vec3.create([x1-x2, y1-y2, z1-z2]);
261 |     var w = vec3.create([x2-x0, y2-y0, z2-z0]);
262 |     var n = vec3.cross(u,v,vec3.create());
263 |     if (vec3.lengthSquare(n) == 0)
264 |       vec3.cross(v,w,n);
265 |     if (vec3.lengthSquare(n) == 0)
266 |       vec3.cross(w,u,n);
267 |     if (vec3.lengthSquare(n) == 0)
268 |       vec3.set([0,0,1], n);
269 |     return vec3.normalize(n);
270 |   }
271 | 
272 | }
273 | 


--------------------------------------------------------------------------------
/src/obj_loader.js:
--------------------------------------------------------------------------------
  1 | Magi.Obj = function(){};
  2 | Magi.Obj.load = function(url) {
  3 |   var o = new Magi.Obj();
  4 |   o.load(url);
  5 |   return o;
  6 | }
  7 | Magi.Obj.prototype = {
  8 |   load: function(url) {
  9 |     var xhr = new XMLHttpRequest();
 10 |     var self = this;
 11 |     self.loadStartTime = new Date();
 12 |     xhr.onreadystatechange = function() {
 13 |       if (xhr.readyState == 4) {
 14 |         if (xhr.status == 200 || xhr.status == 0) {
 15 |           self.downloadTime = new Date() - self.loadStartTime;
 16 |           self.parse(xhr.responseText);
 17 |           if (self.onload)
 18 |             self.onload(xhr);
 19 |         } else {
 20 |           if (self.onerror)
 21 |             self.onerror(xhr);
 22 |         }
 23 |       }
 24 |     }
 25 |     xhr.open("GET", url, true);
 26 |     xhr.overrideMimeType("text/plain; charset=x-user-defined");
 27 |     xhr.setRequestHeader("Content-Type", "text/plain");
 28 |     xhr.send(null);
 29 |   },
 30 | 
 31 |   onerror : function(xhr) {
 32 |     alert("Error: "+xhr.status);
 33 |   },
 34 | 
 35 |   makeVBO : function(gl) {
 36 |     if (this.texcoords) {
 37 |       return new Magi.VBO(gl,
 38 |           {size:3, data: this.vertices},
 39 |           {size:3, data: this.normals},
 40 |           {size:2, data: this.texcoords}
 41 |       )
 42 |     } else {
 43 |       return new Magi.VBO(gl,
 44 |           {size:3, data: this.vertices},
 45 |           {size:3, data: this.normals}
 46 |       )
 47 |     }
 48 |   },
 49 | 
 50 |   cache : {},
 51 |   getCachedVBO : function(gl) {
 52 |     if (!this.cache[gl])
 53 |       this.cache[gl] = this.makeVBO(gl);
 54 |     return this.cache[gl];
 55 |   },
 56 | 
 57 |   parse : function(data) {
 58 |     var t = new Date;
 59 |     var geo_faces = [],
 60 |         nor_faces = [],
 61 |         tex_faces = [],
 62 |         raw_vertices = [],
 63 |         raw_normals = [],
 64 |         raw_texcoords = [];
 65 |     var lines = data.split("\n");
 66 |     var hashChar = '#'.charCodeAt(0);
 67 |     for (var i=0; i<lines.length; i++) {
 68 |       var l = lines[i];
 69 |       var vals = l.replace(/^\s+|\s+$/g, '').split(" ");
 70 |       if (vals.length == 0) continue;
 71 |       if (vals[0].charCodeAt(0) == hashChar) continue;
 72 |       switch (vals[0]) {
 73 |         case "g": // named object mesh [group]?
 74 |           break;
 75 |         case "v":
 76 |           raw_vertices.push(parseFloat(vals[1]));
 77 |           raw_vertices.push(parseFloat(vals[2]));
 78 |           raw_vertices.push(parseFloat(vals[3]));
 79 |           break;
 80 |         case "vn":
 81 |           raw_normals.push(parseFloat(vals[1]));
 82 |           raw_normals.push(parseFloat(vals[2]));
 83 |           raw_normals.push(parseFloat(vals[3]));
 84 |           break;
 85 |         case "vt":
 86 |           raw_texcoords.push(parseFloat(vals[1]));
 87 |           raw_texcoords.push(parseFloat(vals[2]));
 88 |           break;
 89 |         case "f":
 90 |           // triangulate the face as triangle fan
 91 |           var faces = [];
 92 |           for (var j=1, v; j<vals.length; j++) {
 93 |             if (j > 3) {
 94 |               faces.push(faces[0]);
 95 |               faces.push(v);
 96 |             }
 97 |             v = vals[j];
 98 |             faces.push(v);
 99 |           }
100 |           for (var j=0; j<faces.length; j++) {
101 |             var f = faces[j];
102 |             var a = f.split("/");
103 |             geo_faces.push(parseInt(a[0]) - 1);
104 |             if (a.length > 1)
105 |               tex_faces.push(parseInt(a[1]) - 1);
106 |             if (a.length > 2)
107 |               nor_faces.push(parseInt(a[2]) - 1);
108 |           }
109 |           break;
110 |       }
111 |     }
112 |     this.vertices = this.lookup_faces(raw_vertices, geo_faces, 3);
113 |     if (tex_faces.length > 0)
114 |       this.texcoords = this.lookup_faces(raw_texcoords, tex_faces, 2);
115 |     if (nor_faces.length > 0 && !this.overrideNormals)
116 |       this.normals = this.lookup_faces(raw_normals, nor_faces, 3);
117 |     else
118 |       this.normals = this.calculate_normals(this.vertices);
119 |     var bbox = {min:[0,0,0], max:[0,0,0]};
120 |     for (var i=0; i<raw_vertices.length; i+=3) {
121 |       var x = raw_vertices[i],
122 |           y = raw_vertices[i+1],
123 |           z = raw_vertices[i+2];
124 |       if (x < bbox.min[0]) bbox.min[0] = x;
125 |       else if (x > bbox.max[0]) bbox.max[0] = x;
126 |       if (y < bbox.min[1]) bbox.min[1] = y;
127 |       else if (y > bbox.max[1]) bbox.max[1] = y;
128 |       if (z < bbox.min[2]) bbox.min[2] = z;
129 |       else if (z > bbox.max[2]) bbox.max[2] = z;
130 |     }
131 |     bbox.width = bbox.max[0] - bbox.min[0];
132 |     bbox.height = bbox.max[1] - bbox.min[1];
133 |     bbox.depth = bbox.max[2] - bbox.min[2];
134 |     bbox.diameter = Math.max(bbox.width, bbox.height, bbox.depth);
135 |     this.boundingBox = bbox;
136 |     this.parseTime = new Date() - t;
137 |   },
138 | 
139 |   lookup_faces : function(verts, faces, sz) {
140 |     var v = [];
141 |     for (var i=0; i<faces.length; i++) {
142 |       var offset = faces[i] * sz;
143 |       for (var j=0; j<sz; j++)
144 |         v.push(verts[offset+j]);
145 |     }
146 |     return v;
147 |   },
148 | 
149 |   calculate_normals : function(verts) {
150 |     var norms = [];
151 |     for (var i=0; i<verts.length; i+=9) {
152 |       var normal = this.find_normal(
153 |         verts[i  ], verts[i+1], verts[i+2],
154 |         verts[i+3], verts[i+4], verts[i+5],
155 |         verts[i+6], verts[i+7], verts[i+8]);
156 |       for (var j=0; j<3; j++) {
157 |         norms.push(normal[0]);
158 |         norms.push(normal[1]);
159 |         norms.push(normal[2]);
160 |       }
161 |     }
162 |     return norms;
163 |   },
164 | 
165 |   find_normal : function(x0,y0,z0, x1,y1,z1, x2,y2,z2) {
166 |     var u = [x0-x1, y0-y1, z0-z1];
167 |     var v = [x1-x2, y1-y2, z1-z2];
168 |     var w = [x2-x0, y2-y0, z2-z0];
169 |     var n = Vec3.cross(u,v);
170 |     if (Vec3.lengthSquare(n) == 0)
171 |       n = Vec3.cross(v,w);
172 |     if (Vec3.lengthSquare(n) == 0)
173 |       n = Vec3.cross(w,u);
174 |     if (Vec3.lengthSquare(n) == 0)
175 |       n = [0,0,1];
176 |     return Vec3.normalize(n);
177 |   }
178 | 
179 | }
180 | 


--------------------------------------------------------------------------------
/src/scene_util.js:
--------------------------------------------------------------------------------
   1 | window.requestAnimFrame = (function(){
   2 |   return  window.requestAnimationFrame       ||
   3 |           window.webkitRequestAnimationFrame ||
   4 |           window.mozRequestAnimationFrame    ||
   5 |           window.oRequestAnimationFrame      ||
   6 |           window.msRequestAnimationFrame     ||
   7 |           function(/* function */ callback, /* DOMElement */ element){
   8 |             window.setTimeout(callback, 1000 / 60);
   9 |           };
  10 | })();
  11 | 
  12 | Magi.Scene = Klass({
  13 |   frameDuration : 13,
  14 |   time : 0,
  15 |   timeDir : 1,
  16 |   timeSpeed : 1,
  17 |   previousTime : 0,
  18 |   frameTimes : [],
  19 | 
  20 |   fpsCanvas : null,
  21 | 
  22 |   bg : [1,1,1,1],
  23 |   clear : true,
  24 | 
  25 |   paused : false,
  26 |   showStats : false,
  27 | 
  28 |   supersample : 2,
  29 | 
  30 |   initialize : function(canvas, scene, cam, args) {
  31 |     if (!scene) scene = new Magi.Node();
  32 |     if (!cam) cam = Magi.Scene.getDefaultCamera();
  33 |     if (canvas.tagName == "CANVAS") {
  34 |       this.canvas = canvas;
  35 |       var defaultArgs = {
  36 |         alpha: true, depth: true, stencil: true, antialias: false,
  37 |         premultipliedAlpha: true
  38 |       };
  39 |       if (args)
  40 |         Object.extend(defaultArgs, args);
  41 |       this.gl = Magi.getGLContext(canvas, defaultArgs);
  42 |       this.fbo = new Magi.FBO(this.gl, canvas.width*this.supersample, canvas.height*this.supersample, true);
  43 |     } else {
  44 |       this.fbo = canvas;
  45 |       this.gl = this.fbo.gl;
  46 |     }
  47 |     this.idFilter = new Magi.IdFilter();
  48 |     this.postFBO1 = new Magi.FBO(this.gl, 1, 1, false);
  49 |     this.postFBO2 = new Magi.FBO(this.gl, 1, 1, false);
  50 |     this.preEffects = [];
  51 |     this.postEffects = [];
  52 |     this.clearBits = this.gl.COLOR_BUFFER_BIT |
  53 |                      this.gl.DEPTH_BUFFER_BIT |
  54 |                      this.gl.STENCIL_BUFFER_BIT;
  55 |     this.scene = scene;
  56 |     this.root = scene;
  57 |     this.camera = cam;
  58 |     this.mouse = {
  59 |       x : 0,
  60 |       y : 0,
  61 |       pressure : 1.0,
  62 |       tiltX : 0.0,
  63 |       tiltY : 0.0,
  64 |       deviceType : 0,
  65 |       left: false,
  66 |       middle: false,
  67 |       right: false
  68 |     };
  69 |     this.setupEventListeners();
  70 |     if (this.canvas) {
  71 |       this.startFrameLoop();
  72 |     }
  73 |   },
  74 | 
  75 |   getDefaultCamera : function() {
  76 |     var cam = new Magi.Camera();
  77 |     vec3.set([0, 0, 0], cam.lookAt);
  78 |     vec3.set([0, 0, 10], cam.position);
  79 |     cam.fov = 45;
  80 |     cam.angle = 1;
  81 |     return cam;
  82 |   },
  83 | 
  84 |   animLoop : function() {
  85 |     this.draw();
  86 |     var t = this;
  87 |     requestAnimFrame(function(){ t.animLoop(); }, this.canvas);
  88 |   },
  89 | 
  90 |   startFrameLoop : function() {
  91 |     this.previousTime = new Date;
  92 |     var t = this;
  93 |     requestAnimFrame(function(){ t.animLoop(); }, this.canvas);
  94 |   },
  95 | 
  96 |   updateMouse : function(ev) {
  97 |     this.mouse.deviceType = ev.mozDeviceType || 0;
  98 |     this.mouse.tiltX = ev.mozTiltX || 0;
  99 |     this.mouse.tiltY = ev.mozTiltY || 0;
 100 |     this.mouse.pressure = ev.mozPressure || 0;
 101 |     this.mouse.x = ev.clientX;
 102 |     this.mouse.y = ev.clientY;
 103 |   },
 104 | 
 105 |   setupEventListeners : function() {
 106 |     var t = this;
 107 |     window.addEventListener('mousedown',  function(ev){
 108 |       switch (ev.button) {
 109 |       case Mouse.LEFT:
 110 |         t.mouse.left = true; break;
 111 |       case Mouse.RIGHT:
 112 |         t.mouse.right = true; break;
 113 |       case Mouse.MIDDLE:
 114 |         t.mouse.middle = true; break;
 115 |       }
 116 |       t.updateMouse(ev);
 117 |     }, false);
 118 |     window.addEventListener('mouseup', function(ev) {
 119 |       switch (ev.button) {
 120 |       case Mouse.LEFT:
 121 |         t.mouse.left = false; break;
 122 |       case Mouse.RIGHT:
 123 |         t.mouse.right = false; break;
 124 |       case Mouse.MIDDLE:
 125 |         t.mouse.middle = false; break;
 126 |       }
 127 |       t.updateMouse(ev);
 128 |     }, false);
 129 |     window.addEventListener('mousemove', function(ev) {
 130 |       t.updateMouse(ev);
 131 |     }, false);
 132 |   },
 133 | 
 134 |   draw : function(newTime, real_dt) {
 135 |     if (this.paused) return;
 136 |     newTime = newTime == null ? new Date() : newTime;
 137 |     real_dt = real_dt == null ? newTime - this.previousTime : real_dt;
 138 |     var dt = this.timeDir * this.timeSpeed * real_dt;
 139 |     this.time += dt;
 140 |     this.previousTime = newTime;
 141 |     this.frameTime = real_dt;
 142 | 
 143 |     this.camera.update(this.time, dt);
 144 |     this.scene.update(this.time, dt);
 145 | 
 146 |     var t = new Date();
 147 |     this.updateTime = t - newTime;
 148 | 
 149 |     if (this.drawOnlyWhenChanged && !this.changed) return;
 150 | 
 151 |     if (this.canvas) {
 152 |       this.width = this.canvas.width;
 153 |       this.height = this.canvas.height;
 154 |       this.fbo.resize(this.width*this.supersample, this.height*this.supersample);
 155 |     } else {
 156 |       this.width = this.fbo.width;
 157 |       this.height = this.fbo.height;
 158 |     }
 159 | 
 160 |     this.fbo.use();
 161 | 
 162 |     if (this.clear) {
 163 |       this.gl.depthMask(true);
 164 |       this.gl.clearColor(this.bg[0], this.bg[1], this.bg[2], this.bg[3]);
 165 |       this.gl.clear(this.clearBits);
 166 |       Magi.throwError(this.gl, "clear");
 167 |     }
 168 | 
 169 |     if (this.preEffects.length > 0)
 170 |       this.drawEffects(this.fbo, this.preEffects, this.fbo.texture,t,dt);
 171 | 
 172 |     var f = this.canvas ? this.supersample : 1;
 173 |     this.camera.draw(this.gl, this.width*f, this.height*f, this.root,t,dt);
 174 | 
 175 | 
 176 |     if (this.canvas) {
 177 |       this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
 178 |       this.gl.depthMask(true);
 179 |       this.gl.clearColor(0,0,0,0);
 180 |       this.gl.clear(this.clearBits);
 181 |       Magi.throwError(this.gl, "clear");
 182 |     }
 183 | 
 184 |     this.drawEffects(this.canvas||this.fbo, this.postEffects, this.fbo.texture,t,dt);
 185 | 
 186 | 
 187 |     this.drawTime = new Date() - t;
 188 | 
 189 |     this.updateFps(this.frameTimes, real_dt);
 190 |     if (!this.firstFrameDoneTime) this.firstFrameDoneTime = new Date();
 191 |     this.changed = false;
 192 |     Magi.throwError(this.gl, "Scene draw loop");
 193 |     if (this.showStats) {
 194 |       var stats = E.byId('stats');
 195 |       if (stats) {
 196 |         Magi.Stats.print(stats);
 197 |         Magi.Stats.reset();
 198 |       }
 199 |     }
 200 |   },
 201 | 
 202 |   // applies effects (magi nodes) to tex and draws the result to target (fbo or canvas)
 203 |   // does not modify tex (unless it's the texture of target fbo)
 204 |   drawEffects : function(target, effects, tex,t,dt) {
 205 |     if (effects.length == 0 && tex == target.texture)
 206 |       return;
 207 |     var fbo = this.postFBO1;
 208 |     var postFBO = this.postFBO2;
 209 |     fbo.resize(target.width, target.height);
 210 |     postFBO.resize(target.width, target.height);
 211 |     for (var i=0; i<effects.length; i++) {
 212 |       if (!effects[i].display)
 213 |         continue;
 214 |       // draw effect applied to tex onto postFBO
 215 |       postFBO.use();
 216 |       var fx = effects[i];
 217 |       fx.material.textures.Texture0 = tex;
 218 |       tex = postFBO.texture;
 219 |       this.camera.draw(this.gl, postFBO.width, postFBO.height, fx,t,dt);
 220 |       // swap fbos for next effect
 221 |       var tmp = fbo;
 222 |       fbo = postFBO;
 223 |       postFBO = tmp;
 224 |     }
 225 |     // draw result fbo texture to target
 226 |     if (target.tagName)
 227 |       this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
 228 |     else
 229 |       target.use();
 230 |     this.idFilter.material.textures.Texture0 = tex;
 231 |     this.camera.draw(this.gl, target.width, target.height, this.idFilter);
 232 |   },
 233 | 
 234 |   updateFps : function(frames,real_dt) {
 235 |     var fps = this.fpsCanvas || document.getElementById('fps');
 236 |     if (!fps) return;
 237 |     var ctx = fps.getContext('2d');
 238 |     ctx.clearRect(0,0,fps.width,fps.height);
 239 |     var h = fps.height;
 240 |     frames.push(1000 / (1+real_dt));
 241 |     if (frames.length > 1000)
 242 |       frames.splice(200);
 243 |     var start = Math.max(0,frames.length-200);
 244 |     for (var i=start; i<frames.length; i++) {
 245 |       ctx.fillRect(i-start,h,1,-frames[i]/3);
 246 |     }
 247 |   },
 248 | 
 249 |   useDefaultCameraControls : function(cv) {
 250 |     var s = this;
 251 |     cv = cv || this.canvas;
 252 | 
 253 |     var yRot = new Magi.Node();
 254 |     vec3.set([1,0,0], yRot.rotation.axis);
 255 | 
 256 |     var xRot = new Magi.Node();
 257 |     vec3.set([0,1,0], xRot.rotation.axis);
 258 | 
 259 |     yRot.appendChild(xRot);
 260 |     //xRot.appendChild(this.scene);
 261 |     this.root = yRot;
 262 |     this.yRot = yRot;
 263 |     this.xRot = xRot;
 264 | 
 265 |     this.root = this.scene;
 266 | 
 267 |     var wheelHandler = function(ev) {
 268 |       var ds = (ev.detail < 0 || ev.wheelDelta > 0) ? (1/1.25) : 1.25;
 269 |       if (ev.shiftKey) {
 270 |         s.camera.targetFov *= ds;
 271 |       } else {
 272 |         s.camera.multiplyDistance(ds);
 273 |       }
 274 |       s.changed = true;
 275 |       ev.preventDefault();
 276 |     };
 277 |     s.camera.addFrameListener(function() {
 278 |       if (Math.abs(this.targetFov - this.fov) > 0.01) {
 279 |         s.changed = true;
 280 |       }
 281 |     });
 282 |     cv.addEventListener('DOMMouseScroll', wheelHandler, false);
 283 |     cv.addEventListener('mousewheel', wheelHandler, false);
 284 | 
 285 |     cv.addEventListener('mousedown', function(ev){
 286 |       s.dragging = true;
 287 |       s.sx = ev.clientX;
 288 |       s.sy = ev.clientY;
 289 |       ev.preventDefault();
 290 |     }, false);
 291 |     window.addEventListener('mousemove', function(ev) {
 292 |       if (s.dragging) {
 293 |         var dx = ev.clientX - s.sx, dy = ev.clientY - s.sy;
 294 |         s.sx = ev.clientX, s.sy = ev.clientY;
 295 |         if (s.mouse.left) {
 296 |           xRot.rotation.angle += dx / 200;
 297 |           yRot.rotation.angle += dy / 200;
 298 |         } else if (s.mouse.middle) {
 299 |           yRot.position[0] += dx * 0.01 * (s.camera.fov / 45);
 300 |           yRot.position[1] -= dy * 0.01 * (s.camera.fov / 45);
 301 |         }
 302 | 
 303 |         var xa = xRot.rotation.angle;
 304 |         var ya = yRot.rotation.angle;
 305 |         var r = vec3.distance(s.camera.lookAt, s.camera.position);
 306 |         var v = vec3.scale(vec3.normalize(vec3.create(Math.cos(xa), Math.sin(ya), Math.sin(xa))), r);
 307 |         vec3.add(v, s.camera.lookAt, s.camera.position);
 308 | 
 309 |         ev.preventDefault();
 310 |         s.changed = true;
 311 |       }
 312 |     }, false);
 313 |     window.addEventListener('mouseup', function(ev) {
 314 |       if (s.dragging) {
 315 |         s.dragging = false;
 316 |         ev.preventDefault();
 317 |       }
 318 |     }, false);
 319 |     var xa = xRot.rotation.angle;
 320 |     var ya = yRot.rotation.angle;
 321 |     var r = vec3.distance(s.camera.lookAt, s.camera.position);
 322 |     var v = vec3.scale(vec3.normalize(vec3.create(Math.cos(xa), Math.sin(ya), Math.sin(xa))), r);
 323 |     vec3.add(v, s.camera.lookAt, s.camera.position);
 324 |     s.changed = true;
 325 |   }
 326 | });
 327 | 
 328 | 
 329 | 
 330 | Magi.UberShader = Klass({
 331 |   initialize : function(verts, frags) {
 332 |     this.verts = verts;
 333 |     this.frags = frags;
 334 |     this.shaderCache = [];
 335 |   },
 336 | 
 337 |   build : function(keys, defines) {
 338 |     var defs = [];
 339 |     for (var i in defines) {
 340 |       defs.push("#define " + i + " " + defines[i]);
 341 |     }
 342 |     defs.sort();
 343 |     var sk = keys.join("¤")+"¤"+defs.join("¤");
 344 |     if (!this.shaderCache[sk]) {
 345 |       var vertVals = [];
 346 |       var fragVals = [];
 347 |       for (var i=0; i<keys.length; i++) {
 348 |         var v = this.verts[keys[i]];
 349 |         if (v) vertVals.push(v);
 350 |         var f = this.frags[keys[i]];
 351 |         if (f) fragVals.push(f);
 352 |       }
 353 |       var defStr = defs.join("\n") + "\n";
 354 |       var vertSrc = defStr + vertVals.join("\n");
 355 |       var fragSrc = defStr + fragVals.join("\n");
 356 |       var s = new Magi.Shader(null,
 357 |         {type:"VERTEX_SHADER",text:vertSrc},
 358 |         {type:"FRAGMENT_SHADER", text:fragSrc}
 359 |       );
 360 |       this.shaderCache[sk] = s;
 361 |     }
 362 |     return this.shaderCache[sk];
 363 |   }
 364 | });
 365 | 
 366 | 
 367 | 
 368 | Magi.Cube = Klass(Magi.Node, {
 369 |   initialize : function() {
 370 |     Magi.Node.initialize.call(this, Magi.Geometry.Cube.getCachedVBO());
 371 |     this.material = Magi.DefaultMaterial.get();
 372 |   }
 373 | });
 374 | 
 375 | Magi.Crystal = Klass(Magi.Node, {
 376 |   initialize : function(aspect, pointiness) {
 377 |     Magi.Node.initialize.call(this, Magi.Geometry.Crystal.getCachedVBO(null, aspect, pointiness));
 378 |     this.material = Magi.DefaultMaterial.get();
 379 |   }
 380 | });
 381 | 
 382 | Magi.CubeArray = Klass(Magi.Node, {
 383 |   initialize : function() {
 384 |     Magi.Node.initialize.call(this, Magi.Geometry.CubeArray.getCachedVBO());
 385 |     this.material = Magi.DefaultMaterial.get();
 386 |   }
 387 | });
 388 | 
 389 | Magi.Ring = Klass(Magi.Node, {
 390 |   initialize : function(height, angle, segments, yCount) {
 391 |     Magi.Node.initialize.call(this,
 392 |       Magi.Geometry.Ring.getCachedVBO(null, height, segments, yCount, angle)
 393 |     );
 394 |     this.material = Magi.DefaultMaterial.get();
 395 |   }
 396 | });
 397 | 
 398 | Magi.Sphere = Klass(Magi.Node, {
 399 |   initialize : function(xCount, yCount, wrappedTex) {
 400 |     Magi.Node.initialize.call(this, Magi.Geometry.Sphere.getCachedVBO(null, xCount, yCount, wrappedTex));
 401 |     this.material = Magi.DefaultMaterial.get();
 402 |   }
 403 | });
 404 | 
 405 | Magi.Disk = Klass(Magi.Node, {
 406 |   initialize : function(r1, r2, height, xCount, yCount) {
 407 |     Magi.Node.initialize.call(this, Magi.Geometry.Disk.getCachedVBO(null, r1,r2,height,xCount, yCount));
 408 |     this.material = Magi.DefaultMaterial.get();
 409 |   }
 410 | });
 411 | 
 412 | Magi.Quad = Klass(Magi.Node, {
 413 |   initialize : function(frag) {
 414 |     Magi.Node.initialize.call(this, Magi.Geometry.Quad.getCachedVBO());
 415 |     this.material = Magi.DefaultMaterial.get();
 416 |   }
 417 | });
 418 | 
 419 | Magi.FilterQuad = Klass(Magi.Node, {
 420 |   identityTransform : true,
 421 |   depthMask : false,
 422 | 
 423 |   initialize : function(frag) {
 424 |     Magi.Node.initialize.call(this, Magi.Geometry.Quad.getCachedVBO());
 425 |     if (frag.isMaterial) {
 426 |       this.material = frag;
 427 |     } else {
 428 |       this.material = Magi.FilterQuadMaterial.make(null, frag);
 429 |     }
 430 |   }
 431 | });
 432 | 
 433 | Magi.FlipFilterQuad = Klass(Magi.Node, {
 434 |   identityTransform : true,
 435 |   depthMask : false,
 436 | 
 437 |   initialize : function(frag) {
 438 |     Magi.Node.initialize.call(this, Magi.Geometry.Quad.getCachedVBO());
 439 |     this.material = Magi.FlipFilterQuadMaterial.make(null, frag);
 440 |   }
 441 | });
 442 | 
 443 | Magi.ColorQuad = Klass(Magi.Node, {
 444 |   initialize : function(r,g,b,a) {
 445 |     Magi.Node.initialize.call(this, Magi.Geometry.Quad.getCachedVBO());
 446 |     this.material = Magi.ColorQuadMaterial.get(null);
 447 |     this.transparent = this.a < 1;
 448 |     this.material.floats.Color = vec4.create([r,g,b,a]);
 449 |   }
 450 | });
 451 | 
 452 | Magi.RadialGlowFilter = Klass(Magi.FilterQuad, {
 453 |   initialize : function() {
 454 |     Magi.FilterQuad.initialize.call(this, Magi.RadialGlowMaterial.get());
 455 |   }
 456 | });
 457 | 
 458 | Magi.ChromaticAberrationFilter = Klass(Magi.FilterQuad, {
 459 |   initialize : function() {
 460 |     Magi.FilterQuad.initialize.call(this, Magi.ChromaticAberrationMaterial.get());
 461 |   }
 462 | });
 463 | 
 464 | Magi.FlipRadialGlowFilter = Klass(Magi.FilterQuad, {
 465 |   initialize : function() {
 466 |     Magi.FilterQuad.initialize.call(this, Magi.FlipRadialGlowMaterial.get());
 467 |   }
 468 | });
 469 | 
 470 | Magi.IdFilter = Klass(Magi.FilterQuad, {
 471 |   initialize : function() {
 472 |     Magi.FilterQuad.initialize.call(this, Magi.IdFilterMaterial.get());
 473 |   }
 474 | });
 475 | 
 476 | Magi.ImageQuad = Klass(Magi.FlipFilterQuad, {
 477 |   initialize : function(image) {
 478 |     Magi.FlipFilterQuad.initialize.call(this, Magi.IdFilterMaterial.frag);
 479 |     this.texture = new Magi.Texture(image);
 480 |     this.material.textures.Texture0 = this.texture;
 481 |   }
 482 | });
 483 | 
 484 | Magi.Alignable = {
 485 |   leftAlign : 1,
 486 |   rightAlign : -1,
 487 |   topAlign : -1,
 488 |   bottomAlign : 1,
 489 |   centerAlign : 0,
 490 | 
 491 |   align: 0,
 492 |   valign: 0,
 493 | 
 494 |   alignQuad : function(node, w, h) {
 495 |     node.position[0] = this.align * w/2;
 496 |     node.position[1] = this.valign * h/2;
 497 |   },
 498 | 
 499 |   updateAlign : function() {
 500 |     this.alignQuad(this.alignedNode, this.width, this.height);
 501 |   },
 502 | 
 503 |   setAlign : function(h, v) {
 504 |     this.align = h;
 505 |     if (v != null)
 506 |       this.valign = v;
 507 |     this.updateAlign();
 508 |     return this;
 509 |   },
 510 | 
 511 |   setVAlign : function(v) {
 512 |     this.valign = v;
 513 |     this.updateAlign();
 514 |     return this;
 515 |   }
 516 | 
 517 | };
 518 | 
 519 | Magi.Image = Klass(Magi.Node, Magi.Alignable, {
 520 |   initialize : function(src, flip) {
 521 |     Magi.Node.initialize.call(this);
 522 |     this.alignedNode = new Magi.Node(Magi.Geometry.Quad.getCachedVBO());
 523 |     this.alignedNode.material = flip
 524 |                               ? Magi.FlipFilterMaterial.get()
 525 |                               : Magi.FilterMaterial.get();
 526 |     this.alignedNode.transparent = true;
 527 |     this.appendChild(this.alignedNode);
 528 |     this.setTexture(new Magi.Texture());
 529 |     this.texture.generateMipmaps = false;
 530 |     if (src) this.setImage(src);
 531 |   },
 532 | 
 533 |   setTexture : function(tex) {
 534 |     if (tex != this.texture) {
 535 |       if (this.texture)
 536 |         this.texture.destroy();
 537 |       this.texture = tex;
 538 |       this.alignedNode.material.textures.Texture0 = this.texture;
 539 |     }
 540 |     return this;
 541 |   },
 542 | 
 543 |   setSize : function(sz) {
 544 |     this.size = sz;
 545 |     if (this.image && this.image.tagName && Object.isImageLoaded(this.image))
 546 |       this.reposition();
 547 |     return this;
 548 |   },
 549 | 
 550 |   reposition : function() {
 551 |     var w = this.image.width, h = this.image.height;
 552 |     if (this.size != null) {
 553 |       var f = Math.min(this.size/w, this.size/h);
 554 |       w = (w*f);
 555 |       h = (h*f);
 556 |     }
 557 |     this.width = w;
 558 |     this.height = h;
 559 |     this.alignedNode.scaling[0] = w / 2;
 560 |     this.alignedNode.scaling[1] = h / 2;
 561 |     this.updateAlign();
 562 |   },
 563 | 
 564 |   setImage : function(src) {
 565 |     var image = src;
 566 |     if (typeof src == 'string') {
 567 |       image = new Image();
 568 |       image.src = src;
 569 |     }
 570 |     if (this.image && this.image.__imageLoadHandler) {
 571 |       this.image.removeEventListener('load',
 572 |         this.image.__imageLoadHandler, false);
 573 |     }
 574 |     this.image = image;
 575 |     if (image.tagName && !Object.isImageLoaded(image)) {
 576 |       var self = this;
 577 |       image.__imageLoadHandler = function() {
 578 |         if (self.image == this) {
 579 |           self.setImage(this);
 580 |         }
 581 |       };
 582 |       image.addEventListener('load', image.__imageLoadHandler, false);
 583 |     }
 584 |     this.image.width; // workaround for strange chrome bug
 585 |     this.reposition();
 586 |     if (this.image instanceof Magi.Texture) {
 587 |       this.setTexture(this.image);
 588 |     } else {
 589 |       this.texture.image = this.image;
 590 |       this.texture.changed = true;
 591 |     }
 592 |     return this;
 593 |   }
 594 | });
 595 | 
 596 | Magi.Text = Klass(Magi.Image, Magi.Alignable, {
 597 |   fontSize : 24,
 598 |   font : 'Arial',
 599 |   color : 'black',
 600 | 
 601 |   initialize : function(content, fontSize, color, font) {
 602 |     this.canvas = E.canvas(1, 1);
 603 |     Magi.Image.initialize.call(this, this.canvas);
 604 |     if (fontSize) this.fontSize = fontSize;
 605 |     if (font) this.font = font;
 606 |     if (color) this.color = color;
 607 |     this.setText(content);
 608 |   },
 609 | 
 610 |   setText : function(text) {
 611 |     this.text = text;
 612 |     var ctx = this.canvas.getContext('2d');
 613 |     var sf = this.fontSize + 'px ' + this.font;
 614 |     ctx.font = sf;
 615 |     var dims = ctx.measureText(text);
 616 |     this.canvas.width = Math.max(1, Math.min(2048, dims.width));
 617 |     this.canvas.height = Math.max(1, Math.min(2048, Math.ceil(this.fontSize*1.25)));
 618 |     var ctx = this.canvas.getContext('2d');
 619 |     ctx.font = sf;
 620 |     ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
 621 |     ctx.fillStyle = this.color;
 622 |     ctx.fillText(this.text, 0, this.fontSize);
 623 |     this.setImage(this.canvas);
 624 |     return this;
 625 |   },
 626 | 
 627 |   setFontSize : function(fontSize) {
 628 |     this.fontSize = fontSize;
 629 |     this.setText(this.text);
 630 |     return this;
 631 |   },
 632 | 
 633 |   setFont : function(font) {
 634 |     this.font = font;
 635 |     this.setText(this.text);
 636 |     return this;
 637 |   },
 638 | 
 639 |   setColor : function(color) {
 640 |     this.color = color;
 641 |     this.setText(this.text);
 642 |     return this;
 643 |   },
 644 | });
 645 | 
 646 | Magi.MeshText = Klass(Magi.Text, {
 647 |   initialize : function(content, fontSize, color, font) {
 648 |     Magi.Text.initialize.apply(this, arguments);
 649 |     this.alignedNode.model = Magi.Geometry.QuadMesh.getCachedVBO(null,20,100);
 650 |   }
 651 | });
 652 | 
 653 | Magi.MeshImage = Klass(Magi.Image, {
 654 |   initialize : function(image) {
 655 |     Magi.Image.initialize.apply(this, arguments);
 656 |     this.alignedNode.model = Magi.Geometry.QuadMesh.getCachedVBO();
 657 |   }
 658 | });
 659 | 
 660 | Magi.CubeText = Klass(Magi.Text, {
 661 |   initialize : function(content, fontSize, color, font) {
 662 |     Magi.Text.initialize.apply(this, arguments);
 663 |     this.alignedNode.model = Magi.Geometry.CubeArray.getCachedVBO(null,200,24);
 664 |     this.alignedNode.material = Magi.CubeArrayMaterial.get();
 665 |     this.alignedNode.material.textures.Texture0 = this.texture;
 666 |   },
 667 | 
 668 |   setText : function(txt) {
 669 |     Magi.Text.setText.apply(this,arguments);
 670 |     this.alignedNode.material.floats.width = this.width;
 671 |     this.alignedNode.material.floats.height = this.height;
 672 |     return this;
 673 |   }
 674 | });
 675 | 
 676 | Magi.ShaderLib = {
 677 |   defaultTransform: (
 678 |     "precision highp float;"+
 679 |     "attribute vec3 Vertex;"+
 680 |     "attribute vec2 TexCoord;"+
 681 |     "uniform mat4 PMatrix;"+
 682 |     "uniform mat4 MVMatrix;"+
 683 |     "uniform mat3 NMatrix;"+
 684 |     "varying vec2 texCoord0;"+
 685 |     "vec4 transform()"+
 686 |     "{"+
 687 |     "  vec4 v = vec4(Vertex, 1.0);"+
 688 |     "  vec4 worldPos = MVMatrix * v;"+
 689 |     "  return PMatrix * worldPos;"+
 690 |     "}"+
 691 |     "vec2 texCoord()"+
 692 |     "{ return TexCoord.st; }"+
 693 |     "vec2 flipTexCoord()"+
 694 |     "{ return vec2(TexCoord.s, 1.0-TexCoord.t); }"+
 695 |     "void defaultTransform()"+
 696 |     "{"+
 697 |     "  gl_Position = transform();"+
 698 |     "  texCoord0 = texCoord();"+
 699 |     "}"+
 700 |     "void defaultImageTransform()"+
 701 |     "{"+
 702 |     "  gl_Position = transform();"+
 703 |     "  texCoord0 = flipTexCoord();"+
 704 |     "}"
 705 |   )
 706 | }
 707 | 
 708 | Magi.FilterMaterial = {
 709 |   vert : {type: 'VERTEX_SHADER', text: (
 710 |     Magi.ShaderLib.defaultTransform+
 711 |     "void main()"+
 712 |     "{"+
 713 |     "  defaultImageTransform();"+
 714 |     "}"
 715 |   )},
 716 | 
 717 |   frag : {type: 'FRAGMENT_SHADER', text: (
 718 |     "precision highp float;"+
 719 |     "uniform sampler2D Texture0;"+
 720 |     "uniform float offsetY;"+
 721 |     "uniform float offsetX;"+
 722 |     "varying vec2 texCoord0;"+
 723 |     "void main()"+
 724 |     "{"+
 725 |     "  vec2 v = vec2(texCoord0.s/(1.0-offsetX), texCoord0.t/(1.0-offsetY));"+
 726 |     "  vec4 c = texture2D(Texture0, v);"+
 727 |     "  if (v.s < 0.0 || v.s > 1.0 || v.t < 0.0 || v.t > 1.0) c = vec4(0.0);"+
 728 |     "  gl_FragColor = c*c.a;"+
 729 |     "}"
 730 |   )},
 731 | 
 732 |   make : function(gl, fragmentShader) {
 733 |     var shader = new Magi.Filter(null, this.vert, fragmentShader||this.frag);
 734 |     return this.setupMaterial(shader);
 735 |   },
 736 | 
 737 |   get : function(gl) {
 738 |     if (!this.cached)
 739 |       this.cached = this.make(gl);
 740 |     return this.cached.copy();
 741 |   },
 742 | 
 743 |   setupMaterial : function(shader) {
 744 |     var m = new Magi.Material(shader);
 745 |     m.textures.Texture0 = null;
 746 |     return m;
 747 |   }
 748 | };
 749 | 
 750 | Magi.FlipFilterMaterial = Object.clone(Magi.FilterMaterial);
 751 | Magi.FlipFilterMaterial.vert = {type: 'VERTEX_SHADER', text: (
 752 |   Magi.ShaderLib.defaultTransform+
 753 |   "void main()"+
 754 |   "{"+
 755 |   "  defaultTransform();"+
 756 |   "}"
 757 | )};
 758 | 
 759 | Magi.FilterQuadMaterial = Object.clone(Magi.FilterMaterial);
 760 | Magi.FilterQuadMaterial.vert = {type: 'VERTEX_SHADER', text: (
 761 |   Magi.ShaderLib.defaultTransform+
 762 |   "void main()"+
 763 |   "{"+
 764 |   "  vec4 v = vec4(Vertex, 1.0);"+
 765 |   "  texCoord0 = texCoord();"+
 766 |   "  gl_Position = v;"+
 767 |   "}"
 768 | )};
 769 | 
 770 | Magi.FlipFilterQuadMaterial = Object.clone(Magi.FilterMaterial);
 771 | Magi.FlipFilterQuadMaterial.vert = {type: 'VERTEX_SHADER', text: (
 772 |   Magi.ShaderLib.defaultTransform+
 773 |   "void main()"+
 774 |   "{"+
 775 |   "  vec4 v = vec4(Vertex, 1.0);"+
 776 |   "  texCoord0 = flipTexCoord();"+
 777 |   "  gl_Position = v;"+
 778 |   "}"
 779 | )};
 780 | 
 781 | Magi.IdFilterMaterial = Object.clone(Magi.FilterQuadMaterial);
 782 | Magi.IdFilterMaterial.frag = {type: 'FRAGMENT_SHADER', text: (
 783 |   "precision highp float;"+
 784 |   "uniform sampler2D Texture0;"+
 785 |   "varying vec2 texCoord0;"+
 786 |   "void main()"+
 787 |   "{"+
 788 |   "  vec4 c = texture2D(Texture0, texCoord0);"+
 789 |   "  gl_FragColor = c;"+
 790 |   "}"
 791 | )};
 792 | 
 793 | Magi.RadialGlowMaterial = Object.clone(Magi.FilterQuadMaterial);
 794 | Magi.RadialGlowMaterial.frag = {type:'FRAGMENT_SHADER', text: (
 795 |   "precision highp float;"+
 796 |   "uniform sampler2D Texture0;"+
 797 |   "varying vec2 texCoord0;"+
 798 |   "uniform vec2 center;"+
 799 |   "uniform float radius;"+
 800 |   "uniform float currentFactor;"+
 801 |   "uniform float intensity;"+
 802 |   "uniform float falloff;"+
 803 |   "void main()"+
 804 |   "{"+
 805 |   "  float samples = 8.0;"+
 806 |   "  float len = length(center - texCoord0);"+
 807 |   "  float rs = len*radius/samples;"+
 808 |   "  vec2 dir = rs * normalize(center - texCoord0);"+
 809 |   "  vec4 c = currentFactor * texture2D(Texture0, texCoord0);"+
 810 |   "  float d = intensity;"+
 811 |   "  float count = 0.0;"+
 812 |   "  float ran = 1.0 + 0.01*sin(texCoord0.t*123.489);"+
 813 |   "  for (float r=1.0; r <= 8.0; r++) {"+
 814 |   "    vec2 tc = texCoord0 + (r*dir) * ran;"+
 815 |   "    vec4 pc = texture2D(Texture0, tc + rs);"+
 816 |   "    c += pc*d;"+
 817 |   "    count += d;"+
 818 |   "    d *= falloff;"+
 819 |   "  }"+
 820 |   "  c /= count;"+
 821 |   "  c.a = 1.0;"+
 822 |   "  gl_FragColor = c;"+
 823 |   "}"
 824 | )};
 825 | Magi.RadialGlowMaterial.setupMaterial = function(shader) {
 826 |   var m = new Magi.Material(shader);
 827 |   m.textures.Texture0 = null;
 828 |   m.floats.center = vec2.create(0.5, -0.2);
 829 |   m.floats.radius = 0.04;
 830 |   m.floats.intensity = 1.0;
 831 |   m.floats.falloff = 0.87;
 832 |   m.floats.currentFactor = 0.0;
 833 |   return m;
 834 | }
 835 | Magi.FlipRadialGlowMaterial = Object.clone(Magi.RadialGlowMaterial);
 836 | Magi.FlipRadialGlowMaterial.vert = Magi.FlipFilterQuadMaterial.vert;
 837 | 
 838 | 
 839 | Magi.ChromaticAberrationMaterial = Object.clone(Magi.FilterQuadMaterial);
 840 | Magi.ChromaticAberrationMaterial.frag = {type:'FRAGMENT_SHADER', text: (
 841 |   "precision highp float;"+
 842 |   "uniform sampler2D Texture0;"+
 843 |   "varying vec2 texCoord0;"+
 844 |   "uniform vec2 center;"+
 845 |   "uniform float radius;"+
 846 |   "void main()"+
 847 |   "{"+
 848 |   "  vec2 shift = radius * (center - texCoord0);"+
 849 |   "  vec4 r = texture2D(Texture0, texCoord0+shift);"+
 850 |   "  vec4 g = texture2D(Texture0, texCoord0);"+
 851 |   "  vec4 b = texture2D(Texture0, texCoord0-shift);"+
 852 |   "  gl_FragColor = vec4(r.r, g.g, b.b, g.a);"+
 853 |   "}"
 854 | )};
 855 | Magi.ChromaticAberrationMaterial.setupMaterial = function(shader) {
 856 |   var m = new Magi.Material(shader);
 857 |   m.textures.Texture0 = null;
 858 |   m.floats.center = vec2.create(0.5, 0.5);
 859 |   m.floats.radius = 0.01;
 860 |   return m;
 861 | }
 862 | Magi.FlipChromaticAberrationMaterial = Object.clone(Magi.ChromaticAberrationMaterial);
 863 | Magi.FlipChromaticAberrationMaterial.vert = Magi.FlipFilterQuadMaterial.vert;
 864 | 
 865 | 
 866 | Magi.GrayscaleMaterial = Object.clone(Magi.FilterQuadMaterial);
 867 | Magi.GrayscaleMaterial.frag = {type:'FRAGMENT_SHADER', text: (
 868 |   "precision highp float;"+
 869 |   "uniform sampler2D Texture0;"+
 870 |   "varying vec2 texCoord0;"+
 871 |   "void main()"+
 872 |   "{"+
 873 |   "  vec4 c = texture2D(Texture0, texCoord0);"+
 874 |   "  c.r = c.g = c.b = 0.2126*c.r + 0.7152*c.g + 0.0722*c.b;"+
 875 |   "  gl_FragColor = c;"+
 876 |   "}"
 877 | )};
 878 | Magi.GrayscaleMaterial.setupMaterial = function(shader) {
 879 |   var m = new Magi.Material(shader);
 880 |   m.textures.Texture0 = null;
 881 |   return m;
 882 | }
 883 | Magi.FlipGrayscaleMaterial = Object.clone(Magi.GrayscaleMaterial);
 884 | Magi.FlipGrayscaleMaterial.vert = Magi.FlipFilterQuadMaterial.vert;
 885 | 
 886 | 
 887 | Magi.ThresholdMaterial = Object.clone(Magi.FilterQuadMaterial);
 888 | Magi.ThresholdMaterial.frag = {type:'FRAGMENT_SHADER', text: (
 889 |   "precision highp float;"+
 890 |   "uniform sampler2D Texture0;"+
 891 |   "varying vec2 texCoord0;"+
 892 |   "uniform float threshold;"+
 893 |   "uniform vec4 highColor;"+
 894 |   "uniform vec4 lowColor;"+
 895 |   "void main()"+
 896 |   "{"+
 897 |   "  vec4 c = texture2D(Texture0, texCoord0);"+
 898 |   "  if (0.2126*c.r + 0.7152*c.g + 0.0722*c.b > threshold) {"+
 899 |   "    gl_FragColor = highColor;"+
 900 |   "  } else {"+
 901 |   "    gl_FragColor = lowColor;"+
 902 |   "  }"+
 903 |   "}"
 904 | )};
 905 | Magi.ThresholdMaterial.setupMaterial = function(shader) {
 906 |   var m = new Magi.Material(shader);
 907 |   m.textures.Texture0 = null;
 908 |   m.floats.lowColor = vec4.create(0.0, 0.0, 0.0, 1.0);
 909 |   m.floats.highColor = vec4.create(1.0, 1.0, 1.0, 1.0);
 910 |   m.floats.threshold = 0.5;
 911 |   return m;
 912 | }
 913 | Magi.FlipThresholdMaterial = Object.clone(Magi.ThresholdMaterial);
 914 | Magi.FlipThresholdMaterial.vert = Magi.FlipFilterQuadMaterial.vert;
 915 | 
 916 | 
 917 | Magi.Convolution3x3Material = Object.clone(Magi.FilterQuadMaterial);
 918 | Magi.Convolution3x3Material.frag = {type:'FRAGMENT_SHADER', text: (
 919 |   "precision highp float;"+
 920 |   "uniform sampler2D Texture0;"+
 921 |   "varying vec2 texCoord0;"+
 922 |   "uniform vec2 PixelSize;"+
 923 |   "uniform mat3 Kernel;"+
 924 |   "void main()"+
 925 |   "{"+
 926 |   "  vec4 c = vec4(0.0);"+
 927 |   "  c += Kernel[0][0] * texture2D(Texture0, texCoord0+vec2(-PixelSize.x, -PixelSize.y));"+
 928 |   "  c += Kernel[0][1] * texture2D(Texture0, texCoord0+vec2(-PixelSize.x,  0.0));"+
 929 |   "  c += Kernel[0][2] * texture2D(Texture0, texCoord0+vec2(-PixelSize.x,  PixelSize.y));"+
 930 |   "  c += Kernel[1][0] * texture2D(Texture0, texCoord0+vec2(       0.0,   -PixelSize.y));"+
 931 |   "  c += Kernel[1][1] * texture2D(Texture0, texCoord0+vec2(       0.0,    0.0));"+
 932 |   "  c += Kernel[1][2] * texture2D(Texture0, texCoord0+vec2(       0.0,    PixelSize.y));"+
 933 |   "  c += Kernel[2][0] * texture2D(Texture0, texCoord0+vec2( PixelSize.x, -PixelSize.y));"+
 934 |   "  c += Kernel[2][1] * texture2D(Texture0, texCoord0+vec2( PixelSize.x,  0.0));"+
 935 |   "  c += Kernel[2][2] * texture2D(Texture0, texCoord0+vec2( PixelSize.x,  PixelSize.y));"+
 936 |   "  c.a = 1.0;"+
 937 |   "  gl_FragColor = c;"+
 938 |   "}"
 939 | )};
 940 | Magi.Convolution3x3Material.setupMaterial = function(shader) {
 941 |   var m = new Magi.Material(shader);
 942 |   m.textures.Texture0 = null;
 943 |   m.floats.PixelSize = vec2.create(1/500, 1/500);
 944 |   m.floats.Kernel = mat3.identity();
 945 |   return m;
 946 | }
 947 | Magi.FlipConvolution3x3Material = Object.clone(Magi.Convolution3x3Material);
 948 | Magi.FlipConvolution3x3Material.vert = Magi.FlipFilterQuadMaterial.vert;
 949 | 
 950 | 
 951 | Magi.CubeArrayMaterial = Object.clone(Magi.FilterMaterial);
 952 | Magi.CubeArrayMaterial.vert = {type: 'VERTEX_SHADER', text: (
 953 |   Magi.ShaderLib.defaultTransform+
 954 |   "uniform float width;"+
 955 |   "uniform float height;"+
 956 |   "varying vec2 texCoord0;"+
 957 |   "float grid(float c, float sz)"+
 958 |   "{"+
 959 |   "  return (0.5+floor(c*sz))/sz;"+
 960 |   "}"+
 961 |   "void main()"+
 962 |   "{"+
 963 |   "  texCoord0 = vec2(grid(TexCoord.s, width), grid(1.0-TexCoord.t, height));"+
 964 |   "  if (texture2D(Texture0, texCoord0).a == 0.0) {"+
 965 |   "    gl_Position = vec4(-3.0, -3.0, -3.0, 1.0);"+
 966 |   "  } else {"+
 967 |   "    gl_Position = transform();"+
 968 |   "  }"+
 969 |   "}"
 970 | )};
 971 | 
 972 | 
 973 | Magi.ColorQuadMaterial = Object.clone(Magi.FilterMaterial);
 974 | Magi.ColorQuadMaterial.vert = {type: 'VERTEX_SHADER', text: (
 975 |   Magi.ShaderLib.defaultTransform+
 976 |   "void main()"+
 977 |   "{"+
 978 |   "  vec4 v = vec4(Vertex, 1.0);"+
 979 |   "  gl_Position = v;"+
 980 |   "}"
 981 | )};
 982 | Magi.ColorQuadMaterial.frag = {type: 'FRAGMENT_SHADER', text: (
 983 |   "precision highp float;"+
 984 |   "uniform vec4 Color;"+
 985 |   "void main()"+
 986 |   "{"+
 987 |   "  gl_FragColor = Color;"+
 988 |   "}"
 989 | )};
 990 | 
 991 | Magi.ColorMaterial = Object.clone(Magi.FilterMaterial);
 992 | Magi.ColorMaterial.vert = {type: 'VERTEX_SHADER', text: (
 993 |   Magi.ShaderLib.defaultTransform+
 994 |   "void main()"+
 995 |   "{"+
 996 |   "  gl_Position = transform();"+
 997 |   "}"
 998 | )};
 999 | Magi.ColorMaterial.frag = {type: 'FRAGMENT_SHADER', text: (
1000 |   "precision highp float;"+
1001 |   "uniform vec4 Color;"+
1002 |   "void main()"+
1003 |   "{"+
1004 |   "  gl_FragColor = Color;"+
1005 |   "}"
1006 | )};
1007 | 
1008 | Magi.DefaultMaterial = {
1009 |   vert : {type: 'VERTEX_SHADER', text: (
1010 |     "precision highp float;"+
1011 |     "attribute vec3 Vertex;"+
1012 |     "attribute vec3 Normal;"+
1013 |     "attribute vec2 TexCoord;"+
1014 |     "uniform mat4 PMatrix;"+
1015 |     "uniform mat4 MVMatrix;"+
1016 |     "uniform mat4 LightMatrix;"+
1017 |     "uniform mat3 NMatrix;"+
1018 |     "uniform float LightConstantAtt;"+
1019 |     "uniform float LightLinearAtt;"+
1020 |     "uniform float LightQuadraticAtt;"+
1021 |     "uniform vec4 LightPos;"+
1022 |     "varying vec3 normal, lightDir, eyeVec;"+
1023 |     "varying vec2 texCoord0;"+
1024 |     "varying float attenuation;"+
1025 |     "void main()"+
1026 |     "{"+
1027 |     "  vec3 lightVector;"+
1028 |     "  vec4 v = vec4(Vertex, 1.0);"+
1029 |     "  texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);"+
1030 |     "  normal = normalize(NMatrix * Normal);"+
1031 |     "  vec4 worldPos = MVMatrix * v;"+
1032 |     "  vec4 lightWorldPos = LightMatrix * LightPos;"+
1033 |     "  lightVector = vec3(lightWorldPos - worldPos);"+
1034 |     "  lightDir = normalize(lightVector);"+
1035 |     "  float dist = length(lightVector);"+
1036 |     "  eyeVec = -vec3(worldPos);"+
1037 |     "  attenuation = 1.0 / (1.0 + LightConstantAtt + LightLinearAtt*dist + LightQuadraticAtt * dist*dist);"+
1038 |     "  gl_Position = PMatrix * worldPos;"+
1039 |     "}"
1040 |   )},
1041 | 
1042 |   frag : {type: 'FRAGMENT_SHADER', text: (
1043 |     "precision highp float;"+
1044 |     "uniform vec4 LightDiffuse;"+
1045 |     "uniform vec4 LightSpecular;"+
1046 |     "uniform vec4 LightAmbient;"+
1047 |     "uniform vec4 MaterialSpecular;"+
1048 |     "uniform vec4 MaterialDiffuse;"+
1049 |     "uniform vec4 MaterialAmbient;"+
1050 |     "uniform vec4 MaterialEmit;"+
1051 |     "uniform vec4 GlobalAmbient;"+
1052 |     "uniform float MaterialShininess;"+
1053 |     "uniform sampler2D DiffTex, SpecTex, EmitTex;"+
1054 |     "varying vec3 normal, lightDir, eyeVec;"+
1055 |     "varying vec2 texCoord0;"+
1056 |     "varying float attenuation;"+
1057 |     "void main()"+
1058 |     "{"+
1059 |     "  vec4 color = GlobalAmbient * LightAmbient * MaterialAmbient;"+
1060 |     "  vec4 matDiff = MaterialDiffuse + texture2D(DiffTex, texCoord0);"+
1061 |     "  matDiff.a = 1.0 - (1.0-MaterialDiffuse.a) * (1.0-texture2D(DiffTex, texCoord0).a);"+
1062 |     "  vec4 matSpec = MaterialSpecular + texture2D(SpecTex, texCoord0);"+
1063 |     "  matSpec.a = 1.0 - (1.0-MaterialSpecular.a) * (1.0-texture2D(SpecTex, texCoord0).a);"+
1064 |     "  vec4 diffuse = LightDiffuse * matDiff;"+
1065 |     "  float lambertTerm = dot(normal, lightDir);"+
1066 |     "  vec4 lcolor = diffuse * lambertTerm * attenuation;"+
1067 |     "  vec3 E = normalize(eyeVec);"+
1068 |     "  vec3 R = reflect(-lightDir, normal);"+
1069 |     "  float specular = pow( max(dot(R, E), 0.0), MaterialShininess );"+
1070 |     "  lcolor += matSpec * LightSpecular * specular * attenuation;"+
1071 |     "  if (lambertTerm > 0.0) color += lcolor * lambertTerm;"+
1072 |     "  else color += diffuse * attenuation * MaterialAmbient.a * -lambertTerm;"+
1073 |     "  color += MaterialEmit + texture2D(EmitTex, texCoord0);" +
1074 |     "  color *= matDiff.a;"+
1075 |     "  color.a = matDiff.a;"+
1076 |     "  gl_FragColor = color;"+
1077 |     "}"
1078 |   )},
1079 | 
1080 |   get : function(gl) {
1081 |     if (!this.cached) {
1082 |       var shader = new Magi.Shader(null, this.vert, this.frag);
1083 |       this.cached = this.setupMaterial(shader);
1084 |     }
1085 |     var c = this.cached.copy();
1086 |     c.floats.LightMatrix = this.lightMatrix;
1087 |     return c;
1088 |   },
1089 | 
1090 |   lightMatrix : mat4.identity(),
1091 | 
1092 |   setupMaterial : function(shader) {
1093 |     var m = new Magi.Material(shader);
1094 |     m.textures.DiffTex = m.textures.SpecTex = m.textures.EmitTex = null;
1095 |     m.floats.MaterialSpecular = vec4.create([1, 1, 1, 0]);
1096 |     m.floats.MaterialDiffuse = vec4.create([0.5, 0.5, 0.5, 1]);
1097 |     m.floats.MaterialAmbient = vec4.create([1, 1, 1, 0.3]);
1098 |     m.floats.MaterialEmit = vec4.create([0, 0, 0, 0]);
1099 |     m.floats.MaterialShininess = 1.5;
1100 |     m.floats.LightMatrix = this.lightMatrix;
1101 | 
1102 |     m.floats.LightPos = vec4.create([1, 1, 1, 1.0]);
1103 |     m.floats.GlobalAmbient = vec4.create([1, 1, 1, 1]);
1104 |     m.floats.LightSpecular = vec4.create([0.8, 0.8, 0.95, 1]);
1105 |     m.floats.LightDiffuse = vec4.create([0.7, 0.6, 0.9, 1]);
1106 |     m.floats.LightAmbient = vec4.create([0.1, 0.10, 0.2, 1]);
1107 |     m.floats.LightConstantAtt = 0.0;
1108 |     m.floats.LightLinearAtt = 0.0;
1109 |     m.floats.LightQuadraticAtt = 0.0;
1110 |     return m;
1111 |   }
1112 | 
1113 | }
1114 | 
1115 | 
1116 | Magi.MultiMaterial = {
1117 |   frag : {
1118 |     type: Magi.DefaultMaterial.frag.type,
1119 |     text: Magi.DefaultMaterial.frag.text.replace(/uniform (\S+ Material)/g, 'varying $1')
1120 |   },
1121 |   vert : {type: 'VERTEX_SHADER', text: (
1122 |     "#define MAX_MATERIALS 4\n"+
1123 |     "precision highp float;"+
1124 |     "precision highp int;"+
1125 |     "struct material {"+
1126 |     "  vec4 diffuse; vec4 specular; vec4 ambient; vec4 emit; float shininess;"+
1127 |     "};"+
1128 |     "attribute vec3 Vertex;"+
1129 |     "attribute vec3 Normal;"+
1130 |     "attribute vec2 TexCoord;"+
1131 |     "attribute float MaterialIndex;"+
1132 |     "uniform mat4 PMatrix;"+
1133 |     "uniform mat4 MVMatrix;"+
1134 |     "uniform mat4 LightMatrix;"+
1135 |     "uniform mat3 NMatrix;"+
1136 |     "uniform float LightConstantAtt;"+
1137 |     "uniform float LightLinearAtt;"+
1138 |     "uniform float LightQuadraticAtt;"+
1139 |     "uniform vec4 LightPos;"+
1140 |     "uniform material Material0;"+
1141 |     "uniform material Material1;"+
1142 |     "uniform material Material2;"+
1143 |     "uniform material Material3;"+
1144 |     "varying vec3 normal, lightDir, eyeVec;"+
1145 |     "varying vec2 texCoord0;"+
1146 |     "varying float attenuation;"+
1147 |     "varying vec4 MaterialDiffuse;"+
1148 |     "varying vec4 MaterialSpecular;"+
1149 |     "varying vec4 MaterialAmbient;"+
1150 |     "varying vec4 MaterialEmit;"+
1151 |     "varying float MaterialShininess;"+
1152 |     "void main()"+
1153 |     "{"+
1154 |     "  vec3 lightVector;"+
1155 |     "  vec4 v = vec4(Vertex, 1.0);"+
1156 |     "  texCoord0 = vec2(TexCoord.s, 1.0-TexCoord.t);"+
1157 |     "  normal = normalize(NMatrix * Normal);"+
1158 |     "  vec4 worldPos = MVMatrix * v;"+
1159 |     "  vec4 lightWorldPos = LightMatrix * LightPos;"+
1160 |     "  lightVector = vec3(lightWorldPos - worldPos);"+
1161 |     "  lightDir = normalize(lightVector);"+
1162 |     "  float dist = length(lightVector);"+
1163 |     "  eyeVec = normalize(-vec3(worldPos));"+
1164 |     "  attenuation = 1.0 / (1.0 + LightConstantAtt + LightLinearAtt*dist + LightQuadraticAtt * dist*dist);"+
1165 |     "  gl_Position = PMatrix * worldPos;"+
1166 |     "  float midx = MaterialIndex;"+
1167 |     "  material mat = Material3;"+
1168 |     "  if (midx == 0.0) mat = Material0;"+
1169 |     "  if (midx == 1.0) mat = Material1;"+
1170 |     "  if (midx == 2.0) mat = Material2;"+
1171 |     "  MaterialDiffuse = mat.diffuse;"+
1172 |     "  MaterialSpecular = mat.specular;"+
1173 |     "  MaterialAmbient = mat.ambient;"+
1174 |     "  MaterialEmit = mat.emit;"+
1175 |     "  MaterialShininess = mat.shininess;"+
1176 |     "}"
1177 |   )},
1178 | 
1179 |   get : function(gl) {
1180 |     if (!this.cached) {
1181 |       var shader = new Magi.Shader(null, this.vert, this.frag);
1182 |       this.cached = this.setupMaterial(shader);
1183 |     }
1184 |     var c = this.cached.copy();
1185 |     c.floats.LightMatrix = this.lightMatrix;
1186 |     return c;
1187 |   },
1188 | 
1189 |   lightMatrix : mat4.identity(),
1190 | 
1191 |   setupMaterial : function(shader) {
1192 |     var m = new Magi.Material(shader);
1193 |     m.textures.DiffTex = m.textures.SpecTex = m.textures.EmitTex = null;
1194 | 
1195 |     m.floats.LightMatrix = this.lightMatrix;
1196 | 
1197 |     m.floats.LightPos = vec4.create([1, 1, 1, 1.0]);
1198 |     m.floats.GlobalAmbient = vec4.create([1, 1, 1, 1]);
1199 |     m.floats.LightSpecular = vec4.create([1, 1, 1, 1]);
1200 |     m.floats.LightDiffuse = vec4.create([1, 1, 1, 1]);
1201 |     m.floats.LightAmbient = vec4.create([0.1, 0.1, 0.1, 1]);
1202 |     m.floats.LightConstantAtt = 0.0;
1203 |     m.floats.LightLinearAtt = 0.0;
1204 |     m.floats.LightQuadraticAtt = 0.0;
1205 |     return m;
1206 |   }
1207 | 
1208 | }
1209 | 


--------------------------------------------------------------------------------
/src/scenegraph.js:
--------------------------------------------------------------------------------
  1 | Magi.Motion = {
  2 |   makeBounce : function() {
  3 |     this.addFrameListener(function(t, dt) {
  4 |       var y = 2*Math.abs(Math.sin(t / 500));
  5 |       this.position[1] = y;
  6 |     });
  7 |     return this;
  8 |   },
  9 | 
 10 |   makeRotate : function(speed) {
 11 |     speed = speed || 0.2;
 12 |     this.addFrameListener(function(t,dt) {
 13 |       this.rotation.angle = (Math.PI*2*t / (1000/speed)) % (Math.PI*2);
 14 |     });
 15 |     return this;
 16 |   }
 17 | };
 18 | 
 19 | Magi.Node = Klass(Magi.Motion, {
 20 |   model : null,
 21 |   position : null,
 22 |   rotation : null,
 23 |   scaling : null,
 24 |   polygonOffset : null,
 25 |   scaleAfterRotate : false,
 26 |   depthMask : null,
 27 |   depthTest : null,
 28 |   display : true,
 29 |   transparent : false,
 30 |   id : null,
 31 |   parentNode : null,
 32 | 
 33 |   initialize : function(model) {
 34 |     this.model = model;
 35 |     this.absolutePosition = vec3.create();
 36 |     this.renderPasses = {normal: true};
 37 |     this.material = new Magi.Material();
 38 |     this.matrix = mat4.identity();
 39 |     this.normalMatrix = mat3.identity();
 40 |     this.rotation = {angle : 0, axis : vec3.create([0,1,0])};
 41 |     this.position = vec3.create([0, 0, 0]);
 42 |     this.scaling = vec3.create([1, 1, 1]);
 43 |     this.frameListeners = [];
 44 |     this.childNodes = [];
 45 |     this.afterTransformListeners = [];
 46 |   },
 47 | 
 48 |   getNodeById : function(name) {
 49 |     var found = null;
 50 |     try {
 51 |       this.filterNodes(function(n){ if (n.id == name) { found=n; throw(null); } });
 52 |     } catch(e) {
 53 |       return found;
 54 |     }
 55 |   },
 56 | 
 57 |   getNodesById : function(name) {
 58 |     return this.filterNodes(function(n){ return (n.id == name); });
 59 |   },
 60 | 
 61 |   getNodesByKlass : function(klass) {
 62 |     return this.filterNodes(function(n){ return (n instanceof klass); });
 63 |   },
 64 | 
 65 |   getNodesByMethod : function(name) {
 66 |     return this.filterNodes(function(n){ return n[name]; });
 67 |   },
 68 | 
 69 |   getNodesByKeyValue : function(key, value) {
 70 |     return this.filterNodes(function(n){ return n[key] == value; });
 71 |   },
 72 | 
 73 |   filterNodes : function(f) {
 74 |     var nodes = [];
 75 |     this.forEach(function(n) {
 76 |       if (f(n)) nodes.push(n);
 77 |     });
 78 |     return nodes;
 79 |   },
 80 | 
 81 |   forEach : function(f) {
 82 |     f.call(this,this);
 83 |     this.childNodes.forEach(function(cn){
 84 |       cn.forEach(f);
 85 |     });
 86 |   },
 87 | 
 88 |   setX : function(x) {
 89 |     this.position[0] = x;
 90 |     return this;
 91 |   },
 92 | 
 93 |   setY : function(x) {
 94 |     this.position[1] = x;
 95 |     return this;
 96 |   },
 97 | 
 98 |   setZ : function(x) {
 99 |     this.position[2] = x;
100 |     return this;
101 |   },
102 | 
103 |   setPosition : function(x,y,z) {
104 |     if (x.length != null) {
105 |       vec3.set(x, this.position);
106 |     } else {
107 |       if (y == null) {
108 |         vec3.set3(x, this.position)
109 |       } else {
110 |         this.position[0] = x;
111 |         this.position[1] = y;
112 |         if (z != null)
113 |           this.position[2] = z;
114 |       }
115 |     }
116 |     return this;
117 |   },
118 | 
119 |   setScale : function(x,y,z) {
120 |     if (x.length != null) {
121 |       vec3.set(x, this.scaling);
122 |     } else {
123 |       if (y == null) {
124 |         vec3.set3(x, this.scaling)
125 |       } else {
126 |         this.scaling[0] = x;
127 |         this.scaling[1] = y;
128 |         if (z != null)
129 |           this.scaling[2] = z;
130 |       }
131 |     }
132 |     return this;
133 |   },
134 | 
135 |   setAngle : function(a) {
136 |     this.rotation.angle = a;
137 |     return this;
138 |   },
139 | 
140 |   setAxis : function(x,y,z) {
141 |     if (x.length != null) {
142 |       vec3.set(x, this.rotation.axis);
143 |     } else {
144 |       if (y == null) {
145 |         vec3.set3(x, this.rotation.axis)
146 |       } else {
147 |         this.rotation.axis[0] = x;
148 |         this.rotation.axis[1] = y;
149 |         if (z != null)
150 |           this.rotation.axis[2] = z;
151 |       }
152 |     }
153 |     return this;
154 |   },
155 | 
156 |   draw : function(gl, state, perspectiveMatrix) {
157 |     if (!this.model || !this.display) return;
158 |     if (this.material) {
159 |       this.material.apply(gl, state, perspectiveMatrix, this.matrix, this.normalMatrix);
160 |     }
161 |     if (this.model.gl == null) this.model.gl = gl;
162 |     var psrc = state.blendFuncSrc;
163 |     var pdst = state.blendFuncDst;
164 |     var dm = state.depthMask;
165 |     var dt = state.depthTest;
166 |     var poly = state.polygonOffset;
167 |     var bl = state.blend;
168 |     var cl = state.cullFace;
169 |     if (this.polygonOffset) {
170 |       gl.polygonOffset(this.polygonOffset.factor, this.polygonOffset.units);
171 |     }
172 |     if (this.depthMask != null && this.depthMask != state.depthMask) {
173 |       gl.depthMask(this.depthMask);
174 |     }
175 |     if (this.depthTest != null && this.depthTest != state.depthTest) {
176 |       if (this.depthTest)
177 |         gl.enable(gl.DEPTH_TEST);
178 |       else
179 |         gl.disable(gl.DEPTH_TEST);
180 |     }
181 |     if (this.blendFuncSrc && this.blendFuncDst) {
182 |       gl.blendFunc(gl[this.blendFuncSrc], gl[this.blendFuncDst]);
183 |     }
184 |     if (this.blend != null && this.blend != state.blend) {
185 |       if (this.blend) gl.enable(gl.BLEND);
186 |       else gl.disable(gl.BLEND);
187 |     }
188 |     if (this.cullFace != null && this.cullFace != state.cullFace) {
189 |       gl.enable(gl.CULL_FACE);
190 |       gl.cullFace(gl[this.cullFace]);
191 |     }
192 | 
193 |     if (this.model.attributes) {
194 |       if (!this.model.attributeIdxs) {
195 |         this.model.attributeIdxs = [];
196 |       }
197 |       for (var i=0; i<this.model.attributes.length; i++) {
198 |         this.model.attributeIdxs[i] = state.currentShader.attrib(this.model.attributes[i]);
199 |       }
200 |       this.model.draw.apply(this.model, this.model.attributeIdxs);
201 |     } else {
202 |       this.model.draw(
203 |         state.currentShader.attrib('Vertex'),
204 |         state.currentShader.attrib('Normal'),
205 |         state.currentShader.attrib('TexCoord')
206 |       );
207 |     }
208 | 
209 |     if (this.cullFace != null && this.cullFace != state.cullFace) {
210 |       if (cl) gl.cullFace(gl[cl]);
211 |       else gl.disable(gl.CULL_FACE);
212 |     }
213 |     if (this.blend != null && this.blend != state.blend) {
214 |       if (bl) gl.enable(gl.BLEND);
215 |       else gl.disable(gl.BLEND);
216 |     }
217 |     if (this.blendFuncSrc && this.blendFuncDst) {
218 |       gl.blendFunc(gl[psrc], gl[pdst]);
219 |     }
220 |     if (this.depthTest != null && this.depthTest != state.depthTest) {
221 |       if (dt)
222 |         gl.enable(gl.DEPTH_TEST);
223 |       else
224 |         gl.disable(gl.DEPTH_TEST);
225 |     }
226 |     if (this.depthMask != null && this.depthMask != state.depthMask) {
227 |       gl.depthMask(dm);
228 |     }
229 |     if (this.polygonOffset) {
230 |       gl.polygonOffset(poly.factor, poly.units);
231 |     }
232 |   },
233 | 
234 |   addFrameListener : function(f) {
235 |     this.frameListeners.push(f);
236 |   },
237 | 
238 |   afterTransform : function(f) {
239 |     this.afterTransformListeners.push(f);
240 |   },
241 | 
242 |   update : function(t, dt) {
243 |     var a = [];
244 |     for (var i=0; i<this.frameListeners.length; i++) {
245 |       a.push(this.frameListeners[i]);
246 |     }
247 |     for (var i=0; i<a.length; i++) {
248 |       if (this.frameListeners.indexOf(a[i]) != -1)
249 |         a[i].call(this, t, dt, this);
250 |     }
251 |     for (var i=0; i<this.childNodes.length; i++) {
252 |       this.childNodes[i].parentNode = this;
253 |       this.childNodes[i].update(t, dt);
254 |     }
255 |   },
256 | 
257 |   appendChild : function(c) {
258 |     this.childNodes.push(c);
259 |     c.parentNode = this;
260 |   },
261 | 
262 |   removeChild : function(c) {
263 |     var idx = this.childNodes.indexOf(c);
264 |     while (idx != -1) {
265 |       this.childNodes[idx].parentNode = null;
266 |     this.childNodes.splice(idx,1);
267 |     idx = this.childNodes.indexOf(c);
268 |     }
269 |     c.parentNode = null;
270 |   },
271 | 
272 |   removeSelf : function() {
273 |     if (this.parentNode)
274 |       this.parentNode.removeChild(this);
275 |   },
276 | 
277 |   updateTransform : function(matrix,t,dt) {
278 |     var m = this.matrix;
279 |     mat4.set(matrix, m);
280 |     var p = this.position;
281 |     var s = this.scaling;
282 |     var doScaling = (s[0] != 1) || (s[1] != 1) || (s[2] != 1);
283 |     if (p[0] || p[1] || p[2])
284 |       mat4.translate(m, p);
285 |     if (this.scaleAfterRotate && doScaling)
286 |       mat4.scale(m, s);
287 |     if (this.rotation.angle != 0)
288 |       mat4.rotate(m, this.rotation.angle, this.rotation.axis);
289 |     if (!this.scaleAfterRotate && doScaling)
290 |       mat4.scale(m, s);
291 |     if (this.transform)
292 |       mat4.multiply(this.transform, m, m);
293 |     if (this.isBillboard)
294 |       mat4.billboard(m);
295 |     mat4.toInverseMat3(m, this.normalMatrix);
296 |     mat3.transpose(this.normalMatrix);
297 |     this.absolutePosition[0] = m[12];
298 |     this.absolutePosition[1] = m[13];
299 |     this.absolutePosition[2] = m[14];
300 |     for (var i=0; i<this.afterTransformListeners.length; i++) {
301 |       this.afterTransformListeners[i].call(this,m,t,dt);
302 |     }
303 |     for (var i=0; i<this.childNodes.length; i++)
304 |       this.childNodes[i].updateTransform(m,t,dt);
305 |   },
306 | 
307 |   getWorldPosition : function(worldOrigin, dst) {
308 |     if (dst == null) dst = vec3.create();
309 |     return vec3.sub(this.absolutePosition, worldOrigin, dst);
310 |   },
311 | 
312 |   collectDrawList : function(arr) {
313 |     if (!arr) arr = [];
314 |     if (this.display) {
315 |       arr.push(this);
316 |       for (var i=0; i<this.childNodes.length; i++)
317 |         this.childNodes[i].collectDrawList(arr);
318 |     }
319 |     return arr;
320 |   }
321 | });
322 | 
323 | Magi.Material = Klass({
324 | 
325 |   isMaterial : true,
326 | 
327 |   initialize : function(shader) {
328 |     this.shader = shader;
329 |     this.textures = {};
330 |     for (var i in this.textures) delete this.textures[i];
331 |     this.floats = {};
332 |     for (var i in this.floats) delete this.floats[i];
333 |     this.ints = {};
334 |     for (var i in this.ints) delete this.ints[i];
335 |   },
336 | 
337 |   copyValue : function(v){
338 |     if (typeof v == 'number') return v;
339 |     var a = new v.__proto__.constructor(v.length);
340 |     for (var i=0; i<v.length; i++) a[i] = v[i];
341 |     return a;
342 |   },
343 | 
344 |   copy : function(){
345 |     var m = new Magi.Material();
346 |     for (var i in this.floats) m.floats[i] = this.copyValue(this.floats[i]);
347 |     for (var i in this.ints) m.ints[i] = this.copyValue(this.ints[i]);
348 |     for (var i in this.textures) m.textures[i] = this.textures[i];
349 |     m.shader = this.shader;
350 |     return m;
351 |   },
352 | 
353 |   apply : function(gl, state, perspectiveMatrix, matrix, normalMatrix) {
354 |     var shader = this.shader;
355 |     if (shader && shader.gl == null) shader.gl = gl;
356 |     if (state.currentShader != shader) {
357 |       shader.use()
358 |       shader.uniformMatrix4fv("PMatrix", perspectiveMatrix);
359 |       Magi.Stats.uniformSetCount++;
360 |       state.currentShader = this.shader;
361 |       Magi.Stats.shaderBindCount++;
362 |     }
363 |     state.currentShader.uniformMatrix4fv("MVMatrix", matrix);
364 |     state.currentShader.uniformMatrix3fv("NMatrix", normalMatrix);
365 |     Magi.Stats.uniformSetCount += 2;
366 |     if (state.currentMaterial == this) return;
367 |     state.currentMaterial = this;
368 |     Magi.Stats.materialUpdateCount++;
369 |     this.applyTextures(gl, state);
370 |     this.applyFloats();
371 |     this.applyInts();
372 |   },
373 | 
374 |   applyTextures : function(gl, state) {
375 |     var texUnit = 0;
376 |     for (var name in this.textures) {
377 |       var tex = this.textures[name];
378 |       if (!tex) tex = Magi.Texture.getDefaultTexture(gl);
379 |       if (tex.gl == null) tex.gl = gl;
380 |       if (state.textures[texUnit] != tex) {
381 |         state.textures[texUnit] = tex;
382 |         gl.activeTexture(gl.TEXTURE0+texUnit);
383 |         tex.use();
384 |         Magi.Stats.textureSetCount++;
385 |       }
386 |       this.shader.uniform1i(name, texUnit);
387 |       Magi.Stats.uniformSetCount++;
388 |       ++texUnit;
389 |     }
390 |   },
391 | 
392 |   cmp : function(a, b) {
393 |     var rv = false;
394 |     if (a && b && a.length && b.length) {
395 |       if (a.length == b.length) {
396 |         rv = true;
397 |         for (var i=0; i<a.length; i++)
398 |           rv = rv && (a[i] == b[i]);
399 |       }
400 |     } else {
401 |       rv = a == b;
402 |     }
403 |     return rv;
404 |   },
405 | 
406 |   cloneVec : function(src, dst) {
407 |     if (!dst || dst.length != src.length)
408 |       dst = new src.constructor(src.length);
409 |     for (var i=0; i<src.length; i++)
410 |       dst[i] = src[i];
411 |     return dst;
412 |   },
413 | 
414 |   applyFloats : function() {
415 |     var shader = this.shader;
416 |     for (var name in this.floats) {
417 |       var uf = this.floats[name];
418 |       var s = shader.uniform(name);
419 |       if (this.cmp(s.current,uf))
420 |         continue;
421 |       if (uf.length)
422 |         s.current = this.cloneVec(uf, s.current);
423 |       else
424 |         s.current = uf;
425 |       Magi.Stats.uniformSetCount++;
426 |       if (uf.length == null) {
427 |         shader.uniform1f(name, uf);
428 |       } else {
429 |         switch (uf.length) {
430 |           case 4:
431 |             shader.uniform4fv(name, uf);
432 |             break;
433 |           case 3:
434 |             shader.uniform3fv(name, uf);
435 |             break;
436 |           case 16:
437 |             shader.uniformMatrix4fv(name, uf);
438 |             break;
439 |           case 9:
440 |             shader.uniformMatrix3fv(name, uf);
441 |             break;
442 |           case 2:
443 |             shader.uniform2fv(name, uf);
444 |             break;
445 |           default:
446 |             shader.uniform1fv(name, uf);
447 |         }
448 |       }
449 |     }
450 |   },
451 | 
452 |   applyInts : function() {
453 |     var shader = this.shader;
454 |     for (var name in this.ints) {
455 |       var uf = this.ints[name];
456 |       var s = shader.uniform(name);
457 |       if (this.cmp(s.current,uf))
458 |         continue;
459 |       if (uf.length)
460 |         s.current = this.cloneVec(uf, s.current);
461 |       else
462 |         s.current = uf;
463 |       Magi.Stats.uniformSetCount++;
464 |       if (uf.length == null) {
465 |         shader.uniform1i(name, uf);
466 |       } else {
467 |         switch (uf.length) {
468 |           case 4:
469 |             shader.uniform4iv(name, uf);
470 |             break;
471 |           case 3:
472 |             shader.uniform3iv(name, uf);
473 |             break;
474 |           case 2:
475 |             shader.uniform2iv(name, uf);
476 |             break;
477 |           default:
478 |             shader.uniform1iv(name, uf);
479 |         }
480 |       }
481 |     }
482 |   }
483 | 
484 | });
485 | 
486 | Magi.GLDrawState = Klass({
487 |   textures : null,
488 |   currentMaterial : null,
489 |   currentShader : null,
490 |   polygonOffset : null,
491 |   blendFuncSrc : 'ONE',
492 |   blendFuncDst : 'ONE_MINUS_SRC_ALPHA',
493 |   depthMask : true,
494 |   depthTest : true,
495 |   blend : true,
496 | 
497 |   initialize: function(){
498 |     this.polygonOffset = {factor: 0, units: 0},
499 |     this.textures = [];
500 |   }
501 | });
502 | 
503 | Magi.Camera = Klass({
504 |   fov : 30,
505 |   targetFov : 30,
506 |   zNear : 1,
507 |   zFar : 10000,
508 |   useLookAt : true,
509 |   ortho : false,
510 |   stereo : false,
511 |   stereoSeparation : 0.025,
512 |   renderPass : 'normal',
513 |   blend : true,
514 |   blendFuncSrc : 'ONE',
515 |   blendFuncDst : 'ONE_MINUS_SRC_ALPHA',
516 |   useProjectionMatrix : false,
517 | 
518 |   initialize : function() {
519 |     this.position = vec3.create([0,0,10]);
520 |     this.lookAt = vec3.create([0,0,0]);
521 |     this.up = vec3.create([0,1,0]);
522 |     this.matrix = mat4.create();
523 |     this.perspectiveMatrix = mat4.create();
524 |     this.frameListeners = [];
525 |     this.afterTransformListeners = [];
526 |     this.tmpMatrixA = mat4.create();
527 |     this.tmpMatrixB = mat4.create();
528 |   },
529 | 
530 |   addFrameListener : Magi.Node.prototype.addFrameListener,
531 | 
532 |   update : function(t, dt) {
533 |     var a = [];
534 |     for (var i=0; i<this.frameListeners.length; i++) {
535 |       a.push(this.frameListeners[i]);
536 |     }
537 |     for (var i=0; i<a.length; i++) {
538 |       if (this.frameListeners.indexOf(a[i]) != -1)
539 |         a[i].call(this, t, dt, this);
540 |     }
541 |     if (this.targetFov && this.fov != this.targetFov)
542 |       this.fov += (this.targetFov - this.fov) * (1-Math.pow(0.7, (dt/30)));
543 |   },
544 | 
545 |   afterTransform : function(f) {
546 |     this.afterTransformListeners.push(f);
547 |   },
548 | 
549 |   getLookMatrix : function() {
550 |     if (this.useLookAt && !this.useProjectionMatrix)
551 |       mat4.lookAt(this.position, this.lookAt, this.up, this.matrix);
552 |     else
553 |       mat4.identity(this.matrix);
554 |     return this.matrix;
555 |   },
556 | 
557 |   moveTo : function(position) {
558 |     var tmp = vec3.create();
559 |     vec3.sub(position, this.lookAt, tmp);
560 |     vec3.add(this.lookAt, tmp);
561 |     vec3.add(this.position, tmp);
562 |   },
563 | 
564 |   setDistance : function(d) {
565 |     var tmp = vec3.create();
566 |     vec3.sub(this.position, this.lookAt, tmp);
567 |     vec3.scale(tmp, d / vec3.length(tmp));
568 |     vec3.add(this.lookAt, tmp, this.position);
569 |   },
570 | 
571 |   multiplyDistance : function(d) {
572 |     var tmp = vec3.create();
573 |     vec3.sub(this.position, this.lookAt, tmp);
574 |     vec3.scale(tmp, d);
575 |     vec3.add(this.lookAt, tmp, this.position);
576 |   },
577 | 
578 |   drawViewport : function(gl, x, y, width, height, scene, t, dt) {
579 |     gl.enable(gl.SCISSOR_TEST);
580 |     gl.viewport(x,y,width,height);
581 |     gl.scissor(x,y,width,height);
582 | 
583 |     scene.updateTransform(mat4.identity(),t,dt);
584 | 
585 |     for (var i=0; i<this.afterTransformListeners.length; i++)
586 |       this.afterTransformListeners[i].call(this,this.perspectiveMatrix,t,dt);
587 | 
588 |     if (!this.useProjectionMatrix) {
589 |       if (this.ortho) {
590 |         mat4.ortho(x, width, -height, -y, this.zNear, this.zFar, this.perspectiveMatrix);
591 |       } else {
592 |         mat4.perspective(this.fov, width/height, this.zNear, this.zFar, this.perspectiveMatrix);
593 |       }
594 |     }
595 |     var lookMatrix = this.getLookMatrix();
596 |     mat4.multiply(this.perspectiveMatrix, lookMatrix);
597 | 
598 |     var st = new Magi.GLDrawState();
599 |     this.resetState(gl, st);
600 | 
601 |     var t = new Date();
602 |     var drawList = scene.collectDrawList();
603 |     var transparents = [];
604 |     for (var i=0; i<drawList.length; i++) {
605 |       var d = drawList[i];
606 |       if (!d.renderPasses[this.renderPass])
607 |         continue;
608 |       if (d.transparent) {
609 |         transparents.push(d);
610 |       } else {
611 |         d.draw(gl, st, this.perspectiveMatrix);
612 |       }
613 |     }
614 | 
615 |     this.normalDrawTime = new Date() - t;
616 |     var matA = this.tmpMatrixA;
617 |     var matB = this.tmpMatrixB;
618 |     transparents.stableSort(function(a,b) {
619 |       mat4.multiply(lookMatrix, a.matrix, matA);
620 |       mat4.multiply(lookMatrix, b.matrix, matB);
621 |       return matA[14] - matB[14];
622 |     });
623 | 
624 |     var st = new Magi.GLDrawState();
625 |     this.resetState(gl, st);
626 | 
627 |     gl.depthMask(false);
628 |     st.depthMask = false;
629 | 
630 |     for (var i=0; i<transparents.length; i++) {
631 |       var d = transparents[i];
632 |       d.draw(gl, st, this.perspectiveMatrix);
633 |     }
634 |     gl.depthMask(true);
635 |     this.transparentDrawTime = new Date() - t - this.normalDrawTime;
636 |     gl.disable(gl.SCISSOR_TEST);
637 |     this.drawTime = new Date() - t;
638 | 
639 |   },
640 | 
641 |   resetState : function(gl, st) {
642 |     gl.depthFunc(gl.LESS);
643 |     gl.disable(gl.CULL_FACE);
644 |     gl.cullFace(gl.BACK);
645 |     gl.frontFace(gl.CCW);
646 |     gl.enable(gl.DEPTH_TEST);
647 |     st.depthTest = true;
648 |     if (this.blendFuncSrc && this.blendFuncDst) {
649 |       st.blendFuncSrc = this.blendFuncSrc;
650 |       st.blendFuncDst = this.blendFuncDst;
651 |       gl.blendFunc(gl[this.blendFuncSrc], gl[this.blendFuncDst]);
652 |     }
653 |     if (this.blend) {
654 |       gl.enable(gl.BLEND);
655 |     } else {
656 |       gl.disable(gl.BLEND);
657 |     }
658 |     st.blend = this.blend;
659 |     gl.depthMask(true);
660 |     st.depthMask = true;
661 |   },
662 | 
663 |   draw : function(gl, width, height, scene,t,dt) {
664 |     if (this.stereo) {
665 |       var p = vec3.create(this.position);
666 |       var sep = vec3.create();
667 |       vec3.subtract(this.lookAt, p, sep)
668 |       vec3.cross(this.up, sep, sep);
669 |       vec3.scale(sep, this.stereoSeparation/2, sep);
670 | 
671 |       vec3.subtract(p, sep, this.position);
672 |       this.drawViewport(gl, 0, 0, width/2, height, scene,t,dt);
673 | 
674 |       vec3.add(p, sep, this.position);
675 |       this.drawViewport(gl, width/2, 0, width/2, height, scene,t,dt);
676 | 
677 |       vec3.set(p, this.position);
678 |     } else {
679 |       this.drawViewport(gl, 0, 0, width, height, scene,t,dt);
680 |     }
681 |   }
682 | });
683 | 
684 | 


--------------------------------------------------------------------------------
/src/tar.js:
--------------------------------------------------------------------------------
  1 | Magi.Tar = function(){};
  2 | 
  3 | // Load and parse archive, calls onload after loading all files.
  4 | Magi.Tar.load = function(url, onload, onstream, onerror) {
  5 |   var o = new Magi.Tar();
  6 |   o.onload = onload;
  7 |   o.onerror = onerror;
  8 |   o.onstream = onstream;
  9 |   o.load(url);
 10 |   return o;
 11 | }
 12 | 
 13 | Magi.Tar.loadGZip = function(url, onload, onstream, onerror) {
 14 |   var o = new Magi.Tar();
 15 |   o.onload = onload;
 16 |   o.onerror = onerror;
 17 |   o.onstream = onstream;
 18 |   o.loadGZip(url);
 19 |   return o;
 20 | }
 21 | 
 22 | // Streams an archive from the given url, calling onstream after loading each file in archive.
 23 | // Calls onload after loading all files.
 24 | Magi.Tar.stream = function(url, onstream, onload, onerror) {
 25 |   var o = new Magi.Tar();
 26 |   o.onload = onload;
 27 |   o.onerror = onerror;
 28 |   o.onstream = onstream;
 29 |   o.load(url);
 30 |   return o;
 31 | }
 32 | 
 33 | Magi.Tar.streamGZip = function(url, onstream, onload, onerror) {
 34 |   var o = new Tar();
 35 |   o.onload = onload;
 36 |   o.onerror = onerror;
 37 |   o.onstream = onstream;
 38 |   o.loadGZip(url);
 39 |   return o;
 40 | }
 41 | 
 42 | Magi.Tar.prototype = {
 43 |   onerror : null,
 44 |   onload : null,
 45 |   onstream : null,
 46 |   ondata : null,
 47 | 
 48 |   cleanupAfterLoad : true,
 49 | 
 50 |   initLoad : function() {
 51 |     this.byteOffset = 0;
 52 |     this.parseTime = 0;
 53 |     this.files = {};
 54 |     this.fileArray = [];
 55 |   },
 56 | 
 57 |   onloadHandler : function(h) {
 58 |     this.byteOffset = this.processTarChunks(h.data, this.byteOffset, h.outputSize);
 59 |     if (this.cleanUpAfterLoad)
 60 |       h.cleanup();
 61 |     if (this.onload)
 62 |       this.onload(this.files);
 63 |   },
 64 |   onprogressHandler : function(h) {
 65 |     this.gzip = h;
 66 |     if (this.ondata) this.ondata(h);
 67 |     this.byteOffset = this.processTarChunks(h.data, this.byteOffset, h.outputSize);
 68 |   },
 69 |   onerrorHandler : function(xhr, e, h) {
 70 |     if (this.onerror)
 71 |       this.onerror(xhr, e, h);
 72 |   },
 73 | 
 74 | 
 75 |   loadGZip : function(url) {
 76 |     this.initLoad();
 77 |     var self = this;
 78 |     GZip.load(url,
 79 |       function(h){self.onloadHandler(h)},
 80 |       function(h){self.onprogressHandler(h)},
 81 |       function(xhr,e,h){self.onerrorHandler(xhr,e,h)}
 82 |     );
 83 |   },
 84 | 
 85 |   load : function(url) {
 86 |     var xhr = new XMLHttpRequest();
 87 |     this.initLoad();
 88 |     var self = this;
 89 |     var h = { data: [], inputSize: 0, outputSize: 0, offset: 0, xhr: xhr, cleanup : function(){
 90 |       delete this.data;
 91 |       delete this.xhr;
 92 |     } };
 93 |     xhr.onload = function(){
 94 |       h.data[0] = this.responseText;
 95 |       h.inputSize = h.outputSize = h.offset = h.data[0].length;
 96 |       try { self.onloadHandler(h); } catch(e) {
 97 |         if (self.onerror)
 98 |           self.onerror(this, e, h);
 99 |         else
100 |           throw(e);
101 |       }
102 |     };
103 |     xhr.onprogress = function(){
104 |       h.data[0] = this.responseText;
105 |       h.inputSize = h.outputSize = h.offset = h.data[0].length;
106 |       self.onprogressHandler(h);
107 |     };
108 |     xhr.open("GET", url, true);
109 |     xhr.overrideMimeType("text/plain; charset=x-user-defined");
110 |     xhr.setRequestHeader("Content-Type", "text/plain");
111 |     xhr.send(null);
112 |   },
113 |  
114 |   cleanHighByte : function(s) {
115 |     return s.replace(/./g, function(m) { 
116 |       return String.fromCharCode(m.charCodeAt(0) & 0xff);
117 |     });
118 |   },
119 |   
120 |   parseTar : function(text) {
121 |     this.initLoad();
122 |     this.processTarChunks([text], 0, text.length);
123 |   },
124 |   processTarChunks : function (chunks, offset, totalSize) {
125 |     var t = new Date();
126 |     while (totalSize >= offset + 512) {
127 |       var header = this.fileArray.length == 0 ? null : this.fileArray[this.fileArray.length-1];
128 |       if (header && header.data == null) {
129 |         if (offset + header.length <= totalSize) {
130 |           header.data = this.chunkSubstring(chunks, offset, offset+header.length);
131 |           header.toDataURL = this.__toDataURL;
132 |           offset += 512 * Math.ceil(header.length / 512);
133 |           if (this.onstream) 
134 |             this.onstream(header, this.gzip);
135 |         } else { // not loaded yet
136 |           break;
137 |         }
138 |       } else {
139 |         var s = this.chunkSubstring(chunks, offset, offset+512);
140 |         var header = this.parseTarHeader(s, 0);
141 |         if (header.length > 0 || header.filename != '') {
142 |           this.fileArray.push(header);
143 |           this.files[header.filename] = header;
144 |           offset += 512;
145 |           header.offset = offset;
146 |         } else { // empty header, stop processing
147 |           offset = totalSize;
148 |         }
149 |       }
150 |     }
151 |     this.parseTime += new Date() - t;
152 |     return offset;
153 |   },
154 |   
155 |   parseTarHeader : function(text, offset) {
156 |     var i = offset || 0;
157 |     var h = {};
158 |     h.filename = this.parseTarField(text, i, i+=100);
159 |     h.mode = this.parseTarNumber(text, i, i+=8);
160 |     h.uid = this.parseTarNumber(text, i, i+=8);
161 |     h.gid = this.parseTarNumber(text, i, i+=8);
162 |     h.length = this.parseTarNumber(text, i, i+=12);
163 |     h.lastModified = this.parseTarNumber(text, i, i+=12);
164 |     h.checkSum = this.parseTarField(text, i, i+=8);
165 |     h.fileType = this.parseTarField(text, i, i+=1);
166 |     h.linkName = this.parseTarField(text, i, i+=100);
167 |     h.ustar = this.parseTarField(text, i, i+=6);
168 |     h.ustarVersion = this.parseTarField(text, i, i+=2);
169 |     h.userName = this.parseTarField(text, i, i+=32);
170 |     h.groupName = this.parseTarField(text, i, i+=32);
171 |     h.deviceMajor = this.parseTarField(text, i, i+=8);
172 |     h.deviceMinor = this.parseTarField(text, i, i+=8);
173 |     h.filenamePrefix = this.parseTarField(text, i, i+=155);
174 |     return h;
175 |   },
176 | 
177 |   parseTarField : function(text, start, end) {
178 |     return text.substring(start, end).split("\0", 1)[0];
179 |   },
180 | 
181 |   parseTarNumber : function(text, start, end) {
182 |     var s = text.substring(start, end);
183 |     // if (s.charCodeAt(0) & 0x80 == 1) {
184 |     // GNU tar 8-byte binary big-endian number
185 |     // } else {
186 |       return parseInt('0'+s.replace(/[^\d]+/g, ''));
187 |     // }
188 |   },
189 | 
190 |   // extract substring from an array of strings
191 |   chunkSubstring : function (chunks, start, end) {
192 |     var soff=0, eoff=0, i=0, j=0;
193 |     for (i=0; i<chunks.length; i++) {
194 |       if (soff + chunks[i].length > start)
195 |         break;
196 |       soff += chunks[i].length;
197 |     }
198 |     var strs = [];
199 |     eoff = soff;
200 |     for (j=i; j<chunks.length; j++) {
201 |       strs.push(chunks[j]);
202 |       if (eoff + chunks[j].length > end)
203 |         break;
204 |       eoff += chunks[j].length;
205 |     }
206 |     var s = strs.join('');
207 |     return s.substring(start-soff, start-soff+(end-start));
208 |   },
209 | 
210 |   __toDataURL : function() {
211 |     if (this.data.substring(0,40).match(/^data:[^\/]+\/[^,]+,/)) {
212 |       return this.data;
213 |     } else if (Magi.Tar.prototype.cleanHighByte(this.data.substring(0,10)).match(/\377\330\377\340..JFIF/)) {
214 |       return 'data:image/jpeg;base64,'+btoa(Magi.Tar.prototype.cleanHighByte(this.data));
215 |     } else if (Magi.Tar.prototype.cleanHighByte(this.data.substring(0,6)) == "\211PNG\r\n") {
216 |       return 'data:image/png;base64,'+btoa(Magi.Tar.prototype.cleanHighByte(this.data));
217 |     } else if (Magi.Tar.prototype.cleanHighByte(this.data.substring(0,6)).match(/GIF8[79]a/)) {
218 |       return 'data:image/gif;base64,'+btoa(Magi.Tar.prototype.cleanHighByte(this.data));
219 |     } else {
220 |       throw("toDataURL: I don't know how to handle " + this.filename);
221 |     }
222 |   }
223 | }
224 | 
225 | 
226 | 


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