1 | <!doctype html>
|
2 | <html>
|
3 | <head>
|
4 | |
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | <meta charset="utf-8">
|
12 | <title>Flux Viewport Performance</title>
|
13 | <script src="../build/flux-viewport-bundle.global.js"></script>
|
14 |
|
15 | <script src="./InteractivePerf.js"></script>
|
16 | <script src="./FluxBuildings.js"></script>
|
17 | <style type="text/css">
|
18 | #container {
|
19 | width:400px;
|
20 | height:400px;
|
21 | display:inline-block;
|
22 | background-color:#FFCCCC;
|
23 | }
|
24 | #viewports {
|
25 | -webkit-user-select: none;
|
26 | user-select: none;
|
27 | }
|
28 | div.viewport {
|
29 | width: 200px;
|
30 | height: 200px;
|
31 | display: inline-block;
|
32 | background-color: red;
|
33 | }
|
34 | </style>
|
35 | </head>
|
36 | <body onkeypress="focusAll()" onload="handleLoad()">
|
37 | <h2>Flux Viewport Performance</h2>
|
38 | <select id="modelMenu"></select><br>
|
39 | <button id="loadButton">Load Model</button>
|
40 | <button id="recordButton">Record</button>
|
41 | <button id="trialButton">Trial</button><br>
|
42 | <button id="addViewportsButton">Add 10 Viewports</button><br>
|
43 | <div id="viewports">
|
44 | <div id="container"></div>
|
45 | </div>
|
46 | <a href="https://docs.google.com/spreadsheets/d/1D2Rb8rPK3O8zHzZc_O1NqXIA8aB4E-V9k8hJOUvPI3k/edit#gid=1888279806">Performance data spreadsheet</a>
|
47 | <script>
|
48 | 'use strict';
|
49 |
|
50 | var torus = {"origin": [0,0,0],"majorRadius": 5,"minorRadius":3,"axis":[0,0,1],"primitive":"torus"};
|
51 | var fluxViewport = null;
|
52 | var fluxBuildings = null;
|
53 | function handleLoad() {
|
54 | fluxBuildings = new FluxBuildings();
|
55 | fluxViewport = new FluxViewport(container);
|
56 | fluxViewport.setupDefaultLighting();
|
57 | fluxViewport.homeCamera();
|
58 | populateList();
|
59 | addListeners();
|
60 | }
|
61 |
|
62 | function populateList() {
|
63 | var modelMenu = document.querySelector('#modelMenu');
|
64 | var urls = FluxBuildings.urls;
|
65 | for (var i=0;i<urls.length;i++) {
|
66 | var option = document.createElement('option');
|
67 | option.value = urls[i];
|
68 | option.textContent = urls[i];
|
69 | modelMenu.appendChild(option);
|
70 | }
|
71 | modelMenu.addEventListener('change', function (event) {
|
72 | fluxBuildings.loadModel(event.target.value);
|
73 | });
|
74 | }
|
75 |
|
76 | function addListeners() {
|
77 | var modelMenu = document.querySelector('#modelMenu');
|
78 |
|
79 | var loadButton = document.querySelector('#loadButton');
|
80 | loadButton.addEventListener('click', function () {
|
81 | fluxBuildings.loadModel(modelMenu.value);
|
82 | });
|
83 |
|
84 | var trialButton = document.querySelector('#trialButton');
|
85 | trialButton.addEventListener('click', function () {
|
86 | fluxBuildings.handleTrial();
|
87 | });
|
88 |
|
89 | var recordButton = document.querySelector('#recordButton');
|
90 | recordButton.addEventListener('click', function () {
|
91 | fluxBuildings.handleRecord();
|
92 | });
|
93 |
|
94 | var addViewportsButton = document.querySelector('#addViewportsButton');
|
95 | addViewportsButton.addEventListener('click', function () {
|
96 | addViewports();
|
97 | });
|
98 | }
|
99 |
|
100 | function addViewports() {
|
101 | var viewportsDiv = document.querySelector('#viewports');
|
102 | var viewports = [];
|
103 | var numViewports = 10;
|
104 | for (var i=0;i<numViewports;i++) {
|
105 | var div = document.createElement('div');
|
106 | viewportsDiv.appendChild(div);
|
107 | div.classList.add("viewport");
|
108 | viewports[i] = new FluxViewport(div);
|
109 | viewports[i].setupDefaultLighting();
|
110 | viewports[i].homeCamera();
|
111 |
|
112 | viewports[i]._renderer._cameras = fluxViewport._renderer._cameras;
|
113 | viewports[i]._renderer._controls = fluxViewport._renderer._controls;
|
114 | }
|
115 | fluxViewport.addEventListener('change', function () {
|
116 | for (var i=0;i<numViewports;i++) {
|
117 | viewports[i].render();
|
118 | }
|
119 | });
|
120 | }
|
121 |
|
122 | function focusAll() {
|
123 | fluxViewport.focus();
|
124 | }
|
125 |
|
126 | </script>
|
127 | </body>
|
128 | </html>
|