three.js/manual/examples/resources/lessons-helper.js

/*
 * Copyright 2012, Gregg Tavares.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Gregg Tavares. nor the names of his
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/* global define */

(function(root, factory) {  // eslint-disable-line
	if ( typeof define === 'function' && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [], function () {

			return factory.call( root );

		} );

	} else {

		// Browser globals
		root.lessonsHelper = factory.call( root );

	}

}( this, function () {

  'use strict';  // eslint-disable-line

	const lessonSettings = window.lessonSettings || {};
	const topWindow = this;

	/**
   * Check if the page is embedded.
   * @param {Window?) w window to check
   * @return {boolean} True of we are in an iframe
   */
	function isInIFrame( w ) {

		w = w || topWindow;
		return w !== w.top;

	}

	function updateCSSIfInIFrame() {

		if ( isInIFrame() ) {

			try {

				document.getElementsByTagName( 'html' )[ 0 ].className = 'iframe';

			} catch ( e ) {
        // eslint-disable-line
			}

			try {

				document.body.className = 'iframe';

			} catch ( e ) {
        // eslint-disable-line
			}

		}

	}

	function isInEditor() {

		return window.location.href.substring( 0, 4 ) === 'blob';

	}

	/**
   * Creates a webgl context. If creation fails it will
   * change the contents of the container of the <canvas>
   * tag to an error message with the correct links for WebGL.
   * @param {HTMLCanvasElement} canvas. The canvas element to
   *     create a context from.
   * @param {WebGLContextCreationAttributes} opt_attribs Any
   *     creation attributes you want to pass in.
   * @return {WebGLRenderingContext} The created context.
   * @memberOf module:webgl-utils
   */
	function showNeedWebGL( canvas ) {

		const doc = canvas.ownerDocument;
		if ( doc ) {

			const temp = doc.createElement( 'div' );
			temp.innerHTML = `
        <div style="
          position: absolute;
          left: 0;
          top: 0;
          background-color: #DEF;
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-content: center;
          align-items: center;
        ">
          <div style="text-align: center;">
            It doesn't appear your browser supports WebGL.<br/>
            <a href="http://get.webgl.org" target="_blank">Click here for more information.</a>
          </div>
        </div>
      `;
			const div = temp.querySelector( 'div' );
			doc.body.appendChild( div );

		}

	}

	const origConsole = {};

	function setupConsole() {

		const style = document.createElement( 'style' );
		style.innerText = `
    .console {
      font-family: monospace;
      font-size: medium;
      max-height: 50%;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: auto;
      background: rgba(221, 221, 221, 0.9);
    }
    .console .console-line {
      white-space: pre-line;
    }
    .console .log .warn {
      color: black;
    }
    .console .error {
      color: red;
    }
    `;
		const parent = document.createElement( 'div' );
		parent.className = 'console';
		const toggle = document.createElement( 'div' );
		let show = false;
		Object.assign( toggle.style, {
			position: 'absolute',
			right: 0,
			bottom: 0,
			background: '#EEE',
			'font-size': 'smaller',
			cursor: 'pointer',
		} );
		toggle.addEventListener( 'click', showHideConsole );

		function showHideConsole() {

			show = ! show;
			toggle.textContent = show ? '☒' : '☐';
			parent.style.display = show ? '' : 'none';

		}

		showHideConsole();

		const maxLines = 100;
		const lines = [];
		let added = false;

		function addLine( type, str, prefix ) {

			const div = document.createElement( 'div' );
			div.textContent = ( prefix + str ) || ' ';
			div.className = `console-line ${type}`;
			parent.appendChild( div );
			lines.push( div );
			if ( ! added ) {

				added = true;
				document.body.appendChild( style );
				document.body.appendChild( parent );
				document.body.appendChild( toggle );

			}
			// scrollIntoView only works in Chrome
			// In Firefox and Safari scrollIntoView inside an iframe moves
			// that element into the view. It should arguably only move that
			// element inside the iframe itself, otherwise that's giving
			// any random iframe control to bring itself into view against
			// the parent's wishes.
			//
			// note that even if we used a solution (which is to manually set
			// scrollTop) there's a UI issue that if the user manually scrolls
			// we want to stop scrolling automatically and if they move back
			// to the bottom we want to pick up scrolling automatically.
			// Kind of a PITA so TBD
			//
			// div.scrollIntoView();

		}

		function addLines( type, str, prefix ) {

			while ( lines.length > maxLines ) {

				const div = lines.shift();
				div.parentNode.removeChild( div );

			}

			addLine( type, str, prefix );

		}

		const threePukeRE = /WebGLRenderer.*?extension not supported/;
		function wrapFunc( obj, funcName, prefix ) {

			const oldFn = obj[ funcName ];
			origConsole[ funcName ] = oldFn.bind( obj );
			return function ( ...args ) {

				// three.js pukes all over so filter here
				const src = [ ...args ].join( ' ' );
				if ( ! threePukeRE.test( src ) ) {

					addLines( funcName, src, prefix );

				}

				oldFn.apply( obj, arguments );

			};

		}

		window.console.log = wrapFunc( window.console, 'log', '' );
		window.console.warn = wrapFunc( window.console, 'warn', '⚠' );
		window.console.error = wrapFunc( window.console, 'error', '❌' );

	}

	function reportJSError( url, lineNo, colNo, msg ) {

		try {

			const { origUrl, actualLineNo } = window.parent.getActualLineNumberAndMoveTo( url, lineNo, colNo );
			url = origUrl;
			lineNo = actualLineNo;

		} catch ( ex ) {

			origConsole.error( ex );

		}
    console.error(url, "line:", lineNo, ":", msg);  // eslint-disable-line
	}

	/**
   * @typedef {Object} StackInfo
   * @property {string} url Url of line
   * @property {number} lineNo line number of error
   * @property {number} colNo column number of error
   * @property {string} [funcName] name of function
   */

	/**
   * @parameter {string} stack A stack string as in `(new Error()).stack`
   * @returns {StackInfo}
   */
	const parseStack = function () {

		const browser = getBrowser();
		let lineNdx;
		let matcher;
		if ( ( /chrome|opera/i ).test( browser.name ) ) {

			lineNdx = 3;
			matcher = function ( line ) {

				const m = /at ([^(]*?)\(*(.*?):(\d+):(\d+)/.exec( line );
				if ( m ) {

					let userFnName = m[ 1 ];
					let url = m[ 2 ];
					const lineNo = parseInt( m[ 3 ] );
					const colNo = parseInt( m[ 4 ] );
					if ( url === '' ) {

						url = userFnName;
						userFnName = '';

					}

					return {
						url: url,
						lineNo: lineNo,
						colNo: colNo,
						funcName: userFnName,
					};

				}

				return undefined;

			};

		} else if ( ( /firefox|safari/i ).test( browser.name ) ) {

			lineNdx = 2;
			matcher = function ( line ) {

				const m = /@(.*?):(\d+):(\d+)/.exec( line );
				if ( m ) {

					const url = m[ 1 ];
					const lineNo = parseInt( m[ 2 ] );
					const colNo = parseInt( m[ 3 ] );
					return {
						url: url,
						lineNo: lineNo,
						colNo: colNo,
					};

				}

				return undefined;

			};

		}

		return function stackParser( stack ) {

			if ( matcher ) {

				try {

					const lines = stack.split( '\n' );
					// window.fooLines = lines;
					// lines.forEach(function(line, ndx) {
					//   origConsole.log("#", ndx, line);
					// });
					return matcher( lines[ lineNdx ] );

				} catch ( e ) {
					// do nothing
				}

			}

			return undefined;

		};

	}();

	function setupWorkerSupport() {

		function log( data ) {

			const { logType, msg } = data;
			console[ logType ]( '[Worker]', msg ); /* eslint-disable-line no-console */

		}

		function lostContext( /* data */ ) {

			addContextLostHTML();

		}

		function jsError( data ) {

			const { url, lineNo, colNo, msg } = data;
			reportJSError( url, lineNo, colNo, msg );

		}

		function jsErrorWithStack( data ) {

			const { url, stack, msg } = data;
			const errorInfo = parseStack( stack );
			if ( errorInfo ) {

				reportJSError( errorInfo.url || url, errorInfo.lineNo, errorInfo.colNo, msg );

			} else {

        console.error(errorMsg)  // eslint-disable-line
			}

		}

		const handlers = {
			log,
			lostContext,
			jsError,
			jsErrorWithStack,
		};
		const OrigWorker = self.Worker;
		class WrappedWorker extends OrigWorker {

			constructor( url, ...args ) {

				super( url, ...args );
				let listener;
				this.onmessage = function ( e ) {

					if ( ! e || ! e.data || e.data.type !== '___editor___' ) {

						if ( listener ) {

							listener( e );

						}

						return;

					}

					e.stopImmediatePropagation();
					const data = e.data.data;
					const fn = handlers[ data.type ];
					if ( typeof fn !== 'function' ) {

						origConsole.error( 'unknown editor msg:', data.type );

					} else {

						fn( data );

					}

					return;

				};

				Object.defineProperty( this, 'onmessage', {
					get() {

						return listener;

					},
					set( fn ) {

						listener = fn;

					},
				} );

			}

		}
		self.Worker = WrappedWorker;

	}

	function addContextLostHTML() {

		const div = document.createElement( 'div' );
		div.className = 'contextlost';
		div.innerHTML = '<div>Context Lost: Click To Reload</div>';
		div.addEventListener( 'click', function () {

			window.location.reload();

		} );
		document.body.appendChild( div );

	}

	/**
   * Gets a WebGL context.
   * makes its backing store the size it is displayed.
   * @param {HTMLCanvasElement} canvas a canvas element.
   * @memberOf module:webgl-utils
   */
	let setupLesson = function ( canvas ) {

		// only once
		setupLesson = function () {};

		if ( canvas ) {

			canvas.addEventListener( 'webglcontextlost', function () {

				// the default is to do nothing. Preventing the default
				// means allowing context to be restored
				// e.preventDefault();  // can't do this because firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1633280
				addContextLostHTML();

			} );
			/* can't do this because firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1633280
      canvas.addEventListener('webglcontextrestored', function() {
          // just reload the page. Easiest.
          window.location.reload();
      });
      */

		}

		if ( isInIFrame() ) {

			updateCSSIfInIFrame();

		}

	};

	// Replace requestAnimationFrame and cancelAnimationFrame with one
	// that only executes when the body is visible (we're in an iframe).
	// It's frustrating that th browsers don't do this automatically.
	// It's half of the point of rAF that it shouldn't execute when
	// content is not visible but browsers execute rAF in iframes even
	// if they are not visible.
	if ( topWindow.requestAnimationFrame ) {

		topWindow.requestAnimationFrame = ( function ( oldRAF, oldCancelRAF ) {

			let nextFakeRAFId = 1;
			const fakeRAFIdToCallbackMap = new Map();
			let rafRequestId;
			let isBodyOnScreen;

			function rAFHandler( time ) {

				rafRequestId = undefined;
				const ids = [ ...fakeRAFIdToCallbackMap.keys() ]; // WTF! Map.keys() iterates over live keys!
				for ( const id of ids ) {

					const callback = fakeRAFIdToCallbackMap.get( id );
					fakeRAFIdToCallbackMap.delete( id );
					if ( callback ) {

						callback( time );

					}

				}

			}

			function startRAFIfIntersectingAndNeeded() {

				if ( ! rafRequestId && isBodyOnScreen && fakeRAFIdToCallbackMap.size > 0 ) {

					rafRequestId = oldRAF( rAFHandler );

				}

			}

			function stopRAF() {

				if ( rafRequestId ) {

					oldCancelRAF( rafRequestId );
					rafRequestId = undefined;

				}

			}

			function initIntersectionObserver() {

				const intersectionObserver = new IntersectionObserver( ( entries ) => {

					entries.forEach( entry => {

						isBodyOnScreen = entry.isIntersecting;

					} );
					if ( isBodyOnScreen ) {

						startRAFIfIntersectingAndNeeded();

					} else {

						stopRAF();

					}

				} );
				intersectionObserver.observe( document.body );

			}

			function betterRAF( callback ) {

				const fakeRAFId = nextFakeRAFId ++;
				fakeRAFIdToCallbackMap.set( fakeRAFId, callback );
				startRAFIfIntersectingAndNeeded();
				return fakeRAFId;

			}

			function betterCancelRAF( id ) {

				fakeRAFIdToCallbackMap.delete( id );

			}

			topWindow.cancelAnimationFrame = betterCancelRAF;

			return function ( callback ) {

				// we need to lazy init this because this code gets parsed
				// before body exists. We could fix it by moving lesson-helper.js
				// after <body> but that would require changing 100s of examples
				initIntersectionObserver();
				topWindow.requestAnimationFrame = betterRAF;
				return betterRAF( callback );

			};

		}( topWindow.requestAnimationFrame, topWindow.cancelAnimationFrame ) );

	}

	updateCSSIfInIFrame();

	function captureJSErrors() {

		// capture JavaScript Errors
		window.addEventListener( 'error', function ( e ) {

			const msg = e.message || e.error;
			const url = e.filename;
			const lineNo = e.lineno || 1;
			const colNo = e.colno || 1;
			reportJSError( url, lineNo, colNo, msg );
			origConsole.error( e.error );

		} );

	}

	// adapted from http://stackoverflow.com/a/2401861/128511
	function getBrowser() {

		const userAgent = navigator.userAgent;
		let m = userAgent.match( /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i ) || [];
		if ( /trident/i.test( m[ 1 ] ) ) {

			m = /\brv[ :]+(\d+)/g.exec( userAgent ) || [];
			return {
				name: 'IE',
				version: m[ 1 ],
			};

		}

		if ( m[ 1 ] === 'Chrome' ) {

			const temp = userAgent.match( /\b(OPR|Edge)\/(\d+)/ );
			if ( temp ) {

				return {
					name: temp[ 1 ].replace( 'OPR', 'Opera' ),
					version: temp[ 2 ],
				};

			}

		}

		m = m[ 2 ] ? [ m[ 1 ], m[ 2 ] ] : [ navigator.appName, navigator.appVersion, '-?' ];
		const version = userAgent.match( /version\/(\d+)/i );
		if ( version ) {

			m.splice( 1, 1, version[ 1 ] );

		}

		return {
			name: m[ 0 ],
			version: m[ 1 ],
		};

	}

	const canvasesToTimeoutMap = new Map();
	const isWebGLRE = /^(webgl|webgl2|experimental-webgl)$/i;
	const isWebGL2RE = /^webgl2$/i;
	function installWebGLLessonSetup() {

		HTMLCanvasElement.prototype.getContext = ( function ( oldFn ) {

			return function () {

				const timeoutId = canvasesToTimeoutMap.get( this );
				if ( timeoutId ) {

					clearTimeout( timeoutId );

				}

				const type = arguments[ 0 ];
				const isWebGL1or2 = isWebGLRE.test( type );
				const isWebGL2 = isWebGL2RE.test( type );
				if ( isWebGL1or2 ) {

					setupLesson( this );

				}

				const args = [].slice.apply( arguments );
				args[ 1 ] = {
					powerPreference: 'low-power',
					...args[ 1 ],
				};
				const ctx = oldFn.apply( this, args );
				if ( ! ctx ) {

					if ( isWebGL2 ) {

						// three tries webgl2 then webgl1
						// so wait 1/2 a second before showing the failure
						// message. If we get success on the same canvas
						// we'll cancel this.
						canvasesToTimeoutMap.set( this, setTimeout( () => {

							canvasesToTimeoutMap.delete( this );
							showNeedWebGL( this );

						}, 500 ) );

					} else {

						showNeedWebGL( this );

					}

				}

				return ctx;

			};

		}( HTMLCanvasElement.prototype.getContext ) );

	}

	function installWebGLDebugContextCreator() {

		if ( ! self.webglDebugHelper ) {

			return;

		}

		const {
			makeDebugContext,
			glFunctionArgToString,
			glEnumToString,
		} = self.webglDebugHelper;

		// capture GL errors
		HTMLCanvasElement.prototype.getContext = ( function ( oldFn ) {

			return function () {

				let ctx = oldFn.apply( this, arguments );
				// Using bindTexture to see if it's WebGL. Could check for instanceof WebGLRenderingContext
				// but that might fail if wrapped by debugging extension
				if ( ctx && ctx.bindTexture ) {

					ctx = makeDebugContext( ctx, {
						maxDrawCalls: 100,
						errorFunc: function ( err, funcName, args ) {

							const numArgs = args.length;
							const enumedArgs = [].map.call( args, function ( arg, ndx ) {

								let str = glFunctionArgToString( funcName, numArgs, ndx, arg );
								// shorten because of long arrays
								if ( str.length > 200 ) {

									str = str.substring( 0, 200 ) + '...';

								}

								return str;

							} );
							const errorMsg = `WebGL error ${glEnumToString( err )} in ${funcName}(${enumedArgs.join( ', ' )})`;
							const errorInfo = parseStack( ( new Error() ).stack );
							if ( errorInfo ) {

								reportJSError( errorInfo.url, errorInfo.lineNo, errorInfo.colNo, errorMsg );

							} else {

                console.error(errorMsg)  // eslint-disable-line
							}

						},
					} );

				}

				return ctx;

			};

		}( HTMLCanvasElement.prototype.getContext ) );

	}

	installWebGLLessonSetup();

	if ( isInEditor() ) {

		setupWorkerSupport();
		setupConsole();
		captureJSErrors();
		if ( lessonSettings.glDebug !== false ) {

			installWebGLDebugContextCreator();

		}

	}

	return {
		setupLesson: setupLesson,
		showNeedWebGL: showNeedWebGL,
	};

} ) );