UNPKG

three.fbo-helper

Version:

FrameBuffer Object inspector for three.js

2,334 lines (1,500 loc) 1.08 MB
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ var THREE = require( 'three' ); var FBOHelper = require( 'three.fbo-helper' ); console.log( FBOHelper ); },{"three":3,"three.fbo-helper":2}],2:[function(require,module,exports){ ;(function() { "use strict"; var root = this var has_require = typeof require !== 'undefined' var THREE = root.THREE || has_require && require('three') if( !THREE ) throw new Error( 'FBOHelper requires three.js' ) "use strict"; var layerCSS = ` #fboh-fbos-list{ all: unset; position: fixed; left: 0; top: 0; z-index: 1000000; width: 150px; } #fboh-fbos-list, #fboh-fbos-list *, #fboh-hotspot, #fboh-label, #fboh-info{ box-sizing: border-box; font-family: 'Roboto Mono', 'courier new', courier, monospace; font-size: 11px; line-height: 1.4em; } #fboh-fbos-list li{ cursor: pointer; color: white; width: 100%; padding: 4px 0; border-top: 1px solid #888; border-bottom: 1px solid black; background-color: #444; text-align: center; text-shadow: 0 -1px black; } #fboh-fbos-list li:hover{ background-color: rgba( 158, 253, 56, .5 ); } #fboh-fbos-list li.active{ background-color: rgba( 158, 253, 56, .5 ); color: white; text-shadow: 0 1px black; } #fboh-hotspot{ position: absolute; left: 0; top: 0; background-color: rgba( 158, 253, 56,.5); pointer-events: none; } #fboh-label{ position: absolute; left: 0; bottom: 0; transform-origin: bottom left; pointer-events: none; } #fboh-info{ display: none; position: absolute; left: 160px; top: 10px; pointer-events: none; } .fboh-card{ display: block; white-space: nowrap; color: black; padding: 10px; background-color: white; border: 1px solid black; } `; let formats = {} formats[ THREE.AlphaFormat ] = 'THREE.AlphaFormat'; formats[ THREE.RGBFormat ] = 'THREE.RGBFormat'; formats[ THREE.RGBAFormat ] = 'THREE.RGBAFormat'; formats[ THREE.LuminanceFormat ] = 'THREE.LuminanceFormat'; formats[ THREE.LuminanceAlphaFormat ] = 'THREE.LuminanceAlphaFormat'; //formats[ THREE.RGBEFormat ] = 'THREE.RGBEFormat'; let types = {} types[ THREE.UnsignedByteType ] = 'THREE.UnsignedByteType'; types[ THREE.ByteType ] = 'THREE.ByteType'; types[ THREE.ShortType ] = 'THREE.ShortType'; types[ THREE.UnsignedShortType ] = 'THREE.UnsignedShortType'; types[ THREE.IntType ] = 'THREE.IntType'; types[ THREE.UnsignedIntType ] = 'THREE.UnsignedIntType'; types[ THREE.FloatType ] = 'THREE.FloatType'; types[ THREE.HalfFloatType ] = 'THREE.HalfFloatType'; types[ THREE.UnsignedShort4444Type ] = 'THREE.UnsignedShort4444Type'; types[ THREE.UnsignedShort5551Type ] = 'THREE.UnsignedShort5551Type'; types[ THREE.UnsignedShort565Type ] = 'THREE.UnsignedShort565Type'; class FBOHelper { constructor( renderer ) { this.renderer = renderer; this.autoUpdate = false; this.fbos = [] this.list = document.createElement( 'ul' ); this.list.setAttribute( 'id', 'fboh-fbos-list' ); document.body.appendChild( this.list ); this.scene = new THREE.Scene(); this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, .000001, 1000 ); this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.grid = document.createElement( 'div' ); this.grid.setAttribute( 'style', 'position: fixed; left: 50%; top: 50%; border: 1px solid #000000; transform: translate3d(-50%, -50%, 0 ); box-shadow: 0 0 50px black; display: none' ); this.grid.setAttribute( 'id', 'bfoh-grid' ); document.body.appendChild( this.grid ); this.hotspot = document.createElement( 'div' ); this.hotspot.setAttribute( 'id', 'fboh-hotspot' ); this.grid.appendChild( this.hotspot ); this.label = document.createElement( 'div' ); this.label.setAttribute( 'id', 'fboh-label' ); this.label.className = 'fboh-card'; this.hotspot.appendChild( this.label ); this.info = document.createElement( 'div' ); this.info.setAttribute( 'id', 'fboh-info' ); this.info.className = 'fboh-card'; document.body.appendChild( this.info ); this.currentObj = null; this.currentU = 0; this.currentV = 0; this.fboMap = new Map(); this.offsetX = 0; this.offsetY = 0; this.grid.appendChild( this.hotspot ); const head = window.document.head || window.document.getElementsByTagName('head')[0]; const style = window.document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = layerCSS; } else { style.appendChild(document.createTextNode(layerCSS)); } head.appendChild(style); const ss = document.createElement( 'link' ); ss.type = 'text/css'; ss.rel = 'stylesheet'; ss.href = 'https://fonts.googleapis.com/css?family=Roboto+Mono'; head.appendChild( ss ); this.grid.addEventListener( 'wheel', e => { var direction = ( e.deltaY < 0 ) ? 1 : -1; this.camera.zoom += direction / 50; this.camera.updateProjectionMatrix(); this.grid.style.transform = `translate3d(-50%, -50%, 0 ) scale(${this.camera.zoom},${this.camera.zoom}) translate3d(${this.offsetX}px,${this.offsetY}px,0) `; this.label.style.transform = `scale(${1/this.camera.zoom},${1/this.camera.zoom})`; this.hotspot.style.transform = `scale(${1/this.camera.zoom},${1/this.camera.zoom})`; this.hotspot.style.borderWidth = `${1/this.camera.zoom}px`; this.readPixel( this.currentObj, this.currentU, this.currentV ); } ); let dragging = false; let mouseStart = { x: 0, y: 0 }; let offsetStart = { x: 0, y: 0 }; this.grid.addEventListener( 'mousedown', e => { dragging = true; mouseStart.x = e.clientX; mouseStart.y = e.clientY; offsetStart.x = this.offsetX; offsetStart.y = this.offsetY; } ); this.grid.addEventListener( 'mouseup', e => { dragging = false; } ); this.grid.addEventListener( 'mouseout', e => { this.label.style.display = 'none'; dragging = false; } ); this.grid.addEventListener( 'mouseover', e => { this.label.style.display = 'block'; } ); this.grid.addEventListener( 'mousemove', e => { if( dragging ) { this.offsetX = offsetStart.x + ( e.clientX - mouseStart.x ) / this.camera.zoom; this.offsetY = offsetStart.y + ( e.clientY - mouseStart.y ) / this.camera.zoom; this.camera.position.x = -this.offsetX; this.camera.position.y = this.offsetY; this.grid.style.transform = `translate3d(-50%, -50%, 0 ) scale(${this.camera.zoom},${this.camera.zoom}) translate3d(${this.offsetX}px,${this.offsetY}px,0)`; } else { this.mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1; this.mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1; this.raycaster.setFromCamera( this.mouse, this.camera ); const intersects = this.raycaster.intersectObject( this.currentObj.quad, true ); if ( intersects.length > 0 ) { this.readPixel( this.fboMap.get( intersects[ 0 ].object ), intersects[ 0 ].uv.x, intersects[ 0 ].uv.y ); this.label.style.display = 'block'; } else { this.label.style.display = 'none'; } } } ); window.addEventListener( 'keydown', e => { if( e.keyCode === 27 ) { this.hide(); } } ); this.grid.addEventListener( 'keydown', e => { if( e.keyCode === 27 ) { this.hide(); } } ); } hide() { this.hideAll(); this.info.style.display = 'none'; this.grid.style.display = 'none'; this.currentObj = null; } attach( fbo, name, formatter ) { var li = document.createElement( 'li' ); li.textContent = name; if( fbo.image ) { fbo.width = fbo.image.width; fbo.height = fbo.image.height; } const width = 600; const height = fbo.height * width / fbo.width; const material = new THREE.MeshBasicMaterial( { map: fbo, side: THREE.DoubleSide } ); const quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), material ); if( !fbo.flipY ) quad.rotation.x = Math.PI; quad.visible = false; quad.width = width; quad.height = height; quad.scale.set( width, height, 1. ); this.scene.add( quad ); var fboData = { width: width, height: height, name: name, fbo: fbo, flipY: fbo.flipY, li: li, visible: false, quad: quad, material: material, formatter: formatter }; this.fbos.push( fboData ); this.fboMap.set( quad, fboData ); li.addEventListener( 'click', e => { quad.visible = !quad.visible; if( quad.visible ) { this.hideAll(); quad.visible = true; li.classList.add( 'active' ); this.info.style.display = 'block'; this.grid.style.display = 'block'; this.grid.style.width = ( fboData.width + 2 ) + 'px'; this.grid.style.height = ( fboData.height + 2 ) + 'px'; this.currentObj = fboData; this.info.innerHTML = `Width: ${fbo.width} Height: ${fbo.height}<br/>Format: ${formats[fbo.texture.format]} Type: ${types[fbo.texture.type]}`; } else { this.info.style.display = 'none'; li.classList.remove( 'active' ); this.grid.style.display = 'none'; this.currentObj = null; } } ); this.buildList(); } detach( f ) { var p = 0; for( var fbo of this.fbos ) { if( fbo.fbo === f ) { this.fbos.splice( p, 1 ) } p++; } this.buildList(); } refreshFBO( f ) { for( var fbo of this.fbos ) { if( fbo.fbo === f ) { const width = 600; const height = f.height * width / f.width; fbo.width = width; fbo.height = height; fbo.quad.width = width; fbo.quad.height = height; fbo.quad.scale.set( width, height, 1. ); } } } hideAll() { this.fbos.forEach( fbo => { fbo.quad.visible = false; fbo.li.classList.remove( 'active' ); } ); } buildList() { while( this.list.firstChild ) this.list.removeChild( this.list.firstChild ); for( var fbo of this.fbos ) { this.list.appendChild( fbo.li ); } } setSize( w, h ) { this.camera.left = w / - 2; this.camera.right = w / 2; this.camera.top = h / 2; this.camera.bottom = h / - 2; this.camera.updateProjectionMatrix(); } readPixel( obj, u, v ) { this.currentU = u; this.currentV = v; if( this.currentObj === null ) return; const fbo = obj.fbo; const x = ~~( fbo.width * u ); const y = ~~( fbo.height * v ); let types = {} types[ THREE.UnsignedByteType ] = Uint8Array; types[ THREE.ByteType ] = Int8Array; types[ THREE.ShortType ] = Int16Array; types[ THREE.UnsignedShortType ] = Uint16Array; types[ THREE.IntType ] = Int32Array; types[ THREE.UnsignedIntType ] = Uint32Array; types[ THREE.FloatType ] = Float32Array; types[ THREE.HalfFloatType ] = null; types[ THREE.UnsignedShort4444Type ] = Uint16Array; types[ THREE.UnsignedShort5551Type ] = Uint16Array; types[ THREE.UnsignedShort565Type ] = Uint16Array; var type = types[ fbo.texture.type ]; if( type === null ) { console.warning( fbo.texture.type + ' not supported' ); return; } const pixelBuffer = new ( type )( 4 ); this.renderer.readRenderTargetPixels( fbo, x, y, 1, 1, pixelBuffer ); const posTxt = `X : ${x} Y: ${y} u: ${u} v: ${v}`; const dataTxt = obj.formatter ? obj.formatter( { x: x, y: y, u: u, v: v, r: pixelBuffer[ 0 ], g: pixelBuffer[ 1 ], b: pixelBuffer[ 2 ], a: pixelBuffer[ 3 ] } ) : `R: ${pixelBuffer[ 0 ]} G: ${pixelBuffer[ 1 ]} B: ${pixelBuffer[ 2 ]} A: ${pixelBuffer[ 3 ]}`; this.label.innerHTML = `${posTxt}<br/>${dataTxt}`; const ox = ~~( u * fbo.width ) * obj.quad.width / fbo.width; const oy = ~~( obj.flipY ? ( 1 - v ) * fbo.height : v * fbo.height ) * obj.quad.height / fbo.height; this.hotspot.style.width = `${obj.quad.width / fbo.width}px`; this.hotspot.style.height = `${obj.quad.height / fbo.height}px`; this.hotspot.style.transform = `translate3d(${ox}px,${oy}px,0)`; this.label.style.bottom = ( obj.quad.height / fbo.height ) + 'px'; } update() { this.renderer.autoClear = false; this.renderer.render( this.scene, this.camera ); this.renderer.autoClear = true; if( this.autoUpdate ) this.readPixel( this.currentObj, this.currentU, this.currentV ); } } if( typeof exports !== 'undefined' ) { if( typeof module !== 'undefined' && module.exports ) { exports = module.exports = FBOHelper } exports.FBOHelper = FBOHelper } else { root.FBOHelper = FBOHelper } }).call(this); },{"three":3}],3:[function(require,module,exports){ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (factory((global.THREE = global.THREE || {}))); }(this, (function (exports) { 'use strict'; // Polyfills if ( Number.EPSILON === undefined ) { Number.EPSILON = Math.pow( 2, - 52 ); } // if ( Math.sign === undefined ) { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign Math.sign = function ( x ) { return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : + x; }; } if ( Function.prototype.name === undefined ) { // Missing in IE9-11. // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name Object.defineProperty( Function.prototype, 'name', { get: function () { return this.toString().match( /^\s*function\s*(\S*)\s*\(/ )[ 1 ]; } } ); } if ( Object.assign === undefined ) { // Missing in IE. // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ( function () { Object.assign = function ( target ) { 'use strict'; if ( target === undefined || target === null ) { throw new TypeError( 'Cannot convert undefined or null to object' ); } var output = Object( target ); for ( var index = 1; index < arguments.length; index ++ ) { var source = arguments[ index ]; if ( source !== undefined && source !== null ) { for ( var nextKey in source ) { if ( Object.prototype.hasOwnProperty.call( source, nextKey ) ) { output[ nextKey ] = source[ nextKey ]; } } } } return output; }; } )(); } /** * https://github.com/mrdoob/eventdispatcher.js/ */ function EventDispatcher() {} Object.assign( EventDispatcher.prototype, { addEventListener: function ( type, listener ) { if ( this._listeners === undefined ) this._listeners = {}; var listeners = this._listeners; if ( listeners[ type ] === undefined ) { listeners[ type ] = []; } if ( listeners[ type ].indexOf( listener ) === - 1 ) { listeners[ type ].push( listener ); } }, hasEventListener: function ( type, listener ) { if ( this._listeners === undefined ) return false; var listeners = this._listeners; if ( listeners[ type ] !== undefined && listeners[ type ].indexOf( listener ) !== - 1 ) { return true; } return false; }, removeEventListener: function ( type, listener ) { if ( this._listeners === undefined ) return; var listeners = this._listeners; var listenerArray = listeners[ type ]; if ( listenerArray !== undefined ) { var index = listenerArray.indexOf( listener ); if ( index !== - 1 ) { listenerArray.splice( index, 1 ); } } }, dispatchEvent: function ( event ) { if ( this._listeners === undefined ) return; var listeners = this._listeners; var listenerArray = listeners[ event.type ]; if ( listenerArray !== undefined ) { event.target = this; var array = [], i = 0; var length = listenerArray.length; for ( i = 0; i < length; i ++ ) { array[ i ] = listenerArray[ i ]; } for ( i = 0; i < length; i ++ ) { array[ i ].call( this, event ); } } } } ); var REVISION = '81'; var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 }; var CullFaceNone = 0; var CullFaceBack = 1; var CullFaceFront = 2; var CullFaceFrontBack = 3; var FrontFaceDirectionCW = 0; var FrontFaceDirectionCCW = 1; var BasicShadowMap = 0; var PCFShadowMap = 1; var PCFSoftShadowMap = 2; var FrontSide = 0; var BackSide = 1; var DoubleSide = 2; var FlatShading = 1; var SmoothShading = 2; var NoColors = 0; var FaceColors = 1; var VertexColors = 2; var NoBlending = 0; var NormalBlending = 1; var AdditiveBlending = 2; var SubtractiveBlending = 3; var MultiplyBlending = 4; var CustomBlending = 5; var BlendingMode = { NoBlending: NoBlending, NormalBlending: NormalBlending, AdditiveBlending: AdditiveBlending, SubtractiveBlending: SubtractiveBlending, MultiplyBlending: MultiplyBlending, CustomBlending: CustomBlending }; var AddEquation = 100; var SubtractEquation = 101; var ReverseSubtractEquation = 102; var MinEquation = 103; var MaxEquation = 104; var ZeroFactor = 200; var OneFactor = 201; var SrcColorFactor = 202; var OneMinusSrcColorFactor = 203; var SrcAlphaFactor = 204; var OneMinusSrcAlphaFactor = 205; var DstAlphaFactor = 206; var OneMinusDstAlphaFactor = 207; var DstColorFactor = 208; var OneMinusDstColorFactor = 209; var SrcAlphaSaturateFactor = 210; var NeverDepth = 0; var AlwaysDepth = 1; var LessDepth = 2; var LessEqualDepth = 3; var EqualDepth = 4; var GreaterEqualDepth = 5; var GreaterDepth = 6; var NotEqualDepth = 7; var MultiplyOperation = 0; var MixOperation = 1; var AddOperation = 2; var NoToneMapping = 0; var LinearToneMapping = 1; var ReinhardToneMapping = 2; var Uncharted2ToneMapping = 3; var CineonToneMapping = 4; var UVMapping = 300; var CubeReflectionMapping = 301; var CubeRefractionMapping = 302; var EquirectangularReflectionMapping = 303; var EquirectangularRefractionMapping = 304; var SphericalReflectionMapping = 305; var CubeUVReflectionMapping = 306; var CubeUVRefractionMapping = 307; var TextureMapping = { UVMapping: UVMapping, CubeReflectionMapping: CubeReflectionMapping, CubeRefractionMapping: CubeRefractionMapping, EquirectangularReflectionMapping: EquirectangularReflectionMapping, EquirectangularRefractionMapping: EquirectangularRefractionMapping, SphericalReflectionMapping: SphericalReflectionMapping, CubeUVReflectionMapping: CubeUVReflectionMapping, CubeUVRefractionMapping: CubeUVRefractionMapping }; var RepeatWrapping = 1000; var ClampToEdgeWrapping = 1001; var MirroredRepeatWrapping = 1002; var TextureWrapping = { RepeatWrapping: RepeatWrapping, ClampToEdgeWrapping: ClampToEdgeWrapping, MirroredRepeatWrapping: MirroredRepeatWrapping }; var NearestFilter = 1003; var NearestMipMapNearestFilter = 1004; var NearestMipMapLinearFilter = 1005; var LinearFilter = 1006; var LinearMipMapNearestFilter = 1007; var LinearMipMapLinearFilter = 1008; var TextureFilter = { NearestFilter: NearestFilter, NearestMipMapNearestFilter: NearestMipMapNearestFilter, NearestMipMapLinearFilter: NearestMipMapLinearFilter, LinearFilter: LinearFilter, LinearMipMapNearestFilter: LinearMipMapNearestFilter, LinearMipMapLinearFilter: LinearMipMapLinearFilter }; var UnsignedByteType = 1009; var ByteType = 1010; var ShortType = 1011; var UnsignedShortType = 1012; var IntType = 1013; var UnsignedIntType = 1014; var FloatType = 1015; var HalfFloatType = 1016; var UnsignedShort4444Type = 1017; var UnsignedShort5551Type = 1018; var UnsignedShort565Type = 1019; var UnsignedInt248Type = 1020; var AlphaFormat = 1021; var RGBFormat = 1022; var RGBAFormat = 1023; var LuminanceFormat = 1024; var LuminanceAlphaFormat = 1025; var RGBEFormat = RGBAFormat; var DepthFormat = 1026; var DepthStencilFormat = 1027; var RGB_S3TC_DXT1_Format = 2001; var RGBA_S3TC_DXT1_Format = 2002; var RGBA_S3TC_DXT3_Format = 2003; var RGBA_S3TC_DXT5_Format = 2004; var RGB_PVRTC_4BPPV1_Format = 2100; var RGB_PVRTC_2BPPV1_Format = 2101; var RGBA_PVRTC_4BPPV1_Format = 2102; var RGBA_PVRTC_2BPPV1_Format = 2103; var RGB_ETC1_Format = 2151; var LoopOnce = 2200; var LoopRepeat = 2201; var LoopPingPong = 2202; var InterpolateDiscrete = 2300; var InterpolateLinear = 2301; var InterpolateSmooth = 2302; var ZeroCurvatureEnding = 2400; var ZeroSlopeEnding = 2401; var WrapAroundEnding = 2402; var TrianglesDrawMode = 0; var TriangleStripDrawMode = 1; var TriangleFanDrawMode = 2; var LinearEncoding = 3000; var sRGBEncoding = 3001; var GammaEncoding = 3007; var RGBEEncoding = 3002; var LogLuvEncoding = 3003; var RGBM7Encoding = 3004; var RGBM16Encoding = 3005; var RGBDEncoding = 3006; var BasicDepthPacking = 3200; var RGBADepthPacking = 3201; /** * @author alteredq / http://alteredqualia.com/ * @author mrdoob / http://mrdoob.com/ */ exports.Math = { DEG2RAD: Math.PI / 180, RAD2DEG: 180 / Math.PI, generateUUID: function () { // http://www.broofa.com/Tools/Math.uuid.htm var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split( '' ); var uuid = new Array( 36 ); var rnd = 0, r; return function generateUUID() { for ( var i = 0; i < 36; i ++ ) { if ( i === 8 || i === 13 || i === 18 || i === 23 ) { uuid[ i ] = '-'; } else if ( i === 14 ) { uuid[ i ] = '4'; } else { if ( rnd <= 0x02 ) rnd = 0x2000000 + ( Math.random() * 0x1000000 ) | 0; r = rnd & 0xf; rnd = rnd >> 4; uuid[ i ] = chars[ ( i === 19 ) ? ( r & 0x3 ) | 0x8 : r ]; } } return uuid.join( '' ); }; }(), clamp: function ( value, min, max ) { return Math.max( min, Math.min( max, value ) ); }, // compute euclidian modulo of m % n // https://en.wikipedia.org/wiki/Modulo_operation euclideanModulo: function ( n, m ) { return ( ( n % m ) + m ) % m; }, // Linear mapping from range <a1, a2> to range <b1, b2> mapLinear: function ( x, a1, a2, b1, b2 ) { return b1 + ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 ); }, // http://en.wikipedia.org/wiki/Smoothstep smoothstep: function ( x, min, max ) { if ( x <= min ) return 0; if ( x >= max ) return 1; x = ( x - min ) / ( max - min ); return x * x * ( 3 - 2 * x ); }, smootherstep: function ( x, min, max ) { if ( x <= min ) return 0; if ( x >= max ) return 1; x = ( x - min ) / ( max - min ); return x * x * x * ( x * ( x * 6 - 15 ) + 10 ); }, random16: function () { console.warn( 'THREE.Math.random16() has been deprecated. Use Math.random() instead.' ); return Math.random(); }, // Random integer from <low, high> interval randInt: function ( low, high ) { return low + Math.floor( Math.random() * ( high - low + 1 ) ); }, // Random float from <low, high> interval randFloat: function ( low, high ) { return low + Math.random() * ( high - low ); }, // Random float from <-range/2, range/2> interval randFloatSpread: function ( range ) { return range * ( 0.5 - Math.random() ); }, degToRad: function ( degrees ) { return degrees * exports.Math.DEG2RAD; }, radToDeg: function ( radians ) { return radians * exports.Math.RAD2DEG; }, isPowerOfTwo: function ( value ) { return ( value & ( value - 1 ) ) === 0 && value !== 0; }, nearestPowerOfTwo: function ( value ) { return Math.pow( 2, Math.round( Math.log( value ) / Math.LN2 ) ); }, nextPowerOfTwo: function ( value ) { value --; value |= value >> 1; value |= value >> 2; value |= value >> 4; value |= value >> 8; value |= value >> 16; value ++; return value; } }; /** * @author mrdoob / http://mrdoob.com/ * @author philogb / http://blog.thejit.org/ * @author egraether / http://egraether.com/ * @author zz85 / http://www.lab4games.net/zz85/blog */ function Vector2( x, y ) { this.x = x || 0; this.y = y || 0; } Vector2.prototype = { constructor: Vector2, isVector2: true, get width() { return this.x; }, set width( value ) { this.x = value; }, get height() { return this.y; }, set height( value ) { this.y = value; }, // set: function ( x, y ) { this.x = x; this.y = y; return this; }, setScalar: function ( scalar ) { this.x = scalar; this.y = scalar; return this; }, setX: function ( x ) { this.x = x; return this; }, setY: function ( y ) { this.y = y; return this; }, setComponent: function ( index, value ) { switch ( index ) { case 0: this.x = value; break; case 1: this.y = value; break; default: throw new Error( 'index is out of range: ' + index ); } }, getComponent: function ( index ) { switch ( index ) { case 0: return this.x; case 1: return this.y; default: throw new Error( 'index is out of range: ' + index ); } }, clone: function () { return new this.constructor( this.x, this.y ); }, copy: function ( v ) { this.x = v.x; this.y = v.y; return this; }, add: function ( v, w ) { if ( w !== undefined ) { console.warn( 'THREE.Vector2: .add() now only accepts one argument. Use .addVectors( a, b ) instead.' ); return this.addVectors( v, w ); } this.x += v.x; this.y += v.y; return this; }, addScalar: function ( s ) { this.x += s; this.y += s; return this; }, addVectors: function ( a, b ) { this.x = a.x + b.x; this.y = a.y + b.y; return this; }, addScaledVector: function ( v, s ) { this.x += v.x * s; this.y += v.y * s; return this; }, sub: function ( v, w ) { if ( w !== undefined ) { console.warn( 'THREE.Vector2: .sub() now only accepts one argument. Use .subVectors( a, b ) instead.' ); return this.subVectors( v, w ); } this.x -= v.x; this.y -= v.y; return this; }, subScalar: function ( s ) { this.x -= s; this.y -= s; return this; }, subVectors: function ( a, b ) { this.x = a.x - b.x; this.y = a.y - b.y; return this; }, multiply: function ( v ) { this.x *= v.x; this.y *= v.y; return this; }, multiplyScalar: function ( scalar ) { if ( isFinite( scalar ) ) { this.x *= scalar; this.y *= scalar; } else { this.x = 0; this.y = 0; } return this; }, divide: function ( v ) { this.x /= v.x; this.y /= v.y; return this; }, divideScalar: function ( scalar ) { return this.multiplyScalar( 1 / scalar ); }, min: function ( v ) { this.x = Math.min( this.x, v.x ); this.y = Math.min( this.y, v.y ); return this; }, max: function ( v ) { this.x = Math.max( this.x, v.x ); this.y = Math.max( this.y, v.y ); return this; }, clamp: function ( min, max ) { // This function assumes min < max, if this assumption isn't true it will not operate correctly this.x = Math.max( min.x, Math.min( max.x, this.x ) ); this.y = Math.max( min.y, Math.min( max.y, this.y ) ); return this; }, clampScalar: function () { var min, max; return function clampScalar( minVal, maxVal ) { if ( min === undefined ) { min = new Vector2(); max = new Vector2(); } min.set( minVal, minVal ); max.set( maxVal, maxVal ); return this.clamp( min, max ); }; }(), clampLength: function ( min, max ) { var length = this.length(); return this.multiplyScalar( Math.max( min, Math.min( max, length ) ) / length ); }, floor: function () { this.x = Math.floor( this.x ); this.y = Math.floor( this.y ); return this; }, ceil: function () { this.x = Math.ceil( this.x ); this.y = Math.ceil( this.y ); return this; }, round: function () { this.x = Math.round( this.x ); this.y = Math.round( this.y ); return this; }, roundToZero: function () { this.x = ( this.x < 0 ) ? Math.ceil( this.x ) : Math.floor( this.x ); this.y = ( this.y < 0 ) ? Math.ceil( this.y ) : Math.floor( this.y ); return this; }, negate: function () { this.x = - this.x; this.y = - this.y; return this; }, dot: function ( v ) { return this.x * v.x + this.y * v.y; }, lengthSq: function () { return this.x * this.x + this.y * this.y; }, length: function () { return Math.sqrt( this.x * this.x + this.y * this.y ); }, lengthManhattan: function() { return Math.abs( this.x ) + Math.abs( this.y ); }, normalize: function () { return this.divideScalar( this.length() ); }, angle: function () { // computes the angle in radians with respect to the positive x-axis var angle = Math.atan2( this.y, this.x ); if ( angle < 0 ) angle += 2 * Math.PI; return angle; }, distanceTo: function ( v ) { return Math.sqrt( this.distanceToSquared( v ) ); }, distanceToSquared: function ( v ) { var dx = this.x - v.x, dy = this.y - v.y; return dx * dx + dy * dy; }, distanceToManhattan: function ( v ) { return Math.abs( this.x - v.x ) + Math.abs( this.y - v.y ); }, setLength: function ( length ) { return this.multiplyScalar( length / this.length() ); }, lerp: function ( v, alpha ) { this.x += ( v.x - this.x ) * alpha; this.y += ( v.y - this.y ) * alpha; return this; }, lerpVectors: function ( v1, v2, alpha ) { return this.subVectors( v2, v1 ).multiplyScalar( alpha ).add( v1 ); }, equals: function ( v ) { return ( ( v.x === this.x ) && ( v.y === this.y ) ); }, fromArray: function ( array, offset ) { if ( offset === undefined ) offset = 0; this.x = array[ offset ]; this.y = array[ offset + 1 ]; return this; }, toArray: function ( array, offset ) { if ( array === undefined ) array = []; if ( offset === undefined ) offset = 0; array[ offset ] = this.x; array[ offset + 1 ] = this.y; return array; }, fromAttribute: function ( attribute, index, offset ) { if ( offset === undefined ) offset = 0; index = index * attribute.itemSize + offset; this.x = attribute.array[ index ]; this.y = attribute.array[ index + 1 ]; return this; }, rotateAround: function ( center, angle ) { var c = Math.cos( angle ), s = Math.sin( angle ); var x = this.x - center.x; var y = this.y - center.y; this.x = x * c - y * s + center.x; this.y = x * s + y * c + center.y; return this; } }; /** * @author mrdoob / http://mrdoob.com/ * @author alteredq / http://alteredqualia.com/ * @author szimek / https://github.com/szimek/ */ function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) { Object.defineProperty( this, 'id', { value: TextureIdCount() } ); this.uuid = exports.Math.generateUUID(); this.name = ''; this.sourceFile = ''; this.image = image !== undefined ? image : Texture.DEFAULT_IMAGE; this.mipmaps = []; this.mapping = mapping !== undefined ? mapping : Texture.DEFAULT_MAPPING; this.wrapS = wrapS !== undefined ? wrapS : ClampToEdgeWrapping; this.wrapT = wrapT !== undefined ? wrapT : ClampToEdgeWrapping; this.magFilter = magFilter !== undefined ? magFilter : LinearFilter; this.minFilter = minFilter !== undefined ? minFilter : LinearMipMapLinearFilter; this.anisotropy = anisotropy !== undefined ? anisotropy : 1; this.format = format !== undefined ? format : RGBAFormat; this.type = type !== undefined ? type : UnsignedByteType; this.offset = new Vector2( 0, 0 ); this.repeat = new Vector2( 1, 1 ); this.generateMipmaps = true; this.premultiplyAlpha = false; this.flipY = true; this.unpackAlignment = 4; // valid values: 1, 2, 4, 8 (see http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml) // Values of encoding !== THREE.LinearEncoding only supported on map, envMap and emissiveMap. // // Also changing the encoding after already used by a Material will not automatically make the Material // update. You need to explicitly call Material.needsUpdate to trigger it to recompile. this.encoding = encoding !== undefined ? encoding : LinearEncoding; this.version = 0; this.onUpdate = null; } Texture.DEFAULT_IMAGE = undefined; Texture.DEFAULT_MAPPING = UVMapping; Texture.prototype = { constructor: Texture, isTexture: true, set needsUpdate( value ) { if ( value === true ) this.version ++; }, clone: function () { return new this.constructor().copy( this ); }, copy: function ( source ) { this.image = source.image; this.mipmaps = source.mipmaps.slice( 0 ); this.mapping = source.mapping; this.wrapS = source.wrapS; this.wrapT = source.wrapT; this.magFilter = source.magFilter; this.minFilter = source.minFilter; this.anisotropy = source.anisotropy; this.format = source.format; this.type = source.type; this.offset.copy( source.offset ); this.repeat.copy( source.repeat ); this.generateMipmaps = source.generateMipmaps; this.premultiplyAlpha = source.premultiplyAlpha; this.flipY = source.flipY; this.unpackAlignment = source.unpackAlignment; this.encoding = source.encoding; return this; }, toJSON: function ( meta ) { if ( meta.textures[ this.uuid ] !== undefined ) { return meta.textures[ this.uuid ]; } function getDataURL( image ) { var canvas; if ( image.toDataURL !== undefined ) { canvas = image; } else { canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' ); canvas.width = image.width; canvas.height = image.height; canvas.getContext( '2d' ).drawImage( image, 0, 0, image.width, image.height ); } if ( canvas.width > 2048 || canvas.height > 2048 ) { return canvas.toDataURL( 'image/jpeg', 0.6 ); } else { return canvas.toDataURL( 'image/png' ); } } var output = { metadata: { version: 4.4, type: 'Texture', generator: 'Texture.toJSON' }, uuid: this.uuid, name: this.name, mapping: this.mapping, repeat: [ this.repeat.x, this.repeat.y ], offset: [ this.offset.x, this.offset.y ], wrap: [ this.wrapS, this.wrapT ], minFilter: this.minFilter, magFilter: this.magFilter, anisotropy: this.anisotropy, flipY: this.flipY }; if ( this.image !== undefined ) { // TODO: Move to THREE.Image var image = this.image; if ( image.uuid === undefined ) { image.uuid = exports.Math.generateUUID(); // UGH } if ( meta.images[ image.uuid ] === undefined ) { meta.images[ image.uuid ] = { uuid: image.uuid, url: getDataURL( image ) }; } output.image = image.uuid; } meta.textures[ this.uuid ] = output; return output; }, dispose: function () { this.dispatchEvent( { type: 'dispose' } ); }, transformUv: function ( uv ) { if ( this.mapping !== UVMapping ) return; uv.multiply( this.repeat ); uv.add( this.offset ); if ( uv.x < 0 || uv.x > 1 ) { switch ( this.wrapS ) { case RepeatWrapping: uv.x = uv.x - Math.floor( uv.x ); break; case ClampToEdgeWrapping: uv.x = uv.x < 0 ? 0 : 1; break; case MirroredRepeatWrapping: if ( Math.abs( Math.floor( uv.x ) % 2 ) === 1 ) { uv.x = Math.ceil( uv.x ) - uv.x; } else { uv.x = uv.x - Math.floor( uv.x ); } break; } } if ( uv.y < 0 || uv.y > 1 ) { switch ( this.wrapT ) { case RepeatWrapping: uv.y = uv.y - Math.floor( uv.y ); break; case ClampToEdgeWrapping: uv.y = uv.y < 0 ? 0 : 1; break; case MirroredRepeatWrapping: if ( Math.abs( Math.floor( uv.y ) % 2 ) === 1 ) { uv.y = Math.ceil( uv.y ) - uv.y; } else { uv.y = uv.y - Math.floor( uv.y ); } break; } } if ( this.flipY ) { uv.y = 1 - uv.y; } } }; Object.assign( Texture.prototype, EventDispatcher.prototype ); var count = 0; function TextureIdCount() { return count++; }; /** * @author supereggbert / http://www.paulbrunt.co.uk/ * @author philogb / http://blog.thejit.org/ * @author mikael emtinger / http://gomo.se/ * @author egraether / http://egraether.com/ * @author WestLangley / http://github.com/WestLangley */ function Vector4( x, y, z, w ) { this.x = x || 0; this.y = y || 0; this.z = z || 0; this.w = ( w !== undefined ) ? w : 1; } Vector4.prototype = { constructor: Vector4, isVector4: true, set: function ( x, y, z, w ) { this.x = x; this.y = y; this.z = z; this.w = w; return this; }, setScalar: function ( scalar ) { this.x = scalar; this.y = scalar; this.z = scalar; this.w = scalar; return this; }, setX: function ( x ) { this.x = x; return this; }, setY: function ( y ) { this.y = y; return this; }, setZ: function ( z ) { this.z = z; return this; }, setW: function ( w ) { this.w = w; return this; }, setComponent: function ( index, value ) { switch ( index ) { case 0: this.x = value; break; case 1: this.y = value; break; case 2: this.z = value; break; case 3: this.w = value; break; default: throw new Error( 'index is out of range: ' + index ); } }, getComponent: function ( index ) { switch ( index ) { case 0: return this.x; case 1: return this.y; case 2: return this.z; case 3: return this.w; default: throw new Error( 'index is out of range: ' + index ); } }, clone: function () { return new this.constructor( this.x, this.y, this.z, this.w ); }, copy: function ( v ) { this.x = v.x; this.y = v.y; this.z = v.z; this.w = ( v.w !== undefined ) ? v.w : 1; return this; }, add: function ( v, w ) { if ( w !== undefined ) { console.warn( 'THREE.Vector4: .add() now only accepts one argument. Use .addVectors( a, b ) instead.' ); return this.addVectors( v, w ); } this.x += v.x; this.y += v.y; this.z += v.z; this.w += v.w; return this; }, addScalar: function ( s ) { this.x += s; this.y += s; this.z += s; this.w += s; return this; }, addVectors: function ( a, b ) { this.x = a.x + b.x; this.y = a.y + b.y; this.z = a.z + b.z; this.w = a.w + b.w; return this; }, addScaledVector: function ( v, s ) { this.x += v.x * s; this.y += v.y * s; this.z += v.z * s; this.w += v.w * s; return this; }, sub: function ( v, w ) { if ( w !== undefined ) { console.warn( 'THREE.Vector4: .sub() now only accepts one argument. Use .subVectors( a, b ) instead.' ); return this.subVectors( v, w ); } this.x -= v.x; this.y -= v.y; this.z -= v.z; this.w -= v.w; return this; }, subScalar: function ( s ) { this.x -= s; this.y -= s; this.z -= s; this.w -= s; return this; }, subVectors: function ( a, b ) { this.x = a.x - b.x; this.y = a.y - b.y; this.z = a.z - b.z; this.w = a.w - b.w; return this; }, multiplyScalar: function ( scalar ) { if ( isFinite( scalar ) ) { this.x *= scalar; this.y *= scalar; this.z *= scalar; this.w *= scalar; } else { this.x = 0; this.y = 0; this.z = 0; this.w = 0; } return this; }, applyMatrix4: function ( m ) { var x = this.x, y = this.y, z = this.z, w = this.w; var e = m.elements; this.x = e[ 0 ] * x + e[ 4 ] * y + e[ 8 ] * z + e[ 12 ] * w; this.y = e[ 1 ] * x + e[ 5 ] * y + e[ 9 ] * z + e[ 13 ] * w; this.z = e[ 2 ] * x + e[ 6 ] * y + e[ 10 ] * z + e[ 14 ] * w; this.w = e[ 3 ] * x + e[ 7 ] * y + e[ 11 ] * z + e[ 15 ] * w; return this; }, divideScalar: function ( scalar ) { return this.multiplyScalar( 1 / scalar ); }, setAxisAngleFromQuaternion: function ( q ) { // http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToAngle/index.htm // q is assumed to be normalized this.w = 2 * Math.acos( q.w ); var s = Math.sqrt( 1 - q.w * q.w ); if ( s < 0.0001 ) { this.x = 1; this.y = 0; this.z = 0; } else { this.x = q.x / s; this.y = q.y / s; this.z = q.z / s; } return this; }, setAxisAngleFromRotationMatrix: function ( m ) { // http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToAngle/index.htm // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled) var angle, x, y, z, // variables for result epsilon = 0.01, // margin to allow for rounding errors epsilon2 = 0.1, // margin to distinguish between 0 and 180 degrees te = m.elements, m11 = te[ 0 ], m12 = te[ 4 ], m13 = te[ 8 ], m21 = te[ 1 ], m22 = te[ 5 ], m23 = te[ 9 ], m31 = te[ 2 ], m32 = te[ 6 ], m33 = te[ 10 ]; if ( ( Math.abs( m12 - m21 ) < epsilon ) && ( Math.abs( m13 - m31 ) < epsilon ) && ( Math.abs( m23 - m32 ) < epsilon ) ) { // singularity found // first check for identity matrix which must have +1 for all terms // in leading diagonal and zero in other terms if ( ( Math.abs( m12 + m21 ) < epsilon2 ) && ( Math.abs( m13 + m31 ) < epsilon2 ) && ( Math.abs( m23 + m32 ) < epsilon2 ) && ( Math.abs( m11 + m22 + m33 - 3 ) < epsilon2 ) ) { // this singularity is identity matrix so angle = 0 this.set( 1, 0, 0, 0 ); return this; // zero angle, arbitrary axis } // otherwise this singularity is angle = 180 angle = Math.PI; var xx = ( m11 + 1 ) / 2; var yy = ( m22 + 1 ) / 2; var zz = ( m33 + 1 ) / 2; var xy = ( m12 + m21 ) / 4; var xz = ( m13 + m31 ) / 4; var yz = ( m23 + m32 ) / 4; if ( ( xx > yy ) && ( xx > zz ) ) { // m11 is the largest diagonal term if ( xx < epsilon ) { x = 0; y = 0.707106781; z = 0.707106781; } else { x = Math.sqrt( xx ); y = xy / x; z = xz / x; } } else if ( yy > zz ) { // m22 is the largest diagonal term if ( yy < epsilon ) { x = 0.707106781; y = 0; z = 0.707106781; } else { y = Math.sqrt( yy ); x = xy / y; z = yz / y; } } else { // m33 is the largest diagonal term so base result on this if ( zz < epsilon ) { x = 0.707106781; y = 0.707106781; z = 0; } else { z = Math.sqrt( zz ); x = xz / z; y = yz / z; } } this.set( x, y, z, angle ); return this; // return 180 deg rotation } // as we have reached here there are no singularities so we can handle normally var s = Math.sqrt( ( m32 - m23 ) * ( m32 - m23 ) + ( m13 - m31 ) * ( m13 - m31 ) + ( m21 - m12 ) * ( m21 - m12 ) ); // used to normalize if ( Math.abs( s ) < 0.001 ) s = 1; // prevent divide by zero, should not happen if matrix is orthogonal and should be // caught by singularity test above, but I've left it in just in case this.x = ( m32 - m23 ) / s; this.y = ( m13 - m31 ) / s; this.z = ( m21 - m12 ) / s; this.w = Math.acos( ( m11 + m22 + m33 - 1 ) / 2 ); return this; }, min: function ( v ) { this.x = Math.min( this.x, v.x ); this.y = Math.min( this.y, v.y ); this.z = Math.min( this.z, v.z ); this.w = Math.min( this.w, v.w ); return this; }, max: function ( v ) { this.x = Math.max( this.x, v.x ); this.y = Math.max( this.y, v.y ); this.z = Math.max( this.z, v.z ); this.w = Math.max( this.w, v.w ); return this; }, clamp: function ( min, max ) { // This function assumes min < max, if this assumption isn't true it will not operate correctly this.x = Math.max( min.x, Math.min( max.x, this.x ) ); this.y = Math.max( min.y, Math.min( max.y, this.y ) ); this.z = Math.max( min.z, Math.min( max.z, this.z ) ); this.w = Math.max( min.w, Math.min( max.w, this.w ) ); return this; }, clampScalar: function () { var min, max; return function clampScalar( minVal, maxVal ) { if ( min === undefined ) { min = new Vector4(); max = new Vector4(); } min.set( minVal, minVal, minVal, minVal ); max.set( maxVal, maxVal, maxVal, maxVal ); return this.clamp( min, max ); }; }(), floor: function () { this.x = Math.floor( this.x ); this.y = Math.floor( this.y ); this.z = Math.floor( this.z ); this.w = Math.floor( this.w ); return this; }, ceil: function () { this.x = Math.ceil( this.x ); this.y = Math.ceil( this.y ); this.z = Math.ceil( this.z ); this.w = Math.ceil( this.w ); return this; }, round: function () { this.x = Math.round( this.x ); this.y = Math.round( this.y ); this.z = Math.round( this.z ); this.w = Math.round( this.w ); return this; }, roundToZero: function () { this.x = ( this.x < 0 ) ? Math.ceil( this.x ) : Math.floor( this.x ); this.y = ( this.y < 0 ) ? Math.ceil( this.y ) : Math.floor( this.y ); this.z = ( this.z < 0 ) ? Math.ceil( this.z ) : Math.floor( this.z ); this.w = ( this.w < 0 ) ? Math.ceil( this.w ) : Math.floor( this.w ); return this; }, negate: function () { this.x = - this.x; this.y = - this.y; this.z = - this.z; this.w = - this.w; return this; }, dot: function ( v ) { return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w; }, lengthSq: function () { return this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w; }, length: function () { return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w ); }, lengthManhattan: function () { return Math.abs( this.x ) + Math.abs( this.y ) + Math.abs( this.z ) + Math.abs( this.w ); }, normalize: function () { return this.divideScalar( this.length() ); }, setLength: function ( length ) { return this.multiplyScalar( length / this.length() ); }, lerp: function ( v, alpha ) { this.x += ( v.x - this.x ) * alpha; this.y += ( v.y - this.y ) * alpha; this.z += ( v.z - this.z ) * alpha; this.w += ( v.w - this.w ) * alpha; return this; }, lerpVectors: function ( v1, v2, alpha )