webglLibraryPerformanceTest/three.html at master · splyysh/webglLibraryPerformanceTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>

        <script>
            var camera, scene, renderer, mesh, material;
			var renders = 0;
			var time = 0;
			var nboxes = 1;
			var boxes = [];

			init();

            function init() {

				// Renderer.
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);

				// Add renderer to page
				document.body.appendChild(renderer.domElement);

				// Create camera.
				camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
				camera.position.z = 100;
				camera.position.x = 20;
				camera.position.y = 20;

				// Create scene.
				scene = new THREE.Scene();

				// Create material
				material = new THREE.MeshPhongMaterial();
				// Create cube and add to scene.
				var geometry = new THREE.BoxGeometry(1, 1, 1);
				function addBoxes(rows, columns,depths){
					for(var row = 0; row<rows; row++){
						for(var column = 0; column<columns; column++)
						{
							for(var depth = 0; depth < depths; depth++)
							{
								var box = new THREE.Mesh(geometry, material);
								box.position.set(row*2, column*2,depth*2);
								scene.add(box);
								boxes.push(box);
							}
						}
					}
				}
				function removeBoxes(){
					for(var i =0; i<boxes.length; i++){
						scene.remove(boxes[i]);
					}
					boxes = [];
				}
				//initial boxes
				addBoxes(nboxes,nboxes,nboxes);

				// Create ambient light and add to scene.
				var light = new THREE.AmbientLight(0x404040); // soft white light
				scene.add(light);

				// Create directional light and add to scene.
				var directionalLight = new THREE.DirectionalLight(0xffffff);
				directionalLight.position.set(1, 1, 1).normalize();
				scene.add(directionalLight);

				// Add listener for window resize.
				window.addEventListener('resize', onWindowResize, false);
				//start timer for first 100 frames
				time = new Date().getTime();
				function animate()
				{
					//average render time from 100 rendered frames and add more cubes and restart timer
					if(renders >= 100)
					{
						timeItTook = (new Date().getTime() - time)/100;
						console.log("It took " + timeItTook+"ms to render "+nboxes+"x"+nboxes+"x"+nboxes+" cubes.\nThe FPS was "+1000/timeItTook);
						renders=0;
						nboxes+=1;
						removeBoxes();
						addBoxes(nboxes,nboxes,nboxes);
						time = new Date().getTime();
						renders=0;
					}
					requestAnimationFrame( animate );
					for(var i =0; i<boxes.length; i++){
						boxes[i].rotation.y = boxes[i].rotation.y + 0.01;
						boxes[i].rotation.x = boxes[i].rotation.x + 0.01;
					}
					renders+=1;

					renderer.render( scene, camera );

				}
				animate();
			}
			function onWindowResize()
			{
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.render(scene, camera);
			}
        </script>
    </body>
</html>