THREE performance experiments

by Konstantin Cryman

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="containers"></div>

CSS

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#containers{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}


.container{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

JavaScript

var camera, controls, scene;
var containers;

var renderer1, renderer2, renderer3, renderer4;


var renderArray = [];
var cameraArray = [];


const matrix1 = new THREE.Matrix3();
matrix1.fromArray( [
	1, 2, 3,
  4, 5, 6,
  7, 8, 9
] );


const matrix2 = new THREE.Matrix3();
matrix2.fromArray( [
	-13, -20, -17,
  -18, -24, -18,
  13, 20, 17
] );

let m1 = matrix1.clone();
m1.invert();
let m2 = matrix2.clone();
m2.invert();


m1 = m1.multiply( m2 );

console.log( m1.toArray(), m2.toArray(), matrix1.toArray(), matrix2.toArray() );


return false;
    
function withRenderers( callback ){
	for( var i = 0; i < renderArray.length; i++ ){
  	callback( renderArray[i] );
  }
}

init();

function init() {

    var maxFar = 1000;

    containers = document.getElementById( "containers" );

    console.log( { containers: containers } );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 16000 );
    camera.position.z = 700;
    camera.position.y = 0;
    scene.add( camera );

    controls = new THREE.OrbitControls( camera, containers );

    var renderBlock = ( function(){

      function renderBlock( initConfig ){

        this.config = initConfig;

        this.id = initConfig.id;

        this.renderer = new THREE.WebGLRenderer( { 
           antialias: false,
           alpha: initConfig.alpha ? true : false
        } );

        if( initConfig.alpha ){
          this.renderer.setClearColor( 0x000000, 0 ); // the default
        }

        if( initConfig.pixelRatio ){
          this.renderer.setPixelRatio( initConfig.pixelRatio );
        }

        this.container = document.createElement( "div" );
        this.container.className = "container";
        this.container.appendChild( this.renderer.domElement );

        if( initConfig.zIndex ){
          this.container.style.zIndex = initConfig.zIndex;
        }

      }
    
      renderBlock.prototype.render = function( scene, camera ){
        if(...