materials[ 0 ];
+ material.morphTargets = true;
+ material.color.setHex( 0xffaaaa );
+ material.ambient.setHex( 0x222222 );
+
+ var faceMaterial = new THREE.MeshFaceMaterial( materials );
+
+ for ( var i = 0; i < 729; i ++ ) {
+
+ // random placement in a grid
+
+ var x = ( ( i % 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
+ var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
+
+ // leave space for big monster
+
+ if ( Math.abs( x ) < 2 && Math.abs( z ) < 2 ) continue;
+
+ morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
+
+ // one second duration
+
+ morph.duration = 1000;
+
+ // random animation offset
+
+ morph.time = 1000 * Math.random();
+
+ var s = THREE.Math.randFloat( 0.00075, 0.001 );
+ morph.scale.set( s, s, s );
+
+ morph.position.set( x, 0, z );
+ morph.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
+
+ morph.matrixAutoUpdate = false;
+ morph.updateMatrix();
+
+ scene.add( morph );
+
+ morphs.push( morph );
+
+ }
+
+ } );
+
+
+ // Add the COLLADA
+
+ scene.add( dae );
+
+ // Lights
+
+ scene.add( new THREE.AmbientLight( 0xcccccc ) );
+
+ pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
+ pointLight.position.set( 5, 0, 0 );
+ scene.add( pointLight );
+
+ // Renderer
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ container.appendChild( renderer.domElement );
+
+ // Stats
+
+ stats = new Stats();
+ container.appendChild( stats.domElement );
+
+ // Events
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ //
+
+ function onWindowResize( event ) {
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ }
+
+ //
+
+ var t = 0;
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ // animate Collada model
+
+ if ( t > 30 ) t = 0;
+
+ if ( skin ) {
+
+ // guess this can be done smarter...
+
+ // (Indeed, there are way more frames than needed and interpolation is not used at all
+ // could be something like - one morph per each skinning pose keyframe, or even less,
+ // animation could be resampled, morphing interpolation handles sparse keyframes quite well.
+ // Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
+
+ for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
+
+ skin.morphTargetInfluences[ i ] = 0;
+
+ }
+
+ skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
+
+ t += 0.5;
+
+ }
+
+ // animate morphs
+
+ var delta = clock.getDelta();
+
+ if ( morphs.length ) {
+
+ for ( var i = 0; i < morphs.length; i ++ )
+ morphs[ i ].updateAnimation( 1000 * delta );
+
+
+ }
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var timer = Date.now() * 0.0005;
+
+ camera.position.x = Math.cos( timer ) * 10;
+ camera.position.y = 4;
+ camera.position.z = Math.sin( timer ) * 10;
+
+ camera.lookAt( scene.position );
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_json_objconverter.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_obj.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_obj_mtl.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_scene.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight;
+
+ var container,stats;
+
+ var camera, scene, loaded;
+ var renderer;
+
+ var mouseX = 0, mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ var rotatingObjects = [];
+ var morphAnimatedObjects = [];
+
+ var clock = new THREE.Clock();
+
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+ init();
+ animate();
+
+ function $( id ) {
+
+ return document.getElementById( id );
+
+ }
+
+ function handle_update( result, pieces ) {
+
+ refreshSceneView( result );
+ //renderer.initWebGLObjects( result.scene );
+
+ var m, material, count = 0;
+
+ for ( m in result.materials ) {
+
+ material = result.materials[ m ];
+ if ( ! ( material instanceof THREE.MeshFaceMaterial || material instanceof THREE.ShaderMaterial || material.morphTargets ) ) {
+
+ if( !material.program ) {
+
+ renderer.initMaterial( material, result.scene.__lights, result.scene.fog );
+
+ count += 1;
+
+ if( count > pieces ) {
+
+ //console.log("xxxxxxxxx");
+ break;
+
+ }
+
+ }
+
+ }
+
+ }
+
+ }
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ var loadScene = createLoadScene();
+
+ camera = loadScene.camera;
+ scene = loadScene.scene;
+
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ renderer.domElement.style.position = "relative";
+ container.appendChild( renderer.domElement );
+
+ renderer.gammaInput = true;
+ renderer.gammaOutput = true;
+ renderer.physicallyBasedShading = true;
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.right = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ $( "start" ).addEventListener( 'click', onStartClick, false );
+
+ var callbackProgress = function( progress, result ) {
+
+ var bar = 250,
+ total = progress.totalModels + progress.totalTextures,
+ loaded = progress.loadedModels + progress.loadedTextures;
+
+ if ( total )
+ bar = Math.floor( bar * loaded / total );
+
+ $( "bar" ).style.width = bar + "px";
+
+ var count = 0;
+ for ( var m in result.materials ) count++;
+
+ handle_update( result, Math.floor( count/total ) );
+
+ }
+
+ var callbackSync = function( result ) {
+
+ /*
+
+ // uncomment to see progressive scene loading
+
+ scene = result.scene;
+ camera = result.currentCamera;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ */
+
+ //handle_update( result, 1 );
+
+ }
+
+ var callbackFinished = function ( result ) {
+
+ loaded = result;
+
+ $( "message" ).style.display = "none";
+ $( "progressbar" ).style.display = "none";
+ $( "start" ).style.display = "block";
+ $( "start" ).className = "enabled";
+
+ handle_update( result, 1 );
+
+ result.scene.traverse( function ( object ) {
+
+ if ( object.properties.rotating === true ) {
+
+ rotatingObjects.push( object );
+
+ }
+
+ if ( object instanceof THREE.MorphAnimMesh ) {
+
+ morphAnimatedObjects.push( object );
+
+ }
+
+ if ( object instanceof THREE.SkinnedMesh ) {
+
+ if ( object.geometry.animation ) {
+
+ THREE.AnimationHandler.add( object.geometry.animation );
+
+ var animation = new THREE.Animation( object, object.geometry.animation.name );
+ animation.JITCompile = false;
+ animation.interpolationType = THREE.AnimationHandler.LINEAR;
+
+ animation.play();
+
+ }
+
+ }
+
+ } );
+
+ }
+
+ $( "progress" ).style.display = "block";
+
+ var loader = new THREE.SceneLoader();
+
+ loader.addGeometryHandler( "binary", THREE.BinaryLoader );
+ loader.addGeometryHandler( "ctm", THREE.CTMLoader );
+ loader.addGeometryHandler( "vtk", THREE.VTKLoader );
+ loader.addGeometryHandler( "stl", THREE.STLLoader );
+
+ loader.addHierarchyHandler( "obj", THREE.OBJLoader );
+ loader.addHierarchyHandler( "dae", THREE.ColladaLoader );
+ loader.addHierarchyHandler( "utf8", THREE.UTF8Loader );
+
+ loader.callbackSync = callbackSync;
+ loader.callbackProgress = callbackProgress;
+
+ loader.load( "scenes/test_scene.js", callbackFinished );
+
+ $( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function setButtonActive( id ) {
+
+ $( "start" ).style.backgroundColor = "green";
+
+ }
+
+ function onStartClick() {
+
+ $( "progress" ).style.display = "none";
+
+ camera = loaded.currentCamera;
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ scene = loaded.scene;
+
+ }
+
+ function onDocumentMouseMove( event ) {
+
+ mouseX = ( event.clientX - windowHalfX );
+ mouseY = ( event.clientY - windowHalfY );
+
+ }
+
+ function createLoadScene() {
+
+ var result = {
+
+ scene: new THREE.Scene(),
+ camera: new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
+
+ };
+
+ result.camera.position.z = 100;
+ result.scene.add( result.camera );
+
+ var object, geometry, material, light, count = 500, range = 200;
+
+ material = new THREE.MeshLambertMaterial( { color:0xffffff } );
+ geometry = new THREE.CubeGeometry( 5, 5, 5 );
+
+ for( var i = 0; i < count; i++ ) {
+
+ object = new THREE.Mesh( geometry, material );
+
+ object.position.x = ( Math.random() - 0.5 ) * range;
+ object.position.y = ( Math.random() - 0.5 ) * range;
+ object.position.z = ( Math.random() - 0.5 ) * range;
+
+ object.rotation.x = Math.random() * 6;
+ object.rotation.y = Math.random() * 6;
+ object.rotation.z = Math.random() * 6;
+
+ object.matrixAutoUpdate = false;
+ object.updateMatrix();
+
+ result.scene.add( object );
+
+ }
+
+ result.scene.matrixAutoUpdate = false;
+
+ light = new THREE.PointLight( 0xffffff );
+ result.scene.add( light );
+
+ light = new THREE.DirectionalLight( 0x111111 );
+ light.position.x = 1;
+ result.scene.add( light );
+
+ return result;
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var delta = clock.getDelta();
+
+ camera.position.x += ( mouseX - camera.position.x ) * .001;
+ camera.position.y += ( - mouseY - camera.position.y ) * .001;
+
+ camera.lookAt( scene.position );
+
+ // update skinning
+
+ THREE.AnimationHandler.update( delta * 0.75 );
+
+ for ( var i = 0; i < rotatingObjects.length; i ++ ) {
+
+ var object = rotatingObjects[ i ];
+
+ if ( object.properties.rotateX ) object.rotation.x += 1 * delta;
+ if ( object.properties.rotateY ) object.rotation.y += 0.5 * delta;
+
+ }
+
+ for ( var i = 0; i < morphAnimatedObjects.length; i ++ ) {
+
+ var object = morphAnimatedObjects[ i ];
+
+ object.updateAnimation( 1000 * delta );
+
+ }
+
+ renderer.render( scene, camera );
+
+ }
+
+ // Scene explorer user interface
+
+ function toggle( id ) {
+
+ var scn = $( "section_" + id ).style,
+ btn = $( "plus_" + id );
+
+ if ( scn.display == "block" ) {
+
+ scn.display = "none";
+ btn.innerHTML = "[+]";
+
+ }
+ else {
+
+ scn.display = "block";
+ btn.innerHTML = "[-]";
+
+ }
+
+ }
+
+ function createToggle( label ) { return function() { toggle( label ) } };
+
+ function refreshSceneView( result ) {
+
+ $( "section_exp" ).innerHTML = generateSceneView( result );
+
+ var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
+
+ for ( var i = 0; i < config.length; i++ )
+ $( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
+
+ }
+
+ function generateSection( label, id, objects ) {
+
+ var html = "";
+
+ html += "[+] " + label + "
";
+ html += "";
+
+ for( var o in objects ) {
+
+ html += o + "
";
+
+ }
+ html += "
";
+
+ return html;
+
+ }
+
+ function generateSceneView( result ) {
+
+ var config = [
+ [ "Objects", "obj", result.objects ],
+ [ "Geometries", "geo", result.geometries ],
+ [ "Materials", "mat", result.materials ],
+ [ "Textures", "tex", result.textures ],
+ [ "Lights", "lit", result.lights ],
+ [ "Cameras", "cam", result.cameras ]
+ ];
+
+ var html = "";
+
+ for ( var i = 0; i < config.length; i++ )
+ html += generateSection( config[i][0], config[i][1], config[i][2] );
+
+ return html;
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_scene_blender.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight;
+
+ var container,stats;
+
+ var camera, scene: THREE.Scene, loaded;
+ var renderer;
+
+ var mesh, zmesh, geometry;
+
+ var mouseX = 0, mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+ init();
+ animate();
+
+ function $( id ) {
+
+ return document.getElementById( id );
+
+ }
+
+ function handle_update( result, pieces ) {
+
+ refreshSceneView( result );
+ //renderer.initWebGLObjects( result.scene );
+
+ var m, material, count = 0;
+
+ for ( m in result.materials ) {
+
+ material = result.materials[ m ];
+ if ( ! ( material instanceof THREE.MeshFaceMaterial ) ) {
+
+ if( !material.program ) {
+
+ console.log(m);
+ renderer.initMaterial( material, result.scene.__lights, result.scene.fog );
+
+ count += 1;
+ if( count > pieces ) {
+
+ //console.log("xxxxxxxxx");
+ break;
+
+ }
+
+ }
+
+ }
+
+ }
+
+ }
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ var loadScene = createLoadScene();
+
+ camera = loadScene.camera;
+ scene = loadScene.scene;
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ renderer.domElement.style.position = "relative";
+ container.appendChild( renderer.domElement );
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.right = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ $( "start" ).addEventListener( 'click', onStartClick, false );
+
+ var callbackProgress = function( progress, result ) {
+
+ var bar = 250,
+ total = progress.total_models + progress.total_textures,
+ loaded = progress.loaded_models + progress.loaded_textures;
+
+ if ( total )
+ bar = Math.floor( bar * loaded / total );
+
+ $( "bar" ).style.width = bar + "px";
+
+ var count = 0;
+ for ( var m in result.materials ) count++;
+
+ handle_update( result, Math.floor( count/total ) );
+
+ }
+
+ var callbackFinished = function( result ) {
+
+ loaded = result;
+
+ $( "message" ).style.display = "none";
+ $( "progressbar" ).style.display = "none";
+ $( "start" ).style.display = "block";
+ $( "start" ).className = "enabled";
+
+ handle_update( result, 1 );
+
+ }
+
+ $( "progress" ).style.display = "block";
+
+ var loader = new THREE.SceneLoader();
+ loader.callbackProgress = callbackProgress;
+
+ loader.load( "obj/blenderscene/scene.js", callbackFinished );
+
+ $( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function setButtonActive( id ) {
+
+ $( "start" ).style.backgroundColor = "green";
+
+ }
+
+ function onStartClick() {
+
+ $( "progress" ).style.display = "none";
+
+ camera = loaded.currentCamera;
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ scene = loaded.scene;
+
+ }
+
+ function onDocumentMouseMove(event) {
+
+ mouseX = ( event.clientX - windowHalfX );
+ mouseY = ( event.clientY - windowHalfY );
+
+ }
+
+ function createLoadScene() {
+
+ var result = {
+
+ scene: new THREE.Scene(),
+ camera: new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
+
+ };
+
+ result.camera.position.z = 100;
+
+ var object, geometry, material, light, count = 500, range = 200;
+
+ material = new THREE.MeshLambertMaterial( { color:0xffffff } );
+ geometry = new THREE.CubeGeometry( 5, 5, 5 );
+
+ for( var i = 0; i < count; i++ ) {
+
+ object = new THREE.Mesh( geometry, material );
+
+ object.position.x = ( Math.random() - 0.5 ) * range;
+ object.position.y = ( Math.random() - 0.5 ) * range;
+ object.position.z = ( Math.random() - 0.5 ) * range;
+
+ object.rotation.x = Math.random() * 6;
+ object.rotation.y = Math.random() * 6;
+ object.rotation.z = Math.random() * 6;
+
+ object.matrixAutoUpdate = false;
+ object.updateMatrix();
+
+ result.scene.add( object );
+
+ }
+
+ result.scene.matrixAutoUpdate = false;
+
+ light = new THREE.PointLight( 0xffffff );
+ result.scene.add( light );
+
+ light = new THREE.DirectionalLight( 0x111111 );
+ light.position.x = 1;
+ result.scene.add( light );
+
+ return result;
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ camera.position.x += ( mouseX - camera.position.x ) * .001;
+ camera.position.y += ( - mouseY - camera.position.y ) * .001;
+
+ camera.lookAt( scene.position );
+
+ renderer.render( scene, camera );
+
+ }
+
+ // Scene explorer user interface
+
+ function toggle( id ) {
+
+ var scn = $( "section_" + id ).style,
+ btn = $( "plus_" + id );
+
+ if ( scn.display == "block" ) {
+
+ scn.display = "none";
+ btn.innerHTML = "[+]";
+
+ }
+ else {
+
+ scn.display = "block";
+ btn.innerHTML = "[-]";
+
+ }
+
+ }
+
+ function createToggle( label ) { return function() { toggle( label ) } };
+
+ function refreshSceneView( result ) {
+
+ $( "section_exp" ).innerHTML = generateSceneView( result );
+
+ var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
+
+ for ( var i = 0; i < config.length; i++ )
+ $( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
+
+ }
+
+ function generateSection( label, id, objects ) {
+
+ var html = "";
+
+ html += "[+] " + label + "
";
+ html += "";
+
+ for( var o in objects ) {
+
+ html += o + "
";
+
+ }
+ html += "
";
+
+ return html;
+
+ }
+
+ function generateSceneView( result ) {
+
+ var config = [
+ [ "Objects", "obj", result.objects ],
+ [ "Geometries", "geo", result.geometries ],
+ [ "Materials", "mat", result.materials ],
+ [ "Textures", "tex", result.textures ],
+ [ "Lights", "lit", result.lights ],
+ [ "Cameras", "cam", result.cameras ]
+ ];
+
+ var html = "";
+
+ for ( var i = 0; i < config.length; i++ )
+ html += generateSection( config[i][0], config[i][1], config[i][2] );
+
+ return html;
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_stl.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_utf8.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_vtk.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_lod.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_marching_cubes.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var camera, scene, renderer, objects;
+ var particleLight, pointLight;
+
+ var materials = [];
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+ camera.position.set( 0, 200, 800 );
+
+ scene = new THREE.Scene();
+
+ // Grid
+
+ var line_material = new THREE.LineBasicMaterial( { color: 0x303030 } ),
+ geometry = new THREE.Geometry(),
+ floor = -75, step = 25;
+
+ for ( var i = 0; i <= 40; i ++ ) {
+
+ geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
+ geometry.vertices.push( new THREE.Vector3( 500, floor, i * step - 500 ) );
+
+ geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
+ geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, 500 ) );
+
+ }
+
+ var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
+ scene.add( line );
+
+ // Materials
+
+ var texture = new THREE.Texture( generateTexture() );
+ texture.needsUpdate = true;
+
+ materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
+ materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
+ materials.push( new THREE.MeshNormalMaterial( ) );
+ materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
+ //materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
+
+ materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: texture, transparent: true } ) );
+ materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
+ materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
+
+ materials.push( new THREE.MeshDepthMaterial() );
+
+ materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000, ambient: 0x000000, shading: THREE.SmoothShading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, opacity: 0.9, transparent: true } ) );
+
+ materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );
+
+ // Spheres geometry
+
+ var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
+ var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
+ var geometry_pieces = new THREE.SphereGeometry( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
+
+ for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
+
+ var face = geometry_pieces.faces[ i ];
+ face.materialIndex = Math.floor( Math.random() * materials.length );
+
+ }
+
+ geometry_pieces["materials"] = materials;
+
+ materials.push( new THREE.MeshFaceMaterial( materials ) );
+
+ objects = [];
+
+ var sphere, geometry, material;
+
+ for ( var i = 0, l = materials.length; i < l; i ++ ) {
+
+ material = materials[ i ];
+
+ geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
+ ( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
+
+ sphere = new THREE.Mesh( geometry, material );
+
+ sphere.position.x = ( i % 4 ) * 200 - 400;
+ sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
+
+ sphere.rotation.x = Math.random() * 200 - 100;
+ sphere.rotation.y = Math.random() * 200 - 100;
+ sphere.rotation.z = Math.random() * 200 - 100;
+
+ objects.push( sphere );
+
+ scene.add( sphere );
+
+ }
+
+ particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+ scene.add( particleLight );
+
+ // Lights
+
+ scene.add( new THREE.AmbientLight( 0x111111 ) );
+
+ var directionalLight = new THREE.DirectionalLight( /*Math.random() * */ 0xffffff, 0.125 );
+
+ directionalLight.position.x = Math.random() - 0.5;
+ directionalLight.position.y = Math.random() - 0.5;
+ directionalLight.position.z = Math.random() - 0.5;
+
+ directionalLight.position.normalize();
+
+ scene.add( directionalLight );
+
+ pointLight = new THREE.PointLight( 0xffffff, 1 );
+ scene.add( pointLight );
+
+ //
+
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ container.appendChild( renderer.domElement );
+
+ //
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+
+ container.appendChild( stats.domElement );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function generateTexture() {
+
+ var canvas = document.createElement( 'canvas' );
+ canvas.width = 256;
+ canvas.height = 256;
+
+ var context = canvas.getContext( '2d' );
+ var image = context.getImageData( 0, 0, 256, 256 );
+
+ var x = 0, y = 0;
+
+ for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
+
+ x = j % 256;
+ y = x == 0 ? y + 1 : y;
+
+ image.data[ i ] = 255;
+ image.data[ i + 1 ] = 255;
+ image.data[ i + 2 ] = 255;
+ image.data[ i + 3 ] = Math.floor( x ^ y );
+
+ }
+
+ context.putImageData( image, 0, 0 );
+
+ return canvas;
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var timer = 0.0001 * Date.now();
+
+ camera.position.x = Math.cos( timer ) * 1000;
+ camera.position.z = Math.sin( timer ) * 1000;
+
+ camera.lookAt( scene.position );
+
+ for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+ var object = objects[ i ];
+
+ object.rotation.x += 0.01;
+ object.rotation.y += 0.005;
+
+ }
+
+ materials[ materials.length - 3 ].emissive.setHSV( 0.54, 1, 0.7 * ( 0.5 + 0.5 * Math.sin( 35 * timer ) ) );
+ materials[ materials.length - 4 ].emissive.setHSV( 0.04, 1, 0.7 * ( 0.5 + 0.5 * Math.cos( 35 * timer ) ) );
+
+ particleLight.position.x = Math.sin( timer * 7 ) * 300;
+ particleLight.position.y = Math.cos( timer * 5 ) * 400;
+ particleLight.position.z = Math.cos( timer * 3 ) * 300;
+
+ pointLight.position.x = particleLight.position.x;
+ pointLight.position.y = particleLight.position.y;
+ pointLight.position.z = particleLight.position.z;
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials2.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var camera, scene, renderer, objects;
+ var particleLight, pointLight;
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+ camera.position.set( 0, 200, 0 );
+
+ scene = new THREE.Scene();
+
+ // Materials
+
+ var imgTexture2 = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
+ imgTexture2.wrapS = imgTexture2.wrapT = THREE.RepeatWrapping;
+ imgTexture2.anisotropy = 16;
+
+ var imgTexture = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
+ imgTexture.repeat.set( 4, 2 );
+ imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
+ imgTexture.anisotropy = 16;
+
+ var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
+
+ var materials = [];
+
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0xffffff, ambient: 0x777777, specular: specular, shininess: shininess, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, ambient: 0x777777, specular: specular, shininess: shininess, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, ambient: 0x007700, specular: specular, shininess: shininess, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x000000, ambient: 0x00ff00, specular: specular, shininess: shininess, shading: shading } ) );
+
+ materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xffffff, ambient: 0x777777, shading: shading } ) );
+ materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, ambient: 0x777777, shading: shading } ) );
+ materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, ambient: 0x770000, shading: shading } ) );
+ materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0x000000, ambient: 0xff0000, shading: shading } ) );
+
+ shininess = 15;
+
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0xffaa00, shininess: shininess, metal: true, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0xaaff00, shininess: shininess, metal: true, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0x00ffaa, shininess: shininess, metal: true, shading: shading } ) );
+ materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0x00aaff, shininess: shininess, metal: true, shading: shading } ) );
+
+ // Spheres geometry
+
+ var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
+ var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
+
+ objects = [];
+
+ var sphere, geometry, material;
+
+ for ( var i = 0, l = materials.length; i < l; i ++ ) {
+
+ material = materials[ i ];
+
+ geometry = material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth;
+
+ sphere = new THREE.Mesh( geometry, material );
+
+ sphere.position.x = ( i % 4 ) * 200 - 200;
+ sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
+
+ objects.push( sphere );
+
+ scene.add( sphere );
+
+ }
+
+ particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+ scene.add( particleLight );
+
+ // Lights
+
+ scene.add( new THREE.AmbientLight( 0x444444 ) );
+
+ var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+ directionalLight.position.set( 1, 1, 1 ).normalize();
+ scene.add( directionalLight );
+
+ pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+ scene.add( pointLight );
+
+ particleLight.material.color = pointLight.color;
+ pointLight.position = particleLight.position;
+
+ //
+
+ renderer = new THREE.WebGLRenderer( { clearColor: 0x0a0a0a, clearAlpha: 1, antialias: true } );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.sortObjects = true;
+
+ container.appendChild( renderer.domElement );
+
+ renderer.gammaInput = true;
+ renderer.gammaOutput = true;
+ renderer.physicallyBasedShading = true;
+
+ //
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+
+ container.appendChild( stats.domElement );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var timer = Date.now() * 0.00025;
+
+ camera.position.x = Math.cos( timer ) * 800;
+ camera.position.z = Math.sin( timer ) * 800;
+
+ camera.lookAt( scene.position );
+
+ for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+ var object = objects[ i ];
+
+ object.rotation.y += 0.005;
+
+ }
+
+ particleLight.position.x = Math.sin( timer * 7 ) * 300;
+ particleLight.position.y = Math.cos( timer * 5 ) * 400;
+ particleLight.position.z = Math.cos( timer * 3 ) * 300;
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_blending.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var camera, scene, renderer;
+ var mesh;
+
+ init();
+ animate();
+
+ function init() {
+
+ // CAMERA
+
+ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+ camera.position.z = 600;
+
+ // SCENE
+
+ scene = new THREE.Scene();
+
+ // BACKGROUND
+
+ var x = document.createElement( "canvas" );
+ var xc = x.getContext( "2d" );
+ x.width = x.height = 128;
+ xc.fillStyle = "#ddd";
+ xc.fillRect( 0, 0, 128, 128 );
+ xc.fillStyle = "#555";
+ xc.fillRect( 0, 0, 64, 64 );
+ xc.fillStyle = "#999";
+ xc.fillRect( 32, 32, 32, 32 );
+ xc.fillStyle = "#555";
+ xc.fillRect( 64, 64, 64, 64 );
+ xc.fillStyle = "#777";
+ xc.fillRect( 96, 96, 32, 32 );
+
+ var mapBg = new THREE.Texture( x );
+ mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
+ mapBg.repeat.set( 128, 64 );
+ mapBg.needsUpdate = true;
+
+ /*
+ var mapBg = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
+ mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
+ mapBg.repeat.set( 8, 4 );
+ */
+
+ var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
+
+ var meshBg = new THREE.Mesh( new THREE.PlaneGeometry( 4000, 2000 ), materialBg );
+ meshBg.position.set( 0, 0, -1 );
+ scene.add( meshBg );
+
+ // OBJECTS
+
+ var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending", "AdditiveAlphaBlending" ];
+
+ var map0 = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
+ var map1 = THREE.ImageUtils.loadTexture( 'textures/sprite0.jpg' );
+ var map2 = THREE.ImageUtils.loadTexture( 'textures/sprite0.png' );
+ var map3 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0.png' );
+ var map4 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0_alpha.png' );
+
+ var geo1 = new THREE.PlaneGeometry( 100, 100 );
+ var geo2 = new THREE.PlaneGeometry( 100, 25 );
+
+ addImageRow( map0, 300 );
+ addImageRow( map1, 150 );
+ addImageRow( map2, 0 );
+ addImageRow( map3, -150 );
+ addImageRow( map4, -300 );
+
+ function addImageRow( map, y ) {
+
+ for ( var i = 0; i < blendings.length; i ++ ) {
+
+ var blending = blendings[ i ];
+
+ var material = new THREE.MeshBasicMaterial( { map: map } );
+ material.transparent = true;
+ material.blending = THREE[ blending ];
+
+ var x = ( i - blendings.length / 2 ) * 110;
+ var z = 0;
+
+ var mesh = new THREE.Mesh( geo1, material );
+ mesh.position.set( x, y, z );
+ scene.add( mesh );
+
+
+ var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.replace( "Blending", "" ) ) );
+ mesh.position.set( x, y - 75, z );
+ scene.add( mesh );
+
+ }
+
+ }
+
+ // RENDERER
+
+ renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ document.body.appendChild( renderer.domElement );
+
+ // EVENTS
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ //
+
+ function onWindowResize( event ) {
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight;
+
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+ camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+ camera.updateProjectionMatrix();
+
+ }
+
+
+ function generateLabelMaterial( text ) {
+
+ var x = document.createElement( "canvas" );
+ var xc = x.getContext( "2d" );
+ x.width = 128;
+ x.height = 32;
+
+ xc.fillStyle = "rgba( 0, 0, 0, 0.95 )";
+ xc.fillRect( 0, 0, 128, 32 );
+
+ xc.fillStyle = "white";
+ xc.font = "12pt arial bold";
+ xc.fillText( text, 10, 22 );
+
+ var map = new THREE.Texture( x );
+ map.needsUpdate = true;
+
+ var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
+ return material;
+
+ }
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_blending_custom.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_bumpmap.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_bumpmap_skin.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var STATS_ENABLED = false;
+
+ var CARS = {
+
+ "veyron": {
+
+ name: "Bugatti Veyron",
+ url: "obj/veyron/VeyronNoUv_bin.js",
+ author: 'Troyano',
+ init_rotation: [ 0, 0, 0 ],
+ scale: 5.5,
+ init_material: 4,
+ body_materials: [ 2 ],
+
+ object: null,
+ buttons: null,
+ materials: null
+
+ },
+
+ "gallardo": {
+
+ name: "Lamborghini Gallardo",
+ url: "obj/gallardo/GallardoNoUv_bin.js",
+ author: 'machman_3d',
+ init_rotation: [ 0, 0, 0 ],
+ scale: 3.7,
+ init_material: 9,
+ body_materials: [ 3 ],
+
+ object: null,
+ buttons: null,
+ materials: null
+
+ },
+
+ "f50": {
+
+ name: "Ferrari F50",
+ url: "obj/f50/F50NoUv_bin.js",
+ author: 'daniel sathya',
+ init_rotation: [ 0, 0, 0 ],
+ scale: 0.175,
+ init_material: 2,
+ body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
+
+ object: null,
+ buttons: null,
+ materials: null
+
+ },
+
+ "camaro": {
+
+ name: "Chevrolet Camaro",
+ url: "obj/camaro/CamaroNoUv_bin.js",
+ author: 'dskfnwn',
+ init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
+ scale: 75,
+ init_material: 0,
+ body_materials: [ 0 ],
+
+ object: null,
+ buttons: null,
+ materials: null
+
+ }
+
+ };
+
+
+ var container, stats;
+
+ var camera, scene, renderer;
+ var cameraCube, sceneCube;
+
+ var m, mi;
+
+ var directionalLight, pointLight;
+
+ var mouseX = 0, mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ var loader = new THREE.BinaryLoader( true );
+ document.body.appendChild( loader.statusDomElement );
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ // CAMERAS
+
+ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+ cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+
+ // SCENE
+
+ scene = new THREE.Scene();
+ sceneCube = new THREE.Scene();
+
+ // LIGHTS
+
+ var ambient = new THREE.AmbientLight( 0x050505 );
+ scene.add( ambient );
+
+ directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+ directionalLight.position.set( 2, 1.2, 10 ).normalize();
+ scene.add( directionalLight );
+
+ directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+ directionalLight.position.set( -2, 1.2, -10 ).normalize();
+ scene.add( directionalLight );
+
+ pointLight = new THREE.PointLight( 0xffaa00, 2 );
+ pointLight.position.set( 2000, 1200, 10000 );
+ scene.add( pointLight );
+
+ // Skybox
+
+ var shader = THREE.ShaderLib[ "cube" ];
+ shader.uniforms[ "tCube" ].value = textureCube;
+
+ var material = new THREE.ShaderMaterial( {
+
+ fragmentShader: shader.fragmentShader,
+ vertexShader: shader.vertexShader,
+ uniforms: shader.uniforms,
+ depthWrite: false,
+ side: THREE.BackSide
+
+ } ),
+
+ mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );
+ sceneCube.add( mesh );
+
+ //
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.setFaceCulling( THREE.CullFaceNone );
+ renderer.autoClear = false;
+
+ container.appendChild( renderer.domElement );
+
+ if ( STATS_ENABLED ) {
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ }
+
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+ var r = "textures/cube/Bridge2/";
+ var urls = [ r + "posx.jpg", r + "negx.jpg",
+ r + "posy.jpg", r + "negy.jpg",
+ r + "posz.jpg", r + "negz.jpg" ];
+
+ var textureCube = THREE.ImageUtils.loadTextureCube( urls );
+ textureCube.format = THREE.RGBFormat;
+
+ // common materials
+
+ var mlib = {
+
+ "Orange": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff2200, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
+ "Blue": new THREE.MeshLambertMaterial( { color: 0x001133, ambient: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
+ "Red": new THREE.MeshLambertMaterial( { color: 0x660000, ambient: 0x330000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
+ "Black": new THREE.MeshLambertMaterial( { color: 0x000000, ambient: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
+ "White": new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0x666666, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
+
+ "Carmine": new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Gold": new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Bronze": new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
+ "Chrome": new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+
+ "Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff2200, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Blue metal": new THREE.MeshLambertMaterial( { color: 0x001133, ambient: 0x002266, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Red metal": new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Green metal": new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+ "Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+
+ "Pure chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
+ "Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
+ "Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
+
+ "Black glass": new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
+ "Dark glass": new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
+ "Blue glass": new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
+ "Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
+
+ "Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
+ "Yellow glass": new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
+ "Orange glass": new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
+
+ "Orange glass 50": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
+ "Red glass 50": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
+
+ "Fullblack rough": new THREE.MeshLambertMaterial( { color: 0x000000 } ),
+ "Black rough": new THREE.MeshLambertMaterial( { color: 0x050505 } ),
+ "Darkgray rough": new THREE.MeshLambertMaterial( { color: 0x090909 } ),
+ "Red rough": new THREE.MeshLambertMaterial( { color: 0x330500 } ),
+
+ "Darkgray shiny": new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
+ "Gray shiny": new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
+
+ }
+
+ // Gallardo materials
+
+ CARS[ "gallardo" ].materials = {
+
+ body: [
+
+ [ "Orange", mlib[ "Orange" ] ],
+ [ "Blue", mlib[ "Blue" ] ],
+ [ "Red", mlib[ "Red" ] ],
+ [ "Black", mlib[ "Black" ] ],
+ [ "White", mlib[ "White" ] ],
+
+ [ "Orange metal", mlib[ "Orange metal" ] ],
+ [ "Blue metal", mlib[ "Blue metal" ] ],
+ [ "Green metal", mlib[ "Green metal" ] ],
+ [ "Black metal", mlib[ "Black metal" ] ],
+
+ [ "Carmine", mlib[ "Carmine" ] ],
+ [ "Gold", mlib[ "Gold" ] ],
+ [ "Bronze", mlib[ "Bronze" ] ],
+ [ "Chrome", mlib[ "Chrome" ] ]
+
+ ]
+
+ }
+
+ m = CARS[ "gallardo" ].materials;
+ mi = CARS[ "gallardo" ].init_material;
+
+ CARS[ "gallardo" ].mmap = {
+
+ 0: mlib[ "Pure chrome" ], // wheels chrome
+ 1: mlib[ "Black rough" ], // tire
+ 2: mlib[ "Black glass" ], // windshield
+ 3: m.body[ mi ][ 1 ], // body
+ 4: mlib[ "Red glass" ], // back lights
+ 5: mlib[ "Yellow glass" ], // front lights
+ 6: mlib[ "Dark chrome" ] // windshield rim
+
+ }
+
+ // Veyron materials
+
+ CARS[ "veyron" ].materials = {
+
+ body: [
+
+ [ "Orange metal", mlib[ "Orange metal" ] ],
+ [ "Blue metal", mlib[ "Blue metal" ] ],
+ [ "Red metal", mlib[ "Red metal" ] ],
+ [ "Green metal", mlib[ "Green metal" ] ],
+ [ "Black metal", mlib[ "Black metal" ] ],
+
+ [ "Gold", mlib[ "Gold" ] ],
+ [ "Bronze", mlib[ "Bronze" ] ],
+ [ "Chrome", mlib[ "Chrome" ] ]
+
+ ],
+
+ }
+
+ m = CARS[ "veyron" ].materials;
+ mi = CARS[ "veyron" ].init_material;
+
+ CARS[ "veyron" ].mmap = {
+
+ 0: mlib[ "Black rough" ], // tires + inside
+ 1: mlib[ "Pure chrome" ], // wheels + extras chrome
+ 2: m.body[ mi ][ 1 ], // back / top / front torso
+ 3: mlib[ "Dark glass" ], // glass
+ 4: mlib[ "Pure chrome" ], // sides torso
+ 5: mlib[ "Pure chrome" ], // engine
+ 6: mlib[ "Red glass 50" ], // backlights
+ 7: mlib[ "Orange glass 50" ] // backsignals
+
+ }
+
+ // F50 materials
+
+ CARS[ "f50" ].materials = {
+
+ body: [
+
+ [ "Orange", mlib[ "Orange" ] ],
+ [ "Blue", mlib[ "Blue" ] ],
+ [ "Red", mlib[ "Red" ] ],
+ [ "Black", mlib[ "Black" ] ],
+ [ "White", mlib[ "White" ] ],
+
+ [ "Orange metal", mlib[ "Orange metal" ] ],
+ [ "Blue metal", mlib[ "Blue metal" ] ],
+ [ "Black metal", mlib[ "Black metal" ] ],
+
+ [ "Carmine", mlib[ "Carmine" ] ],
+ [ "Gold", mlib[ "Gold" ] ],
+ [ "Bronze", mlib[ "Bronze" ] ],
+ [ "Chrome", mlib[ "Chrome" ] ]
+
+ ],
+
+ }
+
+ m = CARS[ "f50" ].materials;
+ mi = CARS[ "f50" ].init_material;
+
+ CARS[ "f50" ].mmap = {
+
+ 0: mlib[ "Dark chrome" ], // interior + rim
+ 1: mlib[ "Pure chrome" ], // wheels + gears chrome
+ 2: mlib[ "Blue glass" ], // glass
+ 3: m.body[ mi ][ 1 ], // torso mid + front spoiler
+ 4: mlib[ "Darkgray shiny" ], // interior + behind seats
+ 5: mlib[ "Darkgray shiny" ], // tiny dots in interior
+ 6: m.body[ mi ][ 1 ], // back torso
+ 7: m.body[ mi ][ 1 ], // right mirror decal
+ 8: m.body[ mi ][ 1 ], // front decal
+ 9: m.body[ mi ][ 1 ], // front torso
+ 10: m.body[ mi ][ 1 ], // left mirror decal
+ 11: mlib[ "Pure chrome" ], // engine
+ 12: mlib[ "Darkgray rough" ], // tires side
+ 13: mlib[ "Darkgray rough" ], // tires bottom
+ 14: mlib[ "Darkgray shiny" ], // bottom
+ 15: mlib[ "Black rough" ], // ???
+ 16: mlib[ "Orange glass" ], // front signals
+ 17: mlib[ "Dark chrome" ], // wheels center
+ 18: mlib[ "Red glass" ], // back lights
+ 19: mlib[ "Black rough" ], // ???
+ 20: mlib[ "Red rough" ], // seats
+ 21: mlib[ "Black rough" ], // back plate
+ 22: mlib[ "Black rough" ], // front light dots
+ 23: m.body[ mi ][ 1 ], // back torso
+ 24: m.body[ mi ][ 1 ] // back torso center
+
+ }
+
+
+ // Camero materials
+
+ CARS[ "camaro" ].materials = {
+
+ body: [
+
+ [ "Orange", mlib[ "Orange" ] ],
+ [ "Blue", mlib[ "Blue" ] ],
+ [ "Red", mlib[ "Red" ] ],
+ [ "Black", mlib[ "Black" ] ],
+ [ "White", mlib[ "White" ] ],
+
+ [ "Orange metal", mlib[ "Orange metal" ] ],
+ [ "Blue metal", mlib[ "Blue metal" ] ],
+ [ "Red metal", mlib[ "Red metal" ] ],
+ [ "Green metal", mlib[ "Green metal" ] ],
+ [ "Black metal", mlib[ "Black metal" ] ],
+
+ [ "Gold", mlib[ "Gold" ] ],
+ [ "Bronze", mlib[ "Bronze" ] ],
+ [ "Chrome", mlib[ "Chrome" ] ]
+
+ ],
+
+ }
+
+ m = CARS[ "camaro" ].materials;
+ mi = CARS[ "camaro" ].init_material;
+
+ CARS[ "camaro" ].mmap = {
+
+ 0: m.body[ mi ][ 1 ], // car body
+ 1: mlib[ "Pure chrome" ], // wheels chrome
+ 2: mlib[ "Pure chrome" ], // grille chrome
+ 3: mlib[ "Dark chrome" ], // door lines
+ 4: mlib[ "Light glass" ], // windshield
+ 5: mlib[ "Gray shiny" ], // interior
+ 6: mlib[ "Black rough" ], // tire
+ 7: mlib[ "Fullblack rough" ], // tireling
+ 8: mlib[ "Fullblack rough" ] // behind grille
+
+ }
+
+ loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
+
+ for( var c in CARS ) initCarButton( c );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ cameraCube.aspect = window.innerWidth / window.innerHeight;
+ cameraCube.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function initCarButton( car ) {
+
+ $( car ).addEventListener( 'click', function() {
+
+ if ( ! CARS[ car ].object ) {
+
+ loader.statusDomElement.style.display = "block";
+ loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
+
+ } else {
+
+ switchCar( car );
+
+ }
+
+ }, false );
+
+ }
+
+ function $( id ) { return document.getElementById( id ) }
+ function button_name( car, index ) { return "m_" + car + "_" + index }
+
+ function switchCar( car ) {
+
+ for ( var c in CARS ) {
+
+ if ( c != car && CARS[ c ].object ) {
+
+ CARS[ c ].object.visible = false;
+ CARS[ c ].buttons.style.display = "none";
+
+ }
+ }
+
+ CARS[ car ].object.visible = true;
+ CARS[ car ].buttons.style.display = "block";
+
+ $( "car_name" ).innerHTML = CARS[ car ].name + " model";
+ $( "car_author" ).innerHTML = CARS[ car ].author;
+
+ }
+
+ function createButtons( materials, car ) {
+
+ var buttons, i, src = "";
+
+ for( i = 0; i < materials.length; i ++ ) {
+
+ src += ' ';
+
+ }
+
+ buttons = document.createElement( "div" );
+ buttons.innerHTML = src;
+
+ $( "buttons_materials" ).appendChild( buttons );
+
+ return buttons;
+
+ }
+
+ function attachButtonMaterials( materials, faceMaterial, material_indices, car ) {
+
+ for( var i = 0; i < materials.length; i ++ ) {
+
+ $( button_name( car, i ) )["counter"] = i;
+ $( button_name( car, i ) ).addEventListener( 'click', function() {
+
+ for ( var j = 0; j < material_indices.length; j ++ ) {
+
+ faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
+
+ }
+
+ }, false );
+
+ }
+
+ }
+
+ function createScene( geometry, car ) {
+
+ loader.statusDomElement.innerHTML = "Creating model ...";
+
+ var m = new THREE.MeshFaceMaterial(),
+ s = CARS[ car ].scale * 1,
+ r = CARS[ car ].init_rotation,
+ materials = CARS[ car ].materials,
+ mi = CARS[ car ].init_material,
+ bm = CARS[ car ].body_materials;
+
+ for ( var i in CARS[ car ].mmap ) {
+
+ m.materials[ i ] = CARS[ car ].mmap[ i ];
+
+ }
+
+ var mesh = new THREE.Mesh( geometry, m );
+
+ mesh.rotation.x = r[ 0 ];
+ mesh.rotation.y = r[ 1 ];
+ mesh.rotation.z = r[ 2 ];
+
+ mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+
+ scene.add( mesh );
+
+ CARS[ car ].object = mesh;
+
+ CARS[ car ].buttons = createButtons( materials.body, car );
+ attachButtonMaterials( materials.body, m, bm, car );
+
+ switchCar( car );
+
+ loader.statusDomElement.style.display = "none";
+ loader.statusDomElement.innerHTML = "Loading model ...";
+
+ }
+
+ function onDocumentMouseMove(event) {
+
+ mouseY = ( event.clientY - window.innerHeight );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+
+ }
+
+ function render() {
+
+ var timer = -0.0002 * Date.now();
+
+ camera.position.x = 1000 * Math.cos( timer );
+ camera.position.y += ( - mouseY - camera.position.y ) * .05;
+ camera.position.z = 1000 * Math.sin( timer );
+
+ camera.lookAt( scene.position );
+ cameraCube.rotation.copy( camera.rotation );
+
+ renderer.render( sceneCube, cameraCube );
+ renderer.render( scene, camera );
+
+ if ( STATS_ENABLED ) stats.update();
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_anaglyph.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_camaro.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_camaro_crosseyed.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_parallaxbarrier.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var camera, scene, renderer;
+ var cameraCube, sceneCube;
+
+ var mesh, lightMesh, geometry;
+
+ var loader;
+
+ var directionalLight, pointLight;
+
+ var mouseX = 0;
+ var mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+ camera.position.z = 2000;
+
+ cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
+
+ scene = new THREE.Scene();
+ sceneCube = new THREE.Scene();
+
+ // LIGHTS
+
+ var ambient = new THREE.AmbientLight( 0xffffff );
+ scene.add( ambient );
+
+ pointLight = new THREE.PointLight( 0xffffff, 2 );
+ scene.add( pointLight );
+
+ // light representation
+
+ var sphere = new THREE.SphereGeometry( 100, 16, 8 );
+ lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+ lightMesh.position = pointLight.position;
+ lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
+ scene.add( lightMesh );
+
+ var path = "textures/cube/SwedishRoyalCastle/";
+ var format = '.jpg';
+ var urls = [
+ path + 'px' + format, path + 'nx' + format,
+ path + 'py' + format, path + 'ny' + format,
+ path + 'pz' + format, path + 'nz' + format
+ ];
+
+ var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
+ reflectionCube.format = THREE.RGBFormat;
+
+ var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
+ refractionCube.format = THREE.RGBFormat;
+
+ //var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.25 } );
+ var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0x993300, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
+ var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, ambient: 0x996600, envMap: refractionCube, refractionRatio: 0.95 } );
+ var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xaaaaaa, envMap: reflectionCube } )
+
+ // Skybox
+
+ var shader = THREE.ShaderLib[ "cube" ];
+ shader.uniforms[ "tCube" ].value = reflectionCube;
+
+ var material = new THREE.ShaderMaterial( {
+
+ fragmentShader: shader.fragmentShader,
+ vertexShader: shader.vertexShader,
+ uniforms: shader.uniforms,
+ depthWrite: false,
+ side: THREE.BackSide
+
+ } ),
+
+ mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );
+ sceneCube.add( mesh );
+
+ //
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.autoClear = false;
+ container.appendChild( renderer.domElement );
+
+ //
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ //
+
+ loader = new THREE.BinaryLoader( true );
+ document.body.appendChild( loader.statusDomElement );
+
+ loader.load( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ cameraCube.aspect = window.innerWidth / window.innerHeight;
+ cameraCube.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function createScene( geometry, m1, m2, m3 ) {
+
+ var s = 15;
+
+ var mesh = new THREE.Mesh( geometry, m1 );
+ mesh.position.z = - 100;
+ mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+ scene.add( mesh );
+
+ var mesh = new THREE.Mesh( geometry, m2 );
+ mesh.position.x = - 900;
+ mesh.position.z = - 100;
+ mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+ scene.add( mesh );
+
+ var mesh = new THREE.Mesh( geometry, m3 );
+ mesh.position.x = 900;
+ mesh.position.z = - 100;
+ mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+ scene.add( mesh );
+
+ loader.statusDomElement.style.display = "none";
+
+ }
+
+ function onDocumentMouseMove(event) {
+
+ mouseX = ( event.clientX - windowHalfX ) * 4;
+ mouseY = ( event.clientY - windowHalfY ) * 4;
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var timer = -0.0002 * Date.now();
+
+ lightMesh.position.x = 1500 * Math.cos( timer );
+ lightMesh.position.z = 1500 * Math.sin( timer );
+
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
+ camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+ camera.lookAt( scene.position );
+ cameraCube.rotation.copy( camera.rotation );
+
+ renderer.render( sceneCube, cameraCube );
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_reflection.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_refraction.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_dynamic.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_dynamic2.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_escher.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_refraction.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_grass.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var camera, scene, renderer,
+ mesh, levels = [];
+
+ init();
+ animate();
+
+ function init() {
+
+ camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+ camera.position.set( 0, 75, 100 );
+
+ scene = new THREE.Scene();
+
+ var geometry = new THREE.PlaneGeometry( 100, 100 );
+
+ var bitmap = generateTextureBase();
+
+ for ( var i = 0; i < 15; i ++ ) {
+
+ mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthWrite: false, depthTest: false } ) );
+ mesh.material.map.needsUpdate = true;
+
+ mesh.position.y = i * 0.25;
+ mesh.rotation.x = - Math.PI / 2;
+
+ scene.add( mesh );
+
+ }
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.sortObjects = false;
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ document.body.appendChild( renderer.domElement );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function generateTextureBase() {
+
+ var canvas = document.createElement( 'canvas' );
+ canvas.width = 512;
+ canvas.height = 512;
+
+ var context = canvas.getContext( '2d' );
+
+ for ( var i = 0; i < 20000; i ++ ) {
+
+ context.fillStyle = 'rgba(0,' + Math.floor( Math.random() * 64 + 32 ) + ',16,1)';
+ context.beginPath();
+ context.arc( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 1 + 0.5, 0, Math.PI * 2, true );
+ context.closePath();
+ context.fill();
+
+ }
+
+ context.globalAlpha = 0.075;
+ context.globalCompositeOperation = 'lighter';
+
+ return canvas;
+
+ }
+
+ function generateTextureLevel( texture ) {
+
+ texture.getContext( '2d' ).drawImage( texture, 0, 0 );
+
+ var canvas = document.createElement( 'canvas' );
+ canvas.width = texture.width;
+ canvas.height = texture.height;
+
+ canvas.getContext( '2d' ).drawImage( texture, 0, 0 );
+
+ return canvas;
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+
+ }
+
+ function render() {
+
+ var time = Date.now() / 6000;
+
+ camera.position.x = 80 * Math.cos( time );
+ camera.position.z = 80 * Math.sin( time );
+
+ camera.lookAt( scene.position );
+
+ for ( var i = 0, l = levels.length; i < l; i ++ ) {
+
+ mesh = levels[ i ];
+ mesh.position.x = Math.sin( time * 4 ) * i * i * 0.005;
+ mesh.position.z = Math.cos( time * 6 ) * i * i * 0.005;
+
+ }
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_lightmap.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_normalmap.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_normalmap2.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_shaders.html
+
+()=>{
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight;
+ var FLOOR = -250;
+
+ var container, stats;
+
+ var camera, scene, canvasRenderer, webglRenderer;
+
+ var mesh, zmesh, lightMesh, geometry;
+
+ var directionalLight, pointLight;
+
+ var mouseX = 0, mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ var render_canvas = false, render_gl = true;
+ var has_gl = false;
+
+ var bcanvas = document.getElementById( "rcanvas" );
+ var bwebgl = document.getElementById( "rwebgl" );
+
+ init();
+ animate();
+
+ render_canvas = !has_gl;
+ bwebgl.style.display = has_gl ? "inline" : "none";
+ bcanvas.className = render_canvas ? "button" : "button inactive";
+
+ function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
+
+ mesh = new THREE.Mesh( geometry, material );
+
+ mesh.scale.set( scale, scale, scale );
+ mesh.position.set( x, y, z );
+ mesh.rotation.set( rx, ry, rz );
+
+ scene.add( mesh );
+
+ }
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+ camera.position.z = 1000;
+
+ scene = new THREE.Scene();
+
+ // LIGHTS
+
+ var ambient = new THREE.AmbientLight( 0x101010 );
+ scene.add( ambient );
+
+ directionalLight = new THREE.DirectionalLight( 0xffffff );
+ directionalLight.position.set( 1, 1, 2 ).normalize();
+ scene.add( directionalLight );
+
+ pointLight = new THREE.PointLight( 0xffffff );
+ scene.add( pointLight );
+
+ // light representation
+
+ var sphere = new THREE.SphereGeometry( 100, 16, 8 );
+ lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+ lightMesh.scale.set( 0.05, 0.05, 0.05 );
+ lightMesh.position = pointLight.position;
+ scene.add( lightMesh );
+
+ // material samples
+
+ sphere = new THREE.SphereGeometry( 100, 32, 32 );
+
+ var y1 = 0, y2 = - 200;
+
+ addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
+
+ addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffffff, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );
+
+ addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xff5500, specular: 0x555555, shininess: 10 } ) );
+ addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xff5500 } ) );
+
+ addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffaa00, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffaa00 } ) );
+
+ addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x55ff00, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x55ff00 } ) );
+
+ addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x0055ff, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x0055ff } ) );
+
+ addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x5500ff, specular: 0x555555, shininess: 30 } ) );
+ addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x5500ff } ) );
+
+ addToruses( new THREE.TorusGeometry( 100, 20, 32, 32 ) );
+
+ //
+
+ if ( render_gl ) {
+
+ try {
+
+ webglRenderer = new THREE.WebGLRenderer();
+ webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ webglRenderer.domElement.style.position = "relative";
+ container.appendChild( webglRenderer.domElement );
+ has_gl = true;
+
+ } catch (e) {
+
+ }
+
+ }
+
+ canvasRenderer = new THREE.CanvasRenderer();
+ canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ container.appendChild( canvasRenderer.domElement );
+
+ //
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ bcanvas.addEventListener("click", toggleCanvas, false);
+ bwebgl.addEventListener("click", toggleWebGL, false);
+
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
+ if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ function addToruses( geometry ) {
+
+ var s = 0.85, t = s + 100, y = 200, rx = 0;
+
+ addMesh( geometry, s, -6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
+ addMesh( geometry, s, -4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
+ addMesh( geometry, s, -2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
+ addMesh( geometry, s, 0, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xffaa00, shininess: 10 } ) );
+ addMesh( geometry, s, 2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x55ff00, shininess: 10 } ) );
+ addMesh( geometry, s, 4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x0055ff, shininess: 10 } ) );
+ addMesh( geometry, s, 6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x5500ff, shininess: 10 } ) );
+
+ }
+
+
+ function onDocumentMouseMove(event) {
+
+ mouseX = ( event.clientX - windowHalfX );
+ mouseY = ( event.clientY - windowHalfY );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var timer = -0.0002 * Date.now();
+
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
+ camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+ camera.lookAt( scene.position );
+
+ lightMesh.position.x = 700 * Math.cos( timer );
+ lightMesh.position.z = 700 * Math.sin( timer );
+
+ if ( render_canvas ) canvasRenderer.render( scene, camera );
+ if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
+
+ }
+
+ function toggleCanvas() {
+
+ render_canvas = !render_canvas;
+ bcanvas.className = render_canvas ? "button" : "button inactive";
+
+ render_gl = !render_canvas;
+ bwebgl.className = render_gl ? "button" : "button inactive";
+
+ if( has_gl )
+ webglRenderer.domElement.style.display = render_gl ? "block" : "none";
+
+ canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
+
+ }
+
+ function toggleWebGL() {
+
+ render_gl = !render_gl;
+ bwebgl.className = render_gl ? "button" : "button inactive";
+
+ render_canvas = !render_gl;
+ bcanvas.className = render_canvas ? "button" : "button inactive";
+
+ if( has_gl )
+ webglRenderer.domElement.style.display = render_gl ? "block" : "none";
+
+ canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
+
+ }
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_shaders_fresnel.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_skin.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_anisotropy.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_compressed.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_filters.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_manualmipmap.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_video.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_wireframe.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphnormals.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_horse.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_md2.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_md2_control.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_circle.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_complex.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_grid.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_views.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_panorama_equirectangular.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_billboards.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_billboards_colors.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_dynamic.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_random.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_shapes.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_sprites.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance_doublesided.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance_static.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing2.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_advanced.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_dof.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_godrays.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_ribbons.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+ var camera, scene, renderer, ribbon, geometry, geometry2, ribbons = [],
+ parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
+
+ var mouseX = 0, mouseY = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ var postprocessing = { enabled : true };
+
+ var composer;
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+ camera.position.z = 1200;
+
+ scene = new THREE.Scene();
+ scene.fog = new THREE.FogExp2( 0x000000, 0.0016 );
+
+ geometry = new THREE.Geometry();
+ geometry2 = new THREE.Geometry();
+
+ n = 1000;
+ n2 = 2 * n;
+
+ for ( i = -n; i < n; i++ ) {
+
+ i2 = i + n;
+
+ x = i * 1.175;
+ y = ( i2 % 2 ) * 5;
+
+ if ( i2 % 2 ) {
+
+ z = 10 * Math.sin( i2 * 0.3 ) * Math.cos( i2 * 0.1 );
+
+ }
+
+ geometry.vertices.push( new THREE.Vector3( x, y, z ) );
+ geometry2.vertices.push( new THREE.Vector3( x, y, z ) );
+
+ h = i2 % 2 ? 1 : 0.15;
+ if( i2 % 4 <= 2 ) h -= 0.15;
+
+ color = new THREE.Color( 0xffffff );
+ color.setHSL( 0.1, 0, h );
+ geometry.colors.push( color );
+ geometry2.colors.push( color );
+
+ }
+
+ var tmpRot = new THREE.Matrix4();
+ tmpRot.makeRotationAxis( new THREE.Vector3( 1, 0, 0 ), Math.PI/2 );
+
+ var xgrid = 34;
+ var ygrid = 15;
+ var nribbons = xgrid * ygrid;
+
+ var c = 0;
+ for (var i = 0; i < xgrid; i ++ )
+ for (var j = 0; j < ygrid; j ++ ) {
+
+ var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors, side: THREE.DoubleSide } );
+
+ ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, material );
+ ribbon.rotation.x = 0;
+ ribbon.rotation.y = Math.PI / 2;
+ ribbon.rotation.z = Math.PI;
+
+ x = 40 * ( i - xgrid/2 );
+ y = 40 * ( j - ygrid/2 );
+ z = 0;
+
+ ribbon.position.set( x, y, z );
+
+ ribbon.matrixAutoUpdate = false;
+
+ // manually create local matrix
+
+ ribbon.matrix.setPosition( ribbon.position );
+ ribbon.matrixRotationWorld.setRotationFromEuler( ribbon.rotation );
+
+ ribbon.matrix.elements[ 0 ] = ribbon.matrixRotationWorld.elements[ 0 ];
+ ribbon.matrix.elements[ 4 ] = ribbon.matrixRotationWorld.elements[ 4 ];
+ ribbon.matrix.elements[ 8 ] = ribbon.matrixRotationWorld.elements[ 8 ];
+
+ ribbon.matrix.elements[ 1 ] = ribbon.matrixRotationWorld.elements[ 1 ];
+ ribbon.matrix.elements[ 5 ] = ribbon.matrixRotationWorld.elements[ 5 ];
+ ribbon.matrix.elements[ 9 ] = ribbon.matrixRotationWorld.elements[ 9 ];
+
+ ribbon.matrix.elements[ 2 ] = ribbon.matrixRotationWorld.elements[ 2 ];
+ ribbon.matrix.elements[ 6 ] = ribbon.matrixRotationWorld.elements[ 6 ];
+ ribbon.matrix.elements[ 10 ] = ribbon.matrixRotationWorld.elements[ 10 ];
+
+ ribbon.matrix.multiply( tmpRot );
+
+ ribbon.matrix.scale( ribbon.scale );
+
+ ribbons.push( ribbon );
+ scene.add( ribbon );
+
+ c ++;
+
+ }
+
+ scene.matrixAutoUpdate = false;
+
+ //
+
+ renderer = new THREE.WebGLRenderer( { antialias: false } );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.autoClear = false;
+ renderer.setClearColor( scene.fog.color, 1 );
+
+ container.appendChild( renderer.domElement );
+
+ //
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ container.appendChild( stats.domElement );
+
+ //
+
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+ document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+ document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+
+ //
+
+ var renderModel = new THREE.RenderPass( scene, camera );
+ var effectBloom = new THREE.BloomPass( 1.0 );
+ var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
+
+ effectCopy.renderToScreen = true;
+
+ composer = new THREE.EffectComposer( renderer );
+
+ composer.addPass( renderModel );
+ composer.addPass( effectBloom );
+ composer.addPass( effectCopy );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ windowHalfX = window.innerWidth / 2;
+ windowHalfY = window.innerHeight / 2;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ composer.reset();
+
+ }
+
+ function onDocumentMouseMove( event ) {
+
+ mouseX = event.clientX - windowHalfX;
+ mouseY = event.clientY - windowHalfY;
+
+ }
+
+ function onDocumentTouchStart( event ) {
+
+ if ( event.touches.length === 1 ) {
+
+ event.preventDefault();
+
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+ }
+
+ }
+
+ function onDocumentTouchMove( event ) {
+
+ if ( event.touches.length === 1 ) {
+
+ event.preventDefault();
+
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+ }
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var time = Date.now() * 0.00005;
+
+ camera.position.x += ( mouseX - camera.position.x ) * 0.036;
+ camera.position.y += ( - mouseY - camera.position.y ) * 0.036;
+
+ camera.lookAt( scene.position );
+
+ for ( i = -n; i < n; i ++ ) {
+
+ i2 = i + n;
+
+ z = 10 * Math.sin( i2 * 0.1 + time*30 );
+ z2 = 20 * Math.cos( Math.sin( i2 * 0.1 + time * 20 ) );
+
+ geometry.vertices[ i2 ].z = z;
+ geometry2.vertices[ i2 ].z = z2;
+
+ }
+
+ geometry.verticesNeedUpdate = true;
+ geometry2.verticesNeedUpdate = true;
+
+ for ( i = 0; i < nribbons; i++ ) {
+
+ h = ( 360 * ( i / nribbons + time ) % 360 ) / 360;
+ ribbons[ i ].material.color.setHSL( h, ( i % 20 / 20 ) * 0.3 + 0.7, 0.6 );
+
+ }
+
+ renderer.clear();
+ composer.render( 0.1 );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_rtt.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_sandbox.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var camera, scene, renderer;
+
+ var uniforms, material, mesh;
+
+ var mouseX = 0, mouseY = 0,
+ lat = 0, lon = 0, phy = 0, theta = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.getElementById( 'container' );
+
+ camera = new THREE.Camera();
+ camera.position.z = 1;
+
+ scene = new THREE.Scene();
+
+ uniforms = {
+ time: { type: "f", value: 1.0 },
+ resolution: { type: "v2", value: new THREE.Vector2() }
+ };
+
+ material = new THREE.ShaderMaterial( {
+
+ uniforms: uniforms,
+ vertexShader: document.getElementById( 'vertexShader' ).textContent,
+ fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+
+ } );
+
+ mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
+ scene.add( mesh );
+
+ renderer = new THREE.WebGLRenderer();
+ container.appendChild( renderer.domElement );
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ container.appendChild( stats.domElement );
+
+ onWindowResize();
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize( event? ) {
+
+ uniforms.resolution.value.x = window.innerWidth;
+ uniforms.resolution.value.y = window.innerHeight;
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ uniforms.time.value += 0.05;
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader2.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var start_time;
+
+ var camera, scene, renderer;
+
+ var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
+
+ var mouseX = 0, mouseY = 0,
+ lat = 0, lon = 0, phy = 0, theta = 0;
+
+ var windowHalfX = window.innerWidth / 2;
+ var windowHalfY = window.innerHeight / 2;
+
+ var clock = new THREE.Clock();
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.getElementById( 'container' );
+
+ camera = new THREE.PerspectiveCamera( 40, windowHalfX / windowHalfY, 1, 3000 );
+ camera.position.z = 4;
+
+ scene = new THREE.Scene();
+
+ start_time = Date.now();
+
+ uniforms1 = {
+ time: { type: "f", value: 1.0 },
+ resolution: { type: "v2", value: new THREE.Vector2() }
+ };
+
+ uniforms2 = {
+ time: { type: "f", value: 1.0 },
+ resolution: { type: "v2", value: new THREE.Vector2() },
+ texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ) }
+ };
+
+ uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
+
+ var size = 0.75, mlib = [],
+ params = [ [ 'fragment_shader1', uniforms1 ], [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
+
+ for( var i = 0; i < params.length; i++ ) {
+
+ var material = new THREE.ShaderMaterial( {
+
+ uniforms: params[ i ][ 1 ],
+ vertexShader: document.getElementById( 'vertexShader' ).textContent,
+ fragmentShader: document.getElementById( params[ i ][ 0 ] ).textContent
+
+ } );
+
+ mlib[ i ] = material;
+
+ mesh = new THREE.Mesh( new THREE.CubeGeometry( size, size, size ), new THREE.MeshFaceMaterial( [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ] ) );
+ mesh.position.x = i - ( params.length - 1 ) / 2;
+ mesh.position.y = i % 2 - 0.5;
+ scene.add( mesh );
+
+ meshes[ i ] = mesh;
+
+ }
+
+ renderer = new THREE.WebGLRenderer();
+ container.appendChild( renderer.domElement );
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ container.appendChild( stats.domElement );
+
+ onWindowResize();
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize( event? ) {
+
+ uniforms1.resolution.value.x = window.innerWidth;
+ uniforms1.resolution.value.y = window.innerHeight;
+
+ uniforms2.resolution.value.x = window.innerWidth;
+ uniforms2.resolution.value.y = window.innerHeight;
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var delta = clock.getDelta();
+
+ uniforms1.time.value += delta * 5;
+ uniforms2.time.value = clock.elapsedTime;
+
+ for( var i = 0; i < meshes.length; ++ i ) {
+
+ meshes[ i ].rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
+ meshes[ i ].rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
+
+ }
+
+ renderer.render( scene, camera );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader_lava.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shading_physical.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shadowmap.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
+
+ var MARGIN = 100;
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+ var FLOOR = -250;
+
+ var camera, controls, scene, renderer;
+ var container, stats;
+
+ var NEAR = 5, FAR = 3000;
+
+ var sceneHUD, cameraOrtho, hudMaterial;
+
+ var morph, morphs = [];
+
+ var light;
+
+ var clock = new THREE.Clock();
+
+ init();
+ animate();
+
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ // SCENE CAMERA
+
+ camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
+ camera.position.set( 700, 50, 1900 );
+
+ controls = new THREE.FirstPersonControls( camera );
+
+ controls.lookSpeed = 0.0125;
+ controls.movementSpeed = 500;
+ controls.noFly = false;
+ controls.lookVertical = true;
+ controls.constrainVertical = true;
+ controls.verticalMin = 1.5;
+ controls.verticalMax = 2.0;
+
+ controls.lon = -110;
+
+ // SCENE
+
+ scene = new THREE.Scene();
+ scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
+
+ // LIGHTS
+
+ var ambient = new THREE.AmbientLight( 0x444444 );
+ scene.add( ambient );
+
+ light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI, 1 );
+ light.position.set( 0, 1500, 1000 );
+ light.target.position.set( 0, 0, 0 );
+
+ light.castShadow = true;
+
+ light.shadowCameraNear = 700;
+ light.shadowCameraFar = camera.far;
+ light.shadowCameraFov = 50;
+
+ //light.shadowCameraVisible = true;
+
+ light.shadowBias = 0.0001;
+ light.shadowDarkness = 0.5;
+
+ light.shadowMapWidth = SHADOW_MAP_WIDTH;
+ light.shadowMapHeight = SHADOW_MAP_HEIGHT;
+
+ scene.add( light );
+
+ createHUD();
+ createScene();
+
+ // RENDERER
+
+ renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ renderer.domElement.style.position = "relative";
+ renderer.domElement.style.top = MARGIN + 'px';
+ container.appendChild( renderer.domElement );
+
+ renderer.setClearColor( scene.fog.color, 1 );
+ renderer.autoClear = false;
+
+ //
+
+ renderer.shadowMapEnabled = true;
+ renderer.shadowMapType = THREE.PCFShadowMap;
+
+ // STATS
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ //container.appendChild( stats.domElement );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ SCREEN_WIDTH = window.innerWidth;
+ SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+ camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+ controls.handleResize();
+
+ }
+
+ function createHUD() {
+
+ cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
+ cameraOrtho.position.z = 10;
+
+ var shader = THREE.UnpackDepthRGBAShader;
+ var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
+ hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
+
+ var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
+ var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
+ hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
+ hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
+ hudMesh.rotation.x = Math.PI / 2;
+
+ sceneHUD = new THREE.Scene();
+ sceneHUD.add( hudMesh );
+
+ cameraOrtho.lookAt( sceneHUD.position );
+
+ }
+
+ function createScene( ) {
+
+ // GROUND
+
+ var geometry = new THREE.PlaneGeometry( 100, 100 );
+ var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
+ planeMaterial.ambient = planeMaterial.color;
+
+ var ground = new THREE.Mesh( geometry, planeMaterial );
+
+ ground.position.set( 0, FLOOR, 0 );
+ ground.rotation.x = - Math.PI / 2;
+ ground.scale.set( 100, 100, 100 );
+
+ ground.castShadow = false;
+ ground.receiveShadow = true;
+
+ scene.add( ground );
+
+ // TEXT
+
+ var textGeo = new THREE.TextGeometry( "THREE.JS", {
+
+ size: 200,
+ height: 50,
+ curveSegments: 12,
+
+ font: "helvetiker",
+ weight: "bold",
+ style: "normal",
+
+ bevelThickness: 2,
+ bevelSize: 5,
+ bevelEnabled: true
+
+ });
+
+ textGeo.computeBoundingBox();
+ var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+
+ var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
+
+ var mesh = new THREE.Mesh( textGeo, textMaterial );
+ mesh.position.x = centerOffset;
+ mesh.position.y = FLOOR + 67;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ // CUBES
+
+ var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), planeMaterial );
+
+ mesh.position.y = FLOOR - 50;
+ mesh.position.z = 20;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), planeMaterial );
+
+ mesh.position.y = FLOOR - 50;
+ mesh.position.z = 20;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ // MORPHS
+
+ function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
+
+ var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
+
+ if ( fudgeColor ) {
+
+ material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
+ material.ambient = material.color;
+
+ }
+
+ var meshAnim = new THREE.MorphAnimMesh( geometry, material );
+
+ (meshAnim).speed = speed;
+ meshAnim.duration = duration;
+ meshAnim.time = 600 * Math.random();
+
+ meshAnim.position.set( x, y, z );
+ meshAnim.rotation.y = Math.PI/2;
+
+ meshAnim.castShadow = true;
+ meshAnim.receiveShadow = true;
+
+ scene.add( meshAnim );
+
+ morphs.push( meshAnim );
+
+ }
+
+ function morphColorsToFaceColors( geometry ) {
+
+ if ( geometry.morphColors && geometry.morphColors.length ) {
+
+ var colorMap = geometry.morphColors[ 0 ];
+
+ for ( var i = 0; i < colorMap.colors.length; i ++ ) {
+
+ geometry.faces[ i ].color = colorMap.colors[ i ];
+
+ }
+
+ }
+
+ }
+
+ var loader = new THREE.JSONLoader();
+
+ loader.load( "models/animated/horse.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 300, true );
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 450, true );
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 600, true );
+
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -300, true );
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -450, true );
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -600, true );
+
+ } );
+
+ /*
+ loader.load( "obj/morphs/fox.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
+
+ } );
+
+ loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
+
+ } );
+
+ loader.load( "obj/morphs/flamingo.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
+
+ } );
+
+ loader.load( "obj/morphs/stork.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
+
+ } );
+
+ loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
+
+ } );
+
+ loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
+
+ } );
+
+ loader.load( "obj/morphs/parrot.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
+
+ } );
+ */
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var delta = clock.getDelta();
+
+ for ( var i = 0; i < morphs.length; i ++ ) {
+
+ morph = morphs[ i ];
+
+ morph.updateAnimation( 1000 * delta );
+
+ morph.position.x += morph.speed * delta;
+
+ if ( morph.position.x > 2000 ) {
+
+ morph.position.x = -1000 - Math.random() * 500;
+
+ }
+
+ }
+
+ controls.update( delta );
+
+ renderer.clear();
+ renderer.render( scene, camera );
+
+ // Render debug HUD with shadow map
+
+ //hudMaterial.uniforms.tDiffuse.texture = light.shadowMap;
+ //renderer.render( sceneHUD, cameraOrtho );
+
+ }
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shadowmap_performance.html
+
+()=>{
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
+
+ var MARGIN = 100;
+
+ var SCREEN_WIDTH = window.innerWidth;
+ var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+ var FLOOR = -250;
+
+ var camera, controls, scene, renderer;
+ var container, stats;
+
+ var NEAR = 5, FAR = 3000;
+
+ var sceneHUD, cameraOrtho, hudMaterial;
+
+ var morph, morphs = [];
+
+ var light;
+
+ var clock = new THREE.Clock();
+
+ init();
+ animate();
+
+
+ function init() {
+
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+
+ // SCENE CAMERA
+
+ camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
+ camera.position.set( 700, 50, 1900 );
+
+ controls = new THREE.FirstPersonControls( camera );
+
+ controls.lookSpeed = 0.0125;
+ controls.movementSpeed = 500;
+ controls.noFly = false;
+ controls.lookVertical = true;
+ controls.constrainVertical = true;
+ controls.verticalMin = 1.5;
+ controls.verticalMax = 2.0;
+
+ controls.lon = -110;
+
+ // SCENE
+
+ scene = new THREE.Scene();
+ scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
+
+ // LIGHTS
+
+ var ambient = new THREE.AmbientLight( 0x444444 );
+ scene.add( ambient );
+
+ light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI, 1 );
+ light.position.set( 0, 1500, 1000 );
+ light.target.position.set( 0, 0, 0 );
+
+ light.castShadow = true;
+
+ light.shadowCameraNear = 700;
+ light.shadowCameraFar = camera.far;
+ light.shadowCameraFov = 50;
+
+ //light.shadowCameraVisible = true;
+
+ light.shadowBias = 0.0001;
+ light.shadowDarkness = 0.5;
+
+ light.shadowMapWidth = SHADOW_MAP_WIDTH;
+ light.shadowMapHeight = SHADOW_MAP_HEIGHT;
+
+ scene.add( light );
+
+ createHUD();
+ createScene();
+
+ // RENDERER
+
+ renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+ renderer.domElement.style.position = "relative";
+ renderer.domElement.style.top = MARGIN + 'px';
+ container.appendChild( renderer.domElement );
+
+ renderer.setClearColor( scene.fog.color, 1 );
+ renderer.autoClear = false;
+
+ //
+
+ renderer.shadowMapEnabled = true;
+ renderer.shadowMapType = THREE.PCFSoftShadowMap;
+
+ // STATS
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ container.appendChild( stats.domElement );
+
+ //
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ SCREEN_WIDTH = window.innerWidth;
+ SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+ camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+ controls.handleResize();
+
+ }
+
+ function createHUD() {
+
+ cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
+ cameraOrtho.position.z = 10;
+
+ var shader = THREE.UnpackDepthRGBAShader;
+ var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
+ hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
+
+ var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
+ var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
+ hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
+ hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
+ hudMesh.rotation.x = Math.PI / 2;
+
+ sceneHUD = new THREE.Scene();
+ sceneHUD.add( hudMesh );
+
+ cameraOrtho.lookAt( sceneHUD.position );
+
+ }
+
+ function createScene( ) {
+
+ // GROUND
+
+ var geometry = new THREE.PlaneGeometry( 100, 100 );
+ var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
+ planeMaterial.ambient = planeMaterial.color;
+
+ var ground = new THREE.Mesh( geometry, planeMaterial );
+
+ ground.position.set( 0, FLOOR, 0 );
+ ground.rotation.x = - Math.PI / 2;
+ ground.scale.set( 100, 100, 100 );
+
+ ground.castShadow = false;
+ ground.receiveShadow = true;
+
+ scene.add( ground );
+
+ // TEXT
+
+ var textGeo = new THREE.TextGeometry( "THREE.JS", {
+
+ size: 200,
+ height: 50,
+ curveSegments: 12,
+
+ font: "helvetiker",
+ weight: "bold",
+ style: "normal",
+
+ bevelThickness: 2,
+ bevelSize: 5,
+ bevelEnabled: true
+
+ });
+
+ textGeo.computeBoundingBox();
+ var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+
+ var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
+
+ var mesh = new THREE.Mesh( textGeo, textMaterial );
+ mesh.position.x = centerOffset;
+ mesh.position.y = FLOOR + 67;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ // CUBES
+
+ var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), planeMaterial );
+
+ mesh.position.y = FLOOR - 50;
+ mesh.position.z = 20;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), planeMaterial );
+
+ mesh.position.y = FLOOR - 50;
+ mesh.position.z = 20;
+
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+
+ scene.add( mesh );
+
+ // MORPHS
+
+ function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
+
+ var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
+
+ if ( fudgeColor ) {
+
+ material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
+ material.ambient = material.color;
+
+ }
+
+ var meshAnim = new THREE.MorphAnimMesh( geometry, material );
+
+ (meshAnim).speed = speed;
+ meshAnim.duration = duration;
+ meshAnim.time = 600 * Math.random();
+
+ meshAnim.position.set( x, y, z );
+ meshAnim.rotation.y = Math.PI/2;
+
+ meshAnim.castShadow = true;
+ meshAnim.receiveShadow = true;
+
+ scene.add( meshAnim );
+
+ morphs.push( meshAnim );
+
+ }
+
+ function morphColorsToFaceColors( geometry ) {
+
+ if ( geometry.morphColors && geometry.morphColors.length ) {
+
+ var colorMap = geometry.morphColors[ 0 ];
+
+ for ( var i = 0; i < colorMap.colors.length; i ++ ) {
+
+ geometry.faces[ i ].color = colorMap.colors[ i ];
+
+ }
+
+ }
+
+ }
+
+ var loader = new THREE.JSONLoader();
+
+ loader.load( "models/animated/horse.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+
+
+ var i = -600;
+ while (i < 601){
+ addMorph( geometry, 550, 1000, 100 - Math.random() * 3000, FLOOR, i, true );
+ i += 2;
+ }
+
+ } );
+
+ /*
+ loader.load( "obj/morphs/fox.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
+
+ } );
+
+ loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
+
+ } );
+
+ loader.load( "obj/morphs/flamingo.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
+
+ } );
+
+ loader.load( "obj/morphs/stork.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
+
+ } );
+
+ loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
+
+ } );
+
+ loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
+
+ } );
+
+ loader.load( "obj/morphs/parrot.js", function( geometry ) {
+
+ morphColorsToFaceColors( geometry );
+ addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
+
+ } );
+ */
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var delta = clock.getDelta();
+
+ for ( var i = 0; i < morphs.length; i ++ ) {
+
+ morph = morphs[ i ];
+
+ morph.updateAnimation( 1000 * delta );
+
+ morph.position.x += morph.speed * delta;
+
+ if ( morph.position.x > 2000 ) {
+
+ morph.position.x = -1000 - Math.random() * 500;
+
+ }
+
+ }
+
+ controls.update( delta );
+
+ renderer.clear();
+ renderer.render( scene, camera );
+
+ // Render debug HUD with shadow map
+
+ //hudMaterial.uniforms.tDiffuse.texture = light.shadowMap;
+ //renderer.render( sceneHUD, cameraOrtho );
+
+ }
+
+};
+
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_sprites.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_terrain_dynamic.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_test_memory.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_test_memory2.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgl_trails.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_animation.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_arealights.html
+// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_pointlights.html
\ No newline at end of file
diff --git a/threejs/three.d.ts b/threejs/three.d.ts
index 12eae5de8..0ae2bc67e 100644
--- a/threejs/three.d.ts
+++ b/threejs/three.d.ts
@@ -89,11 +89,14 @@ module THREE {
// Mapping modes
export enum Mapping { }
- export var UVMapping: Mapping;
- export var CubeReflectionMapping: Mapping;
- export var CubeRefractionMapping: Mapping;
- export var SphericalReflectionMapping: Mapping;
- export var SphericalRefractionMapping: Mapping;
+ export interface MappingConstructor {
+ new(): Mapping;
+ }
+ export var UVMapping: MappingConstructor;
+ export var CubeReflectionMapping: MappingConstructor;
+ export var CubeRefractionMapping: MappingConstructor;
+ export var SphericalReflectionMapping: MappingConstructor;
+ export var SphericalRefractionMapping: MappingConstructor;
// Wrapping modes
export enum Wrapping { }
@@ -183,6 +186,24 @@ module THREE {
// Core ///////////////////////////////////////////////////////////////////////////////////////////////
+ interface BufferGeometryAttributeArray extends ArrayBufferView{
+ length: number;
+ }
+
+ interface BufferGeometryAttribute{
+ itemSize: number;
+ array: BufferGeometryAttributeArray;
+ numItems: number;
+ }
+
+ interface BufferGeometryAttributes{
+ [name: string]: BufferGeometryAttribute;
+ index?: BufferGeometryAttribute;
+ position?: BufferGeometryAttribute;
+ normal?: BufferGeometryAttribute;
+ color?: BufferGeometryAttribute;
+ }
+
/**
* This is a superefficent class for geometries because it saves all data in buffers.
* It reduces memory costs and cpu cycles. But it is not as easy to work with because of all the nessecary buffer calculations.
@@ -204,7 +225,7 @@ module THREE {
/**
* This hashmap has as id the name of the attribute to be set and as value the buffer to set it to.
*/
- attributes: { [name: string]: any; };
+ attributes: BufferGeometryAttributes;
/**
* When set, it holds certain buffers in memory to have faster updates for this object. When unset, it deletes those buffers and saves memory.
@@ -224,6 +245,8 @@ module THREE {
hasTangents: bool;
morphTargets: any[];
+ offsets: { start: number; count: number; index: number; }[];
+
/**
* Bakes matrix transform directly into vertex coordinates.
*/
@@ -861,7 +884,7 @@ module THREE {
* Frustums are used to determine what is inside the camera's field of view. They help speed up the rendering process.
*/
export class Frustum {
- constructor(p0?: number, p1?: number, p2?: number, p3?: number, p4?: number, p5?: number);
+ constructor(p0?: Plane, p1?: Plane, p2?: Plane, p3?: Plane, p4?: Plane, p5?: Plane);
/**
* Array of 6 vectors.
@@ -884,13 +907,15 @@ module THREE {
export class Line3{
constructor(start?:Vector3, end?:Vector3);
+ start: Vector3;
+ end: Vector3;
set(start?:Vector3, end?:Vector3):Line3;
copy(line:Line3):Line3;
center(optionalTarget?:Vector3):Vector3;
delta(optionalTarget?:Vector3):Vector3;
distanceSq():number;
distance():number;
- at(t:number, optionalTarget:Vector3):Vector3;
+ at(t:number, optionalTarget?: Vector3):Vector3;
closestPointToPointParameter(point:Vector3, clampToLine?:bool):number;
closestPointToPoint(point:Vector3, clampToLine?:bool, optionalTarget?:Vector3):Vector3;
applyMatrix4(matrix:Matrix4):Line3;
@@ -913,9 +938,10 @@ module THREE {
distanceToSphere(sphere: Sphere): number;
projectPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
orthoPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
- isIntersectionLine(startPoint: Vector3, endPoint: Vector3): bool;
+ isIntersectionLine(line: Line3): bool;
+ intersectLine(line: Line3, optionalTarget?: Vector3): Vector3;
coplanarPoint(optionalTarget?: bool): Vector3;
- applyMatrix4(matrix: Matrix3, optionalNormalMatrix?: Matrix3): Plane;
+ applyMatrix4(matrix: Matrix4, optionalNormalMatrix?: Matrix3): Plane;
translate(offset: Vector3): Plane;
equals(plane: Plane): bool;
clone(): Plane;
@@ -932,8 +958,8 @@ module THREE {
containsPoint(point: Vector3): bool;
distanceToPoint(point: Vector3): number;
intersectsSphere(sphere: Sphere): bool;
- clampPoint(point: Vector3, optionalTarget?: Vector3): Sphere;
- getBoundingBox(optionalTarget: Box3): Box3;
+ clampPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
+ getBoundingBox(optionalTarget?: Box3): Box3;
applyMatrix4(matrix: Matrix): Sphere;
translate(offset: Vector3): Sphere;
equals(sphere: Sphere): bool;
@@ -1247,6 +1273,10 @@ module THREE {
* Returns -1 if x is less than 0, 1 if x is greater than 0, and 0 if x is zero.
*/
sign(x: number): number;
+
+ degToRad(degrees: number): number;
+
+ radToDeg(radians: number): number;
};
/**
@@ -1325,6 +1355,7 @@ module THREE {
multiplyScalar(s: number): Matrix3;
determinant(): number;
getInverse(matrix: Matrix3, throwOnInvertible?: bool): Matrix3;
+ getInverse(matrix: Matrix4, throwOnInvertible?: bool): Matrix3;
/**
* Transposes this matrix in place.
@@ -1398,7 +1429,7 @@ module THREE {
*
* @param v Rotation vector. order — The order of rotations. Eg. "XYZ".
*/
- setRotationFromEuler(v: Vector3, order: string): Matrix4;
+ setRotationFromEuler(v: Vector3, order?: string): Matrix4;
/**
* Sets the rotation submatrix of this matrix to the rotation specified by q.
@@ -1593,7 +1624,7 @@ module THREE {
set (origin: Vector3, direction: Vector3): Ray;
copy(ray: Ray): Ray;
at(t: number, optionalTarget?: Vector3): Vector3;
- recastSelf(t: number): Ray;
+ recast(t: number): Ray;
closestPointToPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
distanceToPoint(point: Vector3): number;
isIntersectionSphere(sphere: Sphere): bool;
@@ -2029,6 +2060,29 @@ module THREE {
reparametrizeByArcLength(samplingCoef: number): void;
}
+ class Triangle{
+ constructor(a?: Vector3, b?: Vector3, c?: Vector3 );
+ a: Vector3;
+ b: Vector3;
+ c: Vector3;
+ set(a: Vector3, b: Vector3, c: Vector3): Triangle;
+ setFromPointsAndIndices( points: Vector3[], i0: number, i1: number, i2: number ): Triangle;
+ copy(triangle: Triangle): Triangle;
+ area(): number;
+ midpoint(optionalTarget?: Vector3): Vector3;
+ normal(optionalTarget?: Vector3): Vector3;
+ plane(optionalTarget?: Vector3): Plane;
+ barycoordFromPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
+ containsPoint(point: Vector3): bool;
+ equals(triangle: Triangle): bool;
+ clone(): Triangle;
+ static normal(a: Vector3, b: Vector3, c: Vector3, optionalTarget?: Vector3): Vector3;
+ // static/instance method to calculate barycoordinates
+ // based on: http://www.blackpawn.com/texts/pointinpoly/default.html
+ static barycoordFromPoint(point: Vector3, a: Vector3, b: Vector3, c: Vector3, optionalTarget: Vector3 ): Vector3;
+ static containsPoint(point: Vector3, a: Vector3, b: Vector3, c: Vector3): bool;
+ }
+
/**
* ( interface Vector<T> )
@@ -2042,6 +2096,10 @@ module THREE {
* v.addVectors(new THREE.Vector2(0, 1), new THREE.Vector2(2, 3)); // invalid but compiled successfully
*/
export interface Vector {
+ setComponent(index: number, value: number): void;
+
+ getComponent(index: number): number;
+
/**
* copy(v:T):T;
*/
@@ -2155,6 +2213,26 @@ module THREE {
*/
set (x: number, y: number): Vector2;
+ /**
+ * Sets X component of this vector.
+ */
+ setX (x: number): Vector2;
+
+ /**
+ * Sets Y component of this vector.
+ */
+ setY(y: number): Vector2;
+
+ /**
+ * Sets a component of this vector.
+ */
+ setComponent(index: number, value: number): void;
+
+ /**
+ * Gets a component of this vector.
+ */
+ getComponent(index: number): number;
+
/**
* Copies value of v to this vector.
*/
@@ -2191,6 +2269,12 @@ module THREE {
*/
divideScalar(s: number): Vector2;
+ min(v: Vector2): Vector2;
+
+ max(v: Vector2): Vector2;
+
+ clamp(min: Vector2, max: Vector2): Vector2;
+
/**
* Inverts this vector.
*/
@@ -2461,6 +2545,30 @@ module THREE {
*/
set (x: number, y: number, z: number, w: number): Vector4;
+ /**
+ * Sets X component of this vector.
+ */
+ setX (x: number): Vector2;
+
+ /**
+ * Sets Y component of this vector.
+ */
+ setY(y: number): Vector2;
+
+ /**
+ * Sets Z component of this vector.
+ */
+ setZ(z: number): Vector2;
+
+ /**
+ * Sets w component of this vector.
+ */
+ setW(w: number): Vector2;
+
+ setComponent(index: number, value: number): void;
+
+ getComponent(index: number): number;
+
/**
* Copies value of v to this vector.
*/
@@ -2497,6 +2605,12 @@ module THREE {
*/
divideScalar(s: number): Vector4;
+ min(v: Vector4): Vector4;
+
+ max(v: Vector4): Vector4;
+
+ clamp(min: Vector4, max: Vector4): Vector4;
+
/**
* Inverts this vector.
*/
@@ -2512,11 +2626,6 @@ module THREE {
*/
lengthSq(): number;
- /**
- * Computes dot product of this vector and v.
- */
- dot(v: Vector4): Vector4;
-
/**
* Computes length of this vector.
*/
@@ -2579,6 +2688,8 @@ module THREE {
export class Box2 {
constructor(min?: Vector2, max?: Vector2);
+ min: Vector2;
+ max: Vector2;
set (min: Vector2, max: Vector2): Box2;
setFromPoints(points: Vector2[]): Box2;
setFromCenterAndSize(center: Vector2, size: number): Box2;
@@ -2595,7 +2706,7 @@ module THREE {
getParameter(point: Vector2): Vector2;
isIntersectionBox(box: Box2): bool;
clampPoint(point: Vector2, optionalTarget?: Vector2): Vector2;
- distanceToPoint(point: Vector2): Vector2;
+ distanceToPoint(point: Vector2): number;
intersect(box: Box2): Box2;
union(box: Box2): Box2;
translate(offset: Vector2): Box2;
@@ -2605,6 +2716,8 @@ module THREE {
export class Box3 {
constructor(min?: Vector3, max?: Vector3);
+ min: Vector3;
+ max: Vector3;
set (min: Vector3, max: Vector3): Box3;
setFromPoints(points: Vector3[]): Box3;
setFromCenterAndSize(center: Vector3, size: number): Box3;
@@ -2621,7 +2734,8 @@ module THREE {
getParameter(point: Vector3): Vector3;
isIntersectionBox(box: Box3): bool;
clampPoint(point: Vector3, optionalTarget?: Vector3): Vector3;
- distanceToPoint(point: Vector3): Vector3;
+ distanceToPoint(point: Vector3): number;
+ getBoundingSphere(): Sphere;
intersect(box: Box3): Box3;
union(box: Box3): Box3;
applyMatrix4(matrix: Matrix4): Box3;
@@ -3286,6 +3400,27 @@ module THREE {
add(loader: Loader): void;
}
+ interface SceneLoaderResult{
+ scene: Scene;
+ geometries: {[id:string]:Geometry;};
+ face_materials: {[id:string]:Material;};
+ materials: {[id:string]:Material;};
+ textures: {[id:string]:Texture;};
+ objects: {[id:string]:Object3D;};
+ cameras: {[id:string]:Camera;};
+ lights: {[id:string]:Light;};
+ fogs: {[id:string]:IFog;};
+ empties: {[id:string]:any;};
+ groups: {[id:string]:any;};
+ }
+
+ interface SceneLoaderProgress{
+ totalModels: number;
+ totalTextures: number;
+ loadedModels: number;
+ loadedTextures: number;
+ }
+
/**
* A loader for loading a complete scene out of a JSON file.
*/
@@ -3314,19 +3449,29 @@ module THREE {
* Will be called when load completes.
* The default is a function with empty body.
*/
- callbackSync: () => void;
+ callbackSync: (result: SceneLoaderResult) => void;
/**
* Will be called as load progresses.
* The default is a function with empty body.
*/
- callbackProgress: () => void;
+ callbackProgress: (progress: SceneLoaderProgress, result: SceneLoaderResult) => void;
+
+ geometryHandlerMap: any;
+ hierarchyHandlerMap: any;
+
/**
* @param url
* @param callbackFinished This function will be called with the loaded model as an instance of scene when the load is completed.
*/
load(url: string, callbackFinished: (scene: Scene) => void ): void;
+
+ addGeometryHandler(typeID: string, loaderClass: Object): void;
+
+ addHierarchyHandler(typeID: string, loaderClass: Object): void;
+
+ static parse(json: any, callbackFinished:(result: SceneLoaderResult)=>void, url: string): void;
}
/**
@@ -3462,7 +3607,7 @@ module THREE {
linewidth?: number;
linecap?: string;
linejoin?: string;
- vertexColors?: bool;
+ vertexColors?: Colors;
fog?: bool;
}
@@ -3781,8 +3926,9 @@ module THREE {
export interface Uniforms {
- [name: string]: { type: string; value: Object; };
+ [name: string]: { type: string; value: any; };
//[name:string]:{type:UniformType;value:Object;};
+ color?: { type: string; value: THREE.Color; };
}
export interface ShaderMaterialParameters {
@@ -3835,12 +3981,19 @@ module THREE {
constructor(geometry?: Geometry, material?: LineDashedMaterial, type?: number);
constructor(geometry?: Geometry, material?: LineBasicMaterial, type?: number);
constructor(geometry?: Geometry, material?: ShaderMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: LineDashedMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: LineBasicMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: ShaderMaterial, type?: number);
geometry: Geometry;
material: Material;
- type: number;
+ type: LineType;
clone(object?: Line): Line;
}
+ enum LineType{}
+ var LineStrip: LineType;
+ var LinePieces: LineType;
+
export class LOD extends Object3D {
constructor();
LODs: Object3D[];
@@ -3857,6 +4010,15 @@ module THREE {
constructor(geometry?: Geometry, material?: MeshNormalMaterial);
constructor(geometry?: Geometry, material?: MeshPhongMaterial);
constructor(geometry?: Geometry, material?: ShaderMaterial);
+
+ constructor(geometry?: BufferGeometry , material?: MeshBasicMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshDepthMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshFaceMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshLambertMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshNormalMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshPhongMaterial);
+ constructor(geometry?: BufferGeometry , material?: ShaderMaterial);
+
geometry: Geometry;
material: Material;
morphTargetBase: number;
@@ -3913,6 +4075,10 @@ module THREE {
constructor(geometry: Geometry, material?: ParticleCanvasMaterial);
constructor(geometry: Geometry, material?: ParticleDOMMaterial);
constructor(geometry: Geometry, material?: ShaderMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleBasicMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleCanvasMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleDOMMaterial);
+ constructor(geometry: BufferGeometry, material?: ShaderMaterial);
/**
* An instance of Geometry, where each vertex designates the position of a particle in the system.
@@ -3940,13 +4106,13 @@ module THREE {
}
export class SkinnedMesh extends Mesh {
- constructor(geometry?: Geometry, material?: MeshBasicMaterial);
- constructor(geometry?: Geometry, material?: MeshDepthMaterial);
- constructor(geometry?: Geometry, material?: MeshFaceMaterial);
- constructor(geometry?: Geometry, material?: MeshLambertMaterial);
- constructor(geometry?: Geometry, material?: MeshNormalMaterial);
- constructor(geometry?: Geometry, material?: MeshPhongMaterial);
- constructor(geometry?: Geometry, material?: ShaderMaterial);
+ constructor(geometry?: Geometry, material?: MeshBasicMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshDepthMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshFaceMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshLambertMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshNormalMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshPhongMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: ShaderMaterial, useVertexTexture?: bool);
useVertexTexture: bool;
identityMatrix: Matrix4;
bones: Bone[];
@@ -4692,6 +4858,17 @@ module THREE {
type?: TextureDataType,
anisotropy?: number
);
+ constructor(
+ image: HTMLCanvasElement,
+ mapping?: Mapping,
+ wrapS?: Wrapping,
+ wrapT?: Wrapping,
+ magFilter?: TextureFilter,
+ minFilter?: TextureFilter,
+ format?: PixelFormat,
+ type?: TextureDataType,
+ anisotropy?: number
+ );
id: number;
name: string;
image: Object; // HTMLImageElement or ImageData ;
@@ -4831,6 +5008,8 @@ module THREE {
getNextKeyWith(type: string, h: number, key: number): KeyFrame; // ????
getPrevKeyWith(type: string, h: number, key: number): KeyFrame;
+
+ JITCompile: bool; // https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_skinning_morph.html#L251
}
export class AnimationInterpolation { }
@@ -5291,8 +5470,8 @@ module THREE {
* Defines a 2d shape plane using paths.
*/
export class Shape extends Path {
- constructor();
- holes: Vector2[][];
+ constructor(points?: Vector2[]);
+ holes: Path[];
extrude(options?: any): ExtrudeGeometry;
makeGeometry(options?: any): ShapeGeometry;
getPointsHoles(divisions: number): Vector2[][];
@@ -5341,7 +5520,7 @@ module THREE {
}
export class ConvexGeometry extends Geometry {
- constructor(vertices: Vector3);
+ constructor(vertices: Vector3[]);
}
/**
@@ -5415,8 +5594,8 @@ module THREE {
}
export class ShapeGeometry extends Geometry {
- constructor(shape: Shape, options: any);
- constructor(shapes: Shape[], options: any);
+ constructor(shape: Shape, options?: any);
+ constructor(shapes: Shape[], options?: any);
shapebb: BoundingBox;
addShapeList(shapes: Shape[], options: any): ShapeGeometry;
addShape(shape: Shape, options?: any): void;
@@ -5489,7 +5668,12 @@ module THREE {
}
export class TubeGeometry extends Geometry {
- constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: ArrowHelper[]);
+ constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: Object3D);
+
+ // https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_shapes.html#L208
+ // Hmmm?
+ constructor(path: SplineCurve3, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: bool);
+
path: Path;
segments: number;
radius: number;
@@ -5591,11 +5775,11 @@ module THREE {
}
export class LensFlare extends Object3D {
- constructor(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: number);
+ constructor(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: Color);
lensFlares: LensFlareProperty[];
positionScreen: Vector3;
- customUpdateCallback: () => void;
- add(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: number, opacity?: number): void;
+ customUpdateCallback: (object:LensFlare) => void;
+ add(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: Color, opacity?: number): void;
updateLensFlares(): void;
}
@@ -5679,7 +5863,7 @@ module THREE {
export var UniformsUtils: {
merge(uniforms: Object[]): Uniforms;
merge(uniforms: Uniforms[]): Uniforms;
- clone(uniforms_src: Object[][]): Object[][];
+ clone(uniforms_src: Uniforms): Uniforms;
};
export var UniformsLib: {
diff --git a/toastr/toastr.d.ts b/toastr/toastr.d.ts
index f1a038704..8d3047ad7 100644
--- a/toastr/toastr.d.ts
+++ b/toastr/toastr.d.ts
@@ -62,6 +62,10 @@ interface ToastrOptions {
*/
positionClass?: string;
/**
+ * Where toast should be displayed - background
+ */
+ backgroundpositionClass?: string;
+ /**
* Time in milliseconds that the toast should be displayed
*/
timeOut?: number;
@@ -146,4 +150,4 @@ interface Toastr {
version: string;
}
-declare var toastr: Toastr;
\ No newline at end of file
+declare var toastr: Toastr;
diff --git a/trunk8/trunk8.d.ts b/trunk8/trunk8.d.ts
new file mode 100644
index 000000000..a736a27b6
--- /dev/null
+++ b/trunk8/trunk8.d.ts
@@ -0,0 +1,51 @@
+// Type definitions for trunk8
+// Project: https://github.com/rviscomi/trunk8
+// Definitions by: Blake Niemyjski
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///
+
+interface Trunk8Options {
+ /**
+ (Default: '…') The string to insert in place of the omitted text. This value may include HTML.
+ @param {string} fill
+ */
+ fill?: string;
+ /**
+ (Default: 1) The number of lines of text-wrap to tolerate before truncating. This value must be an integer greater than or equal to 1.
+ @param {number} lines
+ */
+ lines?: number;
+ /**
+ (Default: 'right') The side of the text from which to truncate. Valid values include 'center', 'left', and 'right'.
+ @param {string} side
+ */
+ side?: string;
+ /**
+ (Default: true) When true, the title attribute of the targeted HTML element will be set to the original, untruncated string. Valid values include true and false.
+ @param {bool} tooltip
+ */
+ tooltip?: bool;
+ /**
+ (Default: 'auto') The width, in characters, of the desired text. When set to 'auto', trunk8 will maximize the amount of text without spilling over.
+ @param {string} width
+ */
+ width?: string;
+}
+
+interface JQuery {
+ /**
+ Creates a trunk8 instance and calls a method.
+ @constructor
+ @param {string} method
+ @param {string} value
+ */
+ trunk8(method: string, value?: string): any;
+
+ /**
+ Creates a trunk8 instance with default options.
+ @constructor
+ @param {Trunk8Options} options
+ */
+ trunk8(options?: Trunk8Options): any;
+}
\ No newline at end of file
diff --git a/tweenjs/tweenjs.d.ts b/tweenjs/tweenjs.d.ts
index 82e9fd25c..7ab5cf350 100644
--- a/tweenjs/tweenjs.d.ts
+++ b/tweenjs/tweenjs.d.ts
@@ -12,10 +12,10 @@
module createjs {
- export class TweenJS {
- // properties
- version: string;
- buildDate: string;
+ export class TweenJS {
+ // properties
+ version: string;
+ buildDate: string;
}
@@ -120,7 +120,7 @@ module createjs {
// methods
call(callback: (tweenObject: Tween) => any, params?: any[], scope?: Object); // when 'params' isn't given, the callback receives a tweenObject
call(callback: (...params: any[]) => any, params?: any[], scope?: Object); // otherwise, it receives the params only
- static get(target, props: Object): Tween;
+ static get(target, props?: Object, pluginData?: Object, override?: bool): Tween;
static hasActiveTweens(target? ): void;
static installPlugin(plugin: Object, properties: Object): void;
pause(tween: Tween): void;
@@ -137,24 +137,23 @@ module createjs {
// events
change: (event) => any;
- // EventDispatcher mixins
- addEventListener(type: string, listener: (eventObj: Object) => bool): Function;
- addEventListener(type: string, listener: (eventObj: Object) => bool): Object;
- removeEventListener(type: string, listener: (eventObj: Function) => bool): void;
- removeEventListener(type: string, listener: (eventObj: Object) => bool): void;
- removeAllEventListeners(type: string): void;
- dispatchEvent(eventObj: string, target: Object): bool;
- dispatchEvent(eventObj: Object, target: Object): bool;
- hasEventListener(type: string): bool;
+ // EventDispatcher mixins
+ addEventListener(type: string, listener: (eventObj: Object) => bool): Function;
+ addEventListener(type: string, listener: (eventObj: Object) => bool): Object;
+ removeEventListener(type: string, listener: (eventObj: Function) => bool): void;
+ removeEventListener(type: string, listener: (eventObj: Object) => bool): void;
+ removeAllEventListeners(type: string): void;
+ dispatchEvent(eventObj: string, target: Object): bool;
+ dispatchEvent(eventObj: Object, target: Object): bool;
+ hasEventListener(type: string): bool;
}
- export class MotionGuidePlugin {
- // properties
- static priority: number;
+ export class MotionGuidePlugin {
+ // properties
+ static priority: number;
- //methods
- static install(): Object;
-
- }
+ //methods
+ static install(): Object;
+ }
}
diff --git a/underscore-ko/underscore-ko.d.ts b/underscore-ko/underscore-ko.d.ts
new file mode 100644
index 000000000..c10b49d43
--- /dev/null
+++ b/underscore-ko/underscore-ko.d.ts
@@ -0,0 +1,101 @@
+// Type definitions for Underscore-ko 1.2.2 with underscore 1.4
+// Project: https://github.com/kamranayub/UnderscoreKO
+// Definitions by: Maurits Elbers
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///
+///
+
+interface KnockoutObservableArrayFunctions {
+
+ /****
+ Collections
+ *****/
+ each(iterator: ListIterator, context?: any): any[];
+ each(iterator: ObjectIterator, context?: any): any[];
+ forEach(iterator: ObjectIterator, context?: any): any[];
+ forEach(iterator: ListIterator, context?: any): any[];
+
+ map(iterator: ListIterator, context?: any): any[];
+ map(iterator: ObjectIterator, context?: any): any[];
+ collect(iterator: ListIterator, context?: any): any[];
+ collect(iterator: ObjectIterator, context?: any): any[];
+
+ reduce(iterator: any, memo: any, context?: any): any;
+ inject(iterator: any, memo: any, context?: any): any;
+ foldl(iterator: any, memo: any, context?: any): any;
+
+ reduceRight(iterator: any, memo: any, context?: any): any[];
+ foldr(iterator: any, memo: any, context?: any): any[];
+
+ find(iterator: any, context?: any): any;
+ detect(iterator: any, context?: any): any;
+
+ filter(iterator: any, context?: any): any[];
+ select(iterator: any, context?: any): any[];
+
+ where(properties: any): any[];
+
+ reject(iterator: any, context?: any): any[];
+
+ all(iterator: any, context?: any): bool;
+ every(iterator: any, context?: any): bool;
+
+ any(iterator?: any, context?: any): bool;
+ some(iterator?: any, context?: any): bool;
+
+ contains(list: any, value: any): bool;
+ contains(value: any): bool;
+ include(list: any, value: any): bool;
+ include(value: any): bool;
+
+ invoke(methodName: string, arguments: any[]): any;
+ invoke(methodName: string, ...arguments: any[]): any;
+
+ pluck(propertyName: string): string[];
+ max(iterator?: any, context?: any): any;
+ min(iterator?: any, context?: any): any;
+ sortBy(iterator?: any, context?: any): any;
+ groupBy(iterator: any): any;
+ countBy(iterator: any): any;
+ shuffle(): any[];
+ size(): number;
+
+ /****
+ Arrays
+ *****/
+ first(n?: number): any;
+ head(n?: number): any;
+ take(n?: number): any;
+
+ initial(n?: number): any[];
+
+ last(n?: number): any;
+
+ rest(n?: number): any[];
+ tail(n?: number): any[];
+ drop(n?: number): any[];
+
+ compact(): any[];
+ flatten(shallow?: bool): any[];
+ without(...values: any[]): any[];
+ union(...arrays: any[][]): any[];
+ intersection(...arrays: any[][]): any[];
+ difference(...others: any[][]): any[];
+
+ uniq(isSorted?: bool, iterator?: any): any[];
+ unique(isSorted?: bool, iterator?: any): any[];
+
+ zip(...arrays: any[]): any[];
+ object(values?: any[]): any;
+ indexOf(value: any, isSorted?: bool): number;
+ lastIndexOf(value: any, fromIndex?: number): number;
+ sortedIndex(valueL: any, iterator?: any): number;
+ range(stop: number): any[];
+ range(start: number, stop: number, step?: number): any[];
+
+ /****
+ Chaining
+ *****/
+ chain(object: any): UnderscoreWrappedObject;
+}
diff --git a/underscore/underscore-typed.d.ts b/underscore/underscore-typed.d.ts
index 86077aa18..941066920 100644
--- a/underscore/underscore-typed.d.ts
+++ b/underscore/underscore-typed.d.ts
@@ -1197,7 +1197,7 @@ interface Underscore {
* @param obj Object to chain.
* @return Wrapped `obj`.
**/
- chain(obj: any): UnderscoreOOPWrapper;
+ chain(obj: any): UnderscoreChain;
/**
* Extracts the value of a wrapped object.
@@ -2048,7 +2048,825 @@ interface UnderscoreOOPWrapper {
* Wrapped type `any`.
* @see _.chain
**/
- chain(): any;
+ chain(): UnderscoreChain;
+
+ /**
+ * Wrapped type `any`.
+ * @see _.value
+ **/
+ value(): any;
+}
+
+interface UnderscoreChain {
+
+ /**************
+ * Collections *
+ **************/
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.each
+ **/
+ each(
+ iterator: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `object`.
+ * @see _.each
+ **/
+ each(
+ iterator: (value: any, key?: string, object?: Object) => any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'each'.
+ * @see each
+ **/
+ forEach(
+ iterator: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Alias for 'each'.
+ * @see each
+ **/
+ forEach(
+ iterator: (value: any, key?: string, object?: Object) => any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.map
+ **/
+ map(
+ iterator: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `object`.
+ * @see _.map
+ **/
+ map(
+ iterator: (value: any, key?: string, object?: Object) => any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'map'.
+ * @see map
+ **/
+ collect(
+ iterator: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Alias for 'map'.
+ * @see map
+ **/
+ collect(
+ iterator: (value: any, key?: string, object?: Object) => any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.reduce
+ **/
+ reduce(
+ iterator: (memo: any, element: any, index?: number, list?: any[]) => any,
+ memo: any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'reduce'.
+ * @see reduce
+ **/
+ inject(
+ iterator: (memo: any, element: any, index?: number, list?: any[]) => any,
+ memo: any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'reduce'.
+ * @see reduce
+ **/
+ foldl(
+ iterator: (memo: any, element: any, index?: number, list?: any[]) => any,
+ memo: any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.reduceRight
+ **/
+ reduceRight(
+ iterator: (memo: any, element: any, index?: number, list?: any[]) => any,
+ memo: any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'reduceRight'.
+ * @see reduceRight
+ **/
+ foldr(
+ iterator: (memo: any, element: any, index?: number, list?: any[]) => any,
+ memo: any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.find
+ **/
+ find(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'find'.
+ * @see find
+ **/
+ detect(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.filter
+ **/
+ filter(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'filter'.
+ * @see filter
+ **/
+ select(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.where
+ **/
+ where(list: any[], properties: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.findWhere
+ **/
+ findWhere(properties: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.reject
+ **/
+ reject(
+ list: any[],
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.all
+ **/
+ all(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'all'.
+ * @see all
+ **/
+ every(
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.any
+ **/
+ any(
+ list: any[],
+ iterator?: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'any'.
+ * @see any
+ **/
+ some(
+ list: any[],
+ iterator: (element: any, index?: number, list?: any[]) => bool,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.contains
+ **/
+ contains(value: any): UnderscoreChain;
+
+ /**
+ * Alias for 'contains'.
+ * @see contains
+ **/
+ include(value: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.invoke
+ **/
+ invoke(methodName: string, ...arguments: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.pluck
+ **/
+ pluck(propertyName: string): UnderscoreChain;
+
+ /**
+ * Wrapped type `number[]`.
+ * @see _.max
+ **/
+ max(): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.max
+ **/
+ max(
+ iterator: (element: any, index?: number, list?: any[]) => number,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `number[]`.
+ * @see _.min
+ **/
+ min(): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.min
+ **/
+ min(
+ iterator: (obj: any, index?: number, list?: any[]) => number,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.sortBy
+ **/
+ sortBy(
+ iterator: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.sortBy
+ **/
+ sortBy(
+ iterator: string,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.groupBy
+ **/
+ groupBy(
+ iterator: (element: any, index?: number, list?: any[]) => string,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.groupBy
+ **/
+ groupBy(
+ iterator: string,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.countBy
+ **/
+ countBy(
+ iterator: (element: any, index?: number, list?: any[]) => string,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.countBy
+ **/
+ countBy(
+ iterator: string,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.shuffle
+ **/
+ shuffle(): UnderscoreChain;
+
+ /**
+ * Wrapped type `any`.
+ * @see _.toArray
+ **/
+ toArray(): UnderscoreChain;
+
+ /**
+ * Wrapped type `any`.
+ * @see _.size
+ **/
+ size(): UnderscoreChain;
+
+ /*********
+ * Arrays *
+ **********/
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.first
+ **/
+ first(): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.first
+ **/
+ first(n: number): UnderscoreChain;
+
+ /**
+ * Alias for 'first'.
+ * @see first
+ **/
+ head(): UnderscoreChain;
+ /**
+ * Alias for 'first'.
+ * @see first
+ **/
+ head(n: number): UnderscoreChain;
+
+ /**
+ * Alias for 'first'.
+ * @see first
+ **/
+ take(): UnderscoreChain;
+ /**
+ * Alias for 'first'.
+ * @see first
+ **/
+ take(n: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.initial
+ **/
+ initial(n?: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.last
+ **/
+ last(): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.last
+ **/
+ last(n: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.rest
+ **/
+ rest(index?: number): UnderscoreChain;
+
+ /**
+ * Alias for 'rest'.
+ * @see rest
+ **/
+ tail(index?: number): UnderscoreChain;
+
+ /**
+ * Alias for 'rest'.
+ * @see rest
+ **/
+ drop(index?: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.compact
+ **/
+ compact(): UnderscoreChain;
+
+ /**
+ * Wrapped type `any`.
+ * @see _.flatten
+ **/
+ flatten(shallow?: bool): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.without
+ **/
+ without(...values: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[][]`.
+ * @see _.union
+ **/
+ union(...arrays: any[][]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[][]`.
+ * @see _.intersection
+ **/
+ intersection(...arrays: any[][]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.difference
+ **/
+ difference(...others: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.uniq
+ **/
+ uniq(
+ isSorted?: bool,
+ iterator?: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.uniq
+ **/
+ uniq(
+ iterator?: (element: any, index?: number, list?: any[]) => any,
+ context?: any): UnderscoreChain;
+
+ /**
+ * Alias for 'uniq'.
+ * @see uniq
+ **/
+ unique(
+ isSorted?: bool,
+ iterator?: (element: any, index?: number, list?: any[]) => any): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[][]`.
+ * @see _.zip
+ **/
+ zip(...arrays: any[][]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[][]`.
+ * @see _.object
+ **/
+ object(...keyValuePairs: any[][]): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.indexOf
+ **/
+ indexOf(value: any, isSorted?: bool): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.lastIndexOf
+ **/
+ lastIndexOf(value: any, from?: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `any[]`.
+ * @see _.sortedIndex
+ **/
+ sortedIndex(value: any, iterator?: (element: any) => number): UnderscoreChain;
+
+ /**
+ * Wrapped type `number`.
+ * @see _.range
+ **/
+ range(stop: number, step?: number): UnderscoreChain;
+ /**
+ * Wrapped type `number`.
+ * @see _.range
+ **/
+ range(): UnderscoreChain;
+
+ /************
+ * Functions *
+ *************/
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.bind
+ **/
+ bind(object: any, ...arguments: any[]): UnderscoreChain;
+
+
+ /**
+ * Wrapped type `object`.
+ * @see _.bindAll
+ **/
+ bindAll(...methodNames: string[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.partial
+ **/
+ partial(...arguments: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.memoize
+ **/
+ memoize(hashFn?: (n: any) => string): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.delay
+ **/
+ delay(waitMS: number, ...arguments: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.defer
+ **/
+ defer(...arguments: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.throttle
+ **/
+ throttle(waitMS: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.debounce
+ **/
+ debounce(waitMS: number, immediate?: bool): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.once
+ **/
+ once(): UnderscoreChain;
+
+ /**
+ * Wrapped type `number`.
+ * @see _.after
+ **/
+ after(fn: Function): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function`.
+ * @see _.wrap
+ **/
+ wrap(wrapper: (fn: Function, ...args: any[]) => any): UnderscoreChain;
+
+ /**
+ * Wrapped type `Function[]`.
+ * @see _.compose
+ **/
+ compose(...functions: Function[]): UnderscoreChain;
+
+ /**********
+ * Objects *
+ ***********/
+
+ /**
+ * Wrapped type `object`.
+ * @see _.keys
+ **/
+ keys(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.values
+ **/
+ values(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.pairs
+ **/
+ pairs(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.invert
+ **/
+ invert(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.functions
+ **/
+ functions(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.extend
+ **/
+ extend(...sources: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.pick
+ **/
+ pick(...keys: string[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.omit
+ **/
+ omit(...keys: string[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.defaults
+ **/
+ defaults(...defaults: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.clone
+ **/
+ clone(object: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.clone
+ **/
+ clone(list: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.tap
+ **/
+ tap(intercepter: Function): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.has
+ **/
+ has(key: string): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isEqual
+ **/
+ isEqual(other: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isEmpty
+ **/
+ isEmpty(object: any): UnderscoreChain;
+ /**
+ * Wrapped type `any[]`.
+ * @see _.isEmpty
+ **/
+ isEmpty(list: any[]): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isElement
+ **/
+ isElement(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isArray
+ **/
+ isArray(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isObject
+ **/
+ isObject(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isArguments
+ **/
+ isArguments(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isFunction
+ **/
+ isFunction(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isString
+ **/
+ isString(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isNumber
+ **/
+ isNumber(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isFinite
+ **/
+ isFinite(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isBoolean
+ **/
+ isBoolean(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isDate
+ **/
+ isDate(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isRegExp
+ **/
+ isRegExp(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isNaN
+ **/
+ isNaN(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isNull
+ **/
+ isNull(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.isUndefined
+ **/
+ isUndefined(): UnderscoreChain;
+
+ /**********
+ * Utility *
+ ***********/
+
+ /**
+ * Wrapped type `any`.
+ * @see _.identity
+ **/
+ identity(): UnderscoreChain;
+
+ /**
+ * Wrapped type `number`.
+ * @see _.times
+ **/
+ times(iterator: (n: number) => any, context?: any): UnderscoreChain;
+
+ /**
+ * Wrapped type `number`.
+ * @see _.random
+ **/
+ random(): UnderscoreChain;
+ /**
+ * Wrapped type `number`.
+ * @see _.random
+ **/
+ random(max: number): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.mixin
+ **/
+ mixin(): UnderscoreChain;
+
+ /**
+ * Wrapped type `string`.
+ * @see _.uniqueId
+ **/
+ uniqueId(): UnderscoreChain;
+
+ /**
+ * Wrapped type `string`.
+ * @see _.escape
+ **/
+ escape(): UnderscoreChain;
+
+ /**
+ * Wrapped type `object`.
+ * @see _.result
+ **/
+ result(property: string): UnderscoreChain;
+
+ /**
+ * Wrapped type `string`.
+ * @see _.template
+ **/
+ template(data?: any, settings?: UnderscoreTemplateSettings): UnderscoreChain;
+
+ /***********
+ * Chaining *
+ ************/
+
+ /**
+ * Wrapped type `any`.
+ * @see _.chain
+ **/
+ chain(): UnderscoreChain;
/**
* Wrapped type `any`.
diff --git a/underscore/underscore.d.ts b/underscore/underscore.d.ts
index 811913958..42d4abeb5 100644
--- a/underscore/underscore.d.ts
+++ b/underscore/underscore.d.ts
@@ -1,232 +1,232 @@
-// Type definitions for Underscore 1.4
-// Project: http://underscorejs.org/
-// Definitions by: Boris Yankov
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-
-interface UnderscoreWrappedObject {
- value () : any;
- filter(arg?) : any;
-}
-
-interface TemplateSettings {
- evaluate?: RegExp;
- interpolate?: RegExp;
- escape?: RegExp;
-}
-
-interface ListIterator {
- (value, key, list?): void;
-}
-
-interface ObjectIterator {
- (element, index, list?): void;
-}
-
-// Common interface between Arrays and jQuery objects
-interface List {
- [index: number]: any;
- length: number;
-}
-
-interface UnderscoreStatic {
- (arg?:any) : any;
-
- /****
- Collections
- *****/
- each(list: List, iterator: ListIterator, context?: any): any[];
- each(object: any, iterator: ObjectIterator, context?: any): any[];
- forEach(list: List, iterator: ObjectIterator, context?: any): any[];
- forEach(object: any, iterator: ListIterator, context?: any): any[];
-
- map(list: List, iterator: ListIterator, context?: any): any[];
- map(object: any, iterator: ObjectIterator, context?: any): any[];
- collect(list: List, iterator: ListIterator, context?: any): any[];
- collect(object: any, iterator: ObjectIterator, context?: any): any[];
-
- reduce(list: List, iterator: any, memo: any, context?: any): any[];
- reduce(list: any[], iterator: any, memo: any, context?: any): any[];
- inject(list: List, iterator: any, memo: any, context?: any): any[];
- inject(list: any[], iterator: any, memo: any, context?: any): any[];
- foldl(list: List, iterator: any, memo: any, context?: any): any[];
- foldl(list: any[], iterator: any, memo: any, context?: any): any[];
-
- reduceRight(list: List, iterator: any, memo: any, context?: any): any[];
- reduceRight(list: any[], iterator: any, memo: any, context?: any): any[];
- foldr(list: List, iterator: any, memo: any, context?: any): any[];
- foldr(list: any[], iterator: any, memo: any, context?: any): any[];
-
- find(list: List, iterator: any, context?: any): any;
- find(list: any[], iterator: any, context?: any): any;
- detect(list: List, iterator: any, context?: any): any;
- detect(list: any[], iterator: any, context?: any): any;
-
- filter(list: List, iterator: any, context?: any): any[];
- filter(list: any[], iterator: any, context?: any): any[];
- select(list: List, iterator: any, context?: any): any[];
- select(list: any[], iterator: any, context?: any): any[];
-
- where(list: List, properties: any): any[];
- where(list: any[], properties: any): any[];
-
- reject(list: List, iterator: any, context?: any): any[];
- reject(list: any[], iterator: any, context?: any): any[];
-
- all(list: List, iterator: any, context?: any): bool;
- all(list: any[], iterator: any, context?: any): bool;
- every(list: List, iterator: any, context?: any): bool;
- every(list: any[], iterator: any, context?: any): bool;
-
- any(list: List, iterator?: any, context?: any): bool;
- any(list: any[], iterator?: any, context?: any): bool;
- some(list: List, iterator?: any, context?: any): bool;
- some(list: any[], iterator?: any, context?: any): bool;
-
- contains(list: any, value: any): bool;
- contains(list: List, value: any): bool;
- include(list: any, value: any): bool;
- include(list: List, value: any): bool;
-
- invoke(list: List, methodName: string, arguments: any[]): any;
- invoke(object: any, methodName: string, ...arguments: any[]): any;
-
- pluck(list: List, propertyName: string): string[];
- pluck(list: any[], propertyName: string): string[];
- max(list: List, iterator?: any, context?: any): any;
- max(list: any[], iterator?: any, context?: any): any;
- min(list: List, iterator?: any, context?: any): any;
- min(list: any[], iterator?: any, context?: any): any;
- sortBy(list: List, iterator?: any, context?: any): any;
- sortBy(list: any[], iterator?: any, context?: any): any;
- groupBy(list: List, iterator: any): any;
- groupBy(list: any[], iterator: any): any;
- countBy(list: List, iterator: any): any;
- countBy(list: any[], iterator: any): any;
- shuffle(list: any[]): any[];
- toArray(list: any): any[];
- size(list: any): number;
-
- /****
- Arrays
- *****/
- first(array: List, n?: number): any;
- first(array: any[], n?: number): any;
- head(array: List, n?: number): any;
- head(array: any[], n?: number): any;
- take(array: List, n?: number): any;
- take(array: any[], n?: number): any;
-
- initial(array: List, n?: number): any[];
- initial(array: any[], n?: number): any[];
-
- last(array: List, n?: number): any;
- last(array: any[], n?: number): any;
-
- rest(array: List, n?: number): any[];
- rest(array: any[], n?: number): any[];
- tail(array: List, n?: number): any[];
- tail(array: any[], n?: number): any[];
- drop(array: List, n?: number): any[];
- drop(array: any[], n?: number): any[];
-
- compact(array: any[]): any[];
- flatten(array: List, shallow?: bool): any[];
- flatten(array: any[], shallow?: bool): any[];
- without(array: List, ...values: any[]): any[];
- without(array: any[], ...values: any[]): any[];
- union(...arrays: any[][]): any[];
- intersection(...arrays: any[][]): any[];
- difference(array: List, ...others: any[][]): any[];
- difference(array: any[], ...others: any[][]): any[];
-
- uniq(array: List, isSorted?: bool, iterator?: any): any[];
- uniq(array: any[], isSorted?: bool, iterator?: any): any[];
- unique(array: List, isSorted?: bool, iterator?: any): any[];
- unique(array: any[], isSorted?: bool, iterator?: any): any[];
-
- zip(...arrays: any[]): any[];
- object(list: List, values?: any[]): any;
- object(list: any[], values?: any[]): any;
- indexOf(array: List, value: any, isSorted?: bool): number;
- indexOf(array: any[], value: any, isSorted?: bool): number;
- lastIndexOf(array: List, value: any, fromIndex?: number): number;
- lastIndexOf(array: any[], value: any, fromIndex?: number): number;
- sortedIndex(list: List, valueL: any, iterator?: any): number;
- sortedIndex(list: any[], valueL: any, iterator?: any): number;
- range(stop: number): any[];
- range(start: number, stop: number, step?: number): any[];
-
- /****
- Functions
- *****/
- bind(func: (...as : any[]) => any, context: any, ...arguments: any[]): () => any;
- bindAll(object: any, ...methodNames: string[]): any;
- memoize(func: any, hashFunction?: any): any;
- defer(func: () => any);
- delay(func: any, wait: number, ...arguments: any[]): any;
- delay(func: any, ...arguments: any[]): any;
- throttle(func: any, wait: number): any;
- debounce(func: any, wait: number, immediate?: bool): any;
- once(func: any): any;
- after(count: number, func: any): any;
- wrap(func: (...as : any[]) => any, wrapper: any): () => any;
- compose(...functions: any[]): any;
-
- /****
- Objects
- *****/
- keys(object: any): any[];
- values(object: any): any[];
- pairs(object: any): any[];
- invert(object: any): any;
-
- functions(object: any): string[];
- methods(object: any): string[];
-
- extend(destination: any, ...sources: any[]): any;
- pick(object: any, ...keys: string[]): any;
- omit(object: any, ...keys: string[]): any;
- defaults(object: any, ...defaults: any[]): any;
- clone(object: any): any;
- tap(object: any, interceptor: (...as : any[]) => any): any;
- has(object: any, key: string): bool;
- isEqual(object: any, other: any): bool;
- isEmpty(object: any): bool;
- isElement(object: any): bool;
- isArray(object: any): bool;
- isObject(value: any): bool;
- isArguments(object: any): bool;
- isFunction(object: any): bool;
- isString(object: any): bool;
- isNumber(object: any): bool;
- isFinite(object: any): bool;
- isBoolean(object: any): bool;
- isDate(object: any): bool;
- isRegExp(object: any): bool;
- isNaN(object: any): bool;
- isNull(object: any): bool;
- isUndefined(value: any): bool;
-
- /****
- Utility
- *****/
- noConflict(): any;
- identity(value: any): any;
- times(n: number, iterator: (index : number) => void, context?: any): void;
- random(min: number, max: number): number;
- mixin(object: any): void;
- uniqueId(prefix: string): string;
- uniqueId(): number;
- escape(str: string): string;
- result(object: any, property: string): any;
- templateSettings: TemplateSettings;
- template(templateString: string, data?: any, settings?: any): (...data: any[]) => string;
-
- /****
- Chaining
- *****/
- chain(object: any): UnderscoreWrappedObject;
-}
-
+// Type definitions for Underscore 1.4
+// Project: http://underscorejs.org/
+// Definitions by: Boris Yankov
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+interface UnderscoreWrappedObject {
+ value () : any;
+ filter(arg?) : any;
+}
+
+interface TemplateSettings {
+ evaluate?: RegExp;
+ interpolate?: RegExp;
+ escape?: RegExp;
+}
+
+interface ListIterator {
+ (value, key, list?): void;
+}
+
+interface ObjectIterator {
+ (element, index, list?): void;
+}
+
+// Common interface between Arrays and jQuery objects
+interface List {
+ [index: number]: any;
+ length: number;
+}
+
+interface UnderscoreStatic {
+ (arg?:any) : any;
+
+ /****
+ Collections
+ *****/
+ each(list: List, iterator: ListIterator, context?: any): any[];
+ each(object: any, iterator: ObjectIterator, context?: any): any[];
+ forEach(list: List, iterator: ObjectIterator, context?: any): any[];
+ forEach(object: any, iterator: ListIterator, context?: any): any[];
+
+ map(list: List, iterator: ListIterator, context?: any): any[];
+ map(object: any, iterator: ObjectIterator, context?: any): any[];
+ collect(list: List, iterator: ListIterator, context?: any): any[];
+ collect(object: any, iterator: ObjectIterator, context?: any): any[];
+
+ reduce(list: List, iterator: any, memo: any, context?: any): any;
+ reduce(list: any[], iterator: any, memo: any, context?: any): any;
+ inject(list: List, iterator: any, memo: any, context?: any): any;
+ inject(list: any[], iterator: any, memo: any, context?: any): any;
+ foldl(list: List, iterator: any, memo: any, context?: any): any;
+ foldl(list: any[], iterator: any, memo: any, context?: any): any;
+
+ reduceRight(list: List, iterator: any, memo: any, context?: any): any[];
+ reduceRight(list: any[], iterator: any, memo: any, context?: any): any[];
+ foldr(list: List, iterator: any, memo: any, context?: any): any[];
+ foldr(list: any[], iterator: any, memo: any, context?: any): any[];
+
+ find(list: List, iterator: any, context?: any): any;
+ find(list: any[], iterator: any, context?: any): any;
+ detect(list: List, iterator: any, context?: any): any;
+ detect(list: any[], iterator: any, context?: any): any;
+
+ filter(list: List, iterator: any, context?: any): any[];
+ filter(list: any[], iterator: any, context?: any): any[];
+ select(list: List, iterator: any, context?: any): any[];
+ select(list: any[], iterator: any, context?: any): any[];
+
+ where(list: List, properties: any): any[];
+ where(list: any[], properties: any): any[];
+
+ reject(list: List, iterator: any, context?: any): any[];
+ reject(list: any[], iterator: any, context?: any): any[];
+
+ all(list: List, iterator: any, context?: any): bool;
+ all(list: any[], iterator: any, context?: any): bool;
+ every(list: List, iterator: any, context?: any): bool;
+ every(list: any[], iterator: any, context?: any): bool;
+
+ any(list: List, iterator?: any, context?: any): bool;
+ any(list: any[], iterator?: any, context?: any): bool;
+ some(list: List, iterator?: any, context?: any): bool;
+ some(list: any[], iterator?: any, context?: any): bool;
+
+ contains(list: any, value: any): bool;
+ contains(list: List, value: any): bool;
+ include(list: any, value: any): bool;
+ include(list: List, value: any): bool;
+
+ invoke(list: List, methodName: string, arguments: any[]): any;
+ invoke(object: any, methodName: string, ...arguments: any[]): any;
+
+ pluck(list: List, propertyName: string): string[];
+ pluck(list: any[], propertyName: string): string[];
+ max(list: List, iterator?: any, context?: any): any;
+ max(list: any[], iterator?: any, context?: any): any;
+ min(list: List, iterator?: any, context?: any): any;
+ min(list: any[], iterator?: any, context?: any): any;
+ sortBy(list: List, iterator?: any, context?: any): any;
+ sortBy(list: any[], iterator?: any, context?: any): any;
+ groupBy(list: List, iterator: any): any;
+ groupBy(list: any[], iterator: any): any;
+ countBy(list: List, iterator: any): any;
+ countBy(list: any[], iterator: any): any;
+ shuffle(list: any[]): any[];
+ toArray(list: any): any[];
+ size(list: any): number;
+
+ /****
+ Arrays
+ *****/
+ first(array: List, n?: number): any;
+ first(array: any[], n?: number): any;
+ head(array: List, n?: number): any;
+ head(array: any[], n?: number): any;
+ take(array: List, n?: number): any;
+ take(array: any[], n?: number): any;
+
+ initial(array: List, n?: number): any[];
+ initial(array: any[], n?: number): any[];
+
+ last(array: List, n?: number): any;
+ last(array: any[], n?: number): any;
+
+ rest(array: List, n?: number): any[];
+ rest(array: any[], n?: number): any[];
+ tail(array: List, n?: number): any[];
+ tail(array: any[], n?: number): any[];
+ drop(array: List, n?: number): any[];
+ drop(array: any[], n?: number): any[];
+
+ compact(array: any[]): any[];
+ flatten(array: List, shallow?: bool): any[];
+ flatten(array: any[], shallow?: bool): any[];
+ without(array: List, ...values: any[]): any[];
+ without(array: any[], ...values: any[]): any[];
+ union(...arrays: any[][]): any[];
+ intersection(...arrays: any[][]): any[];
+ difference(array: List, ...others: any[][]): any[];
+ difference(array: any[], ...others: any[][]): any[];
+
+ uniq(array: List, isSorted?: bool, iterator?: any): any[];
+ uniq(array: any[], isSorted?: bool, iterator?: any): any[];
+ unique(array: List, isSorted?: bool, iterator?: any): any[];
+ unique(array: any[], isSorted?: bool, iterator?: any): any[];
+
+ zip(...arrays: any[]): any[];
+ object(list: List, values?: any[]): any;
+ object(list: any[], values?: any[]): any;
+ indexOf(array: List, value: any, isSorted?: bool): number;
+ indexOf(array: any[], value: any, isSorted?: bool): number;
+ lastIndexOf(array: List, value: any, fromIndex?: number): number;
+ lastIndexOf(array: any[], value: any, fromIndex?: number): number;
+ sortedIndex(list: List, valueL: any, iterator?: any): number;
+ sortedIndex(list: any[], valueL: any, iterator?: any): number;
+ range(stop: number): any[];
+ range(start: number, stop: number, step?: number): any[];
+
+ /****
+ Functions
+ *****/
+ bind(func: (...as : any[]) => any, context: any, ...arguments: any[]): () => any;
+ bindAll(object: any, ...methodNames: string[]): any;
+ memoize(func: any, hashFunction?: any): any;
+ defer(func: () => any);
+ delay(func: any, wait: number, ...arguments: any[]): any;
+ delay(func: any, ...arguments: any[]): any;
+ throttle(func: any, wait: number): any;
+ debounce(func: any, wait: number, immediate?: bool): any;
+ once(func: any): any;
+ after(count: number, func: any): any;
+ wrap(func: (...as : any[]) => any, wrapper: any): () => any;
+ compose(...functions: any[]): any;
+
+ /****
+ Objects
+ *****/
+ keys(object: any): any[];
+ values(object: any): any[];
+ pairs(object: any): any[];
+ invert(object: any): any;
+
+ functions(object: any): string[];
+ methods(object: any): string[];
+
+ extend(destination: any, ...sources: any[]): any;
+ pick(object: any, ...keys: string[]): any;
+ omit(object: any, ...keys: string[]): any;
+ defaults(object: any, ...defaults: any[]): any;
+ clone(object: any): any;
+ tap(object: any, interceptor: (...as : any[]) => any): any;
+ has(object: any, key: string): bool;
+ isEqual(object: any, other: any): bool;
+ isEmpty(object: any): bool;
+ isElement(object: any): bool;
+ isArray(object: any): bool;
+ isObject(value: any): bool;
+ isArguments(object: any): bool;
+ isFunction(object: any): bool;
+ isString(object: any): bool;
+ isNumber(object: any): bool;
+ isFinite(object: any): bool;
+ isBoolean(object: any): bool;
+ isDate(object: any): bool;
+ isRegExp(object: any): bool;
+ isNaN(object: any): bool;
+ isNull(object: any): bool;
+ isUndefined(value: any): bool;
+
+ /****
+ Utility
+ *****/
+ noConflict(): any;
+ identity(value: any): any;
+ times(n: number, iterator: (index : number) => void, context?: any): void;
+ random(min: number, max: number): number;
+ mixin(object: any): void;
+ uniqueId(prefix: string): string;
+ uniqueId(): number;
+ escape(str: string): string;
+ result(object: any, property: string): any;
+ templateSettings: TemplateSettings;
+ template(templateString: string, data?: any, settings?: any): (...data: any[]) => string;
+
+ /****
+ Chaining
+ *****/
+ chain(object: any): UnderscoreWrappedObject;
+}
+
declare var _: UnderscoreStatic;
\ No newline at end of file
diff --git a/webaudioapi/waa-20120802.d.ts b/webaudioapi/waa-20120802.d.ts
new file mode 100644
index 000000000..b90c4b959
--- /dev/null
+++ b/webaudioapi/waa-20120802.d.ts
@@ -0,0 +1,247 @@
+// Type definitions for the Web Audio API, currently only implemented in WebKit browsers
+// Conforms to the: http://www.w3.org/TR/2012/WD-webaudio-20120802/ specification
+// Definitions by: Baruch Berger (https://github.com/bbss)
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+interface webkitAudioContext {
+ destination: AudioDestinationNode;
+ sampleRate: number;
+ currentTime: number;
+ listener: AudioListener;
+ activeSourceCount: number;
+
+ createBuffer(numberOfChannels: number, length: number, sampleRate: number): AudioBuffer;
+ createBuffer(buffer: ArrayBuffer, mixToMono: bool): AudioBuffer;
+
+ decodeAudioData(audioData: ArrayBuffer, successCallback: any, errorCallback?: any): void;
+
+ createBufferSource(): AudioBufferSourceNode;
+
+ createMediaElementSource(mediaElement: HTMLMediaElement): MediaElementAudioSourceNode;
+
+ createMediaStreamSource(mediaStream: any): MediaStreamAudioSourceNode;
+
+ createAnalyser(): RealtimeAnalyserNode;
+ createGainNode(): AudioGainNode;
+ createDelayNode(maxDelayTime?: number): DelayNode;
+ createBiquadFilter(): BiquadFilterNode;
+ createPanner():AudioPannerNode;
+ createConvolver(): ConvolverNode;
+
+ createChannelSplitter(numberOfOutputs?: number):AudioChannelSplitter;
+ createChannelMerger(numberOfInputs?: number): AudioChannelMerger;
+
+ createDynamicsCompressor(): DynamicsCompressorNode;
+
+ createOscillator(): Oscillator;
+ createWaveTable(real: any,imag: any): WaveTable;
+}
+
+declare var webkitAudioContext: {
+
+ new (): webkitAudioContext;
+
+}
+
+interface Oscillator extends AudioSourceNode {
+
+ type: number;
+ playbackState: number;
+ frequency: AudioParam;
+ detune: AudioParam;
+ noteOn(when: number): void;
+ noteOff(when: number): void;
+ setWaveTable(waveTable: WaveTable): void;
+
+}
+
+interface AudioDestinationNode extends AudioNode {
+
+ maxNumberOfChannels: number;
+ numberOfChannels: number;
+
+}
+
+interface AudioNode {
+
+ connect(destination: AudioNode, output?: number, input?: number): void;
+ connect(destination: AudioParam, output?: number): void;
+ disconnect(output?: number): void;
+ context: webkitAudioContext;
+ numberOfInputs: number;
+ numberOfOutputs: number;
+
+};
+
+interface AudioSourceNode extends AudioNode {
+
+}
+
+
+
+interface AudioParam {
+
+ value: number;
+ minValue: number;
+ maxValue: number;
+ defaultValue: number;
+ setValueAtTime(value: number, time: number): void;
+ linearRampToValueAtTime(value: number, time: number): void;
+ exponentialRampToValueAtTime(value: number, time: number): void;
+ setTargetValueAtTime(targetValue: number,time: number, timeConstant: number): void;
+ setValueCurveAtTime(values: number[], time: number, duration: number): void;
+ cancelScheduledValues(startTime: number): void;
+
+}
+
+interface AudioGain extends AudioParam {
+
+}
+
+interface AudioGainNode extends AudioNode {
+
+ gain: AudioGain;
+
+}
+
+interface DelayNode extends AudioNode {
+
+ delayTime: AudioParam;
+
+}
+
+interface AudioBuffer {
+
+ sampleRate: number;
+ length: number;
+ duration: number;
+ numberOfChannels: number;
+ getChannelData(channel: number): any;
+
+}
+
+interface AudioBufferSourceNode extends AudioSourceNode {
+
+ playbackState: number;
+ buffer: AudioBuffer;
+ playbackRate: AudioParam;
+ loop: bool;
+ noteOn(when: number): void;
+ noteGrainOn(when: number, grainOffset: number, grainDuration: number): void;
+ noteOff(when: number): void;
+
+}
+
+interface MediaElementAudioSourceNode extends AudioSourceNode {
+
+}
+
+interface JavaScriptAudioNode extends AudioNode {
+
+ onaudioprocess: EventListener;
+ bufferSize: number;
+
+}
+
+interface AudioProcessingEvent extends Event {
+
+ node: JavaScriptAudioNode;
+ playbackTime: number;
+ inputBuffer: AudioBuffer;
+ outputBuffer: AudioBuffer;
+
+}
+
+interface AudioPannerNode extends AudioNode {
+
+ panningModel: number;
+ setPosition(x: number, y: number, z: number): void;
+ setOrientation(x: number, y: number, z: number): void;
+ setVelocity(x: number, y: number, z: number): void;
+ distanceModel: number;
+ refDistance: number;
+ maxDistance: number;
+ rolloffFactor: number;
+ coneInnerAngle: number;
+ coneOuterAngle: number;
+ coneOuterGain: number;
+ distanceGain: AudioGain;
+ coneGain: AudioGain;
+
+}
+
+interface AudioListener {
+
+ dopplerFactor: number;
+ speedOfSound: number;
+ setPosition(x: number, y: number, z: number): void;
+ setOrientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): void;
+ setVelocity(x: number, y: number, z: number): void;
+
+}
+
+interface RealtimeAnalyserNode extends AudioNode {
+
+ getFloatFrequencyData(array: any): void;
+ getByteFrequencyData(array: any): void;
+ getByteTimeDomainData(array: any): void;
+ fftSize: number;
+ frequencyBinCount: number;
+ minDecibels: number;
+ maxDecibels: number;
+ smoothingTimeConstant: number;
+
+}
+
+interface AudioChannelSplitter extends AudioNode {
+
+}
+
+interface AudioChannelMerger extends AudioNode {
+
+}
+
+interface DynamicsCompressorNode extends AudioNode {
+
+ threshold: AudioParam;
+ knee: AudioParam;
+ ratio: AudioParam;
+ reduction: AudioParam;
+ attack: AudioParam;
+ release: AudioParam;
+
+}
+
+interface BiquadFilterNode extends AudioNode {
+
+ type: number;
+ frequency: AudioParam;
+ Q: AudioParam;
+ gain: AudioParam;
+
+ getFrequencyResponse(frequencyHz: any, magResponse: any, phaseResponse: any): void;
+
+}
+
+interface WaveShaperNode extends AudioNode {
+
+ curve: any;
+
+}
+
+interface MediaStreamAudioSourceNode extends AudioSourceNode {
+
+
+
+}
+
+interface ConvolverNode extends AudioNode {
+
+ buffer: AudioBuffer;
+ normalize: bool;
+
+}
+
+interface WaveTable {
+
+}
diff --git a/webaudioapi/waa-tests.ts b/webaudioapi/waa-tests.ts
new file mode 100644
index 000000000..39d7549e3
--- /dev/null
+++ b/webaudioapi/waa-tests.ts
@@ -0,0 +1,305 @@
+// http://www.w3.org/TR/2012/WD-webaudio-20121213/
+
+///
+
+declare var dogBarkingBuffer: any;
+
+()=>{
+ var context = new AudioContext();
+
+ function playSound() {
+ var source = context.createBufferSource();
+ source.buffer = dogBarkingBuffer;
+ source.connect(context.destination);
+ source.start(0);
+ }
+};
+
+declare var manTalkingBuffer: any;
+declare var footstepsBuffer: any;
+
+()=>{
+
+ var context = new AudioContext();
+
+ // Create the effects nodes.
+ var lowpassFilter = context.createBiquadFilter();
+ var waveShaper = context.createWaveShaper();
+ var panner = context.createPanner();
+ var compressor = context.createDynamicsCompressor();
+ var reverb = context.createConvolver();
+
+ // Create master wet and dry.
+ var masterDry = context.createGain();
+ var masterWet = context.createGain();
+
+ // Connect final compressor to final destination.
+ compressor.connect(context.destination);
+
+ // Connect master dry and wet to compressor.
+ masterDry.connect(compressor);
+ masterWet.connect(compressor);
+
+ // Connect reverb to master wet.
+ reverb.connect(masterWet);
+
+ // Create a few sources.
+ var source1 = context.createBufferSource();
+ var source2 = context.createBufferSource();
+ var source3 = context.createOscillator();
+
+ source1.buffer = manTalkingBuffer;
+ source2.buffer = footstepsBuffer;
+ source3.frequency.value = 440;
+
+ // Connect source1
+ var dry1 = context.createGain();
+ var wet1 = context.createGain();
+ source1.connect(lowpassFilter);
+ lowpassFilter.connect(dry1);
+ lowpassFilter.connect(wet1);
+ dry1.connect(masterDry);
+ wet1.connect(reverb);
+
+ // Connect source2
+ var dry2 = context.createGain();
+ var wet2 = context.createGain();
+ source2.connect(waveShaper);
+ waveShaper.connect(dry2);
+ waveShaper.connect(wet2);
+ dry2.connect(masterDry);
+ wet2.connect(reverb);
+
+ // Connect source3
+ var dry3 = context.createGain();
+ var wet3 = context.createGain();
+ source3.connect(panner);
+ panner.connect(dry3);
+ panner.connect(wet3);
+ dry3.connect(masterDry);
+ wet3.connect(reverb);
+
+ // Start the sources now.
+ source1.start(0);
+ source2.start(0);
+ source3.start(0);
+};
+
+()=>{
+ var context: AudioContext;
+ var compressor: DynamicsCompressorNode;
+ var gainNode1: GainNode;
+ var streamingAudioSource: MediaElementAudioSourceNode;
+
+ // Initial setup of the "long-lived" part of the routing graph
+ function setupAudioContext() {
+ context = new AudioContext();
+
+ compressor = context.createDynamicsCompressor();
+ gainNode1 = context.createGain();
+
+ // Create a streaming audio source.
+ var audioElement = document.getElementById('audioTagID');
+ streamingAudioSource = context.createMediaElementSource(audioElement);
+ streamingAudioSource.connect(gainNode1);
+
+ gainNode1.connect(compressor);
+ compressor.connect(context.destination);
+ }
+
+ // Later in response to some user action (typically mouse or key event)
+ // a one-shot sound can be played.
+ function playSound() {
+ var oneShotSound = context.createBufferSource();
+ oneShotSound.buffer = dogBarkingBuffer;
+
+ // Create a filter, panner, and gain node.
+ var lowpass = context.createBiquadFilter();
+ var panner = context.createPanner();
+ var gainNode2 = context.createGain();
+
+ // Make connections
+ oneShotSound.connect(lowpass);
+ lowpass.connect(panner);
+ panner.connect(gainNode2);
+ gainNode2.connect(compressor);
+
+ // Play 0.75 seconds from now (to play immediately pass in 0)
+ oneShotSound.start(context.currentTime + 0.75);
+ }
+};
+
+
+()=>{
+ var param:AudioParam;
+
+ var t0 = 0;
+ var t1 = 0.1;
+ var t2 = 0.2;
+ var t3 = 0.3;
+ var t4 = 0.4;
+ var t5 = 0.6;
+ var t6 = 0.7;
+ var t7 = 1.0;
+
+ var curveLength = 44100;
+ var curve = new Float32Array(curveLength);
+ for (var i = 0; i < curveLength; ++i)
+ curve[i] = Math.sin(Math.PI * i / curveLength);
+
+ param.setValueAtTime(0.2, t0);
+ param.setValueAtTime(0.3, t1);
+ param.setValueAtTime(0.4, t2);
+ param.linearRampToValueAtTime(1, t3);
+ param.linearRampToValueAtTime(0.15, t4);
+ param.exponentialRampToValueAtTime(0.75, t5);
+ param.exponentialRampToValueAtTime(0.05, t6);
+ param.setValueCurveAtTime(curve, t6, t7 - t6);
+
+};
+
+()=>{
+ var param: AudioParam;
+
+ var t0 = 0;
+ var t1 = 0.1;
+ var t2 = 0.2;
+ var t3 = 0.3;
+ var t4 = 0.4;
+ var t5 = 0.6;
+ var t6 = 0.7;
+ var t7 = 1.0;
+
+ var curveLength = 44100;
+ var curve = new Float32Array(curveLength);
+ for (var i = 0; i < curveLength; ++i)
+ curve[i] = Math.sin(Math.PI * i / curveLength);
+
+ param.setValueAtTime(0.2, t0);
+ param.setValueAtTime(0.3, t1);
+ param.setValueAtTime(0.4, t2);
+ param.linearRampToValueAtTime(1, t3);
+ param.linearRampToValueAtTime(0.15, t4);
+ param.exponentialRampToValueAtTime(0.75, t5);
+ param.exponentialRampToValueAtTime(0.05, t6);
+ param.setValueCurveAtTime(curve, t6, t7 - t6);
+};
+
+
+()=>{
+ var context: AudioContext;
+ var filterNode: AudioNode;
+
+ var mediaElement = document.getElementById('mediaElementID');
+ var sourceNode = context.createMediaElementSource(mediaElement);
+ sourceNode.connect(filterNode);
+};
+
+()=>{
+
+ // Setup routing graph
+ function setupRoutingGraph() {
+ var context = new AudioContext();
+
+ var compressor = context.createDynamicsCompressor();
+
+ // Send1 effect
+ var reverb = context.createConvolver();
+ // Convolver impulse response may be set here or later
+
+ // Send2 effect
+ var delay = context.createDelay();
+
+ // Connect final compressor to final destination
+ compressor.connect(context.destination);
+
+ // Connect sends 1 & 2 through effects to main mixer
+ var s1 = context.createGain();
+ reverb.connect(s1);
+ s1.connect(compressor);
+
+ var s2 = context.createGain();
+ delay.connect(s2);
+ s2.connect(compressor);
+
+ // Create a couple of sources
+ var source1 = context.createBufferSource();
+ var source2 = context.createBufferSource();
+ source1.buffer = manTalkingBuffer;
+ source2.buffer = footstepsBuffer;
+
+ // Connect source1
+ var g1_1 = context.createGain();
+ var g2_1 = context.createGain();
+ var g3_1 = context.createGain();
+ source1.connect(g1_1);
+ source1.connect(g2_1);
+ source1.connect(g3_1);
+ g1_1.connect(compressor);
+ g2_1.connect(reverb);
+ g3_1.connect(delay);
+
+ // Connect source2
+ var g1_2 = context.createGain();
+ var g2_2 = context.createGain();
+ var g3_2 = context.createGain();
+ source2.connect(g1_2);
+ source2.connect(g2_2);
+ source2.connect(g3_2);
+ g1_2.connect(compressor);
+ g2_2.connect(reverb);
+ g3_2.connect(delay);
+
+ // We now have explicit control over all the volumes g1_1, g2_1, ..., s1, s2
+ g2_1.gain.value = 0.2; // For example, set source1 reverb gain
+
+ // Because g2_1.gain is an "AudioParam",
+ // an automation curve could also be attached to it.
+ // A "mixing board" UI could be created in canvas or WebGL controlling these gains.
+ }
+};
+
+()=>{
+ var context: AudioContext;
+ var compressor: DynamicsCompressorNode;
+ var gainNode1: GainNode;
+ var streamingAudioSource: MediaElementAudioSourceNode;
+
+ // Initial setup of the "long-lived" part of the routing graph
+ function setupAudioContext() {
+ context = new AudioContext();
+
+ compressor = context.createDynamicsCompressor();
+ gainNode1 = context.createGain();
+
+ // Create a streaming audio source.
+ var audioElement = document.getElementById('audioTagID');
+ streamingAudioSource = context.createMediaElementSource(audioElement);
+ streamingAudioSource.connect(gainNode1);
+
+ gainNode1.connect(compressor);
+ compressor.connect(context.destination);
+ }
+
+ // Later in response to some user action (typically mouse or key event)
+ // a one-shot sound can be played.
+ function playSound() {
+ var oneShotSound = context.createBufferSource();
+ oneShotSound.buffer = dogBarkingBuffer;
+
+ // Create a filter, panner, and gain node.
+ var lowpass = context.createBiquadFilter();
+ var panner = context.createPanner();
+ var gainNode2 = context.createGain();
+
+ // Make connections
+ oneShotSound.connect(lowpass);
+ lowpass.connect(panner);
+ panner.connect(gainNode2);
+ gainNode2.connect(compressor);
+
+ // Play 0.75 seconds from now (to play immediately pass in 0)
+ oneShotSound.start(context.currentTime + 0.75);
+ }
+};
+
diff --git a/webaudioapi/waa.d.ts b/webaudioapi/waa.d.ts
index b90c4b959..be6898d39 100644
--- a/webaudioapi/waa.d.ts
+++ b/webaudioapi/waa.d.ts
@@ -1,247 +1,1126 @@
-// Type definitions for the Web Audio API, currently only implemented in WebKit browsers
-// Conforms to the: http://www.w3.org/TR/2012/WD-webaudio-20120802/ specification
-// Definitions by: Baruch Berger (https://github.com/bbss)
+// Type definitions for the Web Audio API
+// Project: http://www.w3.org/TR/2012/WD-webaudio-20121213/
+// Definitions by: Baruch Berger (https://github.com/bbss), Kon (http://phyzkit.net/)
// Definitions: https://github.com/borisyankov/DefinitelyTyped
-interface webkitAudioContext {
+/**
+ * This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document. An AudioContext is constructed as follows:
+ *
+ * var context = new AudioContext();
+ */
+interface AudioContext {
+ /**
+ * An AudioDestinationNode with a single input representing the final destination for all audio (to be rendered to the audio hardware). All AudioNodes actively rendering audio will directly or indirectly connect to destination.
+ */
destination: AudioDestinationNode;
+
+ /**
+ * The sample rate (in sample-frames per second) at which the AudioContext handles audio. It is assumed that all AudioNodes in the context run at this rate. In making this assumption, sample-rate converters or "varispeed" processors are not supported in real-time processing.
+ */
sampleRate: number;
+
+ /**
+ * This is a time in seconds which starts at zero when the context is created and increases in real-time. All scheduled times are relative to it. This is not a "transport" time which can be started, paused, and re-positioned. It is always moving forward. A GarageBand-like timeline transport system can be very easily built on top of this (in JavaScript). This time corresponds to an ever-increasing hardware timestamp.
+ */
currentTime: number;
+
+ /**
+ * An AudioListener which is used for 3D spatialization.
+ */
listener: AudioListener;
+
+ /**
+ * The number of AudioBufferSourceNodes that are currently playing.
+ */
activeSourceCount: number;
+ /**
+ * Creates an AudioBuffer of the given size. The audio data in the buffer will be zero-initialized (silent). An exception will be thrown if the numberOfChannels or sampleRate are out-of-bounds.
+ * @param numberOfChannels how many channels the buffer will have. An implementation must support at least 32 channels.
+ * @param length the size of the buffer in sample-frames.
+ * @param sampleRate the sample-rate of the linear PCM audio data in the buffer in sample-frames per second. An implementation must support sample-rates in at least the range 22050 to 96000.
+ */
createBuffer(numberOfChannels: number, length: number, sampleRate: number): AudioBuffer;
+
+ /**
+ * Creates an AudioBuffer given the audio file data contained in the ArrayBuffer. The ArrayBuffer can, for example, be loaded from an XMLHttpRequest's response attribute after setting the responseType to "arraybuffer". Audio file data can be in any of the formats supported by the audio element.
+ * The following steps must be performed:
+ * 1. Decode the encoded buffer from the AudioBuffer into linear PCM. If a decoding error is encountered due to the audio format not being recognized or supported, or because of corrupted/unexpected/inconsistent data then return NULL (and these steps will be terminated).
+ * 2. If mixToMono is true, then mixdown the decoded linear PCM data to mono.
+ * 3. Take the decoded (possibly mixed-down) linear PCM audio data, and resample it to the sample-rate of the AudioContext if it is different from the sample-rate of buffer. The final result will be stored in an AudioBuffer and returned as the result of this method.
+ * @param buffer the audio file data (for example from a .wav file).
+ * @param mixToMono if a mixdown to mono will be performed. Normally, this would not be set.
+ */
createBuffer(buffer: ArrayBuffer, mixToMono: bool): AudioBuffer;
+ /**
+ * Asynchronously decodes the audio file data contained in the ArrayBuffer. The ArrayBuffer can, for example, be loaded from an XMLHttpRequest's response attribute after setting the responseType to "arraybuffer". Audio file data can be in any of the formats supported by the audio element.
+ * The decodeAudioData() method is preferred over the createBuffer() from ArrayBuffer method because it is asynchronous and does not block the main JavaScript thread.
+ *
+ * The following steps must be performed:
+ * 1. Temporarily neuter the audioData ArrayBuffer in such a way that JavaScript code may not access or modify the data.
+ * 2. Queue a decoding operation to be performed on another thread.
+ * 3. The decoding thread will attempt to decode the encoded audioData into linear PCM. If a decoding error is encountered due to the audio format not being recognized or supported, or because of corrupted/unexpected/inconsistent data then the audioData neutered state will be restored to normal and the errorCallback will be scheduled to run on the main thread's event loop and these steps will be terminated.
+ * 4. The decoding thread will take the result, representing the decoded linear PCM audio data, and resample it to the sample-rate of the AudioContext if it is different from the sample-rate of audioData. The final result (after possibly sample-rate converting) will be stored in an AudioBuffer.
+ * 5. The audioData neutered state will be restored to normal
+ * 6. The successCallback function will be scheduled to run on the main thread's event loop given the AudioBuffer from step (4) as an argument.
+ *
+ * @param ArrayBuffer containing audio file data.
+ * @param callback function which will be invoked when the decoding is finished. The single argument to this callback is an AudioBuffer representing the decoded PCM audio data.
+ * @param callback function which will be invoked if there is an error decoding the audio file data.
+ */
decodeAudioData(audioData: ArrayBuffer, successCallback: any, errorCallback?: any): void;
-
+
+ /**
+ * Creates an AudioBufferSourceNode.
+ */
createBufferSource(): AudioBufferSourceNode;
+ /**
+ * Creates a MediaElementAudioSourceNode given an HTMLMediaElement. As a consequence of calling this method, audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext.
+ */
createMediaElementSource(mediaElement: HTMLMediaElement): MediaElementAudioSourceNode;
-
+
+ /**
+ * Creates a MediaStreamAudioSourceNode given a MediaStream. As a consequence of calling this method, audio playback from the MediaStream will be re-routed into the processing graph of the AudioContext.
+ */
createMediaStreamSource(mediaStream: any): MediaStreamAudioSourceNode;
- createAnalyser(): RealtimeAnalyserNode;
- createGainNode(): AudioGainNode;
- createDelayNode(maxDelayTime?: number): DelayNode;
- createBiquadFilter(): BiquadFilterNode;
- createPanner():AudioPannerNode;
- createConvolver(): ConvolverNode;
+ /**
+ * Creates a ScriptProcessorNode for direct audio processing using JavaScript. An exception will be thrown if bufferSize or numberOfInputChannels or numberOfOutputChannels are outside the valid range.
+ * It is invalid for both numberOfInputChannels and numberOfOutputChannels to be zero.
+ * @param bufferSize the buffer size in units of sample-frames. It must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. This value controls how frequently the onaudioprocess event handler is called and how many sample-frames need to be processed each call. Lower values for bufferSize will result in a lower (better) latency. Higher values will be necessary to avoid audio breakup and glitches. The value chosen must carefully balance between latency and audio quality.
+ * @param numberOfInputChannels (defaults to 2) the number of channels for this node's input. Values of up to 32 must be supported.
+ * @param numberOfOutputChannels (defaults to 2) the number of channels for this node's output. Values of up to 32 must be supported.
+ */
+ createScriptProcessor(bufferSize: number, numberOfInputChannels?: number, numberOfOutputChannels?: number): ScriptProcessorNode;
- createChannelSplitter(numberOfOutputs?: number):AudioChannelSplitter;
- createChannelMerger(numberOfInputs?: number): AudioChannelMerger;
+ /**
+ * Creates a AnalyserNode.
+ */
+ createAnalyser(): AnalyserNode;
+ /**
+ * Creates a GainNode.
+ */
+ createGain(): GainNode;
+
+ /**
+ * Creates a DelayNode representing a variable delay line. The initial default delay time will be 0 seconds.
+ * @param maxDelayTime the maximum delay time in seconds allowed for the delay line. If specified, this value must be greater than zero and less than three minutes or a NOT_SUPPORTED_ERR exception will be thrown.
+ */
+ createDelay(maxDelayTime?: number): DelayNode;
+ //createDelayNode(maxDelayTime?: number): DelayNode;
+
+ /**
+ * Creates a BiquadFilterNode representing a second order filter which can be configured as one of several common filter types.
+ */
+ createBiquadFilter(): BiquadFilterNode;
+
+ /**
+ * Creates a WaveShaperNode representing a non-linear distortion.
+ */
+ createWaveShaper(): WaveShaperNode;
+
+ /**
+ * Creates an PannerNode.
+ */
+ createPanner(): PannerNode;
+
+ /**
+ * Creates a ConvolverNode.
+ */
+ createConvolver(): ConvolverNode;
+
+ /**
+ * Creates an ChannelSplitterNode representing a channel splitter. An exception will be thrown for invalid parameter values.
+ * @param numberOfOutputs the number of outputs. Values of up to 32 must be supported. If not specified, then 6 will be used.
+ */
+ createChannelSplitter(numberOfOutputs?: number): ChannelSplitterNode;
+
+ /**
+ * Creates an ChannelMergerNode representing a channel merger. An exception will be thrown for invalid parameter values.
+ * @param numberOfInputs the number of inputs. Values of up to 32 must be supported. If not specified, then 6 will be used.
+ */
+ createChannelMerger(numberOfInputs?: number): ChannelMergerNode;
+
+ /**
+ * Creates a DynamicsCompressorNode.
+ */
createDynamicsCompressor(): DynamicsCompressorNode;
- createOscillator(): Oscillator;
+ /**
+ * Creates an OscillatorNode.
+ */
+ createOscillator(): OscillatorNode;
+
+ /**
+ * Creates a WaveTable representing a waveform containing arbitrary harmonic content. The real and imag parameters must be of type Float32Array of equal lengths greater than zero and less than or equal to 4096 or an exception will be thrown. These parameters specify the Fourier coefficients of a Fourier series representing the partials of a periodic waveform. The created WaveTable will be used with an OscillatorNode and will represent a normalized time-domain waveform having maximum absolute peak value of 1. Another way of saying this is that the generated waveform of an OscillatorNode will have maximum peak value at 0dBFS. Conveniently, this corresponds to the full-range of the signal values used by the Web Audio API. Because the WaveTable will be normalized on creation, the real and imag parameters represent relative values.
+ * @param real an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.
+ * @param imag an array of sine terms (traditionally the B terms). The first element (index 0) should be set to zero (and will be ignored) since this term does not exist in the Fourier series. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.
+ */
createWaveTable(real: any,imag: any): WaveTable;
}
+declare var AudioContext: {
+ new (): AudioContext;
+}
+
declare var webkitAudioContext: {
-
- new (): webkitAudioContext;
-
+ new (): AudioContext;
}
-interface Oscillator extends AudioSourceNode {
-
- type: number;
- playbackState: number;
- frequency: AudioParam;
- detune: AudioParam;
- noteOn(when: number): void;
- noteOff(when: number): void;
- setWaveTable(waveTable: WaveTable): void;
-
+interface OfflineRenderSuccessCallback{
+ (renderedData: AudioBuffer): void;
}
-interface AudioDestinationNode extends AudioNode {
-
- maxNumberOfChannels: number;
- numberOfChannels: number;
-
+/**
+ * OfflineAudioContext is a particular type of AudioContext for rendering/mixing-down (potentially) faster than real-time. It does not render to the audio hardware, but instead renders as quickly as possible, calling a render callback function upon completion with the result provided as an AudioBuffer. It is constructed by specifying the numberOfChannels, length, and sampleRate as follows:
+ *
+ * var offlineContext = new OfflineAudioContext(unsigned long numberOfChannels, unsigned long length, float sampleRate);
+ */
+interface OfflineAudioContext extends AudioContext{
+ constructor();
+ startRendering(): void;
+ oncomplete: OfflineRenderSuccessCallback;
}
+/**
+ * AudioNodes are the building blocks of an AudioContext. This interface represents audio sources, the audio destination, and intermediate processing modules. These modules can be connected together to form processing graphs for rendering audio to the audio hardware. Each node can have inputs and/or outputs. An AudioSourceNode has no inputs and a single output. An AudioDestinationNode has one input and no outputs and represents the final destination to the audio hardware. Most processing nodes such as filters will have one input and one output. Each type of AudioNode differs in the details of how it processes or synthesizes audio. But, in general, AudioNodes will process its inputs (if it has any), and generate audio for its outputs (if it has any).
+ *
+ * An output may connect to one or more AudioNode inputs, thus fanout is supported. An input may be connected from one or more AudioNode outputs, thus fanin is supported.
+ *
+ * In order to handle this fanin, any AudioNode with inputs performs an up-mixing of all connections for each input:
+ *
+ * 1. Calculate N: the maximum number of channels of all the connections to the input. For example, if an input has a mono connection and a stereo connection then this number will be 2.
+ * 2. For each connection to the input, up-mix to N channels.
+ * 3. Mix together all the up-mixed streams from (2). This is a straight-forward mixing together of each of the corresponding channels from each connection.
+ *
+ * Please see Mixer Gain Structure for more informative details.
+ *
+ * For performance reasons, practical implementations will need to use block processing, with each AudioNode processing a fixed number of sample-frames of size block-size. In order to get uniform behavior across implementations, we will define this value explicitly. block-size is defined to be 128 sample-frames which corresponds to roughly 3ms at a sample-rate of 44.1KHz.
+ */
interface AudioNode {
-
+ /**
+ * Connects the AudioNode to another AudioNode.
+ *
+ * It is possible to connect an AudioNode output to more than one input with multiple calls to connect(). Thus, "fanout" is supported.
+ *
+ * It is possible to connect an AudioNode to another AudioNode which creates a cycle. In other words, an AudioNode may connect to another AudioNode, which in turn connects back to the first AudioNode. This is allowed only if there is at least one DelayNode in the cycle or an exception will be thrown.
+ *
+ * There can only be one connection between a given output of one specific node and a given input of another specific node. Multiple connections with the same termini are ignored. For example:
+ *
+ * nodeA.connect(nodeB);
+ * nodeA.connect(nodeB);
+ *
+ * will have the same effect as
+ *
+ * nodeA.connect(nodeB);
+ *
+ * @param destination the AudioNode to connect to.
+ * @param output an index describing which output of the AudioNode from which to connect. An out-of-bound value throws an exception.
+ * @param input an index describing which input of the destination AudioNode to connect to. An out-of-bound value throws an exception.
+ */
connect(destination: AudioNode, output?: number, input?: number): void;
+
+ /**
+ * Connects the AudioNode to an AudioParam, controlling the parameter value with an audio-rate signal.
+ *
+ * It is possible to connect an AudioNode output to more than one AudioParam with multiple calls to connect(). Thus, "fanout" is supported.
+ *
+ * It is possible to connect more than one AudioNode output to a single AudioParam with multiple calls to connect(). Thus, "fanin" is supported.
+ *
+ * An AudioParam will take the rendered audio data from any AudioNode output connected to it and convert it to mono by down-mixing if it is not already mono, then mix it together with other such outputs and finally will mix with the intrinsic parameter value (the value the AudioParam would normally have without any audio connections), including any timeline changes scheduled for the parameter.
+ *
+ * There can only be one connection between a given output of one specific node and a specific AudioParam. Multiple connections with the same termini are ignored. For example:
+ *
+ * nodeA.connect(param);
+ * nodeA.connect(param);
+ *
+ * will have the same effect as
+ *
+ * nodeA.connect(param);
+ *
+ * @param destination the AudioParam to connect to.
+ * @param output an index describing which output of the AudioNode from which to connect. An out-of-bound value throws an exception.
+ */
connect(destination: AudioParam, output?: number): void;
+
+ /**
+ * Disconnects an AudioNode's output.
+ * @param output an index describing which output of the AudioNode to disconnect. An out-of-bound value throws an exception.
+ */
disconnect(output?: number): void;
- context: webkitAudioContext;
+
+ /**
+ * The AudioContext which owns this AudioNode.
+ */
+ context: AudioContext;
+
+ /**
+ * The number of inputs feeding into the AudioNode. This will be 0 for an AudioSourceNode.
+ */
numberOfInputs: number;
+
+ /**
+ * The number of outputs coming out of the AudioNode. This will be 0 for an AudioDestinationNode.
+ */
numberOfOutputs: number;
+}
-};
+/**
+ * This is an abstract interface representing an audio source, an AudioNode which has no inputs and a single output:
+ *
+ * numberOfInputs : 0
+ * numberOfOutputs : 1
+ *
+ * Subclasses of AudioSourceNode will implement specific types of audio sources.
+ */
interface AudioSourceNode extends AudioNode {
}
+/**
+ * This is an AudioNode representing the final audio destination and is what the user will ultimately hear. It can be considered as an audio output device which is connected to speakers. All rendered audio to be heard will be routed to this node, a "terminal" node in the AudioContext's routing graph. There is only a single AudioDestinationNode per AudioContext, provided through the destination attribute of AudioContext.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 0
+ */
+interface AudioDestinationNode extends AudioNode {
+ /**
+ * The maximum number of channels that the numberOfChannels attribute can be set to. An AudioDestinationNode representing the audio hardware end-point (the normal case) can potentially output more than 2 channels of audio if the audio hardware is multi-channel. maxNumberOfChannels is the maximum number of channels that this hardware is capable of supporting. If this value is 0, then this indicates that maxNumberOfChannels may not be changed. This will be the case for an AudioDestinationNode in an OfflineAudioContext.
+ * @readonly
+ */
+ maxNumberOfChannels: number;
-
-interface AudioParam {
-
- value: number;
- minValue: number;
- maxValue: number;
- defaultValue: number;
- setValueAtTime(value: number, time: number): void;
- linearRampToValueAtTime(value: number, time: number): void;
- exponentialRampToValueAtTime(value: number, time: number): void;
- setTargetValueAtTime(targetValue: number,time: number, timeConstant: number): void;
- setValueCurveAtTime(values: number[], time: number, duration: number): void;
- cancelScheduledValues(startTime: number): void;
-
-}
-
-interface AudioGain extends AudioParam {
-
-}
-
-interface AudioGainNode extends AudioNode {
-
- gain: AudioGain;
-
-}
-
-interface DelayNode extends AudioNode {
-
- delayTime: AudioParam;
-
-}
-
-interface AudioBuffer {
-
- sampleRate: number;
- length: number;
- duration: number;
+ /**
+ * The number of channels of the destination's input. This value will default to 2, and may be set to any non-zero value less than or equal to maxNumberOfChannels. An exception will be thrown if this value is not within the valid range. Giving a concrete example, if the audio hardware supports 8-channel output, then we may set numberOfChannels to 8, and render 8-channels of output.
+ */
numberOfChannels: number;
- getChannelData(channel: number): any;
+}
+
+/**
+ * AudioParam controls an individual aspect of an AudioNode's functioning, such as volume. The parameter can be set immediately to a particular value using the "value" attribute. Or, value changes can be scheduled to happen at very precise times (in the coordinate system of AudioContext.currentTime), for envelopes, volume fades, LFOs, filter sweeps, grain windows, etc. In this way, arbitrary timeline-based automation curves can be set on any AudioParam. Additionally, audio signals from the outputs of AudioNodes can be connected to an AudioParam, summing with the intrinsic parameter value.
+ *
+ * Some synthesis and processing AudioNodes have AudioParams as attributes whose values must be taken into account on a per-audio-sample basis. For other AudioParams, sample-accuracy is not important and the value changes can be sampled more coarsely. Each individual AudioParam will specify that it is either an a-rate parameter which means that its values must be taken into account on a per-audio-sample basis, or it is a k-rate parameter.
+ *
+ * Implementations must use block processing, with each AudioNode processing 128 sample-frames in each block.
+ *
+ * For each 128 sample-frame block, the value of a k-rate parameter must be sampled at the time of the very first sample-frame, and that value must be used for the entire block. a-rate parameters must be sampled for each sample-frame of the block.
+ */
+interface AudioParam {
+ /**
+ * The parameter's floating-point value. This attribute is initialized to the defaultValue. If a value is set outside the allowable range described by minValue and maxValue no exception is thrown, because these limits are just nominal and may be exceeded. If a value is set during a time when there are any automation events scheduled then it will be ignored and no exception will be thrown.
+ */
+ value: number;
+
+ /**
+ * Nominal minimum value. This attribute is informational and value may be set lower than this value.
+ */
+ minValue: number;
+
+ /**
+ * Nominal maximum value. This attribute is informational and value may be set higher than this value.
+ */
+ maxValue: number;
+
+ /**
+ * Initial value for the value attribute
+ */
+ defaultValue: number;
+
+ /**
+ * Schedules a parameter value change at the given time.
+ *
+ * If there are no more events after this SetValue event, then for t >= startTime, v(t) = value. In other words, the value will remain constant.
+ *
+ * If the next event (having time T1) after this SetValue event is not of type LinearRampToValue or ExponentialRampToValue, then, for t: startTime <= t < T1, v(t) = value. In other words, the value will remain constant during this time interval, allowing the creation of "step" functions.
+ *
+ * If the next event after this SetValue event is of type LinearRampToValue or ExponentialRampToValue then please see details below.
+ *
+ * @param value the value the parameter will change to at the given time
+ * @param startTime parameter is the time in the same time coordinate system as AudioContext.currentTime.
+ */
+ setValueAtTime(value: number, startTime: number): void;
+
+ /**
+ * Schedules a linear continuous change in parameter value from the previous scheduled parameter value to the given value.
+ *
+ * The value during the time interval T0 <= t < T1 (where T0 is the time of the previous event and T1 is the endTime parameter passed into this method) will be calculated as:
+ *
+ * v(t) = V0 + (V1 - V0) * ((t - T0) / (T1 - T0))
+ *
+ * Where V0 is the value at the time T0 and V1 is the value parameter passed into this method.
+ *
+ * If there are no more events after this LinearRampToValue event then for t >= T1, v(t) = V1
+ *
+ * @param value the value the parameter will linearly ramp to at the given time.
+ * @param endTime the time in the same time coordinate system as AudioContext.currentTime.
+ */
+ linearRampToValueAtTime(value: number, time: number): void;
+
+ /**
+ * Schedules an exponential continuous change in parameter value from the previous scheduled parameter value to the given value. Parameters representing filter frequencies and playback rate are best changed exponentially because of the way humans perceive sound.
+ *
+ * The value during the time interval T0 <= t < T1 (where T0 is the time of the previous event and T1 is the endTime parameter passed into this method) will be calculated as:
+ *
+ * v(t) = V0 * (V1 / V0) ^ ((t - T0) / (T1 - T0))
+ *
+ * Where V0 is the value at the time T0 and V1 is the value parameter passed into this method.
+ *
+ * If there are no more events after this ExponentialRampToValue event then for t >= T1, v(t) = V1
+ *
+ * @param value the value the parameter will exponentially ramp to at the given time. An exception will be thrown if this value is less than or equal to 0, or if the value at the time of the previous event is less than or equal to 0.
+ * @param endTime the time in the same time coordinate system as AudioContext.currentTime.
+ */
+ exponentialRampToValueAtTime(value: number, endTime: number): void;
+
+ /**
+ * Start exponentially approaching the target value at the given time with a rate having the given time constant. Among other uses, this is useful for implementing the "decay" and "release" portions of an ADSR envelope. Please note that the parameter value does not immediately change to the target value at the given time, but instead gradually changes to the target value.
+ *
+ * More precisely, timeConstant is the time it takes a first-order linear continuous time-invariant system to reach the value 1 - 1/e (around 63.2%) given a step input response (transition from 0 to 1 value).
+ *
+ * During the time interval: T0 <= t < T1, where T0 is the startTime parameter and T1 represents the time of the event following this event (or infinity if there are no following events):
+ *
+ * v(t) = V1 + (V0 - V1) * exp(-(t - T0) / timeConstant)
+ *
+ * Where V0 is the initial value (the .value attribute) at T0 (the startTime parameter) and V1 is equal to the target parameter.
+ *
+ * @param target the value the parameter will start changing to at the given time.
+ * @param startTime the time in the same time coordinate system as AudioContext.currentTime.
+ * @param timeConstant the time-constant value of first-order filter (exponential) approach to the target value. The larger this value is, the slower the transition will be.
+ */
+ setTargetValueAtTime(target: number, startTime: number, timeConstant: number): void;
+
+ /**
+ * Sets an array of arbitrary parameter values starting at the given time for the given duration. The number of values will be scaled to fit into the desired duration.
+ *
+ * During the time interval: startTime <= t < startTime + duration, values will be calculated:
+ *
+ * v(t) = values[N * (t - startTime) / duration], where N is the length of the values array.
+ *
+ * After the end of the curve time interval (t >= startTime + duration), the value will remain constant at the final curve value, until there is another automation event (if any).
+ *
+ * @param values a Float32Array representing a parameter value curve. These values will apply starting at the given time and lasting for the given duration.
+ * @param startTime the time in the same time coordinate system as AudioContext.currentTime.
+ * @param duration the amount of time in seconds (after the time parameter) where values will be calculated according to the values parameter..
+ *
+ */
+ setValueCurveAtTime(values: Float32Array, time: number, duration: number): void;
+
+ /**
+ * Cancels all scheduled parameter changes with times greater than or equal to startTime.
+ *
+ * @param startTime the starting time at and after which any previously scheduled parameter changes will be cancelled. It is a time in the same time coordinate system as AudioContext.currentTime.
+ */
+ cancelScheduledValues(startTime: number): void;
+}
+
+/**
+ * Changing the gain of an audio signal is a fundamental operation in audio applications. The GainNode is one of the building blocks for creating mixers. This interface is an AudioNode with a single input and single output:
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ *
+ * which multiplies the input audio signal by the (possibly time-varying) gain attribute, copying the result to the output. By default, it will take the input and pass it through to the output unchanged, which represents a constant gain change of 1.
+ *
+ * As with other AudioParams, the gain parameter represents a mapping from time (in the coordinate system of AudioContext.currentTime) to floating-point value. Every PCM audio sample in the input is multiplied by the gain parameter's value for the specific time corresponding to that audio sample. This multiplied value represents the PCM audio sample for the output.
+ *
+ * The number of channels of the output will always equal the number of channels of the input, with each channel of the input being multiplied by the gain values and being copied into the corresponding channel of the output.
+ *
+ * The implementation must make gain changes to the audio stream smoothly, without introducing noticeable clicks or glitches. This process is called "de-zippering".
+ */
+interface GainNode extends AudioNode {
+ /**
+ * Represents the amount of gain to apply. Its default value is 1 (no gain change). The nominal minValue is 0, but may be set negative for phase inversion. The nominal maxValue is 1, but higher values are allowed (no exception thrown).This parameter is a-rate
+ */
+ gain: AudioParam;
+}
+
+/**
+ * A delay-line is a fundamental building block in audio applications. This interface is an AudioNode with a single input and single output:
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ *
+ * which delays the incoming audio signal by a certain amount. The default amount is 0 seconds (no delay). When the delay time is changed, the implementation must make the transition smoothly, without introducing noticeable clicks or glitches to the audio stream.
+ */
+interface DelayNode extends AudioNode {
+ /**
+ * An AudioParam object representing the amount of delay (in seconds) to apply. The default value (delayTime.value) is 0 (no delay). The minimum value is 0 and the maximum value is determined by the maxDelayTime argument to the AudioContext method createDelay. This parameter is k-rate
+ */
+ delayTime: AudioParam;
+}
+
+/**
+ * This interface represents a memory-resident audio asset (for one-shot sounds and other short audio clips). Its format is non-interleaved IEEE 32-bit linear PCM with a nominal range of -1 -> +1. It can contain one or more channels. It is analogous to a WebGL texture. Typically, it would be expected that the length of the PCM data would be fairly short (usually somewhat less than a minute). For longer sounds, such as music soundtracks, streaming should be used with the audio element and MediaElementAudioSourceNode.
+ *
+ * An AudioBuffer may be used by one or more AudioContexts.
+ */
+interface AudioBuffer {
+ /**
+ * The sample-rate for the PCM audio data in samples per second.
+ * @readonly
+ */
+ sampleRate: number;
+
+ /**
+ * Length of the PCM audio data in sample-frames.
+ * @readonly
+ */
+ length: number;
+
+ /**
+ * Duration of the PCM audio data in seconds.
+ * @readonly
+ */
+ duration: number;
+
+ /**
+ * The number of discrete audio channels.
+ * @readonly
+ */
+ numberOfChannels: number;
+
+ /**
+ * Returns the Float32Array representing the PCM audio data for the specific channel.
+ *
+ * The channel parameter is an index representing the particular channel to get data for. An index value of 0 represents the first channel. This index value MUST be less than numberOfChannels or an exception will be thrown.
+ */
+ getChannelData(channel: number): Float32Array;
}
+/**
+ * This interface represents an audio source from an in-memory audio asset in an AudioBuffer. It generally will be used for short audio assets which require a high degree of scheduling flexibility (can playback in rhythmically perfect ways). The playback state of an AudioBufferSourceNode goes through distinct stages during its lifetime in this order: UNSCHEDULED_STATE, SCHEDULED_STATE, PLAYING_STATE, FINISHED_STATE. The start() method causes a transition from the UNSCHEDULED_STATE to SCHEDULED_STATE. Depending on the time argument passed to start(), a transition is made from the SCHEDULED_STATE to PLAYING_STATE, at which time sound is first generated. Following this, a transition from the PLAYING_STATE to FINISHED_STATE happens when either the buffer's audio data has been completely played (if the loop attribute is false), or when the stop() method has been called and the specified time has been reached. Please see more details in the start() and stop() description. Once an AudioBufferSourceNode has reached the FINISHED state it will no longer emit any sound. Thus start() and stop() may not be issued multiple times for a given AudioBufferSourceNode.
+ *
+ * numberOfInputs : 0
+ * numberOfOutputs : 1
+ */
interface AudioBufferSourceNode extends AudioSourceNode {
+ /**
+ * The playback state, initialized to UNSCHEDULED_STATE.
+ */
playbackState: number;
+
+ /**
+ * Represents the audio asset to be played.
+ */
buffer: AudioBuffer;
+
+ /**
+ * The speed at which to render the audio stream. The default playbackRate.value is 1. This parameter is a-rate
+ */
playbackRate: AudioParam;
+
+ /**
+ * Indicates if the audio data should play in a loop. The default value is false.
+ */
loop: bool;
- noteOn(when: number): void;
- noteGrainOn(when: number, grainOffset: number, grainDuration: number): void;
- noteOff(when: number): void;
+ /**
+ * Schedules a sound to playback at an exact time.
+ *
+ * @param when time (in seconds) the sound should start playing. It is in the same time coordinate system as AudioContext.currentTime. If 0 is passed in for this value or if the value is less than currentTime, then the sound will start playing immediately. start may only be called one time and must be called before stop is called or an exception will be thrown.
+ * @param offset the offset time in the buffer (in seconds) where playback will begin. This parameter is optional with a default value of 0 (playing back from the beginning of the buffer).
+ * @param duration the duration of the portion (in seconds) to be played. This parameter is optional, with the default value equal to the total duration of the AudioBuffer minus the offset parameter. Thus if neither offset nor duration are specified then the implied duration is the total duration of the AudioBuffer.
+ */
+ start(when: number, offset?: number, duration?: number): void;
+
+ /**
+ * Schedules a sound to stop playback at an exact time. Please see deprecation section for the old method name.
+ *
+ * The when parameter describes at what time (in seconds) the sound should stop playing. It is in the same time coordinate system as AudioContext.currentTime. If 0 is passed in for this value or if the value is less than currentTime, then the sound will stop playing immediately. stop must only be called one time and only after a call to start or stop, or an exception will be thrown.
+ */
+ stop(when: number): void;
}
+/*
+ * This interface represents an audio source from an audio or video element.
+ *
+ * numberOfInputs : 0
+ * numberOfOutputs : 1
+ */
interface MediaElementAudioSourceNode extends AudioSourceNode {
-
}
-interface JavaScriptAudioNode extends AudioNode {
-
+/**
+ * This interface is an AudioNode which can generate, process, or analyse audio directly using JavaScript.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ *
+ * The ScriptProcessorNode is constructed with a bufferSize which must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. This value controls how frequently the onaudioprocess event handler is called and how many sample-frames need to be processed each call. Lower numbers for bufferSize will result in a lower (better) latency. Higher numbers will be necessary to avoid audio breakup and glitches. The value chosen must carefully balance between latency and audio quality.
+ *
+ * numberOfInputChannels and numberOfOutputChannels determine the number of input and output channels. It is invalid for both numberOfInputChannels and numberOfOutputChannels to be zero.
+ *
+ * var node = context.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+ */
+interface ScriptProcessorNode extends AudioNode {
+ /**
+ * An event listener which is called periodically for audio processing. An event of type AudioProcessingEvent will be passed to the event handler.
+ */
onaudioprocess: EventListener;
+
+ /**
+ * The size of the buffer (in sample-frames) which needs to be processed each time onprocessaudio is called. Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
+ */
bufferSize: number;
-
}
+/**
+ * This interface is a type of Event which is passed to the onaudioprocess event handler used by ScriptProcessorNode.
+ *
+ * The event handler processes audio from the input (if any) by accessing the audio data from the inputBuffer attribute. The audio data which is the result of the processing (or the synthesized data if there are no inputs) is then placed into the outputBuffer.
+ */
interface AudioProcessingEvent extends Event {
-
- node: JavaScriptAudioNode;
- playbackTime: number;
- inputBuffer: AudioBuffer;
- outputBuffer: AudioBuffer;
-
-}
-
-interface AudioPannerNode extends AudioNode {
-
- panningModel: number;
- setPosition(x: number, y: number, z: number): void;
- setOrientation(x: number, y: number, z: number): void;
- setVelocity(x: number, y: number, z: number): void;
- distanceModel: number;
- refDistance: number;
- maxDistance: number;
- rolloffFactor: number;
- coneInnerAngle: number;
- coneOuterAngle: number;
- coneOuterGain: number;
- distanceGain: AudioGain;
- coneGain: AudioGain;
-
-}
-
-interface AudioListener {
-
- dopplerFactor: number;
- speedOfSound: number;
- setPosition(x: number, y: number, z: number): void;
- setOrientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): void;
- setVelocity(x: number, y: number, z: number): void;
-
-}
-
-interface RealtimeAnalyserNode extends AudioNode {
+ /**
+ * The ScriptProcessorNode associated with this processing event.
+ */
+ node: ScriptProcessorNode;
+ /**
+ * The time when the audio will be played in the same time coordinate system as AudioContext.currentTime. playbackTime allows for very tight synchronization between processing directly in JavaScript with the other events in the context's rendering graph.
+ */
+ playbackTime: number;
+
+ /**
+ * An AudioBuffer containing the input audio data. It will have a number of channels equal to the numberOfInputChannels parameter of the createScriptProcessor() method. This AudioBuffer is only valid while in the scope of the onaudioprocess function. Its values will be meaningless outside of this scope.
+ */
+ inputBuffer: AudioBuffer;
+
+ /**
+ * An AudioBuffer where the output audio data should be written. It will have a number of channels equal to the numberOfOutputChannels parameter of the createScriptProcessor() method. Script code within the scope of the onaudioprocess function is expected to modify the Float32Array arrays representing channel data in this AudioBuffer. Any script modifications to this AudioBuffer outside of this scope will not produce any audible effects.
+ */
+ outputBuffer: AudioBuffer;
+}
+
+enum PanningModelType {
+ /**
+ * A simple and efficient spatialization algorithm using equal-power panning.
+ */
+ equalpower,
+
+ /**
+ * A higher quality spatialization algorithm using a convolution with measured impulse responses from human subjects. This panning method renders stereo output.
+ */
+ HRTF,
+
+ /**
+ * An algorithm which spatializes multi-channel audio using sound field algorithms.
+ */
+ soundfield
+}
+
+enum DistanceModelType {
+ /**
+ * A linear distance model which calculates distanceGain according to:
+ * 1 - rolloffFactor * (distance - refDistance) / (maxDistance - refDistance)
+ */
+ linear,
+
+ /**
+ * An inverse distance model which calculates distanceGain according to:
+ * refDistance / (refDistance + rolloffFactor * (distance - refDistance))
+ */
+ inverse,
+
+ /**
+ * An exponential distance model which calculates distanceGain according to:
+ * pow(distance / refDistance, -rolloffFactor)
+ */
+ exponential
+}
+
+/**
+ * This interface represents a processing node which positions / spatializes an incoming audio stream in three-dimensional space. The spatialization is in relation to the AudioContext's AudioListener (listener attribute).
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ *
+ * The audio stream from the input will be either mono or stereo, depending on the connection(s) to the input.
+ *
+ * The output of this node is hard-coded to stereo (2 channels) and currently cannot be configured.
+ */
+interface PannerNode extends AudioNode {
+ /**
+ * Determines which spatialization algorithm will be used to position the audio in 3D space. The default is "HRTF".
+ */
+ panningModel: PanningModelType;
+
+ /**
+ * Sets the position of the audio source relative to the listener attribute. A 3D cartesian coordinate system is used.
+ *
+ * The default value is (0,0,0)
+ *
+ * @param x the x coordinates in 3D space.
+ * @param y the y coordinates in 3D space.
+ * @param z the z coordinates in 3D space.
+ */
+ setPosition(x: number, y: number, z: number): void;
+
+ /**
+ * Describes which direction the audio source is pointing in the 3D cartesian coordinate space. Depending on how directional the sound is (controlled by the cone attributes), a sound pointing away from the listener can be very quiet or completely silent.
+ *
+ * The default value is (1,0,0)
+ *
+ * @param x
+ * @param y
+ * @param z
+ */
+ setOrientation(x: number, y: number, z: number): void;
+
+ /**
+ * Sets the velocity vector of the audio source. This vector controls both the direction of travel and the speed in 3D space. This velocity relative to the listener's velocity is used to determine how much doppler shift (pitch change) to apply. The units used for this vector is meters / second and is independent of the units used for position and orientation vectors.
+ *
+ * The default value is (0,0,0)
+ *
+ * @param x a direction vector indicating direction of travel and intensity.
+ * @param y
+ * @param z
+ */
+ setVelocity(x: number, y: number, z: number): void;
+
+ /**
+ * Determines which algorithm will be used to reduce the volume of an audio source as it moves away from the listener. The default is "inverse".
+ */
+ distanceModel: DistanceModelType;
+
+ /**
+ * A reference distance for reducing volume as source move further from the listener. The default value is 1.
+ */
+ refDistance: number;
+
+ /**
+ * The maximum distance between source and listener, after which the volume will not be reduced any further. The default value is 10000.
+ */
+ maxDistance: number;
+
+ /**
+ * Describes how quickly the volume is reduced as source moves away from listener. The default value is 1.
+ */
+ rolloffFactor: number;
+
+ /**
+ * A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction. The default value is 360.
+ */
+ coneInnerAngle: number;
+
+ /**
+ * A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of coneOuterGain. The default value is 360.
+ */
+ coneOuterAngle: number;
+
+ /**
+ * A parameter for directional audio sources, this is the amount of volume reduction outside of the coneOuterAngle. The default value is 0.
+ */
+ coneOuterGain: number;
+}
+
+/**
+ * This interface represents the position and orientation of the person listening to the audio scene. All PannerNode objects spatialize in relation to the AudioContext's listener. See this section for more details about spatialization.
+ */
+interface AudioListener {
+ /**
+ * A constant used to determine the amount of pitch shift to use when rendering a doppler effect. The default value is 1.
+ */
+ dopplerFactor: number;
+
+ /**
+ * The speed of sound used for calculating doppler shift. The default value is 343.3 meters / second.
+ */
+ speedOfSound: number;
+
+ /**
+ * Sets the position of the listener in a 3D cartesian coordinate space. PannerNode objects use this position relative to individual audio sources for spatialization.
+ *
+ * The default value is (0,0,0)
+ *
+ * @param x
+ * @param y
+ * @param z
+ */
+ setPosition(x: number, y: number, z: number): void;
+
+ /**
+ * Describes which direction the listener is pointing in the 3D cartesian coordinate space. Both a front vector and an up vector are provided. In simple human terms, the front vector represents which direction the person's nose is pointing. The up vector represents the direction the top of a person's head is pointing. These values are expected to be linearly independent (at right angles to each other). For normative requirements of how these values are to be interpreted, see the spatialization section.
+ *
+ * @param x x coordinate of a front direction vector in 3D space, with the default value being 0
+ * @param y y coordinate of a front direction vector in 3D space, with the default value being 0
+ * @param z z coordinate of a front direction vector in 3D space, with the default value being -1
+ * @param xUp x coodinate of an up direction vector in 3D space, with the default value being 0
+ * @param yUp y coodinate of an up direction vector in 3D space, with the default value being 1
+ * @param zUp z coodinate of an up direction vector in 3D space, with the default value being 0
+ */
+ setOrientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): void;
+
+ /**
+ * Sets the velocity vector of the listener. This vector controls both the direction of travel and the speed in 3D space. This velocity relative to an audio source's velocity is used to determine how much doppler shift (pitch change) to apply. The units used for this vector is meters / second and is independent of the units used for position and orientation vectors.
+ *
+ * @param x x coordinate of a direction vector indicating direction of travel and intensity. The default value is 0
+ * @param y y coordinate of a direction vector indicating direction of travel and intensity. The default value is 0
+ * @param z z coordinate of a direction vector indicating direction of travel and intensity. The default value is 0
+ */
+ setVelocity(x: number, y: number, z: number): void;
+}
+
+
+/**
+ * This interface represents a processing node which applies a linear convolution effect given an impulse response. Normative requirements for multi-channel convolution matrixing are described [here](http://www.w3.org/TR/2012/WD-webaudio-20121213/#Convolution-reverb-effect).
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ */
+interface ConvolverNode extends AudioNode {
+ /**
+ * A mono, stereo, or 4-channel AudioBuffer containing the (possibly multi-channel) impulse response used by the ConvolverNode. At the time when this attribute is set, the buffer and the state of the normalize attribute will be used to configure the ConvolverNode with this impulse response having the given normalization.
+ */
+ buffer: AudioBuffer;
+
+ /**
+ * Controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer atttribute is set. Its default value is true in order to achieve a more uniform output level from the convolver when loaded with diverse impulse responses. If normalize is set to false, then the convolution will be rendered with no pre-processing/scaling of the impulse response. Changes to this value do not take effect until the next time the buffer attribute is set.
+ */
+ normalize: bool;
+}
+
+/**
+ * This interface represents a node which is able to provide real-time frequency and time-domain analysis information. The audio stream will be passed un-processed from input to output.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1 Note that this output may be left unconnected.
+ */
+interface AnalyserNode extends AudioNode {
+ /**
+ * Copies the current frequency data into the passed floating-point array. If the array has fewer elements than the frequencyBinCount, the excess elements will be dropped.
+ * @param array where frequency-domain analysis data will be copied.
+ */
getFloatFrequencyData(array: any): void;
+
+ /**
+ * Copies the current frequency data into the passed unsigned byte array. If the array has fewer elements than the frequencyBinCount, the excess elements will be dropped.
+ * @param Tarray where frequency-domain analysis data will be copied.
+ */
getByteFrequencyData(array: any): void;
+
+ /**
+ * Copies the current time-domain (waveform) data into the passed unsigned byte array. If the array has fewer elements than the frequencyBinCount, the excess elements will be dropped.
+ * @param array where time-domain analysis data will be copied.
+ */
getByteTimeDomainData(array: any): void;
+
+ /**
+ * The size of the FFT used for frequency-domain analysis. This must be a power of two.
+ */
fftSize: number;
+
+ /**
+ * Half the FFT size.
+ */
frequencyBinCount: number;
+
+ /**
+ * The minimum power value in the scaling range for the FFT analysis data for conversion to unsigned byte values.
+ */
minDecibels: number;
+
+ /**
+ * The maximum power value in the scaling range for the FFT analysis data for conversion to unsigned byte values.
+ */
maxDecibels: number;
+
+ /**
+ * A value from 0 -> 1 where 0 represents no time averaging with the last analysis frame.
+ */
smoothingTimeConstant: number;
-
}
-interface AudioChannelSplitter extends AudioNode {
-
+/**
+ * The ChannelSplitterNode is for use in more advanced applications and would often be used in conjunction with ChannelMergerNode.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : Variable N (defaults to 6) // number of "active" (non-silent) outputs is determined by number of channels in the input
+ */
+interface ChannelSplitterNode extends AudioNode {
}
-interface AudioChannelMerger extends AudioNode {
-
+/**
+ * The ChannelMergerNode is for use in more advanced applications and would often be used in conjunction with ChannelSplitterNode.
+ *
+ * numberOfInputs : Variable N (default to 6) // number of connected inputs may be less than this
+ * numberOfOutputs : 1
+ */
+interface ChannelMergerNode extends AudioNode {
}
+/**
+ * DynamicsCompressorNode is an AudioNode processor implementing a dynamics compression effect.
+ *
+ * Dynamics compression is very commonly used in musical production and game audio. It lowers the volume of the loudest parts of the signal and raises the volume of the softest parts. Overall, a louder, richer, and fuller sound can be achieved. It is especially important in games and musical applications where large numbers of individual sounds are played simultaneous to control the overall signal level and help avoid clipping (distorting) the audio output to the speakers.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ */
interface DynamicsCompressorNode extends AudioNode {
-
+ /**
+ * The decibel value above which the compression will start taking effect. Its default value is -24, with a nominal range of -100 to 0.
+ */
threshold: AudioParam;
+
+ /**
+ * A decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion. Its default value is 30, with a nominal range of 0 to 40.
+ */
knee: AudioParam;
+
+ /**
+ * The amount of dB change in input for a 1 dB change in output. Its default value is 12, with a nominal range of 1 to 20.
+ */
ratio: AudioParam;
+
+ /**
+ * A read-only decibel value for metering purposes, representing the current amount of gain reduction that the compressor is applying to the signal. If fed no signal the value will be 0 (no gain reduction). The nominal range is -20 to 0.
+ */
reduction: AudioParam;
+
+ /**
+ * The amount of time (in seconds) to reduce the gain by 10dB. Its default value is 0.003, with a nominal range of 0 to 1.
+ */
attack: AudioParam;
+
+ /**
+ * The amount of time (in seconds) to increase the gain by 10dB. Its default value is 0.250, with a nominal range of 0 to 1.
+ */
release: AudioParam;
}
+enum BiquadFilterType {
+ /**
+ * A lowpass filter allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. It implements a standard second-order resonant lowpass filter with 12dB/octave rolloff.
+ *
+ * ## frequency
+ * The cutoff frequency
+ * ## Q
+ * Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked. Please note that for this filter type, this value is not a traditional Q, but is a resonance value in decibels.
+ * ## gain
+ * Not used in this filter type
+ */
+ lowpass,
+
+ /**
+ * A highpass filter is the opposite of a lowpass filter. Frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. It implements a standard second-order resonant highpass filter with 12dB/octave rolloff.
+ *
+ * ## frequency
+ * The cutoff frequency below which the frequencies are attenuated
+ * ## Q
+ * Controls how peaked the response will be at the cutoff frequency. A large value makes the response more peaked. Please note that for this filter type, this value is not a traditional Q, but is a resonance value in decibels.
+ * ## gain
+ * Not used in this filter type
+ */
+ highpass,
+
+ /**
+ * A bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. It implements a second-order bandpass filter.
+ *
+ * ## frequency
+ * The center of the frequency band
+ * ## Q
+ * Controls the width of the band. The width becomes narrower as the Q value increases.
+ * ## gain
+ * Not used in this filter type
+ */
+ bandpass,
+
+ /**
+ * The lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. It implements a second-order lowshelf filter.
+ *
+ * ## frequency
+ * The upper limit of the frequences where the boost (or attenuation) is applied.
+ * ## Q
+ * Not used in this filter type.
+ * ## gain
+ * The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.
+ */
+ lowshelf,
+
+ /**
+ * The highshelf filter is the opposite of the lowshelf filter and allows all frequencies through, but adds a boost to the higher frequencies. It implements a second-order highshelf filter
+ *
+ * ## frequency
+ * The lower limit of the frequences where the boost (or attenuation) is applied.
+ * ## Q
+ * Not used in this filter type.
+ * ## gain
+ * The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.
+ */
+ highshelf,
+
+ /**
+ * The peaking filter allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.
+ *
+ * ## frequency
+ * The center frequency of where the boost is applied.
+ * ## Q
+ * Controls the width of the band of frequencies that are boosted. A large value implies a narrow width.
+ * ## gain
+ * The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.
+ */
+ peaking,
+
+ /**
+ * The notch filter (also known as a band-stop or band-rejection filter) is the opposite of a bandpass filter. It allows all frequencies through, except for a set of frequencies.
+ *
+ * ## frequency
+ * The center frequency of where the notch is applied.
+ * ## Q
+ * Controls the width of the band of frequencies that are attenuated. A large value implies a narrow width.
+ * ## gain
+ * Not used in this filter type.
+ */
+ notch,
+
+ /**
+ * An allpass filter allows all frequencies through, but changes the phase relationship between the various frequencies. It implements a second-order allpass filter
+ *
+ * ## frequency
+ * The frequency where the center of the phase transition occurs. Viewed another way, this is the frequency with maximal group delay.
+ * ## Q
+ * Controls how sharp the phase transition is at the center frequency. A larger value implies a sharper transition and a larger group delay.
+ * ## gain
+ * Not used in this filter type.
+ */
+ allpass
+}
+
+/**
+ * BiquadFilterNode is an AudioNode processor implementing very common low-order filters.
+ *
+ * Low-order filters are the building blocks of basic tone controls (bass, mid, treble), graphic equalizers, and more advanced filters. Multiple BiquadFilterNode filters can be combined to form more complex filters. The filter parameters such as "frequency" can be changed over time for filter sweeps, etc. Each BiquadFilterNode can be configured as one of a number of common filter types as shown in the IDL below. The default filter type is "lowpass"
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ *
+ * The filter types are briefly described below. We note that all of these filters are very commonly used in audio processing. In terms of implementation, they have all been derived from standard analog filter prototypes. For more technical details, we refer the reader to the excellent reference by Robert Bristow-Johnson.
+ *
+ * All parameters are k-rate with the following default parameter values:
+ *
+ * ## frequency
+ * 350Hz, with a nominal range of 10 to the Nyquist frequency (half the sample-rate).
+ * ## Q
+ * 1, with a nominal range of 0.0001 to 1000.
+ * ## gain
+ * 0, with a nominal range of -40 to 40.
+ */
interface BiquadFilterNode extends AudioNode {
- type: number;
+ type: BiquadFilterType;
frequency: AudioParam;
Q: AudioParam;
gain: AudioParam;
+ /**
+ * Given the current filter parameter settings, calculates the frequency response for the specified frequencies.
+ * @param frequencyHz an array of frequencies at which the response values will be calculated.
+ * @param magResponse an output array receiving the linear magnitude response values.
+ * @param phaseResponse an output array receiving the phase response values in radians.
+ */
getFrequencyResponse(frequencyHz: any, magResponse: any, phaseResponse: any): void;
-
}
+/**
+ * WaveShaperNode is an AudioNode processor implementing non-linear distortion effects.
+ *
+ * Non-linear waveshaping distortion is commonly used for both subtle non-linear warming, or more obvious distortion effects. Arbitrary non-linear shaping curves may be specified.
+ *
+ * numberOfInputs : 1
+ * numberOfOutputs : 1
+ */
interface WaveShaperNode extends AudioNode {
-
- curve: any;
-
+ /**
+ * The shaping curve used for the waveshaping effect. The input signal is nominally within the range -1 -> +1. Each input sample within this range will index into the shaping curve with a signal level of zero corresponding to the center value of the curve array. Any sample value less than -1 will correspond to the first value in the curve array. Any sample value less greater than +1 will correspond to the last value in the curve array.
+ */
+ curve: Float32Array;
}
-interface MediaStreamAudioSourceNode extends AudioSourceNode {
-
-
-
+enum OscillatorType {
+ sine,
+ square,
+ sawtooth,
+ triangle,
+ custom
}
-interface ConvolverNode extends AudioNode {
+/**
+ * OscillatorNode represents an audio source generating a periodic waveform. It can be set to a few commonly used waveforms. Additionally, it can be set to an arbitrary periodic waveform through the use of a WaveTable object.
+ *
+ * Oscillators are common foundational building blocks in audio synthesis. An OscillatorNode will start emitting sound at the time specified by the start() method.
+ *
+ * Mathematically speaking, a continuous-time periodic waveform can have very high (or infinitely high) frequency information when considered in the frequency domain. When this waveform is sampled as a discrete-time digital audio signal at a particular sample-rate, then care must be taken to discard (filter out) the high-frequency information higher than the Nyquist frequency (half the sample-rate) before converting the waveform to a digital form. If this is not done, then aliasing of higher frequencies (than the Nyquist frequency) will fold back as mirror images into frequencies lower than the Nyquist frequency. In many cases this will cause audibly objectionable artifacts. This is a basic and well understood principle of audio DSP.
+ *
+ * There are several practical approaches that an implementation may take to avoid this aliasing. But regardless of approach, the idealized discrete-time digital audio signal is well defined mathematically. The trade-off for the implementation is a matter of implementation cost (in terms of CPU usage) versus fidelity to achieving this ideal.
+ *
+ * It is expected that an implementation will take some care in achieving this ideal, but it is reasonable to consider lower-quality, less-costly approaches on lower-end hardware.
+ *
+ * Both .frequency and .detune are a-rate parameters and are used together to determine a computedFrequency value:
+ *
+ * computedFrequency(t) = frequency(t) * pow(2, detune(t) / 1200)
+ *
+ * The OscillatorNode's instantaneous phase at each time is the time integral of computedFrequency.
+ *
+ * numberOfInputs : 0
+ * numberOfOutputs : 1 (mono output)
+ */
+interface OscillatorNode extends AudioSourceNode {
+ /**
+ * The shape of the periodic waveform. It may directly be set to any of the type constant values except for "custom". The setWaveTable() method can be used to set a custom waveform, which results in this attribute being set to "custom". The default value is "sine".
+ */
+ type: OscillatorType;
- buffer: AudioBuffer;
- normalize: bool;
+ /**
+ * defined as in AudioBufferSourceNode.
+ * @readonly
+ */
+ playbackState: number;
+ /**
+ * The frequency (in Hertz) of the periodic waveform. This parameter is a-rate
+ * @readonly
+ */
+ frequency: AudioParam;
+
+ /**
+ * A detuning value (in Cents) which will offset the frequency by the given amount. This parameter is a-rate
+ */
+ detune: AudioParam; // in Cents
+
+ /**
+ * defined as in AudioBufferSourceNode.
+ */
+ start(when: number): void;
+
+ /**
+ * defined as in AudioBufferSourceNode.
+ */
+ stop(when: number): void;
+
+ /**
+ * Sets an arbitrary custom periodic waveform given a WaveTable.
+ */
+ setWaveTable(waveTable: WaveTable): void;
}
+/**
+ * WaveTable represents an arbitrary periodic waveform to be used with an OscillatorNode. Please see createWaveTable() and setWaveTable() and for more details.
+ */
interface WaveTable {
+}
+/**
+ * This interface represents an audio source from a MediaStream. The first AudioMediaStreamTrack from the MediaStream will be used as a source of audio.
+ *
+ * numberOfInputs : 0
+ * numberOfOutputs : 1
+ */
+interface MediaStreamAudioSourceNode extends AudioSourceNode {
}