Stress test Buffer

by realhunts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/utils/BufferGeometryUtils.js"></script>
<div class="webgl"></div>
<span></span>

CSS

html, body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

span {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  font-size: 40px;
  text-align: center;
  -webkit-text-stroke: 1px  black;
}

JavaScript

var stats = new Stats();
  stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
  document.body.appendChild( stats.dom );

//Declare three.js variables
var camera, scene, renderer
var cubes = []
	//assign three.js objects to each variable
function init(){
		 
		//camera
    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight);
  camera.position.z = 1000;
		//scene
		scene = new THREE.Scene();
		//renderer
		renderer = new THREE.WebGLRenderer();
		//set the size of the renderer
		renderer.setSize( window.innerWidth, window.innerHeight );
		 
		//add the renderer to the html document body
		document.querySelector('.webgl').appendChild( renderer.domElement );
	}


	function addCube(){
     var geo = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(25, 5, 5))

     for ( var i = 0; i < 10000; i ++ ) {
     		var geometry = geo.clone()
				geometry.applyMatrix( new THREE.Matrix4().makeTranslation(Math.random() * 1000 - 500, Math.random() * 1000 - 500, 0) );
			geometry.rotateX(Math.random() * 1)
			geometry.rotateY(Math.random() * 1)
      cubes.push(geometry)
     }
    var geometriesCubes = THREE.BufferGeometryUtils.mergeBufferGeometries(cubes);
			var mesh = new THREE.Mesh(geometriesCubes, new 					THREE.MeshNormalMaterial());
    scene.add(mesh);
	}

	function animate() {
    scene.children[0].rotation.y += 0.005
  	scene.children[0].rotation.z += 0.005
  }
	function render() {
  	stats.begin();
		//get the frame
		requestAnimationFrame( render );
    animate()
		//render the scene
		renderer.render( scene, camera );
    document.querySelector('span').innerHTML = 'draw calls :' + renderer.info.render.calls
		stats.end();
	}
	
	init();
	addCube();
	render();