├── todo ├── .gitignore ├── images ├── 3dproj01.gif ├── Vertices.png ├── 8871-diffuse.jpg ├── 8871-normal.jpg ├── checker_large.gif ├── identity_matrix.png ├── normal_map_face.PNG ├── normal_map_tile.jpg ├── shader_vectors.gif ├── star_height128.jpg ├── FinalApacheTexture.png ├── apache_model_space.png ├── normal_map_circle.jpg ├── reflection_vector.gif ├── SRT_transformations.gif ├── SRT_transformations.png ├── heightmap_to_wireframe.gif ├── matrix_multiplication_x_axis_x.png ├── matrix_multiplication_x_axis_y.png └── matrix_multiplication_x_axis_start.png ├── lib ├── font │ ├── league_gothic-webfont.eot │ ├── league_gothic-webfont.ttf │ ├── league_gothic-webfont.woff │ └── league_gothic_license ├── js │ ├── html5shiv.js │ ├── three │ │ ├── shaders │ │ │ ├── BasicShader.js │ │ │ ├── CopyShader.js │ │ │ ├── LuminosityShader.js │ │ │ ├── ColorifyShader.js │ │ │ ├── ColorCorrectionShader.js │ │ │ ├── BlendShader.js │ │ │ ├── SepiaShader.js │ │ │ ├── UnpackDepthRGBAShader.js │ │ │ ├── DOFMipMapShader.js │ │ │ ├── NormalMapShader.js │ │ │ ├── BrightnessContrastShader.js │ │ │ ├── VignetteShader.js │ │ │ ├── BleachBypassShader.js │ │ │ ├── DotScreenShader.js │ │ │ ├── HueSaturationShader.js │ │ │ ├── VerticalBlurShader.js │ │ │ ├── HorizontalBlurShader.js │ │ │ ├── TriangleBlurShader.js │ │ │ ├── VerticalTiltShiftShader.js │ │ │ ├── HorizontalTiltShiftShader.js │ │ │ ├── ConvolutionShader.js │ │ │ ├── FocusShader.js │ │ │ ├── FilmShader.js │ │ │ ├── FXAAShader.js │ │ │ ├── BokehShader.js │ │ │ └── SSAOShader.js │ │ ├── TexturePass.js │ │ ├── ShaderPass.js │ │ ├── RenderPass.js │ │ ├── SavePass.js │ │ ├── DotScreenPass.js │ │ ├── FilmPass.js │ │ ├── MaskPass.js │ │ ├── EffectComposer.js │ │ └── BloomPass.js │ ├── data-markdown.js │ ├── classList.js │ ├── stats.js │ ├── head.min.js │ ├── jquery.hotkeys.js │ ├── webgl-utils.js │ └── swfobject.js └── css │ └── zenburn.css ├── js ├── youtube.js ├── stats_bootstrap.js ├── dat.gui.bootstrap.js ├── samples │ ├── plane.js │ ├── wireframe_plane.js │ ├── height_map_image.js │ ├── spinning_cube.js │ ├── spinning_textured_cube.js │ ├── spinning_wireframe_torus.js │ ├── spinning_wireframe_cube.js │ ├── lighted_spinning_cube.js │ ├── todo_lighted_spinning_cube.js │ ├── lighted_diffuse_sphere.js │ ├── lighted_ambient_sphere.js │ ├── lighted_spinning_textured_cube.js │ ├── lighted_specular_sphere.js │ ├── per_vertex_lighting.js │ ├── lighted_sphere.js │ ├── todo_lighted_spinning_textured_cube.js │ ├── lighted_textured_sphere.js │ ├── load_apache.js │ ├── load_startrek_enterprise.js │ ├── blur_post_process.js │ ├── particle_height_map.js │ ├── particle_height_map_vertex_texture.js │ ├── particles.js │ ├── render_to_texture.js │ ├── normal_mapped_plane.js │ ├── shadow_map.js │ ├── webgl_spinning_bland_cube.js │ ├── webgl_spinning_colored_cube.js │ └── webgl_spinning_wireframe_cube.js └── samples.js ├── package.json ├── LICENSE ├── plugin └── speakernotes │ ├── client.js │ ├── index.js │ └── notes.html └── css ├── custom.css ├── gh-fork-ribbon.ie.css ├── gh-fork-ribbon.css ├── print ├── pdf.css └── paper.css └── theme ├── simple.css ├── beige.css └── default.css /todo: -------------------------------------------------------------------------------- 1 | vertex textures 2 | 3 | animations 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .svn 3 | log/*.log 4 | tmp/** 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /images/3dproj01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/3dproj01.gif -------------------------------------------------------------------------------- /images/Vertices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/Vertices.png -------------------------------------------------------------------------------- /images/8871-diffuse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/8871-diffuse.jpg -------------------------------------------------------------------------------- /images/8871-normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/8871-normal.jpg -------------------------------------------------------------------------------- /images/checker_large.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/checker_large.gif -------------------------------------------------------------------------------- /images/identity_matrix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/identity_matrix.png -------------------------------------------------------------------------------- /images/normal_map_face.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/normal_map_face.PNG -------------------------------------------------------------------------------- /images/normal_map_tile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/normal_map_tile.jpg -------------------------------------------------------------------------------- /images/shader_vectors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/shader_vectors.gif -------------------------------------------------------------------------------- /images/star_height128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/star_height128.jpg -------------------------------------------------------------------------------- /images/FinalApacheTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/FinalApacheTexture.png -------------------------------------------------------------------------------- /images/apache_model_space.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/apache_model_space.png -------------------------------------------------------------------------------- /images/normal_map_circle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/normal_map_circle.jpg -------------------------------------------------------------------------------- /images/reflection_vector.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/reflection_vector.gif -------------------------------------------------------------------------------- /images/SRT_transformations.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/SRT_transformations.gif -------------------------------------------------------------------------------- /images/SRT_transformations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/SRT_transformations.png -------------------------------------------------------------------------------- /images/heightmap_to_wireframe.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/heightmap_to_wireframe.gif -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/lib/font/league_gothic-webfont.eot -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/lib/font/league_gothic-webfont.ttf -------------------------------------------------------------------------------- /lib/font/league_gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/lib/font/league_gothic-webfont.woff -------------------------------------------------------------------------------- /lib/font/league_gothic_license: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /images/matrix_multiplication_x_axis_x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/matrix_multiplication_x_axis_x.png -------------------------------------------------------------------------------- /images/matrix_multiplication_x_axis_y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/matrix_multiplication_x_axis_y.png -------------------------------------------------------------------------------- /images/matrix_multiplication_x_axis_start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dimroc/reveal.js-threejs/HEAD/images/matrix_multiplication_x_axis_start.png -------------------------------------------------------------------------------- /lib/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | document.createElement('header'); 2 | document.createElement('nav'); 3 | document.createElement('section'); 4 | document.createElement('article'); 5 | document.createElement('aside'); 6 | document.createElement('footer'); 7 | document.createElement('hgroup'); -------------------------------------------------------------------------------- /js/youtube.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $(".ytapiplayer").each(function(index, ytplayer) { 3 | ytplayer = $(ytplayer); 4 | var url = ytplayer.data('youtube-url'); 5 | var id = ytplayer.attr('id'); 6 | swfobject.embedSWF(url, id, "853", "505", "8", null, null); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Hakim El Hattab", 3 | "name": "reveal.js", 4 | "description": "HTML5 Slideware with Presenter Notes", 5 | "version": "1.5.0", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/hakimel/reveal.js.git" 9 | }, 10 | "engines": { 11 | "node": "~0.6.8" 12 | }, 13 | "dependencies": { 14 | "underscore" : "1.3.3", 15 | "express" : "2.5.9", 16 | "socket.io" : "0.9.6", 17 | "mustache" : "0.4.0" 18 | }, 19 | "devDependencies": {} 20 | } 21 | -------------------------------------------------------------------------------- /lib/js/three/shaders/BasicShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author mrdoob / http://www.mrdoob.com 3 | * 4 | * Simple test shader 5 | */ 6 | 7 | THREE.BasicShader = { 8 | 9 | uniforms: {}, 10 | 11 | vertexShader: [ 12 | 13 | "void main() {", 14 | 15 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 16 | 17 | "}" 18 | 19 | ].join("\n"), 20 | 21 | fragmentShader: [ 22 | 23 | "void main() {", 24 | 25 | "gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );", 26 | 27 | "}" 28 | 29 | ].join("\n") 30 | 31 | }; 32 | -------------------------------------------------------------------------------- /js/stats_bootstrap.js: -------------------------------------------------------------------------------- 1 | head.js("lib/js/stats.js", function() { 2 | var stats = new Stats(); 3 | stats.setMode(0); // 0: fps, 1: ms 4 | 5 | // Align top-left 6 | stats.domElement.style.position = 'absolute'; 7 | stats.domElement.style.zIndex = 100; 8 | 9 | stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa"; 10 | stats.domElement.children[ 0 ].style.background = "transparent"; 11 | stats.domElement.children[ 0 ].children[ 1 ].style.display = "none"; 12 | 13 | document.body.appendChild( stats.domElement ); 14 | window.stats = stats; 15 | 16 | setInterval( function () { 17 | stats.update(); 18 | }, 1000 / 60 ); 19 | }); 20 | -------------------------------------------------------------------------------- /lib/js/three/shaders/CopyShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Full-screen textured quad shader 5 | */ 6 | 7 | THREE.CopyShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "opacity": { type: "f", value: 1.0 } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 24 | 25 | "}" 26 | 27 | ].join("\n"), 28 | 29 | fragmentShader: [ 30 | 31 | "uniform float opacity;", 32 | 33 | "uniform sampler2D tDiffuse;", 34 | 35 | "varying vec2 vUv;", 36 | 37 | "void main() {", 38 | 39 | "vec4 texel = texture2D( tDiffuse, vUv );", 40 | "gl_FragColor = opacity * texel;", 41 | 42 | "}" 43 | 44 | ].join("\n") 45 | 46 | }; 47 | -------------------------------------------------------------------------------- /lib/js/three/shaders/LuminosityShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Luminosity 5 | * http://en.wikipedia.org/wiki/Luminosity 6 | */ 7 | 8 | THREE.LuminosityShader = { 9 | 10 | uniforms: { 11 | 12 | "tDiffuse": { type: "t", value: null } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | 24 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 25 | 26 | "}" 27 | 28 | ].join("\n"), 29 | 30 | fragmentShader: [ 31 | 32 | "uniform sampler2D tDiffuse;", 33 | 34 | "varying vec2 vUv;", 35 | 36 | "void main() {", 37 | 38 | "vec4 texel = texture2D( tDiffuse, vUv );", 39 | 40 | "vec3 luma = vec3( 0.299, 0.587, 0.114 );", 41 | 42 | "float v = dot( texel.xyz, luma );", 43 | 44 | "gl_FragColor = vec4( v, v, v, texel.w );", 45 | 46 | "}" 47 | 48 | ].join("\n") 49 | 50 | }; 51 | -------------------------------------------------------------------------------- /lib/js/data-markdown.js: -------------------------------------------------------------------------------- 1 | // From https://gist.github.com/1343518 2 | // Modified by Hakim to handle markdown indented with tabs 3 | (function(){ 4 | 5 | var slides = document.querySelectorAll('[data-markdown]'); 6 | 7 | for( var i = 0, len = slides.length; i < len; i++ ) { 8 | var elem = slides[i]; 9 | 10 | // strip leading whitespace so it isn't evaluated as code 11 | var text = elem.innerHTML; 12 | 13 | var leadingWs = text.match(/^\n?(\s*)/)[1].length, 14 | leadingTabs = text.match(/^\n?(\t*)/)[1].length; 15 | 16 | if( leadingTabs > 0 ) { 17 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); 18 | } 19 | else if( leadingWs > 1 ) { 20 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); 21 | } 22 | 23 | // here, have sum HTML 24 | elem.innerHTML = (new Showdown.converter()).makeHtml(text); 25 | } 26 | 27 | })(); -------------------------------------------------------------------------------- /lib/js/three/shaders/ColorifyShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Colorify shader 5 | */ 6 | 7 | THREE.ColorifyShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "color": { type: "c", value: new THREE.Color( 0xffffff ) } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 24 | 25 | "}" 26 | 27 | ].join("\n"), 28 | 29 | fragmentShader: [ 30 | 31 | "uniform vec3 color;", 32 | "uniform sampler2D tDiffuse;", 33 | 34 | "varying vec2 vUv;", 35 | 36 | "void main() {", 37 | 38 | "vec4 texel = texture2D( tDiffuse, vUv );", 39 | 40 | "vec3 luma = vec3( 0.299, 0.587, 0.114 );", 41 | "float v = dot( texel.xyz, luma );", 42 | 43 | "gl_FragColor = vec4( v * color, texel.w );", 44 | 45 | "}" 46 | 47 | ].join("\n") 48 | 49 | }; 50 | -------------------------------------------------------------------------------- /lib/js/three/shaders/ColorCorrectionShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Color correction 5 | */ 6 | 7 | THREE.ColorCorrectionShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "powRGB": { type: "v3", value: new THREE.Vector3( 2, 2, 2 ) }, 13 | "mulRGB": { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) } 14 | 15 | }, 16 | 17 | vertexShader: [ 18 | 19 | "varying vec2 vUv;", 20 | 21 | "void main() {", 22 | 23 | "vUv = uv;", 24 | 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform sampler2D tDiffuse;", 34 | "uniform vec3 powRGB;", 35 | "uniform vec3 mulRGB;", 36 | 37 | "varying vec2 vUv;", 38 | 39 | "void main() {", 40 | 41 | "gl_FragColor = texture2D( tDiffuse, vUv );", 42 | "gl_FragColor.rgb = mulRGB * pow( gl_FragColor.rgb, powRGB );", 43 | 44 | "}" 45 | 46 | ].join("\n") 47 | 48 | }; 49 | -------------------------------------------------------------------------------- /lib/js/three/TexturePass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.TexturePass = function ( texture, opacity ) { 6 | 7 | if ( THREE.CopyShader === undefined ) 8 | console.error( "THREE.TexturePass relies on THREE.CopyShader" ); 9 | 10 | var shader = THREE.CopyShader; 11 | 12 | this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 13 | 14 | this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0; 15 | this.uniforms[ "tDiffuse" ].value = texture; 16 | 17 | this.material = new THREE.ShaderMaterial( { 18 | 19 | uniforms: this.uniforms, 20 | vertexShader: shader.vertexShader, 21 | fragmentShader: shader.fragmentShader 22 | 23 | } ); 24 | 25 | this.enabled = true; 26 | this.needsSwap = false; 27 | 28 | }; 29 | 30 | THREE.TexturePass.prototype = { 31 | 32 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 33 | 34 | THREE.EffectComposer.quad.material = this.material; 35 | 36 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, readBuffer ); 37 | 38 | } 39 | 40 | }; 41 | -------------------------------------------------------------------------------- /lib/js/three/shaders/BlendShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Blend two textures 5 | */ 6 | 7 | THREE.BlendShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse1": { type: "t", value: null }, 12 | "tDiffuse2": { type: "t", value: null }, 13 | "mixRatio": { type: "f", value: 0.5 }, 14 | "opacity": { type: "f", value: 1.0 } 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform float opacity;", 34 | "uniform float mixRatio;", 35 | 36 | "uniform sampler2D tDiffuse1;", 37 | "uniform sampler2D tDiffuse2;", 38 | 39 | "varying vec2 vUv;", 40 | 41 | "void main() {", 42 | 43 | "vec4 texel1 = texture2D( tDiffuse1, vUv );", 44 | "vec4 texel2 = texture2D( tDiffuse2, vUv );", 45 | "gl_FragColor = opacity * mix( texel1, texel2, mixRatio );", 46 | 47 | "}" 48 | 49 | ].join("\n") 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /js/dat.gui.bootstrap.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | var gui = new dat.GUI(); 4 | var pauseController = gui.add(sample_defaults, "paused"); 5 | var wireframeController = gui.add(sample_defaults, "wireframe"); 6 | 7 | var normalController = gui.add( 8 | sample_defaults, 9 | "current_normal_map", 10 | sample_defaults.normal_maps); 11 | 12 | normalController.onFinishChange(function(value) { 13 | console.log("Changing normal map to " + value); 14 | samples.normal_mapped_plane.resetNormalMaps(); 15 | $("img.normal_map").prop("src", "images/" + value); 16 | }); 17 | 18 | gui.closed = true; 19 | 20 | // Listen to Shift + p to toggle pause. 21 | $(document).bind('keyup.shift_p', function() { 22 | sample_defaults.paused = !sample_defaults.paused; 23 | pauseController.setValue(sample_defaults.paused); 24 | }); 25 | 26 | // Listen to Shift + w to toggle wireframe for blender meshes. 27 | $(document).bind('keyup.shift_w', function() { 28 | sample_defaults.wireframe = !sample_defaults.wireframe; 29 | wireframeController.setValue(sample_defaults.wireframe); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /js/samples/plane.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.plane = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.z = 100; 10 | 11 | var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 ); 12 | var material = new THREE.MeshBasicMaterial( { wireframe: false, side: THREE.DoubleSide } ); 13 | 14 | var mesh = new THREE.Mesh( geometry, material ); 15 | scene.add( mesh ); 16 | 17 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); 18 | renderer.setSize( sample_defaults.width * 0.5, sample_defaults.height * 0.5 ); 19 | 20 | var instance = { active: false }; 21 | 22 | function animate() { 23 | requestAnimationFrame( animate, canvas ); 24 | if(!instance.active || sample_defaults.paused) return; 25 | 26 | mesh.rotation.y += 0.01; 27 | renderer.render( scene, camera ); 28 | } 29 | 30 | animate(); 31 | return instance; 32 | } 33 | }; 34 | })(); 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /js/samples/wireframe_plane.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.wireframe_plane = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.z = 100; 10 | 11 | var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 ); 12 | var material = new THREE.MeshLambertMaterial( { wireframe: true, side: THREE.DoubleSide } ); 13 | 14 | var mesh = new THREE.Mesh( geometry, material ); 15 | scene.add( mesh ); 16 | 17 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); 18 | renderer.setSize( sample_defaults.width * 0.5, sample_defaults.height * 0.5 ); 19 | 20 | var instance = { active: false }; 21 | function animate() { 22 | requestAnimationFrame( animate, canvas ); 23 | if(!instance.active || sample_defaults.paused) return; 24 | 25 | mesh.rotation.y += 0.01; 26 | renderer.render( scene, camera ); 27 | } 28 | 29 | animate(); 30 | return instance; 31 | } 32 | }; 33 | })(); 34 | -------------------------------------------------------------------------------- /plugin/speakernotes/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var socket = io.connect(window.location.origin); 6 | var socketId = Math.random().toString().slice(2); 7 | 8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId); 9 | 10 | Reveal.addEventListener( 'slidechanged', function( event ) { 11 | var nextindexh; 12 | var nextindexv; 13 | var slideElement = event.currentSlide; 14 | 15 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 16 | nextindexh = event.indexh; 17 | nextindexv = event.indexv + 1; 18 | } else { 19 | nextindexh = event.indexh + 1; 20 | nextindexv = 0; 21 | } 22 | 23 | var notes = slideElement.querySelector('aside.notes'); 24 | var slideData = { 25 | notes : notes ? notes.innerHTML : '', 26 | indexh : event.indexh, 27 | indexv : event.indexv, 28 | nextindexh : nextindexh, 29 | nextindexv : nextindexv, 30 | socketId : socketId 31 | }; 32 | 33 | socket.emit('slidechanged', slideData); 34 | } ); 35 | }()); 36 | -------------------------------------------------------------------------------- /js/samples/height_map_image.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function HeightMapCanvas() { 4 | var that = this; 5 | var eventEmitter = new EventEmitter(); 6 | var image = new Image(); 7 | 8 | this.addListener = function(event, listener) { 9 | return eventEmitter.addListener(event, listener); 10 | }; 11 | 12 | this.imageData = null; 13 | this.canvas = null; 14 | 15 | this.initialize = function(canvas) { 16 | that.canvas = canvas; 17 | var context = canvas.getContext('2d'); 18 | 19 | image.onload = function() { 20 | canvas.width = image.width; 21 | canvas.height = image.height; 22 | context.drawImage(image, 0, 0); 23 | 24 | that.imageData = context.getImageData(0, 0, image.width, image.height); 25 | eventEmitter.emitEvent("onload", [canvas]); 26 | }; 27 | 28 | image.src = "images/star_height128.jpg"; 29 | }; 30 | } 31 | 32 | window.samples.height_map_image = { 33 | initialize: function(canvas) { 34 | var heightMapCanvas = new HeightMapCanvas(); 35 | heightMapCanvas.initialize(canvas); 36 | 37 | return heightMapCanvas; 38 | } 39 | }; 40 | })(); 41 | -------------------------------------------------------------------------------- /js/samples/spinning_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.spinning_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.set(0, 3, 7); 10 | camera.lookAt( new THREE.Vector3(0,0,0)); 11 | 12 | var scale = 2.5; 13 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 14 | var material = new THREE.MeshBasicMaterial( { color: 0xdddddd } ); 15 | 16 | var mesh = new THREE.Mesh( geometry, material ); 17 | scene.add( mesh ); 18 | 19 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 20 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 21 | 22 | var instance = { active: false }; 23 | function animate() { 24 | requestAnimationFrame( animate, canvas ); 25 | if(!instance.active || sample_defaults.paused) return; 26 | 27 | mesh.rotation.y += 0.008; 28 | 29 | renderer.render( scene, camera ); 30 | } 31 | 32 | animate(); 33 | return instance; 34 | } 35 | }; 36 | })(); 37 | -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | .float_left { 2 | display: inline-block; 3 | float: left; 4 | text-align: center; 5 | } 6 | 7 | blockquote.small { 8 | font-size: 18px; 9 | line-height: 22px; 10 | } 11 | 12 | blockquote.medium { 13 | font-size: 28px; 14 | line-height: 36px; 15 | } 16 | 17 | .small { 18 | font-size: 15px; 19 | line-height:18px; 20 | } 21 | 22 | .medium { 23 | font-size: 20px; 24 | line-height: 22px; 25 | } 26 | 27 | pre.code { 28 | width: 100%; 29 | font-size: 15px; 30 | line-height:18px; 31 | } 32 | 33 | .supersmall { 34 | font-size: 9px !important; 35 | line-height:9px !important; 36 | } 37 | 38 | pre.medium { 39 | font-size: 21px; 40 | line-height: 24px; 41 | width: 100%; 42 | } 43 | 44 | pre.math { 45 | font-size:24px; 46 | width:100%; 47 | background: white; 48 | color: black; 49 | } 50 | 51 | .loaded_enterprise .state-background { 52 | /* background: rgba( 0, 0, 0, 0.6 ); */ 53 | } 54 | 55 | .loaded_apache .state-background { 56 | /* background: rgba( 0, 0, 0, 0.6 ); */ 57 | } 58 | 59 | .boom .state-background { 60 | /* background: rgba( 0, 0, 0, 0.6 ); */ 61 | } 62 | 63 | .white_bg { 64 | background: white !important; 65 | } 66 | 67 | .github-fork-ribbon { 68 | line-height: 9px; 69 | } 70 | -------------------------------------------------------------------------------- /lib/js/three/ShaderPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.ShaderPass = function ( shader, textureID ) { 6 | 7 | this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse"; 8 | 9 | this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 10 | 11 | this.material = new THREE.ShaderMaterial( { 12 | 13 | uniforms: this.uniforms, 14 | vertexShader: shader.vertexShader, 15 | fragmentShader: shader.fragmentShader 16 | 17 | } ); 18 | 19 | this.renderToScreen = false; 20 | 21 | this.enabled = true; 22 | this.needsSwap = true; 23 | this.clear = false; 24 | 25 | }; 26 | 27 | THREE.ShaderPass.prototype = { 28 | 29 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 30 | 31 | if ( this.uniforms[ this.textureID ] ) { 32 | 33 | this.uniforms[ this.textureID ].value = readBuffer; 34 | 35 | } 36 | 37 | THREE.EffectComposer.quad.material = this.material; 38 | 39 | if ( this.renderToScreen ) { 40 | 41 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera ); 42 | 43 | } else { 44 | 45 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, this.clear ); 46 | 47 | } 48 | 49 | } 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /js/samples/spinning_textured_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.spinning_textured_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.z = 100; 10 | 11 | var texture = THREE.ImageUtils.loadTexture('images/checker_large.gif', {}, function() { 12 | animate(); 13 | }); 14 | 15 | var geometry = new THREE.CubeGeometry( 70, 70, 70 ); 16 | var material = new THREE.MeshBasicMaterial( { map: texture } ); 17 | var mesh = new THREE.Mesh( geometry, material ); 18 | scene.add( mesh ); 19 | 20 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); 21 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 22 | 23 | var instance = { active: false }; 24 | function animate() { 25 | requestAnimationFrame( animate, canvas ); 26 | if(!instance.active || sample_defaults.paused) return; 27 | 28 | mesh.rotation.x += 0.01; 29 | mesh.rotation.y += 0.02; 30 | 31 | renderer.render( scene, camera ); 32 | } 33 | 34 | return instance; 35 | } 36 | }; 37 | })(); 38 | -------------------------------------------------------------------------------- /lib/js/three/shaders/SepiaShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Sepia tone shader 5 | * based on glfx.js sepia shader 6 | * https://github.com/evanw/glfx.js 7 | */ 8 | 9 | THREE.SepiaShader = { 10 | 11 | uniforms: { 12 | 13 | "tDiffuse": { type: "t", value: null }, 14 | "amount": { type: "f", value: 1.0 } 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform float amount;", 34 | 35 | "uniform sampler2D tDiffuse;", 36 | 37 | "varying vec2 vUv;", 38 | 39 | "void main() {", 40 | 41 | "vec4 color = texture2D( tDiffuse, vUv );", 42 | "vec3 c = color.rgb;", 43 | 44 | "color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );", 45 | "color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );", 46 | "color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );", 47 | 48 | "gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );", 49 | 50 | "}" 51 | 52 | ].join("\n") 53 | 54 | }; 55 | -------------------------------------------------------------------------------- /lib/js/three/shaders/UnpackDepthRGBAShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Unpack RGBA depth shader 5 | * - show RGBA encoded depth as monochrome color 6 | */ 7 | 8 | THREE.UnpackDepthRGBAShader = { 9 | 10 | uniforms: { 11 | 12 | "tDiffuse": { type: "t", value: null }, 13 | "opacity": { type: "f", value: 1.0 } 14 | 15 | }, 16 | 17 | vertexShader: [ 18 | 19 | "varying vec2 vUv;", 20 | 21 | "void main() {", 22 | 23 | "vUv = uv;", 24 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 25 | 26 | "}" 27 | 28 | ].join("\n"), 29 | 30 | fragmentShader: [ 31 | 32 | "uniform float opacity;", 33 | 34 | "uniform sampler2D tDiffuse;", 35 | 36 | "varying vec2 vUv;", 37 | 38 | // RGBA depth 39 | 40 | "float unpackDepth( const in vec4 rgba_depth ) {", 41 | 42 | "const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );", 43 | "float depth = dot( rgba_depth, bit_shift );", 44 | "return depth;", 45 | 46 | "}", 47 | 48 | "void main() {", 49 | 50 | "float depth = 1.0 - unpackDepth( texture2D( tDiffuse, vUv ) );", 51 | "gl_FragColor = opacity * vec4( vec3( depth ), 1.0 );", 52 | 53 | "}" 54 | 55 | ].join("\n") 56 | 57 | }; 58 | -------------------------------------------------------------------------------- /lib/js/three/RenderPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) { 6 | 7 | this.scene = scene; 8 | this.camera = camera; 9 | 10 | this.overrideMaterial = overrideMaterial; 11 | 12 | this.clearColor = clearColor; 13 | this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1; 14 | 15 | this.oldClearColor = new THREE.Color(); 16 | this.oldClearAlpha = 1; 17 | 18 | this.enabled = true; 19 | this.clear = true; 20 | this.needsSwap = false; 21 | 22 | }; 23 | 24 | THREE.RenderPass.prototype = { 25 | 26 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 27 | 28 | this.scene.overrideMaterial = this.overrideMaterial; 29 | 30 | if ( this.clearColor ) { 31 | 32 | this.oldClearColor.copy( renderer.getClearColor() ); 33 | this.oldClearAlpha = renderer.getClearAlpha(); 34 | 35 | renderer.setClearColor( this.clearColor, this.clearAlpha ); 36 | 37 | } 38 | 39 | renderer.render( this.scene, this.camera, readBuffer, this.clear ); 40 | 41 | if ( this.clearColor ) { 42 | 43 | renderer.setClearColor( this.oldClearColor, this.oldClearAlpha ); 44 | 45 | } 46 | 47 | this.scene.overrideMaterial = null; 48 | 49 | } 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /lib/js/three/shaders/DOFMipMapShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Depth-of-field shader using mipmaps 5 | * - from Matt Handley @applmak 6 | * - requires power-of-2 sized render target with enabled mipmaps 7 | */ 8 | 9 | THREE.DOFMipMapShader = { 10 | 11 | uniforms: { 12 | 13 | "tColor": { type: "t", value: null }, 14 | "tDepth": { type: "t", value: null }, 15 | "focus": { type: "f", value: 1.0 }, 16 | "maxblur": { type: "f", value: 1.0 } 17 | 18 | }, 19 | 20 | vertexShader: [ 21 | 22 | "varying vec2 vUv;", 23 | 24 | "void main() {", 25 | 26 | "vUv = uv;", 27 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 28 | 29 | "}" 30 | 31 | ].join("\n"), 32 | 33 | fragmentShader: [ 34 | 35 | "uniform float focus;", 36 | "uniform float maxblur;", 37 | 38 | "uniform sampler2D tColor;", 39 | "uniform sampler2D tDepth;", 40 | 41 | "varying vec2 vUv;", 42 | 43 | "void main() {", 44 | 45 | "vec4 depth = texture2D( tDepth, vUv );", 46 | 47 | "float factor = depth.x - focus;", 48 | 49 | "vec4 col = texture2D( tColor, vUv, 2.0 * maxblur * abs( focus - depth.x ) );", 50 | 51 | "gl_FragColor = col;", 52 | "gl_FragColor.a = 1.0;", 53 | 54 | "}" 55 | 56 | ].join("\n") 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /lib/js/three/shaders/NormalMapShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Normal map shader 5 | * - compute normals from heightmap 6 | */ 7 | 8 | THREE.NormalMapShader = { 9 | 10 | uniforms: { 11 | 12 | "heightMap": { type: "t", value: null }, 13 | "resolution": { type: "v2", value: new THREE.Vector2( 512, 512 ) }, 14 | "scale": { type: "v2", value: new THREE.Vector2( 1, 1 ) }, 15 | "height": { type: "f", value: 0.05 } 16 | 17 | }, 18 | 19 | vertexShader: [ 20 | 21 | "varying vec2 vUv;", 22 | 23 | "void main() {", 24 | 25 | "vUv = uv;", 26 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 27 | 28 | "}" 29 | 30 | ].join("\n"), 31 | 32 | fragmentShader: [ 33 | 34 | "uniform float height;", 35 | "uniform vec2 resolution;", 36 | "uniform sampler2D heightMap;", 37 | 38 | "varying vec2 vUv;", 39 | 40 | "void main() {", 41 | 42 | "float val = texture2D( heightMap, vUv ).x;", 43 | 44 | "float valU = texture2D( heightMap, vUv + vec2( 1.0 / resolution.x, 0.0 ) ).x;", 45 | "float valV = texture2D( heightMap, vUv + vec2( 0.0, 1.0 / resolution.y ) ).x;", 46 | 47 | "gl_FragColor = vec4( ( 0.5 * normalize( vec3( val - valU, val - valV, height ) ) + 0.5 ), 1.0 );", 48 | 49 | "}" 50 | 51 | ].join("\n") 52 | 53 | }; 54 | -------------------------------------------------------------------------------- /js/samples/spinning_wireframe_torus.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width = sample_defaults.width * 2; 4 | var height = sample_defaults.height * 2; 5 | 6 | window.samples.spinning_wireframe_torus = { 7 | 8 | initialize: function(canvas, options) { 9 | var scene = new THREE.Scene(); 10 | 11 | var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 5000 ); 12 | camera.position.z = 100; 13 | 14 | var geometry = new THREE.TorusGeometry( 15, 15, 30, 30 ); 15 | var material = new THREE.MeshLambertMaterial( { color: 0xdddddd, wireframe: true } ); 16 | 17 | var mesh = new THREE.Mesh( geometry, material ); 18 | mesh.position.y = 35; 19 | scene.add( mesh ); 20 | 21 | var axisHelper = new THREE.AxisHelper(50); 22 | scene.add( axisHelper ); 23 | 24 | var renderer = new THREE.WebGLRenderer({"canvas": canvas}); 25 | renderer.setSize( width, height ); 26 | 27 | var instance = { active: false }; 28 | function animate() { 29 | requestAnimationFrame( animate, canvas ); 30 | if(!instance.active || sample_defaults.paused) return; 31 | 32 | mesh.rotation.x += 0.01; 33 | mesh.rotation.y += 0.02; 34 | 35 | renderer.render( scene, camera ); 36 | } 37 | 38 | animate(); 39 | return instance; 40 | } 41 | }; 42 | })(); 43 | 44 | -------------------------------------------------------------------------------- /js/samples/spinning_wireframe_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.spinning_wireframe_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.set(0, 3, 7); 10 | camera.lookAt( new THREE.Vector3(0,0,0)); 11 | 12 | var scale = 2.5; 13 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 14 | var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 3 } ); 15 | 16 | var mesh = new THREE.Mesh( geometry, material ); 17 | scene.add( mesh ); 18 | 19 | var axisHelper = new THREE.AxisHelper(50); 20 | scene.add( axisHelper ); 21 | 22 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 23 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 24 | 25 | var instance = { active: false }; 26 | function animate() { 27 | requestAnimationFrame( animate, canvas ); 28 | if(!instance.active || sample_defaults.paused) return; 29 | 30 | mesh.rotation.y += 0.008; 31 | 32 | renderer.render( scene, camera ); 33 | } 34 | 35 | animate(); 36 | return instance; 37 | } 38 | }; 39 | })(); 40 | -------------------------------------------------------------------------------- /lib/js/three/shaders/BrightnessContrastShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author tapio / http://tapio.github.com/ 3 | * 4 | * Brightness and contrast adjustment 5 | * https://github.com/evanw/glfx.js 6 | * brightness: -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white) 7 | * contrast: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast) 8 | */ 9 | 10 | THREE.BrightnessContrastShader = { 11 | 12 | uniforms: { 13 | 14 | "tDiffuse": { type: "t", value: null }, 15 | "brightness": { type: "f", value: 0 }, 16 | "contrast": { type: "f", value: 0 } 17 | 18 | }, 19 | 20 | vertexShader: [ 21 | 22 | "varying vec2 vUv;", 23 | 24 | "void main() {", 25 | 26 | "vUv = uv;", 27 | 28 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 29 | 30 | "}" 31 | 32 | ].join("\n"), 33 | 34 | fragmentShader: [ 35 | 36 | "uniform sampler2D tDiffuse;", 37 | "uniform float brightness;", 38 | "uniform float contrast;", 39 | 40 | "varying vec2 vUv;", 41 | 42 | "void main() {", 43 | 44 | "gl_FragColor = texture2D( tDiffuse, vUv );", 45 | 46 | "gl_FragColor.rgb += brightness;", 47 | 48 | "if (contrast > 0.0) {", 49 | "gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) / (1.0 - contrast) + 0.5;", 50 | "} else {", 51 | "gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;", 52 | "}", 53 | 54 | "}" 55 | 56 | ].join("\n") 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /js/samples/lighted_spinning_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.lighted_spinning_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.z = 7; 10 | camera.position.y = 3; 11 | camera.lookAt( new THREE.Vector3(0,0,0)); 12 | 13 | var scale = 2.5; 14 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 15 | var material = new THREE.MeshPhongMaterial({ color: 0xdddddd, antialias:true }); 16 | var mesh = new THREE.Mesh( geometry, material ); 17 | scene.add( mesh ); 18 | 19 | var directionalLight = new THREE.DirectionalLight ( 0xffffffff ); 20 | directionalLight.position.set( 0, 3, 7); 21 | scene.add( directionalLight ); 22 | 23 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 24 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 25 | 26 | var instance = { active: false }; 27 | function animate() { 28 | requestAnimationFrame( animate, canvas ); 29 | if(!instance.active || sample_defaults.paused) return; 30 | 31 | mesh.rotation.y += 0.008; 32 | 33 | renderer.render( scene, camera ); 34 | } 35 | 36 | animate(); 37 | return instance; 38 | } 39 | }; 40 | })(); 41 | -------------------------------------------------------------------------------- /js/samples/todo_lighted_spinning_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.todo_lighted_spinning_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.set(0, 3, 7); 10 | camera.lookAt( new THREE.Vector3(0,0,0)); 11 | 12 | var scale = 2.5; 13 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 14 | var material = new THREE.MeshPhongMaterial({ color: 0xdddddd }); 15 | 16 | var mesh = new THREE.Mesh( geometry, material ); 17 | scene.add( mesh ); 18 | 19 | // ASSIGNMENT 20 | 21 | var directionalLight = new THREE.DirectionalLight ( 0xffffffff ); 22 | directionalLight.position.set(0, 3, 7); 23 | scene.add( directionalLight ); 24 | // ASSIGNMENT 25 | 26 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 27 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 28 | 29 | var instance = { active: false }; 30 | function animate() { 31 | requestAnimationFrame( animate, canvas ); 32 | if(!instance.active || sample_defaults.paused) return; 33 | 34 | mesh.rotation.y += 0.008; 35 | 36 | renderer.render( scene, camera ); 37 | } 38 | 39 | animate(); 40 | return instance; 41 | } 42 | }; 43 | })(); 44 | -------------------------------------------------------------------------------- /js/samples/lighted_diffuse_sphere.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height; 4 | width = height = 300; 5 | 6 | window.samples.lighted_diffuse_sphere = { 7 | 8 | initialize: function(canvas) { 9 | var scene = new THREE.Scene(); 10 | 11 | var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 1000 ); 12 | camera.position.z = 100; 13 | 14 | var geometry = new THREE.SphereGeometry( 50, 30, 30 ); 15 | var material = new THREE.MeshLambertMaterial( ); 16 | 17 | var mesh = new THREE.Mesh( geometry, material ); 18 | scene.add( mesh ); 19 | 20 | var spotLight = new THREE.SpotLight ( 0xffffffff ); 21 | spotLight.position.set( 0, 100, 0 ); 22 | scene.add( spotLight ); 23 | 24 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); 25 | renderer.setSize( width, height); 26 | 27 | var instance = { active: false }; 28 | function animate() { 29 | requestAnimationFrame( animate, canvas ); 30 | mesh.material.wireframe = sample_defaults.wireframe; 31 | if(!instance.active || sample_defaults.paused) return; 32 | 33 | // Rotate lighting around the X axis. 34 | var angle = 0.01; 35 | var matrix = new THREE.Matrix4().makeRotationX( angle ); 36 | 37 | spotLight.position = spotLight.position.applyMatrix4(matrix); 38 | renderer.render( scene, camera ); 39 | } 40 | 41 | animate(); 42 | return instance; 43 | } 44 | }; 45 | })(); 46 | -------------------------------------------------------------------------------- /js/samples/lighted_ambient_sphere.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height; 4 | width = height = 300; 5 | 6 | window.samples.lighted_ambient_sphere = { 7 | 8 | initialize: function(canvas) { 9 | var scene = new THREE.Scene(); 10 | 11 | var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 1000 ); 12 | camera.position.z = 100; 13 | 14 | var geometry = new THREE.SphereGeometry( 50, 30, 30 ); 15 | var material = new THREE.MeshBasicMaterial( { color: 0x99999999 } ); 16 | 17 | var mesh = new THREE.Mesh( geometry, material ); 18 | scene.add( mesh ); 19 | 20 | var spotLight = new THREE.SpotLight ( 0xffffffff ); 21 | spotLight.position.set( 0, 100, 0 ); 22 | scene.add( spotLight ); 23 | 24 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); 25 | renderer.setSize( width, height); 26 | 27 | var instance = { active: false }; 28 | function animate() { 29 | requestAnimationFrame( animate, canvas ); 30 | mesh.material.wireframe = sample_defaults.wireframe; 31 | if(!instance.active || sample_defaults.paused) return; 32 | 33 | // Rotate lighting around the X axis. 34 | var angle = 0.01; 35 | var matrix = new THREE.Matrix4().makeRotationX( angle ); 36 | 37 | spotLight.position = spotLight.position.applyMatrix4(matrix); 38 | renderer.render( scene, camera ); 39 | } 40 | 41 | animate(); 42 | return instance; 43 | } 44 | }; 45 | })(); 46 | -------------------------------------------------------------------------------- /lib/js/three/SavePass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.SavePass = function ( renderTarget ) { 6 | 7 | if ( THREE.CopyShader === undefined ) 8 | console.error( "THREE.SavePass relies on THREE.CopyShader" ); 9 | 10 | var shader = THREE.CopyShader; 11 | 12 | this.textureID = "tDiffuse"; 13 | 14 | this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 15 | 16 | this.material = new THREE.ShaderMaterial( { 17 | 18 | uniforms: this.uniforms, 19 | vertexShader: shader.vertexShader, 20 | fragmentShader: shader.fragmentShader 21 | 22 | } ); 23 | 24 | this.renderTarget = renderTarget; 25 | 26 | if ( this.renderTarget === undefined ) { 27 | 28 | this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false }; 29 | this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters ); 30 | 31 | } 32 | 33 | this.enabled = true; 34 | this.needsSwap = false; 35 | this.clear = false; 36 | 37 | }; 38 | 39 | THREE.SavePass.prototype = { 40 | 41 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 42 | 43 | if ( this.uniforms[ this.textureID ] ) { 44 | 45 | this.uniforms[ this.textureID ].value = readBuffer; 46 | 47 | } 48 | 49 | THREE.EffectComposer.quad.material = this.material; 50 | 51 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTarget, this.clear ); 52 | 53 | } 54 | 55 | }; 56 | -------------------------------------------------------------------------------- /js/samples/lighted_spinning_textured_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.lighted_spinning_textured_cube = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.set(0, 3, 7); 10 | camera.lookAt( new THREE.Vector3(0,0,0)); 11 | 12 | var texture = THREE.ImageUtils.loadTexture('images/checker_large.gif', {}, function() { 13 | animate(); 14 | }); 15 | 16 | var scale = 2.5; 17 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 18 | var material = new THREE.MeshPhongMaterial( { map: texture, antialias: true } ); 19 | 20 | var mesh = new THREE.Mesh( geometry, material ); 21 | scene.add( mesh ); 22 | 23 | var directionalLight = new THREE.DirectionalLight ( 0xffffffff ); 24 | directionalLight.position.set( 0, 3, 7); 25 | scene.add( directionalLight ); 26 | 27 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 28 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 29 | 30 | var instance = { active: false }; 31 | function animate() { 32 | requestAnimationFrame( animate, canvas ); 33 | if(!instance.active || sample_defaults.paused) return; 34 | 35 | mesh.rotation.y += 0.008; 36 | 37 | renderer.render( scene, camera ); 38 | } 39 | 40 | return instance; 41 | } 42 | }; 43 | })(); 44 | -------------------------------------------------------------------------------- /lib/js/three/DotScreenPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.DotScreenPass = function ( center, angle, scale ) { 6 | 7 | if ( THREE.DotScreenShader === undefined ) 8 | console.error( "THREE.DotScreenPass relies on THREE.DotScreenShader" ); 9 | 10 | var shader = THREE.DotScreenShader; 11 | 12 | this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 13 | 14 | if ( center !== undefined ) this.uniforms[ "center" ].value.copy( center ); 15 | if ( angle !== undefined ) this.uniforms[ "angle"].value = angle; 16 | if ( scale !== undefined ) this.uniforms[ "scale"].value = scale; 17 | 18 | this.material = new THREE.ShaderMaterial( { 19 | 20 | uniforms: this.uniforms, 21 | vertexShader: shader.vertexShader, 22 | fragmentShader: shader.fragmentShader 23 | 24 | } ); 25 | 26 | this.enabled = true; 27 | this.renderToScreen = false; 28 | this.needsSwap = true; 29 | 30 | }; 31 | 32 | THREE.DotScreenPass.prototype = { 33 | 34 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 35 | 36 | this.uniforms[ "tDiffuse" ].value = readBuffer; 37 | this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height ); 38 | 39 | THREE.EffectComposer.quad.material = this.material; 40 | 41 | if ( this.renderToScreen ) { 42 | 43 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera ); 44 | 45 | } else { 46 | 47 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, false ); 48 | 49 | } 50 | 51 | } 52 | 53 | }; 54 | -------------------------------------------------------------------------------- /lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p 0.0) {", 60 | "gl_FragColor.rgb += (average - gl_FragColor.rgb) * (1.0 - 1.0 / (1.001 - saturation));", 61 | "} else {", 62 | "gl_FragColor.rgb += (average - gl_FragColor.rgb) * (-saturation);", 63 | "}", 64 | 65 | "}" 66 | 67 | ].join("\n") 68 | 69 | }; 70 | -------------------------------------------------------------------------------- /js/samples/load_apache.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function Apache() { 4 | var scene = null; 5 | var camera = null; 6 | var renderer = null; 7 | var mesh = null; 8 | 9 | function createDirectionalLight(options) { 10 | var directionalLight; 11 | directionalLight = new THREE.DirectionalLight(0xffffff, 1.1); 12 | directionalLight.position.set(options.position.x, options.position.y, options.position.z); 13 | return directionalLight; 14 | } 15 | 16 | this.initialize = function(canvas) { 17 | scene = new THREE.Scene(); 18 | 19 | camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 20 | camera.position.z = 100; 21 | 22 | scene.add(createDirectionalLight({ position: camera.position })); 23 | 24 | renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 25 | renderer.setSize( sample_defaults.width * 2, sample_defaults.height * 2); 26 | 27 | var instance = { active: false }; 28 | 29 | function animate() { 30 | requestAnimationFrame( animate ); 31 | if(instance.active && !sample_defaults.paused) { 32 | mesh.rotation.y += 0.01; 33 | } 34 | 35 | mesh.material.wireframe = sample_defaults.wireframe; 36 | renderer.render( scene, camera ); 37 | } 38 | 39 | var loader = new THREE.JSONLoader(); 40 | loader.load("js/meshes/LP_Apache.js", function(geometry, materials) { 41 | mesh = new THREE.Mesh( geometry, materials[0] ); 42 | mesh.scale = new THREE.Vector3(15, 15, 15); 43 | scene.add( mesh ); 44 | 45 | animate(); 46 | }, "images"); 47 | 48 | return instance; 49 | }; 50 | } 51 | 52 | window.samples.load_apache = { 53 | initialize: function(canvas) { 54 | var apache = new Apache(); 55 | return apache.initialize(canvas); 56 | } 57 | }; 58 | })(); 59 | 60 | -------------------------------------------------------------------------------- /lib/js/three/shaders/VerticalBlurShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author zz85 / http://www.lab4games.net/zz85/blog 3 | * 4 | * Two pass Gaussian blur filter (horizontal and vertical blur shaders) 5 | * - described in http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/ 6 | * and used in http://www.cake23.de/traveling-wavefronts-lit-up.html 7 | * 8 | * - 9 samples per pass 9 | * - standard deviation 2.7 10 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height" 11 | */ 12 | 13 | THREE.VerticalBlurShader = { 14 | 15 | uniforms: { 16 | 17 | "tDiffuse": { type: "t", value: null }, 18 | "v": { type: "f", value: 1.0 / 512.0 } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "uniform sampler2D tDiffuse;", 38 | "uniform float v;", 39 | 40 | "varying vec2 vUv;", 41 | 42 | "void main() {", 43 | 44 | "vec4 sum = vec4( 0.0 );", 45 | 46 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 4.0 * v ) ) * 0.051;", 47 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.0 * v ) ) * 0.0918;", 48 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 2.0 * v ) ) * 0.12245;", 49 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.0 * v ) ) * 0.1531;", 50 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;", 51 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.0 * v ) ) * 0.1531;", 52 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 2.0 * v ) ) * 0.12245;", 53 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.0 * v ) ) * 0.0918;", 54 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * v ) ) * 0.051;", 55 | 56 | "gl_FragColor = sum;", 57 | 58 | "}" 59 | 60 | ].join("\n") 61 | 62 | }; 63 | -------------------------------------------------------------------------------- /lib/js/three/shaders/HorizontalBlurShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author zz85 / http://www.lab4games.net/zz85/blog 3 | * 4 | * Two pass Gaussian blur filter (horizontal and vertical blur shaders) 5 | * - described in http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/ 6 | * and used in http://www.cake23.de/traveling-wavefronts-lit-up.html 7 | * 8 | * - 9 samples per pass 9 | * - standard deviation 2.7 10 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height" 11 | */ 12 | 13 | THREE.HorizontalBlurShader = { 14 | 15 | uniforms: { 16 | 17 | "tDiffuse": { type: "t", value: null }, 18 | "h": { type: "f", value: 1.0 / 512.0 } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "uniform sampler2D tDiffuse;", 38 | "uniform float h;", 39 | 40 | "varying vec2 vUv;", 41 | 42 | "void main() {", 43 | 44 | "vec4 sum = vec4( 0.0 );", 45 | 46 | "sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * 0.051;", 47 | "sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * 0.0918;", 48 | "sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * 0.12245;", 49 | "sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * 0.1531;", 50 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;", 51 | "sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * 0.1531;", 52 | "sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * 0.12245;", 53 | "sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * 0.0918;", 54 | "sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;", 55 | 56 | "gl_FragColor = sum;", 57 | 58 | "}" 59 | 60 | ].join("\n") 61 | 62 | }; 63 | -------------------------------------------------------------------------------- /lib/js/three/shaders/TriangleBlurShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author zz85 / http://www.lab4games.net/zz85/blog 3 | * 4 | * Triangle blur shader 5 | * based on glfx.js triangle blur shader 6 | * https://github.com/evanw/glfx.js 7 | * 8 | * A basic blur filter, which convolves the image with a 9 | * pyramid filter. The pyramid filter is separable and is applied as two 10 | * perpendicular triangle filters. 11 | */ 12 | 13 | THREE.TriangleBlurShader = { 14 | 15 | uniforms : { 16 | 17 | "texture": { type: "t", value: null }, 18 | "delta": { type: "v2", value:new THREE.Vector2( 1, 1 ) } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "#define ITERATIONS 10.0", 38 | 39 | "uniform sampler2D texture;", 40 | "uniform vec2 delta;", 41 | 42 | "varying vec2 vUv;", 43 | 44 | "float random( vec3 scale, float seed ) {", 45 | 46 | // use the fragment position for a different seed per-pixel 47 | 48 | "return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed );", 49 | 50 | "}", 51 | 52 | "void main() {", 53 | 54 | "vec4 color = vec4( 0.0 );", 55 | 56 | "float total = 0.0;", 57 | 58 | // randomize the lookup values to hide the fixed number of samples 59 | 60 | "float offset = random( vec3( 12.9898, 78.233, 151.7182 ), 0.0 );", 61 | 62 | "for ( float t = -ITERATIONS; t <= ITERATIONS; t ++ ) {", 63 | 64 | "float percent = ( t + offset - 0.5 ) / ITERATIONS;", 65 | "float weight = 1.0 - abs( percent );", 66 | 67 | "color += texture2D( texture, vUv + delta * percent ) * weight;", 68 | "total += weight;", 69 | 70 | "}", 71 | 72 | "gl_FragColor = color / total;", 73 | 74 | "}" 75 | 76 | ].join("\n") 77 | 78 | }; 79 | -------------------------------------------------------------------------------- /js/samples/load_startrek_enterprise.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function StartrekEnterprise() { 4 | var scene = null; 5 | var camera = null; 6 | var renderer = null; 7 | var mesh = null; 8 | 9 | function createDirectionalLight(options) { 10 | var directionalLight; 11 | directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); 12 | directionalLight.position.set(options.position.x, options.position.y, options.position.z); 13 | return directionalLight; 14 | } 15 | 16 | this.initialize = function(canvas) { 17 | scene = new THREE.Scene(); 18 | 19 | camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 20 | camera.position.z = 100; 21 | 22 | scene.add(createDirectionalLight({ position: camera.position })); 23 | 24 | renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 25 | renderer.setSize( sample_defaults.width * 3, sample_defaults.height * 3); 26 | 27 | var instance = { active: false }; 28 | function animate() { 29 | requestAnimationFrame( animate ); 30 | if(!sample_defaults.paused && instance.active) { 31 | mesh.rotation.y += 0.01; 32 | } 33 | 34 | mesh.material.wireframe = sample_defaults.wireframe; 35 | renderer.render( scene, camera ); 36 | } 37 | 38 | var loader = new THREE.JSONLoader(); 39 | loader.load("js/meshes/Startrek_Enterprise.js", function(geometry, materials) { 40 | mesh = new THREE.Mesh( geometry, materials[0] ); 41 | mesh.scale = new THREE.Vector3(20, 20, 20); 42 | scene.add( mesh ); 43 | 44 | animate(); 45 | }); 46 | 47 | return instance; 48 | }; 49 | } 50 | 51 | window.samples.load_startrek_enterprise = { 52 | initialize: function(canvas) { 53 | var startrek = new StartrekEnterprise(); 54 | return startrek.initialize(canvas); 55 | } 56 | }; 57 | })(); 58 | -------------------------------------------------------------------------------- /lib/js/three/shaders/VerticalTiltShiftShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position 5 | * 6 | * - 9 samples per pass 7 | * - standard deviation 2.7 8 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height" 9 | * - "r" parameter control where "focused" horizontal line lies 10 | */ 11 | 12 | THREE.VerticalTiltShiftShader = { 13 | 14 | uniforms: { 15 | 16 | "tDiffuse": { type: "t", value: null }, 17 | "v": { type: "f", value: 1.0 / 512.0 }, 18 | "r": { type: "f", value: 0.35 } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "uniform sampler2D tDiffuse;", 38 | "uniform float v;", 39 | "uniform float r;", 40 | 41 | "varying vec2 vUv;", 42 | 43 | "void main() {", 44 | 45 | "vec4 sum = vec4( 0.0 );", 46 | 47 | "float vv = v * abs( r - vUv.y );", 48 | 49 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 4.0 * vv ) ) * 0.051;", 50 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.0 * vv ) ) * 0.0918;", 51 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 2.0 * vv ) ) * 0.12245;", 52 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.0 * vv ) ) * 0.1531;", 53 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;", 54 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.0 * vv ) ) * 0.1531;", 55 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 2.0 * vv ) ) * 0.12245;", 56 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.0 * vv ) ) * 0.0918;", 57 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * vv ) ) * 0.051;", 58 | 59 | "gl_FragColor = sum;", 60 | 61 | "}" 62 | 63 | ].join("\n") 64 | 65 | }; 66 | -------------------------------------------------------------------------------- /lib/js/three/shaders/HorizontalTiltShiftShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position 5 | * 6 | * - 9 samples per pass 7 | * - standard deviation 2.7 8 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height" 9 | * - "r" parameter control where "focused" horizontal line lies 10 | */ 11 | 12 | THREE.HorizontalTiltShiftShader = { 13 | 14 | uniforms: { 15 | 16 | "tDiffuse": { type: "t", value: null }, 17 | "h": { type: "f", value: 1.0 / 512.0 }, 18 | "r": { type: "f", value: 0.35 } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "uniform sampler2D tDiffuse;", 38 | "uniform float h;", 39 | "uniform float r;", 40 | 41 | "varying vec2 vUv;", 42 | 43 | "void main() {", 44 | 45 | "vec4 sum = vec4( 0.0 );", 46 | 47 | "float hh = h * abs( r - vUv.y );", 48 | 49 | "sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;", 50 | "sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;", 51 | "sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;", 52 | "sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;", 53 | "sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;", 54 | "sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;", 55 | "sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;", 56 | "sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;", 57 | "sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;", 58 | 59 | "gl_FragColor = sum;", 60 | 61 | "}" 62 | 63 | ].join("\n") 64 | 65 | }; 66 | -------------------------------------------------------------------------------- /lib/js/three/MaskPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.MaskPass = function ( scene, camera ) { 6 | 7 | this.scene = scene; 8 | this.camera = camera; 9 | 10 | this.enabled = true; 11 | this.clear = true; 12 | this.needsSwap = false; 13 | 14 | this.inverse = false; 15 | 16 | }; 17 | 18 | THREE.MaskPass.prototype = { 19 | 20 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 21 | 22 | var context = renderer.context; 23 | 24 | // don't update color or depth 25 | 26 | context.colorMask( false, false, false, false ); 27 | context.depthMask( false ); 28 | 29 | // set up stencil 30 | 31 | var writeValue, clearValue; 32 | 33 | if ( this.inverse ) { 34 | 35 | writeValue = 0; 36 | clearValue = 1; 37 | 38 | } else { 39 | 40 | writeValue = 1; 41 | clearValue = 0; 42 | 43 | } 44 | 45 | context.enable( context.STENCIL_TEST ); 46 | context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE ); 47 | context.stencilFunc( context.ALWAYS, writeValue, 0xffffffff ); 48 | context.clearStencil( clearValue ); 49 | 50 | // draw into the stencil buffer 51 | 52 | renderer.render( this.scene, this.camera, readBuffer, this.clear ); 53 | renderer.render( this.scene, this.camera, writeBuffer, this.clear ); 54 | 55 | // re-enable update of color and depth 56 | 57 | context.colorMask( true, true, true, true ); 58 | context.depthMask( true ); 59 | 60 | // only render where stencil is set to 1 61 | 62 | context.stencilFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1 63 | context.stencilOp( context.KEEP, context.KEEP, context.KEEP ); 64 | 65 | } 66 | 67 | }; 68 | 69 | 70 | THREE.ClearMaskPass = function () { 71 | 72 | this.enabled = true; 73 | 74 | }; 75 | 76 | THREE.ClearMaskPass.prototype = { 77 | 78 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 79 | 80 | var context = renderer.context; 81 | 82 | context.disable( context.STENCIL_TEST ); 83 | 84 | } 85 | 86 | }; 87 | -------------------------------------------------------------------------------- /js/samples/blur_post_process.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.blur_post_process = { 4 | 5 | initialize: function(canvas) { 6 | var scene = new THREE.Scene(); 7 | 8 | var camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 9 | camera.position.z = 100; 10 | 11 | var texture = THREE.ImageUtils.loadTexture('images/checker_large.gif', {}, function() { 12 | animate(); 13 | }); 14 | 15 | var geometry = new THREE.CubeGeometry( 70, 70, 70 ); 16 | var material = new THREE.MeshBasicMaterial( { map: texture } ); 17 | var mesh = new THREE.Mesh( geometry, material ); 18 | scene.add( mesh ); 19 | 20 | var renderer = new THREE.WebGLRenderer({canvas: canvas, autoClear: false}); 21 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 22 | renderer.setClearColor( 0, 0 ); 23 | 24 | var composer = new THREE.EffectComposer( renderer ); 25 | 26 | var renderModel = new THREE.RenderPass( scene, camera ); 27 | var effectHorizontalBlur = new THREE.ShaderPass( THREE.HorizontalBlurShader ); 28 | effectHorizontalBlur.uniforms.h.value = 2 / sample_defaults.width; 29 | 30 | var effectVerticalBlur = new THREE.ShaderPass( THREE.VerticalBlurShader ); 31 | effectVerticalBlur.uniforms.v.value = 2 / sample_defaults.height; 32 | 33 | effectVerticalBlur.renderToScreen = true; 34 | 35 | composer.addPass( renderModel ); 36 | composer.addPass( effectHorizontalBlur ); 37 | composer.addPass( effectVerticalBlur ); 38 | 39 | var instance = { active: false }; 40 | function animate() { 41 | requestAnimationFrame( animate, canvas ); 42 | if(!instance.active || sample_defaults.paused) return; 43 | 44 | mesh.rotation.x += 0.01; 45 | mesh.rotation.y += 0.02; 46 | 47 | renderer.clear(); 48 | composer.render(0.1); 49 | } 50 | 51 | return instance; 52 | } 53 | }; 54 | })(); 55 | 56 | -------------------------------------------------------------------------------- /lib/js/stats.js: -------------------------------------------------------------------------------- 1 | // stats.js r10 - http://github.com/mrdoob/stats.js 2 | var Stats=function(){var l=Date.now(),m=l,g=0,n=1E3,o=0,h=0,p=1E3,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; 3 | i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); 4 | k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= 5 | "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= 6 | a+"px",m=b,r=0);return b},update:function(){l=this.end()}}}; 7 | -------------------------------------------------------------------------------- /lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .django .tag, 17 | pre .django .keyword, 18 | pre .css .class, 19 | pre .css .id, 20 | pre .lisp .title { 21 | color: #E3CEAB; 22 | } 23 | 24 | pre .django .template_tag, 25 | pre .django .variable, 26 | pre .django .filter .argument { 27 | color: #DCDCDC; 28 | } 29 | 30 | pre .number, 31 | pre .date { 32 | color: #8CD0D3; 33 | } 34 | 35 | pre .dos .envvar, 36 | pre .dos .stream, 37 | pre .variable, 38 | pre .apache .sqbracket { 39 | color: #EFDCBC; 40 | } 41 | 42 | pre .dos .flow, 43 | pre .diff .change, 44 | pre .python .exception, 45 | pre .python .built_in, 46 | pre .literal, 47 | pre .tex .special { 48 | color: #EFEFAF; 49 | } 50 | 51 | pre .diff .chunk, 52 | pre .ruby .subst { 53 | color: #8F8F8F; 54 | } 55 | 56 | pre .dos .keyword, 57 | pre .python .decorator, 58 | pre .class .title, 59 | pre .haskell .label, 60 | pre .function .title, 61 | pre .ini .title, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .input_number { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .symbol .keyword, 75 | pre .ruby .symbol .keymethods, 76 | pre .ruby .string, 77 | pre .ruby .instancevar { 78 | color: #DCA3A3; 79 | } 80 | 81 | pre .diff .deletion, 82 | pre .string, 83 | pre .tag .value, 84 | pre .preprocessor, 85 | pre .built_in, 86 | pre .sql .aggregate, 87 | pre .javadoc, 88 | pre .smalltalk .class, 89 | pre .smalltalk .localvars, 90 | pre .smalltalk .array, 91 | pre .css .rules .value, 92 | pre .attr_selector, 93 | pre .pseudo, 94 | pre .apache .cbracket, 95 | pre .tex .formula { 96 | color: #CC9393; 97 | } 98 | 99 | pre .shebang, 100 | pre .diff .addition, 101 | pre .comment, 102 | pre .java .annotation, 103 | pre .template_comment, 104 | pre .pi, 105 | pre .doctype { 106 | color: #7F9F7F; 107 | } 108 | 109 | pre .xml .css, 110 | pre .xml .javascript, 111 | pre .xml .vbscript, 112 | pre .tex .formula { 113 | opacity: 0.5; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /lib/js/three/shaders/ConvolutionShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Convolution shader 5 | * ported from o3d sample to WebGL / GLSL 6 | * http://o3d.googlecode.com/svn/trunk/samples/convolution.html 7 | */ 8 | 9 | THREE.ConvolutionShader = { 10 | 11 | defines: { 12 | 13 | "KERNEL_SIZE_FLOAT": "25.0", 14 | "KERNEL_SIZE_INT": "25", 15 | 16 | }, 17 | 18 | uniforms: { 19 | 20 | "tDiffuse": { type: "t", value: null }, 21 | "uImageIncrement": { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) }, 22 | "cKernel": { type: "fv1", value: [] } 23 | 24 | }, 25 | 26 | vertexShader: [ 27 | 28 | "uniform vec2 uImageIncrement;", 29 | 30 | "varying vec2 vUv;", 31 | 32 | "void main() {", 33 | 34 | "vUv = uv - ( ( KERNEL_SIZE_FLOAT - 1.0 ) / 2.0 ) * uImageIncrement;", 35 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 36 | 37 | "}" 38 | 39 | ].join("\n"), 40 | 41 | fragmentShader: [ 42 | 43 | "uniform float cKernel[ KERNEL_SIZE_INT ];", 44 | 45 | "uniform sampler2D tDiffuse;", 46 | "uniform vec2 uImageIncrement;", 47 | 48 | "varying vec2 vUv;", 49 | 50 | "void main() {", 51 | 52 | "vec2 imageCoord = vUv;", 53 | "vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );", 54 | 55 | "for( int i = 0; i < KERNEL_SIZE_INT; i ++ ) {", 56 | 57 | "sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];", 58 | "imageCoord += uImageIncrement;", 59 | 60 | "}", 61 | 62 | "gl_FragColor = sum;", 63 | 64 | "}" 65 | 66 | 67 | ].join("\n"), 68 | 69 | buildKernel: function ( sigma ) { 70 | 71 | // We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway. 72 | 73 | function gauss( x, sigma ) { 74 | 75 | return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) ); 76 | 77 | } 78 | 79 | var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1; 80 | 81 | if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize; 82 | halfWidth = ( kernelSize - 1 ) * 0.5; 83 | 84 | values = new Array( kernelSize ); 85 | sum = 0.0; 86 | for ( i = 0; i < kernelSize; ++i ) { 87 | 88 | values[ i ] = gauss( i - halfWidth, sigma ); 89 | sum += values[ i ]; 90 | 91 | } 92 | 93 | // normalize the kernel 94 | 95 | for ( i = 0; i < kernelSize; ++i ) values[ i ] /= sum; 96 | 97 | return values; 98 | 99 | } 100 | 101 | }; 102 | -------------------------------------------------------------------------------- /js/samples/particle_height_map.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function ParticleSample() { 4 | var container, 5 | camera, 6 | scene, 7 | renderer, 8 | particles, 9 | geometry, 10 | materials = [], 11 | parameters, 12 | i, 13 | h, 14 | color; 15 | 16 | var mouseX = 0, mouseY = 0; 17 | 18 | var width = sample_defaults.width * 2; 19 | var height = sample_defaults.height * 2; 20 | 21 | this.initialize = function(canvas) { 22 | camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 ); 23 | camera.lookAt( new THREE.Vector3(5, -20, -10) ); 24 | camera.position.set( 0, 250, 150); 25 | 26 | scene = new THREE.Scene(); 27 | 28 | var instance = { active: false }; 29 | 30 | var heightMapImageSample = $("canvas[data-sample=height_map_image]").data("instance"); 31 | heightMapImageSample.addListener("onload", function() { 32 | 33 | geometry = new THREE.Geometry(); 34 | 35 | for ( i = 0; i < 128; i ++ ) { 36 | for ( j = 0; j < 128; j ++ ) { 37 | 38 | var vertex = new THREE.Vector3(); 39 | vertex.x = i; 40 | vertex.z = j; 41 | 42 | var dataPosition = i * 128 * 4 + j * 4; 43 | vertex.y = heightMapImageSample.imageData.data[dataPosition] / 255.0 * 64; 44 | 45 | geometry.vertices.push( vertex ); 46 | } 47 | } 48 | 49 | var color = [0.4, 1.0, 0]; 50 | var size = 2; 51 | 52 | material = new THREE.ParticleBasicMaterial( { size: size } ); 53 | material.color.setHSL( color[0], color[1], color[2] ); 54 | 55 | particles = new THREE.ParticleSystem( geometry, material ); 56 | 57 | scene.add( particles ); 58 | 59 | var axisHelper = new THREE.AxisHelper(50); 60 | scene.add( axisHelper ); 61 | 62 | renderer = new THREE.WebGLRenderer({canvas: canvas}); 63 | renderer.setSize( width, height ); 64 | 65 | function animate() { 66 | requestAnimationFrame( animate ); 67 | if(!instance.active || sample_defaults.paused) return; 68 | renderer.render( scene, camera ); 69 | } 70 | 71 | animate(); 72 | }); 73 | 74 | return instance; 75 | }; 76 | } 77 | 78 | window.samples.particle_height_map = { 79 | initialize: function(canvas) { 80 | var particleSample = new ParticleSample(); 81 | return particleSample.initialize(canvas); 82 | } 83 | }; 84 | })(); 85 | -------------------------------------------------------------------------------- /css/gh-fork-ribbon.ie.css: -------------------------------------------------------------------------------- 1 | /* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and 2 | * http://www.useragentman.com/IETransformsTranslator */ 3 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 4 | /* IE positioning hack (couldn't find a transform-origin alternative for IE) */ 5 | top: -22px; 6 | right: -62px; 7 | 8 | /* IE8+ */ 9 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')"; 10 | /* IE6 and 7 */ 11 | filter: progid:DXImageTransform.Microsoft.Matrix( 12 | M11=0.7071067811865474, 13 | M12=-0.7071067811865477, 14 | M21=0.7071067811865477, 15 | M22=0.7071067811865474, 16 | SizingMethod='auto expand' 17 | ); 18 | } 19 | 20 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 21 | top: -22px; 22 | left: -22px; 23 | 24 | /* IE8+ */ 25 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; 26 | /* IE6 and 7 */ 27 | filter: progid:DXImageTransform.Microsoft.Matrix( 28 | M11=0.7071067811865483, 29 | M12=0.7071067811865467, 30 | M21=-0.7071067811865467, 31 | M22=0.7071067811865483, 32 | SizingMethod='auto expand' 33 | ); 34 | } 35 | 36 | .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon { 37 | /* IE positioning hack (couldn't find a transform-origin alternative for IE) */ 38 | top: 12px; 39 | left: -22px; 40 | 41 | 42 | /* IE8+ */ 43 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')"; 44 | /* IE6 and 7 */ 45 | /* filter: progid:DXImageTransform.Microsoft.Matrix( 46 | M11=0.7071067811865474, 47 | M12=-0.7071067811865477, 48 | M21=0.7071067811865477, 49 | M22=0.7071067811865474, 50 | SizingMethod='auto expand' 51 | ); 52 | */} 53 | 54 | .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon { 55 | top: 12px; 56 | right: -62px; 57 | 58 | /* IE8+ */ 59 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; 60 | /* IE6 and 7 */ 61 | filter: progid:DXImageTransform.Microsoft.Matrix( 62 | M11=0.7071067811865483, 63 | M12=0.7071067811865467, 64 | M21=-0.7071067811865467, 65 | M22=0.7071067811865483, 66 | SizingMethod='auto expand' 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /js/samples/particle_height_map_vertex_texture.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function ParticleSample() { 4 | var container, 5 | camera, 6 | scene, 7 | renderer, 8 | particles, 9 | geometry, 10 | materials = [], 11 | parameters, 12 | i, 13 | h, 14 | color; 15 | 16 | var mouseX = 0, mouseY = 0; 17 | 18 | var width = sample_defaults.width * 2; 19 | var height = sample_defaults.height * 2; 20 | 21 | this.initialize = function(canvas) { 22 | camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 ); 23 | camera.lookAt( new THREE.Vector3(5, -20, -10) ); 24 | camera.position.set( 0, 250, 150); 25 | 26 | scene = new THREE.Scene(); 27 | 28 | var instance = { active: false }; 29 | 30 | sample_defaults.addListener("initialized", function() { 31 | var heightMapImageSample = $("canvas[data-sample=height_map_image]").data("instance"); 32 | heightMapImageSample.addListener("onload", function() { 33 | 34 | geometry = new THREE.Geometry(); 35 | 36 | for ( i = 0; i < 128; i ++ ) { 37 | for ( j = 0; j < 128; j ++ ) { 38 | 39 | var vertex = new THREE.Vector3(); 40 | vertex.x = i; 41 | vertex.z = j; 42 | 43 | var dataPosition = i * 128 * 4 + j * 4; 44 | vertex.y = heightMapImageSample.imageData.data[dataPosition] / 255.0 * 64; 45 | 46 | geometry.vertices.push( vertex ); 47 | } 48 | } 49 | 50 | var texture = new THREE.Texture( heightMapImageSample.canvas ); 51 | texture.needsUpdate = true; 52 | 53 | var color = [0.4, 1.0, 0]; 54 | var size = 2; 55 | 56 | material = new THREE.ParticleBasicMaterial( { size: size, map: texture } ); 57 | // material.color.setHSL( color[0], color[1], color[2] ); 58 | 59 | particles = new THREE.ParticleSystem( geometry, material ); 60 | 61 | scene.add( particles ); 62 | 63 | var axisHelper = new THREE.AxisHelper(50); 64 | scene.add( axisHelper ); 65 | 66 | renderer = new THREE.WebGLRenderer({canvas: canvas}); 67 | renderer.setSize( width, height ); 68 | 69 | function animate() { 70 | requestAnimationFrame( animate ); 71 | if(!instance.active || sample_defaults.paused) return; 72 | renderer.render( scene, camera ); 73 | } 74 | 75 | animate(); 76 | }); 77 | }); 78 | 79 | return instance; 80 | }; 81 | } 82 | 83 | window.samples.particle_height_map_vertex_texture = { 84 | initialize: function(canvas) { 85 | var particleSample = new ParticleSample(); 86 | return particleSample.initialize(canvas); 87 | } 88 | }; 89 | })(); 90 | -------------------------------------------------------------------------------- /lib/js/three/shaders/FocusShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Focus shader 5 | * based on PaintEffect postprocess from ro.me 6 | * http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js 7 | */ 8 | 9 | THREE.FocusShader = { 10 | 11 | uniforms : { 12 | 13 | "tDiffuse": { type: "t", value: null }, 14 | "screenWidth": { type: "f", value: 1024 }, 15 | "screenHeight": { type: "f", value: 1024 }, 16 | "sampleDistance": { type: "f", value: 0.94 }, 17 | "waveFactor": { type: "f", value: 0.00125 } 18 | 19 | }, 20 | 21 | vertexShader: [ 22 | 23 | "varying vec2 vUv;", 24 | 25 | "void main() {", 26 | 27 | "vUv = uv;", 28 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 29 | 30 | "}" 31 | 32 | ].join("\n"), 33 | 34 | fragmentShader: [ 35 | 36 | "uniform float screenWidth;", 37 | "uniform float screenHeight;", 38 | "uniform float sampleDistance;", 39 | "uniform float waveFactor;", 40 | 41 | "uniform sampler2D tDiffuse;", 42 | 43 | "varying vec2 vUv;", 44 | 45 | "void main() {", 46 | 47 | "vec4 color, org, tmp, add;", 48 | "float sample_dist, f;", 49 | "vec2 vin;", 50 | "vec2 uv = vUv;", 51 | 52 | "add = color = org = texture2D( tDiffuse, uv );", 53 | 54 | "vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );", 55 | "sample_dist = dot( vin, vin ) * 2.0;", 56 | 57 | "f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;", 58 | 59 | "vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2( f );", 60 | 61 | "add += tmp = texture2D( tDiffuse, uv + vec2( 0.111964, 0.993712 ) * sampleSize );", 62 | "if( tmp.b < color.b ) color = tmp;", 63 | 64 | "add += tmp = texture2D( tDiffuse, uv + vec2( 0.846724, 0.532032 ) * sampleSize );", 65 | "if( tmp.b < color.b ) color = tmp;", 66 | 67 | "add += tmp = texture2D( tDiffuse, uv + vec2( 0.943883, -0.330279 ) * sampleSize );", 68 | "if( tmp.b < color.b ) color = tmp;", 69 | 70 | "add += tmp = texture2D( tDiffuse, uv + vec2( 0.330279, -0.943883 ) * sampleSize );", 71 | "if( tmp.b < color.b ) color = tmp;", 72 | 73 | "add += tmp = texture2D( tDiffuse, uv + vec2( -0.532032, -0.846724 ) * sampleSize );", 74 | "if( tmp.b < color.b ) color = tmp;", 75 | 76 | "add += tmp = texture2D( tDiffuse, uv + vec2( -0.993712, -0.111964 ) * sampleSize );", 77 | "if( tmp.b < color.b ) color = tmp;", 78 | 79 | "add += tmp = texture2D( tDiffuse, uv + vec2( -0.707107, 0.707107 ) * sampleSize );", 80 | "if( tmp.b < color.b ) color = tmp;", 81 | 82 | "color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );", 83 | "color = color + ( add / vec4( 8.0 ) - color ) * ( vec4( 1.0 ) - vec4( sample_dist * 0.5 ) );", 84 | 85 | "gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );", 86 | 87 | "}" 88 | 89 | 90 | ].join("\n") 91 | }; 92 | -------------------------------------------------------------------------------- /js/samples.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var eventEmitter = new EventEmitter(); 3 | 4 | window.sample_defaults = { 5 | addListener: function(event, listener) { 6 | eventEmitter.addListener(event, listener); 7 | }, 8 | width: 320, 9 | height: 240, 10 | paused: false, 11 | wireframe: false, 12 | current_normal_map: "normal_map_tile.jpg", 13 | normal_maps: [ 14 | "normal_map_face.PNG", 15 | "normal_map_circle.jpg", 16 | "normal_map_tile.jpg" 17 | ] 18 | }; 19 | 20 | window.samples = {}; 21 | function createSample($el) { 22 | var index = $el.data("sample"); 23 | var instance = window.samples[index].initialize($el[0]); 24 | $el.data("instance", instance); 25 | return instance; 26 | }; 27 | 28 | function runCurrentSample(currentSlide) { 29 | $(currentSlide).find("[data-sample]").each(function() { 30 | var instance = createSample($(this)); 31 | if(instance) instance.active = true; 32 | }); 33 | }; 34 | 35 | function initializeOnLoad() { 36 | runCurrentSample($("section.present")); 37 | 38 | // Activate appropriate sample on slide change. 39 | Reveal.addEventListener('slidechanged', function(event) { 40 | // Clear all slides 41 | $("[data-sample]").each(function() { 42 | var instance = $(this).data("instance"); 43 | if(instance) instance.active = false; 44 | }); 45 | 46 | var currentSlide = event.currentSlide; 47 | runCurrentSample(currentSlide); 48 | }); 49 | 50 | eventEmitter.emitEvent("initialized"); 51 | } 52 | 53 | head.js( 54 | "js/samples/height_map_image.js", 55 | "js/samples/todo_lighted_spinning_textured_cube.js", 56 | "js/samples/todo_lighted_spinning_cube.js", 57 | "js/samples/particles.js", 58 | "js/samples/particle_height_map.js", 59 | "js/samples/particle_height_map_vertex_texture.js", 60 | "js/samples/shadow_map.js", 61 | "js/samples/render_to_texture.js", 62 | "js/samples/blur_post_process.js", 63 | "js/samples/webgl_spinning_wireframe_cube.js", 64 | "js/samples/webgl_spinning_colored_cube.js", 65 | "js/samples/webgl_spinning_bland_cube.js", 66 | "js/samples/spinning_wireframe_torus.js", 67 | "js/samples/spinning_wireframe_cube.js", 68 | "js/samples/spinning_cube.js", 69 | "js/samples/spinning_textured_cube.js", 70 | "js/samples/lighted_spinning_cube.js", 71 | "js/samples/lighted_spinning_textured_cube.js", 72 | "js/samples/lighted_ambient_sphere.js", 73 | "js/samples/lighted_diffuse_sphere.js", 74 | "js/samples/lighted_specular_sphere.js", 75 | "js/samples/lighted_textured_sphere.js", 76 | "js/samples/lighted_sphere.js", 77 | "js/samples/per_vertex_lighting.js", 78 | "js/samples/normal_mapped_plane.js", 79 | "js/samples/plane.js", 80 | "js/samples/wireframe_plane.js", 81 | "js/samples/load_startrek_enterprise.js", 82 | "js/samples/load_apache.js", 83 | initializeOnLoad); 84 | })(); 85 | -------------------------------------------------------------------------------- /plugin/speakernotes/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 75 | 76 | 77 | 78 | 79 |
80 | 81 |
82 | 83 |
84 | 85 | UPCOMING: 86 |
87 |
88 | 89 | 90 | 91 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /js/samples/particles.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function ParticleSample() { 4 | var container; 5 | var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color; 6 | var mouseX = 0, mouseY = 0; 7 | 8 | var width = sample_defaults.width * 2; 9 | var height = sample_defaults.height * 2; 10 | 11 | function render() { 12 | var time = Date.now() * 0.00005; 13 | 14 | for ( i = 0; i < scene.children.length; i ++ ) { 15 | var object = scene.children[ i ]; 16 | 17 | if ( object instanceof THREE.ParticleSystem ) { 18 | object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) ); 19 | } 20 | } 21 | 22 | for ( i = 0; i < materials.length; i ++ ) { 23 | color = parameters[i][0]; 24 | 25 | h = ( 360 * ( color[0] + time ) % 360 ) / 360; 26 | materials[i].color.setHSL( h, color[1], color[2] ); 27 | } 28 | 29 | renderer.render( scene, camera ); 30 | } 31 | 32 | this.initialize = function(canvas) { 33 | 34 | camera = new THREE.PerspectiveCamera( 75, width / height, 1, 3000 ); 35 | camera.position.z = 1000; 36 | 37 | scene = new THREE.Scene(); 38 | scene.fog = new THREE.FogExp2( 0x000000, 0.0007 ); 39 | 40 | geometry = new THREE.Geometry(); 41 | 42 | for ( i = 0; i < 10000; i ++ ) { 43 | 44 | var vertex = new THREE.Vector3(); 45 | vertex.x = Math.random() * 2000 - 1000; 46 | vertex.y = Math.random() * 2000 - 1000; 47 | vertex.z = Math.random() * 2000 - 1000; 48 | 49 | geometry.vertices.push( vertex ); 50 | } 51 | 52 | parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ]; 53 | 54 | for ( i = 0; i < parameters.length; i ++ ) { 55 | 56 | size = parameters[i][1]; 57 | color = parameters[i][0]; 58 | 59 | materials[i] = new THREE.ParticleBasicMaterial( { size: size } ); 60 | materials[i].color.setHSL( color[0], color[1], color[2] ); 61 | 62 | particles = new THREE.ParticleSystem( geometry, materials[i] ); 63 | 64 | particles.rotation.x = Math.random() * 6; 65 | particles.rotation.y = Math.random() * 6; 66 | particles.rotation.z = Math.random() * 6; 67 | 68 | scene.add( particles ); 69 | } 70 | 71 | renderer = new THREE.WebGLRenderer({canvas: canvas}); 72 | renderer.setSize( width, height ); 73 | 74 | var instance = { active: false }; 75 | function animate() { 76 | requestAnimationFrame( animate ); 77 | if(!instance.active || sample_defaults.paused) return; 78 | render(); 79 | } 80 | 81 | animate(); 82 | return instance; 83 | } 84 | } 85 | 86 | window.samples.particles = { 87 | initialize: function(canvas) { 88 | var particleSample = new ParticleSample(); 89 | return particleSample.initialize(canvas); 90 | } 91 | }; 92 | })(); 93 | -------------------------------------------------------------------------------- /js/samples/render_to_texture.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.samples.render_to_texture = { 4 | 5 | initialize: function(canvas) { 6 | var worldScene = new THREE.Scene(); 7 | var planeScene = new THREE.Scene(); 8 | 9 | var camera = new THREE.PerspectiveCamera( 75, sample_defaults.width / sample_defaults.height, 1, 1000 ); 10 | camera.position.z = 100; 11 | 12 | // Create objects to render spinning cube in world. 13 | var texture = THREE.ImageUtils.loadTexture('images/checker_large.gif', {}, function() { 14 | animate(); 15 | }); 16 | 17 | var geometry = new THREE.CubeGeometry( 70, 70, 70 ); 18 | var material = new THREE.MeshBasicMaterial( { map: texture } ); 19 | var cubeMesh = new THREE.Mesh( geometry, material ); 20 | worldScene.add( cubeMesh ); 21 | 22 | var renderer = new THREE.WebGLRenderer({canvas: canvas, autoClear: false}); 23 | renderer.setSize( sample_defaults.width, sample_defaults.height ); 24 | renderer.setClearColor( 0, 0 ); 25 | 26 | var renderTargetParameters = { 27 | minFilter: THREE.LinearFilter, 28 | magFilter: THREE.LinearFilter, 29 | format: THREE.RGBFormat, 30 | stencilBuffer: false 31 | }; 32 | 33 | var renderTarget = new THREE.WebGLRenderTarget( 34 | sample_defaults.width, 35 | sample_defaults.height, 36 | renderTargetParameters); 37 | 38 | // Create plane to render spinning cube as texture. 39 | var planeGeometry = new THREE.PlaneGeometry( 1, 1 ); 40 | var planeMaterial = new THREE.ShaderMaterial( THREE.DotScreenShader ); 41 | planeMaterial.side = THREE.DoubleSide; 42 | var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); 43 | planeMesh.position.z = -100; 44 | planeMesh.scale.set( sample_defaults.width, sample_defaults.height, 1 ); 45 | 46 | // Create wireframe plane to illustrate that it's a plane 47 | var wireframePlaneGeometry = new THREE.PlaneGeometry( 1, 1 ); 48 | var wireframePlaneMesh = new THREE.Mesh(wireframePlaneGeometry, new THREE.MeshBasicMaterial({color: 0xdddddd, wireframe: true})); 49 | wireframePlaneMesh.position.z = -100; 50 | wireframePlaneMesh.scale.set( sample_defaults.width, sample_defaults.height, 1 ); 51 | 52 | planeScene.add( planeMesh ); 53 | planeScene.add( wireframePlaneMesh ); 54 | 55 | var instance = { active: false }; 56 | function animate() { 57 | requestAnimationFrame( animate, canvas ); 58 | if(!instance.active || sample_defaults.paused) return; 59 | 60 | var speedIncrement = 0.005; 61 | cubeMesh.rotation.y += speedIncrement; 62 | planeMesh.rotation.y += speedIncrement; 63 | wireframePlaneMesh.rotation.y += speedIncrement; 64 | 65 | renderer.clear(); 66 | renderer.render( worldScene, camera, renderTarget ); 67 | 68 | planeMaterial.uniforms[ "tDiffuse" ].value = renderTarget; 69 | renderer.render( planeScene, camera ); 70 | } 71 | 72 | return instance; 73 | } 74 | }; 75 | })(); 76 | -------------------------------------------------------------------------------- /lib/js/head.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | Head JS The only script in your 3 | Copyright Tero Piirainen (tipiirai) 4 | License MIT / http://bit.ly/mit-license 5 | Version 0.96 6 | 7 | http://headjs.com 8 | */(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c lumaMax ) ) {", 87 | 88 | "gl_FragColor = vec4( rgbA, opacity );", 89 | 90 | "} else {", 91 | 92 | "gl_FragColor = vec4( rgbB, opacity );", 93 | 94 | "}", 95 | 96 | "}" 97 | 98 | ].join("\n") 99 | 100 | }; 101 | -------------------------------------------------------------------------------- /lib/js/three/EffectComposer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.EffectComposer = function ( renderer, renderTarget ) { 6 | 7 | this.renderer = renderer; 8 | 9 | if ( renderTarget === undefined ) { 10 | 11 | var width = window.innerWidth || 1; 12 | var height = window.innerHeight || 1; 13 | var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false }; 14 | 15 | renderTarget = new THREE.WebGLRenderTarget( width, height, parameters ); 16 | 17 | } 18 | 19 | this.renderTarget1 = renderTarget; 20 | this.renderTarget2 = renderTarget.clone(); 21 | 22 | this.writeBuffer = this.renderTarget1; 23 | this.readBuffer = this.renderTarget2; 24 | 25 | this.passes = []; 26 | 27 | if ( THREE.CopyShader === undefined ) 28 | console.error( "THREE.EffectComposer relies on THREE.CopyShader" ); 29 | 30 | this.copyPass = new THREE.ShaderPass( THREE.CopyShader ); 31 | 32 | }; 33 | 34 | THREE.EffectComposer.prototype = { 35 | 36 | swapBuffers: function() { 37 | 38 | var tmp = this.readBuffer; 39 | this.readBuffer = this.writeBuffer; 40 | this.writeBuffer = tmp; 41 | 42 | }, 43 | 44 | addPass: function ( pass ) { 45 | 46 | this.passes.push( pass ); 47 | 48 | }, 49 | 50 | insertPass: function ( pass, index ) { 51 | 52 | this.passes.splice( index, 0, pass ); 53 | 54 | }, 55 | 56 | render: function ( delta ) { 57 | 58 | this.writeBuffer = this.renderTarget1; 59 | this.readBuffer = this.renderTarget2; 60 | 61 | var maskActive = false; 62 | 63 | var pass, i, il = this.passes.length; 64 | 65 | for ( i = 0; i < il; i ++ ) { 66 | 67 | pass = this.passes[ i ]; 68 | 69 | if ( !pass.enabled ) continue; 70 | 71 | pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive ); 72 | 73 | if ( pass.needsSwap ) { 74 | 75 | if ( maskActive ) { 76 | 77 | var context = this.renderer.context; 78 | 79 | context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff ); 80 | 81 | this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta ); 82 | 83 | context.stencilFunc( context.EQUAL, 1, 0xffffffff ); 84 | 85 | } 86 | 87 | this.swapBuffers(); 88 | 89 | } 90 | 91 | if ( pass instanceof THREE.MaskPass ) { 92 | 93 | maskActive = true; 94 | 95 | } else if ( pass instanceof THREE.ClearMaskPass ) { 96 | 97 | maskActive = false; 98 | 99 | } 100 | 101 | } 102 | 103 | }, 104 | 105 | reset: function ( renderTarget ) { 106 | 107 | if ( renderTarget === undefined ) { 108 | 109 | renderTarget = this.renderTarget1.clone(); 110 | 111 | renderTarget.width = window.innerWidth; 112 | renderTarget.height = window.innerHeight; 113 | 114 | } 115 | 116 | this.renderTarget1 = renderTarget; 117 | this.renderTarget2 = renderTarget.clone(); 118 | 119 | this.writeBuffer = this.renderTarget1; 120 | this.readBuffer = this.renderTarget2; 121 | 122 | }, 123 | 124 | setSize: function ( width, height ) { 125 | 126 | var renderTarget = this.renderTarget1.clone(); 127 | 128 | renderTarget.width = width; 129 | renderTarget.height = height; 130 | 131 | this.reset( renderTarget ); 132 | 133 | } 134 | 135 | }; 136 | 137 | // shared ortho camera 138 | 139 | THREE.EffectComposer.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 ); 140 | 141 | THREE.EffectComposer.quad = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null ); 142 | 143 | THREE.EffectComposer.scene = new THREE.Scene(); 144 | THREE.EffectComposer.scene.add( THREE.EffectComposer.quad ); 145 | -------------------------------------------------------------------------------- /lib/js/three/BloomPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) { 6 | 7 | strength = ( strength !== undefined ) ? strength : 1; 8 | kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25; 9 | sigma = ( sigma !== undefined ) ? sigma : 4.0; 10 | resolution = ( resolution !== undefined ) ? resolution : 256; 11 | 12 | // render targets 13 | 14 | var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat }; 15 | 16 | this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars ); 17 | this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars ); 18 | 19 | // copy material 20 | 21 | if ( THREE.CopyShader === undefined ) 22 | console.error( "THREE.BloomPass relies on THREE.CopyShader" ); 23 | 24 | var copyShader = THREE.CopyShader; 25 | 26 | this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms ); 27 | 28 | this.copyUniforms[ "opacity" ].value = strength; 29 | 30 | this.materialCopy = new THREE.ShaderMaterial( { 31 | 32 | uniforms: this.copyUniforms, 33 | vertexShader: copyShader.vertexShader, 34 | fragmentShader: copyShader.fragmentShader, 35 | blending: THREE.AdditiveBlending, 36 | transparent: true 37 | 38 | } ); 39 | 40 | // convolution material 41 | 42 | if ( THREE.ConvolutionShader === undefined ) 43 | console.error( "THREE.BloomPass relies on THREE.ConvolutionShader" ); 44 | 45 | var convolutionShader = THREE.ConvolutionShader; 46 | 47 | this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms ); 48 | 49 | this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx; 50 | this.convolutionUniforms[ "cKernel" ].value = THREE.ConvolutionShader.buildKernel( sigma ); 51 | 52 | this.materialConvolution = new THREE.ShaderMaterial( { 53 | 54 | uniforms: this.convolutionUniforms, 55 | vertexShader: convolutionShader.vertexShader, 56 | fragmentShader: convolutionShader.fragmentShader, 57 | defines: { 58 | "KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ), 59 | "KERNEL_SIZE_INT": kernelSize.toFixed( 0 ) 60 | } 61 | 62 | } ); 63 | 64 | this.enabled = true; 65 | this.needsSwap = false; 66 | this.clear = false; 67 | 68 | }; 69 | 70 | THREE.BloomPass.prototype = { 71 | 72 | render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) { 73 | 74 | if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST ); 75 | 76 | // Render quad with blured scene into texture (convolution pass 1) 77 | 78 | THREE.EffectComposer.quad.material = this.materialConvolution; 79 | 80 | this.convolutionUniforms[ "tDiffuse" ].value = readBuffer; 81 | this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX; 82 | 83 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetX, true ); 84 | 85 | 86 | // Render quad with blured scene into texture (convolution pass 2) 87 | 88 | this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX; 89 | this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY; 90 | 91 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetY, true ); 92 | 93 | // Render original scene with superimposed blur to texture 94 | 95 | THREE.EffectComposer.quad.material = this.materialCopy; 96 | 97 | this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY; 98 | 99 | if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST ); 100 | 101 | renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, readBuffer, this.clear ); 102 | 103 | } 104 | 105 | }; 106 | 107 | THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 ); 108 | THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 ); 109 | -------------------------------------------------------------------------------- /css/gh-fork-ribbon.css: -------------------------------------------------------------------------------- 1 | /* Left will inherit from right (so we don't need to duplicate code */ 2 | .github-fork-ribbon { 3 | /* The right and left lasses determine the side we attach our banner to */ 4 | position: absolute; 5 | 6 | /* Add a bit of padding to give some substance outside the "stitching" */ 7 | padding: 2px 0; 8 | 9 | /* Set the base colour */ 10 | background-color: #a00; 11 | 12 | /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */ 13 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15))); 14 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 15 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 16 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 17 | background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 18 | background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 19 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000'); 20 | 21 | /* Add a drop shadow */ 22 | -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); 23 | box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); 24 | 25 | z-index: 9999; 26 | } 27 | 28 | .github-fork-ribbon a, 29 | .github-fork-ribbon a:hover { 30 | /* Set the font */ 31 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 32 | font-size: 13px; 33 | font-weight: 700; 34 | color: white; 35 | 36 | /* Set the text properties */ 37 | text-decoration: none; 38 | text-shadow: 0 -1px rgba(0,0,0,0.5); 39 | text-align: center; 40 | 41 | /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */ 42 | width: 200px; 43 | line-height: 20px; 44 | 45 | /* Set the layout properties */ 46 | display: inline-block; 47 | padding: 2px 0; 48 | 49 | /* Add "stitching" effect */ 50 | border-width: 1px 0; 51 | border-style: dotted; 52 | border-color: rgba(255,255,255,0.7); 53 | } 54 | 55 | .github-fork-ribbon-wrapper { 56 | width: 150px; 57 | height: 150px; 58 | position: absolute; 59 | overflow: hidden; 60 | top: 0; 61 | z-index: 9999; 62 | } 63 | 64 | .github-fork-ribbon-wrapper.fixed { 65 | position: fixed; 66 | } 67 | 68 | .github-fork-ribbon-wrapper.left { 69 | left: 0; 70 | } 71 | 72 | .github-fork-ribbon-wrapper.right { 73 | right: 0; 74 | } 75 | 76 | .github-fork-ribbon-wrapper.left-bottom { 77 | position: fixed; 78 | top: inherit; 79 | bottom: 0; 80 | left: 0; 81 | } 82 | 83 | .github-fork-ribbon-wrapper.right-bottom { 84 | position: fixed; 85 | top: inherit; 86 | bottom: 0; 87 | right: 0; 88 | } 89 | 90 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 91 | top: 42px; 92 | right: -43px; 93 | 94 | /* Rotate the banner 45 degrees */ 95 | -webkit-transform: rotate(45deg); 96 | -moz-transform: rotate(45deg); 97 | -o-transform: rotate(45deg); 98 | transform: rotate(45deg); 99 | } 100 | 101 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 102 | top: 42px; 103 | left: -43px; 104 | 105 | /* Rotate the banner -45 degrees */ 106 | -webkit-transform: rotate(-45deg); 107 | -moz-transform: rotate(-45deg); 108 | -o-transform: rotate(-45deg); 109 | transform: rotate(-45deg); 110 | } 111 | 112 | 113 | .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon { 114 | top: 80px; 115 | left: -43px; 116 | 117 | /* Rotate the banner -45 degrees */ 118 | -webkit-transform: rotate(45deg); 119 | -moz-transform: rotate(45deg); 120 | -o-transform: rotate(45deg); 121 | transform: rotate(45deg); 122 | } 123 | 124 | .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon { 125 | top: 80px; 126 | right: -43px; 127 | 128 | /* Rotate the banner -45 degrees */ 129 | -webkit-transform: rotate(-45deg); 130 | -moz-transform: rotate(-45deg); 131 | -o-transform: rotate(-45deg); 132 | transform: rotate(-45deg); 133 | } 134 | -------------------------------------------------------------------------------- /css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | * { 14 | -webkit-print-color-adjust: exact; 15 | } 16 | 17 | body { 18 | font-size: 22pt; 19 | width: auto; 20 | height: auto; 21 | border: 0; 22 | margin: 0 5%; 23 | padding: 0; 24 | float: none !important; 25 | overflow: visible; 26 | background: #333; 27 | } 28 | 29 | html { 30 | width: auto; 31 | height: auto; 32 | overflow: visible; 33 | } 34 | 35 | /* SECTION 2: Remove any elements not needed in print. 36 | This would include navigation, ads, sidebars, etc. */ 37 | .nestedarrow, 38 | .controls a, 39 | .reveal .progress, 40 | .reveal.overview, 41 | .fork-reveal, 42 | .share-reveal, 43 | .state-background { 44 | display:none; 45 | } 46 | 47 | /* SECTION 3: Set body font face, size, and color. 48 | Consider using a serif font for readability. */ 49 | body, p, td, li, div, a { 50 | font-size: 22pt; 51 | } 52 | 53 | /* SECTION 4: Set heading font face, sizes, and color. 54 | Diffrentiate your headings from your body text. 55 | Perhaps use a large sans-serif for distinction. */ 56 | h1,h2,h3,h4,h5,h6 { 57 | text-shadow: 0 0 0 #000 !important; 58 | } 59 | 60 | /* SECTION 5: Make hyperlinks more usable. 61 | Ensure links are underlined, and consider appending 62 | the URL to the end of the link for usability. */ 63 | a:link, 64 | a:visited { 65 | font-weight: bold; 66 | text-decoration: underline; 67 | } 68 | 69 | 70 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 71 | ul, ol, div, p { 72 | visibility: visible; 73 | position: static; 74 | width: auto; 75 | height: auto; 76 | display: block; 77 | overflow: visible; 78 | margin: auto; 79 | } 80 | .reveal .slides { 81 | position: static; 82 | width: 100%; 83 | height: auto; 84 | 85 | left: auto; 86 | top: auto; 87 | margin-left: auto; 88 | margin-top: auto; 89 | padding: auto; 90 | 91 | overflow: visible; 92 | display: block; 93 | 94 | text-align: center; 95 | -webkit-perspective: none; 96 | -moz-perspective: none; 97 | -ms-perspective: none; 98 | perspective: none; 99 | 100 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 101 | -moz-perspective-origin: 50% 50%; 102 | -ms-perspective-origin: 50% 50%; 103 | perspective-origin: 50% 50%; 104 | } 105 | .reveal .slides>section, .reveal .slides>section>section, 106 | .reveal .slides>section.past, .reveal .slides>section.future, 107 | .reveal.linear .slides>section, .reveal.linear .slides>section>section, 108 | .reveal.linear .slides>section.past, .reveal.linear .slides>section.future { 109 | 110 | visibility: visible; 111 | position: static; 112 | width: 100%; 113 | height: auto; 114 | min-height: initial; 115 | display: block; 116 | overflow: visible; 117 | 118 | left: 0%; 119 | top: 0%; 120 | margin-left: 0px; 121 | margin-top: 50px; 122 | padding: 20px 0px; 123 | 124 | opacity: 1; 125 | 126 | -webkit-transform-style: flat; 127 | -moz-transform-style: flat; 128 | -ms-transform-style: flat; 129 | transform-style: flat; 130 | 131 | -webkit-transform: none; 132 | -moz-transform: none; 133 | -ms-transform: none; 134 | transform: none; 135 | } 136 | .reveal section { 137 | page-break-after: always !important; 138 | display: block !important; 139 | } 140 | .reveal section.stack { 141 | margin: 0px !important; 142 | padding: 0px !important; 143 | page-break-after: avoid !important; 144 | } 145 | .reveal section .fragment { 146 | opacity: 1 !important; 147 | } 148 | .reveal img { 149 | box-shadow: none; 150 | } 151 | .reveal .roll { 152 | overflow: visible; 153 | line-height: 1em; 154 | } 155 | 156 | .reveal small a { 157 | font-size: 16pt !important; 158 | } -------------------------------------------------------------------------------- /lib/js/jquery.hotkeys.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Hotkeys Plugin 3 | * Copyright 2010, John Resig 4 | * Dual licensed under the MIT or GPL Version 2 licenses. 5 | * 6 | * Based upon the plugin by Tzury Bar Yochay: 7 | * http://github.com/tzuryby/hotkeys 8 | * 9 | * Original idea by: 10 | * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/ 11 | */ 12 | 13 | (function(jQuery){ 14 | 15 | jQuery.hotkeys = { 16 | version: "0.8+", 17 | 18 | specialKeys: { 19 | 8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause", 20 | 20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home", 21 | 37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", 22 | 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7", 23 | 104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/", 24 | 112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", 25 | 120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 188: ",", 190: ".", 26 | 191: "/", 224: "meta" 27 | }, 28 | 29 | shiftNums: { 30 | "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", 31 | "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<", 32 | ".": ">", "/": "?", "\\": "|" 33 | } 34 | }; 35 | 36 | function keyHandler( handleObj ) { 37 | 38 | var origHandler = handleObj.handler, 39 | //use namespace as keys so it works with event delegation as well 40 | //will also allow removing listeners of a specific key combination 41 | //and support data objects 42 | keys = (handleObj.namespace || "").toLowerCase().split(" "); 43 | keys = jQuery.map(keys, function(key) { return key.split("."); }); 44 | 45 | //no need to modify handler if no keys specified 46 | if (keys.length === 1 && (keys[0] === "" || keys[0] === "autocomplete")) { 47 | return; 48 | } 49 | 50 | handleObj.handler = function( event ) { 51 | // Don't fire in text-accepting inputs that we didn't directly bind to 52 | // important to note that $.fn.prop is only available on jquery 1.6+ 53 | if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || 54 | event.target.type === "text" || $(event.target).prop('contenteditable') == 'true' )) { 55 | return; 56 | } 57 | 58 | // Keypress represents characters, not special keys 59 | var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ], 60 | character = String.fromCharCode( event.which ).toLowerCase(), 61 | key, modif = "", possible = {}; 62 | 63 | // check combinations (alt|ctrl|shift+anything) 64 | if ( event.altKey && special !== "alt" ) { 65 | modif += "alt_"; 66 | } 67 | 68 | if ( event.ctrlKey && special !== "ctrl" ) { 69 | modif += "ctrl_"; 70 | } 71 | 72 | // TODO: Need to make sure this works consistently across platforms 73 | if ( event.metaKey && !event.ctrlKey && special !== "meta" ) { 74 | modif += "meta_"; 75 | } 76 | 77 | if ( event.shiftKey && special !== "shift" ) { 78 | modif += "shift_"; 79 | } 80 | 81 | if ( special ) { 82 | possible[ modif + special ] = true; 83 | 84 | } else { 85 | possible[ modif + character ] = true; 86 | possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true; 87 | 88 | // "$" can be triggered as "Shift+4" or "Shift+$" or just "$" 89 | if ( modif === "shift_" ) { 90 | possible[ jQuery.hotkeys.shiftNums[ character ] ] = true; 91 | } 92 | } 93 | 94 | for ( var i = 0, l = keys.length; i < l; i++ ) { 95 | if ( possible[ keys[i] ] ) { 96 | return origHandler.apply( this, arguments ); 97 | } 98 | } 99 | }; 100 | } 101 | 102 | jQuery.each([ "keydown", "keyup", "keypress" ], function() { 103 | jQuery.event.special[ this ] = { add: keyHandler }; 104 | }); 105 | 106 | })( jQuery ); 107 | -------------------------------------------------------------------------------- /js/samples/shadow_map.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function ShadowMap() { 4 | var SHADOW_MAP_WIDTH, SHADOW_MAP_HEIGHT; 5 | SHADOW_MAP_WIDTH = SHADOW_MAP_HEIGHT = 512; 6 | 7 | var width = sample_defaults.width * 2; 8 | var height = sample_defaults.height * 2; 9 | var clock = new THREE.Clock(); 10 | 11 | function createLight() { 12 | var light = new THREE.SpotLight ( 0xffffffff ); 13 | 14 | light.position.set( 0, 15, 0); 15 | light.target.position.set( 0, 0, 0 ); 16 | 17 | light.castShadow = true; 18 | 19 | light.shadowCameraVisible = true; 20 | 21 | light.shadowCameraNear = 1; 22 | light.shadowCameraFar = 16; 23 | 24 | light.shadowMapWidth = SHADOW_MAP_WIDTH; 25 | light.shadowMapHeight = SHADOW_MAP_HEIGHT; 26 | 27 | return light; 28 | } 29 | 30 | function createCubeMesh() { 31 | var scale = 2.5; 32 | var geometry = new THREE.CubeGeometry( scale, scale, scale ); 33 | var material = new THREE.MeshPhongMaterial({ color: 0xdddddd, antialias:true }); 34 | 35 | var mesh = new THREE.Mesh( geometry, material ); 36 | mesh.position.y = 10; 37 | mesh.castShadow = true; 38 | 39 | return mesh; 40 | } 41 | 42 | function createFloorMesh() { 43 | var geometry = new THREE.PlaneGeometry( 12, 12 ); 44 | var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd } ); 45 | 46 | var floor = new THREE.Mesh( geometry, planeMaterial ); 47 | 48 | floor.position.set( 0, 0, 0 ); 49 | floor.rotation.x = - Math.PI / 2; 50 | 51 | floor.castShadow = false; 52 | floor.receiveShadow = true; 53 | return floor; 54 | } 55 | 56 | function createHUD() { 57 | var scene = new THREE.Scene(); 58 | 59 | var camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2); 60 | camera.position.z = 10; 61 | 62 | var shader = THREE.UnpackDepthRGBAShader; 63 | var uniforms = new THREE.UniformsUtils.clone( shader.uniforms ); 64 | 65 | var hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } ); 66 | 67 | var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 ); 68 | var hudMesh = new THREE.Mesh( hudGeo, hudMaterial ); 69 | hudMesh.position.x = ( width - SHADOW_MAP_WIDTH / 2 ) * 0.5; 70 | hudMesh.position.y = ( height - SHADOW_MAP_HEIGHT / 2 ) * 0.5; 71 | 72 | scene.add( hudMesh ); 73 | 74 | return { 75 | scene: scene, 76 | camera: camera, 77 | update: function(shadowMap) { 78 | hudMaterial.uniforms.tDiffuse.texture = shadowMap; 79 | } 80 | }; 81 | } 82 | 83 | function createShadowWorld() { 84 | var scene = new THREE.Scene(); 85 | 86 | var camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 ); 87 | camera.position.set( 5, 20, 40 ); 88 | camera.lookAt( new THREE.Vector3(5,6,0)); 89 | 90 | var light = createLight(); 91 | var cubeMesh = createCubeMesh(); 92 | var floorMesh = createFloorMesh(); 93 | 94 | scene.add( light ); 95 | scene.add( cubeMesh ); 96 | scene.add( floorMesh ); 97 | 98 | return { 99 | scene: scene, 100 | camera: camera, 101 | light: light, 102 | animate: function(delta) { 103 | cubeMesh.rotation.y += 0.5 * delta; 104 | } 105 | }; 106 | } 107 | 108 | this.initialize = function(canvas) { 109 | var shadowWorld = createShadowWorld(); 110 | var hud = createHUD(); 111 | 112 | var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); 113 | 114 | renderer.setSize( width, height ); 115 | renderer.autoClear = false; 116 | 117 | renderer.shadowMapEnabled = true; 118 | renderer.shadowMapSoft = true; 119 | 120 | var instance = { active: false }; 121 | function animate() { 122 | requestAnimationFrame( animate, canvas ); 123 | var delta = clock.getDelta(); 124 | 125 | if(!instance.active || sample_defaults.paused) return; 126 | 127 | hud.update(shadowWorld.light.shadowMap); 128 | 129 | shadowWorld.animate(delta); 130 | 131 | renderer.clear(); 132 | renderer.render( shadowWorld.scene, shadowWorld.camera ); 133 | renderer.render( hud.scene, hud.camera ); 134 | } 135 | 136 | animate(); 137 | return instance; 138 | }; 139 | } 140 | 141 | window.samples.shadow_map = { 142 | initialize: function(canvas) { 143 | var shadowMap = new ShadowMap(); 144 | return shadowMap.initialize(canvas); 145 | } 146 | }; 147 | })(); 148 | -------------------------------------------------------------------------------- /css/print/paper.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | body { 14 | background: #fff; 15 | font-size: 13pt; 16 | width: auto; 17 | height: auto; 18 | border: 0; 19 | margin: 0 5%; 20 | padding: 0; 21 | float: none !important; 22 | overflow: visible; 23 | } 24 | html { 25 | background: #fff; 26 | width: auto; 27 | height: auto; 28 | overflow: visible; 29 | } 30 | 31 | /* SECTION 2: Remove any elements not needed in print. 32 | This would include navigation, ads, sidebars, etc. */ 33 | .nestedarrow, 34 | .controls a, 35 | .reveal .progress, 36 | .reveal.overview, 37 | .fork-reveal, 38 | .share-reveal, 39 | .state-background { 40 | display:none; 41 | } 42 | 43 | /* SECTION 3: Set body font face, size, and color. 44 | Consider using a serif font for readability. */ 45 | body, p, td, li, div, a { 46 | font-size: 13pt; 47 | font-family: Georgia, "Times New Roman", Times, serif !important; 48 | color: #000; 49 | } 50 | 51 | /* SECTION 4: Set heading font face, sizes, and color. 52 | Diffrentiate your headings from your body text. 53 | Perhaps use a large sans-serif for distinction. */ 54 | h1,h2,h3,h4,h5,h6 { 55 | color: #000!important; 56 | height: auto; 57 | line-height: normal; 58 | font-family: Georgia, "Times New Roman", Times, serif !important; 59 | text-shadow: 0 0 0 #000 !important; 60 | text-align: left; 61 | letter-spacing: normal; 62 | } 63 | /* Need to reduce the size of the fonts for printing */ 64 | h1 { font-size: 26pt !important; } 65 | h2 { font-size: 22pt !important; } 66 | h3 { font-size: 20pt !important; } 67 | h4 { font-size: 20pt !important; font-variant: small-caps; } 68 | h5 { font-size: 19pt !important; } 69 | h6 { font-size: 18pt !important; font-style: italic; } 70 | 71 | /* SECTION 5: Make hyperlinks more usable. 72 | Ensure links are underlined, and consider appending 73 | the URL to the end of the link for usability. */ 74 | a:link, 75 | a:visited { 76 | color: #000 !important; 77 | font-weight: bold; 78 | text-decoration: underline; 79 | } 80 | .reveal a:link:after, 81 | .reveal a:visited:after { 82 | content: " (" attr(href) ") "; 83 | color: #222 !important; 84 | font-size: 90%; 85 | } 86 | 87 | 88 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 89 | ul, ol, div, p { 90 | visibility: visible; 91 | position: static; 92 | width: auto; 93 | height: auto; 94 | display: block; 95 | overflow: visible; 96 | margin: auto; 97 | text-align: left !important; 98 | } 99 | .reveal .slides { 100 | position: static; 101 | width: auto; 102 | height: auto; 103 | 104 | left: auto; 105 | top: auto; 106 | margin-left: auto; 107 | margin-top: auto; 108 | padding: auto; 109 | 110 | overflow: visible; 111 | display: block; 112 | 113 | text-align: center; 114 | -webkit-perspective: none; 115 | -moz-perspective: none; 116 | -ms-perspective: none; 117 | perspective: none; 118 | 119 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 120 | -moz-perspective-origin: 50% 50%; 121 | -ms-perspective-origin: 50% 50%; 122 | perspective-origin: 50% 50%; 123 | } 124 | .reveal .slides>section, .reveal .slides>section>section, 125 | .reveal .slides>section.past, .reveal .slides>section.future, 126 | .reveal.linear .slides>section, .reveal.linear .slides>section>section, 127 | .reveal.linear .slides>section.past, .reveal.linear .slides>section.future { 128 | 129 | visibility: visible; 130 | position: static; 131 | width: 90%; 132 | height: auto; 133 | display: block; 134 | overflow: visible; 135 | 136 | left: 0%; 137 | top: 0%; 138 | margin-left: 0px; 139 | margin-top: 0px; 140 | padding: 20px 0px; 141 | 142 | opacity: 1; 143 | 144 | -webkit-transform-style: flat; 145 | -moz-transform-style: flat; 146 | -ms-transform-style: flat; 147 | transform-style: flat; 148 | 149 | -webkit-transform: none; 150 | -moz-transform: none; 151 | -ms-transform: none; 152 | transform: none; 153 | } 154 | .reveal section { 155 | page-break-after: always !important; 156 | display: block !important; 157 | } 158 | .reveal section.stack { 159 | page-break-after: avoid !important; 160 | } 161 | .reveal section .fragment { 162 | opacity: 1 !important; 163 | } 164 | .reveal section img { 165 | display: block; 166 | margin: 15px 0px; 167 | background: rgba(255,255,255,1); 168 | border: 1px solid #666; 169 | box-shadow: none; 170 | } -------------------------------------------------------------------------------- /css/theme/simple.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue; 4 | * do a find-replace to change it. 5 | * 6 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 7 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. 8 | */ 9 | 10 | /********************************************* 11 | * FONT-FACE DEFINITIONS 12 | *********************************************/ 13 | 14 | @font-face { 15 | font-family: 'League Gothic'; 16 | src: url('../../lib/font/league_gothic-webfont.eot'); 17 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 18 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 19 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 20 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 21 | 22 | font-weight: normal; 23 | font-style: normal; 24 | } 25 | 26 | /********************************************* 27 | * GLOBAL STYLES 28 | *********************************************/ 29 | 30 | body { 31 | font-family: 'Lato', Times, 'Times New Roman', serif; 32 | font-size: 36px; 33 | font-weight: 200; 34 | letter-spacing: -0.02em; 35 | color: black !important; 36 | 37 | background: white; 38 | } 39 | 40 | ::-moz-selection { 41 | background:rgba(0, 0, 0, 0.99); 42 | color: white; 43 | } 44 | ::-webkit-selection { 45 | background:rgba(0, 0, 0, 0.99); 46 | color: white; 47 | } 48 | ::selection { 49 | background:rgba(0, 0, 0, 0.99); 50 | color: white; 51 | } 52 | 53 | /********************************************* 54 | * HEADERS 55 | *********************************************/ 56 | 57 | .reveal h1, 58 | .reveal h2, 59 | .reveal h3, 60 | .reveal h4, 61 | .reveal h5, 62 | .reveal h6 { 63 | margin: 0 0 20px 0; 64 | color: black; 65 | font-family: 'League Gothic', Impact, sans-serif; 66 | line-height: 0.9em; 67 | letter-spacing: 0.02em; 68 | 69 | text-transform: uppercase; 70 | } 71 | 72 | .reveal h1 { 73 | border-bottom: 5px dashed black; 74 | } 75 | 76 | 77 | /********************************************* 78 | * LINKS 79 | *********************************************/ 80 | 81 | .reveal a:not(.image) { 82 | color: darkblue; 83 | text-decoration: none; 84 | 85 | -webkit-transition: color .15s ease; 86 | -moz-transition: color .15s ease; 87 | -ms-transition: color .15s ease; 88 | -o-transition: color .15s ease; 89 | transition: color .15s ease; 90 | } 91 | .reveal a:not(.image):hover { 92 | text-shadow: none; 93 | border: none; 94 | border-radius: 2px; 95 | } 96 | 97 | .reveal .roll span:after { 98 | color: #fff; 99 | background: darkblue; 100 | } 101 | 102 | 103 | /********************************************* 104 | * IMAGES 105 | *********************************************/ 106 | 107 | .reveal section img { 108 | margin: 30px 0 0 0; 109 | background: rgba(255,255,255,0.12); 110 | border: 4px solid #eee; 111 | 112 | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 113 | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 114 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 115 | 116 | -webkit-transition: all .2s linear; 117 | -moz-transition: all .2s linear; 118 | -ms-transition: all .2s linear; 119 | -o-transition: all .2s linear; 120 | transition: all .2s linear; 121 | } 122 | 123 | .reveal a:hover img { 124 | background: rgba(255,255,255,0.2); 125 | border-color: darkblue; 126 | 127 | -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 128 | -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 129 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 130 | } 131 | 132 | 133 | /********************************************* 134 | * NAVIGATION CONTROLS 135 | *********************************************/ 136 | 137 | .reveal .controls a { 138 | color: black; 139 | } 140 | .reveal .controls a.enabled { 141 | color: darkblue; 142 | opacity: 1; 143 | text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); 144 | } 145 | 146 | 147 | /********************************************* 148 | * PROGRESS BAR 149 | *********************************************/ 150 | 151 | .reveal .progress { 152 | background: rgba(0,0,0,0.2); 153 | } 154 | .reveal .progress span { 155 | background: darkblue; 156 | 157 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 158 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 159 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 160 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 161 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 162 | } 163 | 164 | 165 | -------------------------------------------------------------------------------- /css/theme/beige.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A beige theme for reveal.js presentations, similar 3 | * to the default theme. 4 | * 5 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 6 | */ 7 | 8 | /********************************************* 9 | * FONT-FACE DEFINITIONS 10 | *********************************************/ 11 | 12 | @font-face { 13 | font-family: 'League Gothic'; 14 | src: url('../../lib/font/league_gothic-webfont.eot'); 15 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 16 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 17 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 18 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 19 | 20 | font-weight: normal; 21 | font-style: normal; 22 | } 23 | 24 | 25 | /********************************************* 26 | * GLOBAL STYLES 27 | *********************************************/ 28 | 29 | body { 30 | font-family: 'Lato', Times, 'Times New Roman', serif; 31 | font-size: 36px; 32 | font-weight: 200; 33 | letter-spacing: -0.02em; 34 | color: #333; 35 | 36 | background: #f7f3de; 37 | background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%); 38 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1))); 39 | background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); 40 | background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); 41 | background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); 42 | background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); 43 | } 44 | 45 | ::-moz-selection { 46 | background:rgba(79, 64, 28, 0.99); 47 | color: white; 48 | } 49 | ::-webkit-selection { 50 | background:rgba(79, 64, 28, 0.99); 51 | color: white; 52 | } 53 | ::selection { 54 | background:rgba(79, 64, 28, 0.99); 55 | color: white; 56 | } 57 | 58 | 59 | /********************************************* 60 | * HEADERS 61 | *********************************************/ 62 | 63 | .reveal h1, 64 | .reveal h2, 65 | .reveal h3, 66 | .reveal h4, 67 | .reveal h5, 68 | .reveal h6 { 69 | margin: 0 0 20px 0; 70 | color: #333; 71 | font-family: 'League Gothic', Impact, sans-serif; 72 | line-height: 0.9em; 73 | letter-spacing: 0.02em; 74 | 75 | text-transform: uppercase; 76 | } 77 | 78 | .reveal h1 { 79 | text-shadow: 0 1px 0 #ccc, 80 | 0 2px 0 #c9c9c9, 81 | 0 3px 0 #bbb, 82 | 0 4px 0 #b9b9b9, 83 | 0 5px 0 #aaa, 84 | 0 6px 1px rgba(0,0,0,.1), 85 | 0 0 5px rgba(0,0,0,.1), 86 | 0 1px 3px rgba(0,0,0,.3), 87 | 0 3px 5px rgba(0,0,0,.2), 88 | 0 5px 10px rgba(0,0,0,.25), 89 | 0 20px 20px rgba(0,0,0,.15); 90 | } 91 | 92 | 93 | /********************************************* 94 | * LINKS 95 | *********************************************/ 96 | 97 | .reveal a:not(.image) { 98 | color: #8b743d; 99 | text-decoration: none; 100 | 101 | -webkit-transition: color .15s ease; 102 | -moz-transition: color .15s ease; 103 | -ms-transition: color .15s ease; 104 | -o-transition: color .15s ease; 105 | transition: color .15s ease; 106 | } 107 | .reveal a:not(.image):hover { 108 | text-shadow: none; 109 | border: none; 110 | border-radius: 2px; 111 | } 112 | 113 | .reveal .roll span:after { 114 | color: #fff; 115 | background: #8b743d; 116 | } 117 | 118 | 119 | /********************************************* 120 | * IMAGES 121 | *********************************************/ 122 | 123 | .reveal section img { 124 | margin: 30px 0 0 0; 125 | background: rgba(255,255,255,0.12); 126 | border: 4px solid #eee; 127 | 128 | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 129 | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 130 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 131 | 132 | -webkit-transition: all .2s linear; 133 | -moz-transition: all .2s linear; 134 | -ms-transition: all .2s linear; 135 | -o-transition: all .2s linear; 136 | transition: all .2s linear; 137 | } 138 | 139 | .reveal a:hover img { 140 | background: rgba(255,255,255,0.2); 141 | border-color: #8b743d; 142 | 143 | -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 144 | -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 145 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 146 | } 147 | 148 | 149 | /********************************************* 150 | * NAVIGATION CONTROLS 151 | *********************************************/ 152 | 153 | .reveal .controls a { 154 | color: #fff; 155 | } 156 | .reveal .controls a.enabled { 157 | color: #8b743d; 158 | text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); 159 | } 160 | 161 | 162 | /********************************************* 163 | * PROGRESS BAR 164 | *********************************************/ 165 | 166 | .reveal .progress { 167 | background: rgba(0,0,0,0.2); 168 | } 169 | .reveal .progress span { 170 | background: #8b743d; 171 | 172 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 173 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 174 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 175 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 176 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 177 | } 178 | 179 | 180 | -------------------------------------------------------------------------------- /lib/js/three/shaders/BokehShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Depth-of-field shader with bokeh 5 | * ported from GLSL shader by Martins Upitis 6 | * http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html 7 | */ 8 | 9 | THREE.BokehShader = { 10 | 11 | uniforms: { 12 | 13 | "tColor": { type: "t", value: null }, 14 | "tDepth": { type: "t", value: null }, 15 | "focus": { type: "f", value: 1.0 }, 16 | "aspect": { type: "f", value: 1.0 }, 17 | "aperture": { type: "f", value: 0.025 }, 18 | "maxblur": { type: "f", value: 1.0 } 19 | 20 | }, 21 | 22 | vertexShader: [ 23 | 24 | "varying vec2 vUv;", 25 | 26 | "void main() {", 27 | 28 | "vUv = uv;", 29 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 30 | 31 | "}" 32 | 33 | ].join("\n"), 34 | 35 | fragmentShader: [ 36 | 37 | "varying vec2 vUv;", 38 | 39 | "uniform sampler2D tColor;", 40 | "uniform sampler2D tDepth;", 41 | 42 | "uniform float maxblur;", // max blur amount 43 | "uniform float aperture;", // aperture - bigger values for shallower depth of field 44 | 45 | "uniform float focus;", 46 | "uniform float aspect;", 47 | 48 | "void main() {", 49 | 50 | "vec2 aspectcorrect = vec2( 1.0, aspect );", 51 | 52 | "vec4 depth1 = texture2D( tDepth, vUv );", 53 | 54 | "float factor = depth1.x - focus;", 55 | 56 | "vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );", 57 | 58 | "vec2 dofblur9 = dofblur * 0.9;", 59 | "vec2 dofblur7 = dofblur * 0.7;", 60 | "vec2 dofblur4 = dofblur * 0.4;", 61 | 62 | "vec4 col = vec4( 0.0 );", 63 | 64 | "col += texture2D( tColor, vUv.xy );", 65 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );", 66 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );", 67 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );", 68 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );", 69 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );", 70 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );", 71 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );", 72 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );", 73 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );", 74 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );", 75 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );", 76 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );", 77 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );", 78 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );", 79 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );", 80 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );", 81 | 82 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", 83 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", 84 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", 85 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", 86 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", 87 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", 88 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", 89 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", 90 | 91 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", 92 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );", 93 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", 94 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );", 95 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", 96 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );", 97 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", 98 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );", 99 | 100 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", 101 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", 102 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", 103 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );", 104 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", 105 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", 106 | "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", 107 | "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );", 108 | 109 | "gl_FragColor = col / 41.0;", 110 | "gl_FragColor.a = 1.0;", 111 | 112 | "}" 113 | 114 | ].join("\n") 115 | 116 | }; 117 | -------------------------------------------------------------------------------- /css/theme/default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * The default theme for reveal.js presentations. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | /********************************************* 8 | * FONT-FACE DEFINITIONS 9 | *********************************************/ 10 | 11 | @font-face { 12 | font-family: 'League Gothic'; 13 | src: url('../../lib/font/league_gothic-webfont.eot'); 14 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 15 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 16 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 17 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 18 | 19 | font-weight: normal; 20 | font-style: normal; 21 | } 22 | 23 | 24 | /********************************************* 25 | * GLOBAL STYLES 26 | *********************************************/ 27 | 28 | body { 29 | font-family: 'Lato', Times, 'Times New Roman', serif; 30 | font-size: 36px; 31 | font-weight: 200; 32 | letter-spacing: -0.02em; 33 | color: #eee; 34 | 35 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 36 | background-color: #2b2b2b; 37 | background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%); 38 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1))); 39 | background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); 40 | background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); 41 | background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); 42 | background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); 43 | } 44 | 45 | 46 | /********************************************* 47 | * HEADERS 48 | *********************************************/ 49 | 50 | .reveal h1, 51 | .reveal h2, 52 | .reveal h3, 53 | .reveal h4, 54 | .reveal h5, 55 | .reveal h6 { 56 | margin: 0 0 20px 0; 57 | color: #eee; 58 | font-family: 'League Gothic', Impact, sans-serif; 59 | line-height: 0.9em; 60 | letter-spacing: 0.02em; 61 | 62 | text-transform: uppercase; 63 | text-shadow: 0px 0px 6px rgba(0,0,0,0.2); 64 | } 65 | 66 | .reveal h1 { 67 | text-shadow: 0 1px 0 #ccc, 68 | 0 2px 0 #c9c9c9, 69 | 0 3px 0 #bbb, 70 | 0 4px 0 #b9b9b9, 71 | 0 5px 0 #aaa, 72 | 0 6px 1px rgba(0,0,0,.1), 73 | 0 0 5px rgba(0,0,0,.1), 74 | 0 1px 3px rgba(0,0,0,.3), 75 | 0 3px 5px rgba(0,0,0,.2), 76 | 0 5px 10px rgba(0,0,0,.25), 77 | 0 20px 20px rgba(0,0,0,.15); 78 | } 79 | 80 | 81 | /********************************************* 82 | * LINKS 83 | *********************************************/ 84 | 85 | .reveal a:not(.image) { 86 | color: hsl(185, 85%, 50%); 87 | text-decoration: none; 88 | 89 | -webkit-transition: color .15s ease; 90 | -moz-transition: color .15s ease; 91 | -ms-transition: color .15s ease; 92 | -o-transition: color .15s ease; 93 | transition: color .15s ease; 94 | } 95 | .reveal a:not(.image):hover { 96 | color: hsl(185, 85%, 70%); 97 | 98 | text-shadow: none; 99 | border: none; 100 | border-radius: 2px; 101 | } 102 | 103 | .reveal .roll span:after { 104 | color: #fff; 105 | background: hsl(185, 60%, 35%); 106 | } 107 | 108 | 109 | /********************************************* 110 | * IMAGES 111 | *********************************************/ 112 | 113 | .reveal section img { 114 | margin: 30px 0 0 0; 115 | background: rgba(255,255,255,0.12); 116 | border: 4px solid #eee; 117 | 118 | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 119 | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 120 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 121 | 122 | -webkit-transition: all .2s linear; 123 | -moz-transition: all .2s linear; 124 | -ms-transition: all .2s linear; 125 | -o-transition: all .2s linear; 126 | transition: all .2s linear; 127 | } 128 | 129 | .reveal a:hover img { 130 | background: rgba(255,255,255,0.2); 131 | border-color: #13DAEC; 132 | 133 | -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 134 | -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 135 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 136 | } 137 | 138 | 139 | /********************************************* 140 | * NAVIGATION CONTROLS 141 | *********************************************/ 142 | 143 | .reveal .controls a { 144 | color: #fff; 145 | } 146 | .reveal .controls a.enabled { 147 | color: hsl(185, 85%, 70%); 148 | text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); 149 | } 150 | 151 | 152 | /********************************************* 153 | * PROGRESS BAR 154 | *********************************************/ 155 | 156 | .reveal .progress { 157 | background: rgba(0,0,0,0.2); 158 | } 159 | .reveal .progress span { 160 | background: hsl(185, 85%, 50%); 161 | 162 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 163 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 164 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 165 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 166 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 167 | } 168 | 169 | 170 | -------------------------------------------------------------------------------- /js/samples/webgl_spinning_bland_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Slightly modified version of http://www.khronos.org/webgl/wiki/Tutorial 4 | function init(scene) { 5 | // Initialize 6 | var gl = WebGLUtils.setupWebGL(scene.canvas); 7 | if (!gl) { 8 | return; 9 | } 10 | 11 | scene.program = simpleSetup( 12 | gl, 13 | // The ids of the vertex and fragment shaders 14 | "webgl_vshader", "webgl_bland_fshader", 15 | // The vertex attribute names used by the shaders. 16 | // The order they appear here corresponds to their index 17 | // used later. 18 | [ "vNormal", "vColor", "vPosition"], 19 | // The clear color and depth values 20 | [ 0, 0, 0, 0 ], 10000); 21 | 22 | // Set up a uniform variable for the shaders 23 | gl.uniform3f(gl.getUniformLocation(scene.program, "lightDir"), 0, 0, 1); 24 | 25 | // Create a box. On return 'gl' contains a 'box' property with 26 | // the BufferObjects containing the arrays for vertices, 27 | // normals, texture coords, and indices. 28 | scene.box = makeBox(gl); 29 | 30 | // Set up the array of colors for the cube's faces 31 | var colors = new Uint8Array( 32 | [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front 33 | 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right 34 | 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top 35 | 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left 36 | 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom 37 | 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back 38 | ); 39 | 40 | // Set up the vertex buffer for the colors 41 | scene.box.colorObject = gl.createBuffer(); 42 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 43 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 44 | 45 | // Create some matrices to use later and save their locations in the shaders 46 | scene.mvMatrix = new J3DIMatrix4(); 47 | scene.u_normalMatrixLoc = gl.getUniformLocation(scene.program, "u_normalMatrix"); 48 | scene.normalMatrix = new J3DIMatrix4(); 49 | scene.u_modelViewProjMatrixLoc = 50 | gl.getUniformLocation(scene.program, "u_modelViewProjMatrix"); 51 | scene.mvpMatrix = new J3DIMatrix4(); 52 | 53 | // Enable all of the vertex attribute arrays. 54 | gl.enableVertexAttribArray(0); 55 | gl.enableVertexAttribArray(1); 56 | gl.enableVertexAttribArray(2); 57 | 58 | // Set up all the vertex attributes for vertices, normals and colors 59 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.vertexObject); 60 | gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0); 61 | 62 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.normalObject); 63 | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 64 | 65 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 66 | gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0); 67 | 68 | // Bind the index array 69 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.box.indexObject); 70 | 71 | return gl; 72 | } 73 | 74 | function reshape(scene, gl) { 75 | var canvas = scene.canvas; 76 | 77 | // Set the viewport and projection matrix for the scene 78 | gl.viewport(0, 0, canvas.width, canvas.height); 79 | scene.perspectiveMatrix = new J3DIMatrix4(); 80 | scene.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000); 81 | scene.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0); 82 | } 83 | 84 | function drawPicture(scene, gl) { 85 | // Make sure the canvas is sized correctly. 86 | reshape(scene, gl); 87 | 88 | // Clear the canvas 89 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 90 | 91 | // Make a model/view matrix. 92 | scene.mvMatrix.makeIdentity(); 93 | scene.mvMatrix.rotate(20, 1,0,0); 94 | scene.mvMatrix.rotate(scene.currentAngle, 0,1,0); 95 | 96 | // Construct the normal matrix from the model-view matrix and pass it in 97 | scene.normalMatrix.load(scene.mvMatrix); 98 | scene.normalMatrix.invert(); 99 | scene.normalMatrix.transpose(); 100 | scene.normalMatrix.setUniform(gl, scene.u_normalMatrixLoc, false); 101 | 102 | // Construct the model-view * projection matrix and pass it in 103 | scene.mvpMatrix.load(scene.perspectiveMatrix); 104 | scene.mvpMatrix.multiply(scene.mvMatrix); 105 | scene.mvpMatrix.setUniform(gl, scene.u_modelViewProjMatrixLoc, false); 106 | 107 | // Draw the cube 108 | gl.drawElements(gl.TRIANGLES, scene.box.numIndices, gl.UNSIGNED_BYTE, 0); 109 | 110 | scene.currentAngle += scene.incAngle; 111 | if (scene.currentAngle > 360) 112 | scene.currentAngle -= 360; 113 | } 114 | 115 | window.samples.webgl_spinning_bland_cube = { 116 | 117 | initialize: function(canvas) { 118 | var scene = { canvas: canvas }; 119 | 120 | canvas.addEventListener('webglcontextlost', handleContextLost, false); 121 | canvas.addEventListener('webglcontextrestored', handleContextRestored, false); 122 | 123 | canvas.width = sample_defaults.width; 124 | canvas.height = sample_defaults.height; 125 | 126 | var gl = init(scene); 127 | if (!gl) { 128 | return; 129 | } 130 | 131 | scene.currentAngle = 0; 132 | scene.incAngle = 0.5; 133 | 134 | var instance = { active: false }; 135 | function animate() { 136 | if(instance.active && !sample_defaults.paused) 137 | drawPicture(scene, gl); 138 | instance.requestId = window.requestAnimFrame(animate, canvas); 139 | } 140 | 141 | animate(); 142 | 143 | function handleContextLost(e) { 144 | e.preventDefault(); 145 | if (instance.requestId !== undefined) { 146 | window.cancelAnimFrame(instance.requestId); 147 | instance.requestId = undefined; 148 | } 149 | } 150 | 151 | function handleContextRestored() { 152 | init(scene); 153 | animate(); 154 | } 155 | 156 | return instance; 157 | } 158 | }; 159 | })(); 160 | -------------------------------------------------------------------------------- /js/samples/webgl_spinning_colored_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Slightly modified version of http://www.khronos.org/webgl/wiki/Tutorial 4 | function init(scene) { 5 | // Initialize 6 | var gl = WebGLUtils.setupWebGL(scene.canvas); 7 | if (!gl) { 8 | return; 9 | } 10 | 11 | scene.program = simpleSetup( 12 | gl, 13 | // The ids of the vertex and fragment shaders 14 | "webgl_vshader", "webgl_fshader", 15 | // The vertex attribute names used by the shaders. 16 | // The order they appear here corresponds to their index 17 | // used later. 18 | [ "vNormal", "vColor", "vPosition"], 19 | // The clear color and depth values 20 | [ 0, 0, 0, 0 ], 10000); 21 | 22 | // Set up a uniform variable for the shaders 23 | gl.uniform3f(gl.getUniformLocation(scene.program, "lightDir"), 0, 0, 1); 24 | 25 | // Create a box. On return 'gl' contains a 'box' property with 26 | // the BufferObjects containing the arrays for vertices, 27 | // normals, texture coords, and indices. 28 | scene.box = makeBox(gl); 29 | 30 | // Set up the array of colors for the cube's faces 31 | var colors = new Uint8Array( 32 | [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front 33 | 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right 34 | 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top 35 | 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left 36 | 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom 37 | 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back 38 | ); 39 | 40 | // Set up the vertex buffer for the colors 41 | scene.box.colorObject = gl.createBuffer(); 42 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 43 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 44 | 45 | // Create some matrices to use later and save their locations in the shaders 46 | scene.mvMatrix = new J3DIMatrix4(); 47 | scene.u_normalMatrixLoc = gl.getUniformLocation(scene.program, "u_normalMatrix"); 48 | scene.normalMatrix = new J3DIMatrix4(); 49 | scene.u_modelViewProjMatrixLoc = 50 | gl.getUniformLocation(scene.program, "u_modelViewProjMatrix"); 51 | scene.mvpMatrix = new J3DIMatrix4(); 52 | 53 | // Enable all of the vertex attribute arrays. 54 | gl.enableVertexAttribArray(0); 55 | gl.enableVertexAttribArray(1); 56 | gl.enableVertexAttribArray(2); 57 | 58 | // Set up all the vertex attributes for vertices, normals and colors 59 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.vertexObject); 60 | gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0); 61 | 62 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.normalObject); 63 | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 64 | 65 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 66 | gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0); 67 | 68 | // Bind the index array 69 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.box.indexObject); 70 | 71 | return gl; 72 | } 73 | 74 | function reshape(scene, gl) { 75 | var canvas = scene.canvas; 76 | 77 | // Set the viewport and projection matrix for the scene 78 | gl.viewport(0, 0, canvas.width, canvas.height); 79 | scene.perspectiveMatrix = new J3DIMatrix4(); 80 | scene.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000); 81 | scene.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0); 82 | } 83 | 84 | function drawPicture(scene, gl) { 85 | // Make sure the canvas is sized correctly. 86 | reshape(scene, gl); 87 | 88 | // Clear the canvas 89 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 90 | 91 | // Make a model/view matrix. 92 | scene.mvMatrix.makeIdentity(); 93 | scene.mvMatrix.rotate(20, 1,0,0); 94 | scene.mvMatrix.rotate(scene.currentAngle, 0,1,0); 95 | 96 | // Construct the normal matrix from the model-view matrix and pass it in 97 | scene.normalMatrix.load(scene.mvMatrix); 98 | scene.normalMatrix.invert(); 99 | scene.normalMatrix.transpose(); 100 | scene.normalMatrix.setUniform(gl, scene.u_normalMatrixLoc, false); 101 | 102 | // Construct the model-view * projection matrix and pass it in 103 | scene.mvpMatrix.load(scene.perspectiveMatrix); 104 | scene.mvpMatrix.multiply(scene.mvMatrix); 105 | scene.mvpMatrix.setUniform(gl, scene.u_modelViewProjMatrixLoc, false); 106 | 107 | // Draw the cube 108 | gl.drawElements(gl.TRIANGLES, scene.box.numIndices, gl.UNSIGNED_BYTE, 0); 109 | 110 | scene.currentAngle += scene.incAngle; 111 | if (scene.currentAngle > 360) 112 | scene.currentAngle -= 360; 113 | } 114 | 115 | window.samples.webgl_spinning_colored_cube = { 116 | 117 | initialize: function(canvas) { 118 | var scene = { canvas: canvas }; 119 | 120 | canvas.addEventListener('webglcontextlost', handleContextLost, false); 121 | canvas.addEventListener('webglcontextrestored', handleContextRestored, false); 122 | 123 | canvas.width = sample_defaults.width; 124 | canvas.height = sample_defaults.height; 125 | 126 | var gl = init(scene); 127 | if (!gl) { 128 | return; 129 | } 130 | 131 | scene.currentAngle = 0; 132 | scene.incAngle = 0.5; 133 | 134 | var instance = { active: false }; 135 | function animate() { 136 | if(instance.active && !sample_defaults.paused) 137 | drawPicture(scene, gl); 138 | instance.requestId = window.requestAnimFrame(animate, canvas); 139 | } 140 | 141 | animate(); 142 | 143 | function handleContextLost(e) { 144 | e.preventDefault(); 145 | if (instance.requestId !== undefined) { 146 | window.cancelAnimFrame(instance.requestId); 147 | instance.requestId = undefined; 148 | } 149 | } 150 | 151 | function handleContextRestored() { 152 | init(scene); 153 | animate(); 154 | } 155 | 156 | return instance; 157 | } 158 | }; 159 | })(); 160 | -------------------------------------------------------------------------------- /js/samples/webgl_spinning_wireframe_cube.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Slightly modified version of http://www.khronos.org/webgl/wiki/Tutorial 4 | function init(scene) { 5 | // Initialize 6 | var gl = WebGLUtils.setupWebGL(scene.canvas); 7 | if (!gl) { 8 | return; 9 | } 10 | 11 | scene.program = simpleSetup( 12 | gl, 13 | // The ids of the vertex and fragment shaders 14 | "webgl_vshader", "webgl_bland_fshader", 15 | // The vertex attribute names used by the shaders. 16 | // The order they appear here corresponds to their index 17 | // used later. 18 | [ "vNormal", "vColor", "vPosition"], 19 | // The clear color and depth values 20 | [ 0, 0, 0, 0 ], 10000); 21 | 22 | // Set up a uniform variable for the shaders 23 | gl.uniform3f(gl.getUniformLocation(scene.program, "lightDir"), 0, 0, 1); 24 | 25 | // Create a box. On return 'gl' contains a 'box' property with 26 | // the BufferObjects containing the arrays for vertices, 27 | // normals, texture coords, and indices. 28 | scene.box = makeBox(gl); 29 | 30 | // Set up the array of colors for the cube's faces 31 | var colors = new Uint8Array( 32 | [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front 33 | 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right 34 | 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top 35 | 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left 36 | 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom 37 | 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back 38 | ); 39 | 40 | // Set up the vertex buffer for the colors 41 | scene.box.colorObject = gl.createBuffer(); 42 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 43 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 44 | 45 | // Create some matrices to use later and save their locations in the shaders 46 | scene.mvMatrix = new J3DIMatrix4(); 47 | scene.u_normalMatrixLoc = gl.getUniformLocation(scene.program, "u_normalMatrix"); 48 | scene.normalMatrix = new J3DIMatrix4(); 49 | scene.u_modelViewProjMatrixLoc = 50 | gl.getUniformLocation(scene.program, "u_modelViewProjMatrix"); 51 | scene.mvpMatrix = new J3DIMatrix4(); 52 | 53 | // Enable all of the vertex attribute arrays. 54 | gl.enableVertexAttribArray(0); 55 | gl.enableVertexAttribArray(1); 56 | gl.enableVertexAttribArray(2); 57 | 58 | // Set up all the vertex attributes for vertices, normals and colors 59 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.vertexObject); 60 | gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0); 61 | 62 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.normalObject); 63 | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 64 | 65 | gl.bindBuffer(gl.ARRAY_BUFFER, scene.box.colorObject); 66 | gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0); 67 | 68 | // Bind the index array 69 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.box.indexObject); 70 | 71 | return gl; 72 | } 73 | 74 | function reshape(scene, gl) { 75 | var canvas = scene.canvas; 76 | 77 | // Set the viewport and projection matrix for the scene 78 | gl.viewport(0, 0, canvas.width, canvas.height); 79 | scene.perspectiveMatrix = new J3DIMatrix4(); 80 | scene.perspectiveMatrix.perspective(30, canvas.width/canvas.height, 1, 10000); 81 | scene.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0); 82 | } 83 | 84 | function drawPicture(scene, gl) { 85 | // Make sure the canvas is sized correctly. 86 | reshape(scene, gl); 87 | 88 | // Clear the canvas 89 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 90 | 91 | // Make a model/view matrix. 92 | scene.mvMatrix.makeIdentity(); 93 | scene.mvMatrix.rotate(20, 1,0,0); 94 | scene.mvMatrix.rotate(scene.currentAngle, 0,1,0); 95 | 96 | // Construct the normal matrix from the model-view matrix and pass it in 97 | scene.normalMatrix.load(scene.mvMatrix); 98 | scene.normalMatrix.invert(); 99 | scene.normalMatrix.transpose(); 100 | scene.normalMatrix.setUniform(gl, scene.u_normalMatrixLoc, false); 101 | 102 | // Construct the model-view * projection matrix and pass it in 103 | scene.mvpMatrix.load(scene.perspectiveMatrix); 104 | scene.mvpMatrix.multiply(scene.mvMatrix); 105 | scene.mvpMatrix.setUniform(gl, scene.u_modelViewProjMatrixLoc, false); 106 | 107 | // Draw the cube 108 | gl.drawElements(gl.LINE_STRIP, scene.box.numIndices, gl.UNSIGNED_BYTE, 0); 109 | 110 | scene.currentAngle += scene.incAngle; 111 | if (scene.currentAngle > 360) 112 | scene.currentAngle -= 360; 113 | } 114 | 115 | window.samples.webgl_spinning_wireframe_cube = { 116 | 117 | initialize: function(canvas) { 118 | var scene = { canvas: canvas }; 119 | 120 | canvas.addEventListener('webglcontextlost', handleContextLost, false); 121 | canvas.addEventListener('webglcontextrestored', handleContextRestored, false); 122 | 123 | canvas.width = sample_defaults.width; 124 | canvas.height = sample_defaults.height; 125 | 126 | var gl = init(scene); 127 | if (!gl) { 128 | return; 129 | } 130 | 131 | scene.currentAngle = 0; 132 | scene.incAngle = 0.5; 133 | 134 | var instance = { active: false }; 135 | function animate() { 136 | if(instance.active && !sample_defaults.paused) 137 | drawPicture(scene, gl); 138 | instance.requestId = window.requestAnimFrame(animate, canvas); 139 | } 140 | 141 | animate(); 142 | 143 | function handleContextLost(e) { 144 | e.preventDefault(); 145 | if (instance.requestId !== undefined) { 146 | window.cancelAnimFrame(instance.requestId); 147 | instance.requestId = undefined; 148 | } 149 | } 150 | 151 | function handleContextRestored() { 152 | init(scene); 153 | animate(); 154 | } 155 | 156 | return instance; 157 | } 158 | }; 159 | })(); 160 | -------------------------------------------------------------------------------- /lib/js/webgl-utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2010, Google Inc. 3 | * All rights reserved. 4 | * 5 | * Redistribution and use in source and binary forms, with or without 6 | * modification, are permitted provided that the following conditions are 7 | * met: 8 | * 9 | * * Redistributions of source code must retain the above copyright 10 | * notice, this list of conditions and the following disclaimer. 11 | * * Redistributions in binary form must reproduce the above 12 | * copyright notice, this list of conditions and the following disclaimer 13 | * in the documentation and/or other materials provided with the 14 | * distribution. 15 | * * Neither the name of Google Inc. nor the names of its 16 | * contributors may be used to endorse or promote products derived from 17 | * this software without specific prior written permission. 18 | * 19 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 20 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 21 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 22 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 23 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 24 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 25 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 26 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 27 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | */ 31 | 32 | 33 | /** 34 | * @fileoverview This file contains functions every webgl program will need 35 | * a version of one way or another. 36 | * 37 | * Instead of setting up a context manually it is recommended to 38 | * use. This will check for success or failure. On failure it 39 | * will attempt to present an approriate message to the user. 40 | * 41 | * gl = WebGLUtils.setupWebGL(canvas); 42 | * 43 | * For animated WebGL apps use of setTimeout or setInterval are 44 | * discouraged. It is recommended you structure your rendering 45 | * loop like this. 46 | * 47 | * function render() { 48 | * window.requestAnimFrame(render, canvas); 49 | * 50 | * // do rendering 51 | * ... 52 | * } 53 | * render(); 54 | * 55 | * This will call your rendering function up to the refresh rate 56 | * of your display but will stop rendering if your app is not 57 | * visible. 58 | */ 59 | 60 | WebGLUtils = function() { 61 | 62 | /** 63 | * Creates the HTLM for a failure message 64 | * @param {string} canvasContainerId id of container of th 65 | * canvas. 66 | * @return {string} The html. 67 | */ 68 | var makeFailHTML = function(msg) { 69 | return '' + 70 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @return {WebGLRenderingContext} The created context. 103 | */ 104 | var setupWebGL = function(canvas, opt_attribs) { 105 | function showLink(str) { 106 | var container = canvas.parentNode; 107 | if (container) { 108 | container.innerHTML = makeFailHTML(str); 109 | } 110 | }; 111 | 112 | if (!window.WebGLRenderingContext) { 113 | showLink(GET_A_WEBGL_BROWSER); 114 | return null; 115 | } 116 | 117 | var context = create3DContext(canvas, opt_attribs); 118 | if (!context) { 119 | showLink(OTHER_PROBLEM); 120 | } 121 | return context; 122 | }; 123 | 124 | /** 125 | * Creates a webgl context. 126 | * @param {!Canvas} canvas The canvas tag to get context 127 | * from. If one is not passed in one will be created. 128 | * @return {!WebGLContext} The created context. 129 | */ 130 | var create3DContext = function(canvas, opt_attribs) { 131 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 132 | var context = null; 133 | for (var ii = 0; ii < names.length; ++ii) { 134 | try { 135 | context = canvas.getContext(names[ii], opt_attribs); 136 | } catch(e) {} 137 | if (context) { 138 | break; 139 | } 140 | } 141 | return context; 142 | } 143 | 144 | return { 145 | create3DContext: create3DContext, 146 | setupWebGL: setupWebGL 147 | }; 148 | }(); 149 | 150 | /** 151 | * Provides requestAnimationFrame in a cross browser way. 152 | */ 153 | window.requestAnimFrame = (function() { 154 | return window.requestAnimationFrame || 155 | window.webkitRequestAnimationFrame || 156 | window.mozRequestAnimationFrame || 157 | window.oRequestAnimationFrame || 158 | window.msRequestAnimationFrame || 159 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 160 | return window.setTimeout(callback, 1000/60); 161 | }; 162 | })(); 163 | 164 | /** 165 | * Provides cancelAnimationFrame in a cross browser way. 166 | */ 167 | window.cancelAnimFrame = (function() { 168 | return window.cancelAnimationFrame || 169 | window.webkitCancelAnimationFrame || 170 | window.mozCancelAnimationFrame || 171 | window.oCancelAnimationFrame || 172 | window.msCancelAnimationFrame || 173 | window.clearTimeout; 174 | })(); 175 | 176 | 177 | -------------------------------------------------------------------------------- /lib/js/three/shaders/SSAOShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Screen-space ambient occlusion shader 5 | * - ported from 6 | * SSAO GLSL shader v1.2 7 | * assembled by Martins Upitis (martinsh) (http://devlog-martinsh.blogspot.com) 8 | * original technique is made by ArKano22 (http://www.gamedev.net/topic/550699-ssao-no-halo-artifacts/) 9 | * - modifications 10 | * - modified to use RGBA packed depth texture (use clear color 1,1,1,1 for depth pass) 11 | * - made fog more compatible with three.js linear fog 12 | * - refactoring and optimizations 13 | */ 14 | 15 | THREE.SSAOShader = { 16 | 17 | uniforms: { 18 | 19 | "tDiffuse": { type: "t", value: null }, 20 | "tDepth": { type: "t", value: null }, 21 | "size": { type: "v2", value: new THREE.Vector2( 512, 512 ) }, 22 | "cameraNear": { type: "f", value: 1 }, 23 | "cameraFar": { type: "f", value: 100 }, 24 | "fogNear": { type: "f", value: 5 }, 25 | "fogFar": { type: "f", value: 100 }, 26 | "fogEnabled": { type: "i", value: 0 }, 27 | "onlyAO": { type: "i", value: 0 }, 28 | "aoClamp": { type: "f", value: 0.3 }, 29 | "lumInfluence": { type: "f", value: 0.9 } 30 | 31 | }, 32 | 33 | vertexShader: [ 34 | 35 | "varying vec2 vUv;", 36 | 37 | "void main() {", 38 | 39 | "vUv = uv;", 40 | 41 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 42 | 43 | "}" 44 | 45 | ].join("\n"), 46 | 47 | fragmentShader: [ 48 | 49 | "uniform float cameraNear;", 50 | "uniform float cameraFar;", 51 | 52 | "uniform float fogNear;", 53 | "uniform float fogFar;", 54 | 55 | "uniform bool fogEnabled;", // attenuate AO with linear fog 56 | "uniform bool onlyAO;", // use only ambient occlusion pass? 57 | 58 | "uniform vec2 size;", // texture width, height 59 | "uniform float aoClamp;", // depth clamp - reduces haloing at screen edges 60 | 61 | "uniform float lumInfluence;", // how much luminance affects occlusion 62 | 63 | "uniform sampler2D tDiffuse;", 64 | "uniform sampler2D tDepth;", 65 | 66 | "varying vec2 vUv;", 67 | 68 | // "#define PI 3.14159265", 69 | "#define DL 2.399963229728653", // PI * ( 3.0 - sqrt( 5.0 ) ) 70 | "#define EULER 2.718281828459045", 71 | 72 | // helpers 73 | 74 | "float width = size.x;", // texture width 75 | "float height = size.y;", // texture height 76 | 77 | "float cameraFarPlusNear = cameraFar + cameraNear;", 78 | "float cameraFarMinusNear = cameraFar - cameraNear;", 79 | "float cameraCoef = 2.0 * cameraNear;", 80 | 81 | // user variables 82 | 83 | "const int samples = 8;", // ao sample count 84 | "const float radius = 5.0;", // ao radius 85 | 86 | "const bool useNoise = false;", // use noise instead of pattern for sample dithering 87 | "const float noiseAmount = 0.0003;", // dithering amount 88 | 89 | "const float diffArea = 0.4;", // self-shadowing reduction 90 | "const float gDisplace = 0.4;", // gauss bell center 91 | 92 | "const vec3 onlyAOColor = vec3( 1.0, 0.7, 0.5 );", 93 | // "const vec3 onlyAOColor = vec3( 1.0, 1.0, 1.0 );", 94 | 95 | 96 | // RGBA depth 97 | 98 | "float unpackDepth( const in vec4 rgba_depth ) {", 99 | 100 | "const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );", 101 | "float depth = dot( rgba_depth, bit_shift );", 102 | "return depth;", 103 | 104 | "}", 105 | 106 | // generating noise / pattern texture for dithering 107 | 108 | "vec2 rand( const vec2 coord ) {", 109 | 110 | "vec2 noise;", 111 | 112 | "if ( useNoise ) {", 113 | 114 | "float nx = dot ( coord, vec2( 12.9898, 78.233 ) );", 115 | "float ny = dot ( coord, vec2( 12.9898, 78.233 ) * 2.0 );", 116 | 117 | "noise = clamp( fract ( 43758.5453 * sin( vec2( nx, ny ) ) ), 0.0, 1.0 );", 118 | 119 | "} else {", 120 | 121 | "float ff = fract( 1.0 - coord.s * ( width / 2.0 ) );", 122 | "float gg = fract( coord.t * ( height / 2.0 ) );", 123 | 124 | "noise = vec2( 0.25, 0.75 ) * vec2( ff ) + vec2( 0.75, 0.25 ) * gg;", 125 | 126 | "}", 127 | 128 | "return ( noise * 2.0 - 1.0 ) * noiseAmount;", 129 | 130 | "}", 131 | 132 | "float doFog() {", 133 | 134 | "float zdepth = unpackDepth( texture2D( tDepth, vUv ) );", 135 | "float depth = -cameraFar * cameraNear / ( zdepth * cameraFarMinusNear - cameraFar );", 136 | 137 | "return smoothstep( fogNear, fogFar, depth );", 138 | 139 | "}", 140 | 141 | "float readDepth( const in vec2 coord ) {", 142 | 143 | // "return ( 2.0 * cameraNear ) / ( cameraFar + cameraNear - unpackDepth( texture2D( tDepth, coord ) ) * ( cameraFar - cameraNear ) );", 144 | "return cameraCoef / ( cameraFarPlusNear - unpackDepth( texture2D( tDepth, coord ) ) * cameraFarMinusNear );", 145 | 146 | 147 | "}", 148 | 149 | "float compareDepths( const in float depth1, const in float depth2, inout int far ) {", 150 | 151 | "float garea = 2.0;", // gauss bell width 152 | "float diff = ( depth1 - depth2 ) * 100.0;", // depth difference (0-100) 153 | 154 | // reduce left bell width to avoid self-shadowing 155 | 156 | "if ( diff < gDisplace ) {", 157 | 158 | "garea = diffArea;", 159 | 160 | "} else {", 161 | 162 | "far = 1;", 163 | 164 | "}", 165 | 166 | "float dd = diff - gDisplace;", 167 | "float gauss = pow( EULER, -2.0 * dd * dd / ( garea * garea ) );", 168 | "return gauss;", 169 | 170 | "}", 171 | 172 | "float calcAO( float depth, float dw, float dh ) {", 173 | 174 | "float dd = radius - depth * radius;", 175 | "vec2 vv = vec2( dw, dh );", 176 | 177 | "vec2 coord1 = vUv + dd * vv;", 178 | "vec2 coord2 = vUv - dd * vv;", 179 | 180 | "float temp1 = 0.0;", 181 | "float temp2 = 0.0;", 182 | 183 | "int far = 0;", 184 | "temp1 = compareDepths( depth, readDepth( coord1 ), far );", 185 | 186 | // DEPTH EXTRAPOLATION 187 | 188 | "if ( far > 0 ) {", 189 | 190 | "temp2 = compareDepths( readDepth( coord2 ), depth, far );", 191 | "temp1 += ( 1.0 - temp1 ) * temp2;", 192 | 193 | "}", 194 | 195 | "return temp1;", 196 | 197 | "}", 198 | 199 | "void main() {", 200 | 201 | "vec2 noise = rand( vUv );", 202 | "float depth = readDepth( vUv );", 203 | 204 | "float tt = clamp( depth, aoClamp, 1.0 );", 205 | 206 | "float w = ( 1.0 / width ) / tt + ( noise.x * ( 1.0 - noise.x ) );", 207 | "float h = ( 1.0 / height ) / tt + ( noise.y * ( 1.0 - noise.y ) );", 208 | 209 | "float pw;", 210 | "float ph;", 211 | 212 | "float ao;", 213 | 214 | "float dz = 1.0 / float( samples );", 215 | "float z = 1.0 - dz / 2.0;", 216 | "float l = 0.0;", 217 | 218 | "for ( int i = 0; i <= samples; i ++ ) {", 219 | 220 | "float r = sqrt( 1.0 - z );", 221 | 222 | "pw = cos( l ) * r;", 223 | "ph = sin( l ) * r;", 224 | "ao += calcAO( depth, pw * w, ph * h );", 225 | "z = z - dz;", 226 | "l = l + DL;", 227 | 228 | "}", 229 | 230 | "ao /= float( samples );", 231 | "ao = 1.0 - ao;", 232 | 233 | "if ( fogEnabled ) {", 234 | 235 | "ao = mix( ao, 1.0, doFog() );", 236 | 237 | "}", 238 | 239 | "vec3 color = texture2D( tDiffuse, vUv ).rgb;", 240 | 241 | "vec3 lumcoeff = vec3( 0.299, 0.587, 0.114 );", 242 | "float lum = dot( color.rgb, lumcoeff );", 243 | "vec3 luminance = vec3( lum );", 244 | 245 | "vec3 final = vec3( color * mix( vec3( ao ), vec3( 1.0 ), luminance * lumInfluence ) );", // mix( color * ao, white, luminance ) 246 | 247 | "if ( onlyAO ) {", 248 | 249 | "final = onlyAOColor * vec3( mix( vec3( ao ), vec3( 1.0 ), luminance * lumInfluence ) );", // ambient occlusion only 250 | 251 | "}", 252 | 253 | "gl_FragColor = vec4( final, 1.0 );", 254 | 255 | "}" 256 | 257 | ].join("\n") 258 | 259 | }; 260 | -------------------------------------------------------------------------------- /lib/js/swfobject.js: -------------------------------------------------------------------------------- 1 | /* SWFObject v2.2 2 | is released under the MIT License 3 | */ 4 | var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O.ActiveXObject!=D){try{var ad=new ActiveXObject(W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y0){for(var af=0;af0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad'}}aa.outerHTML='"+af+"";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab