https://life-otherwise.vercel.app/scene/__start__.js

1(function () {
2    // Shared Lib
3    var CANVAS_ID = 'application-canvas';
4
5    // Needed as we will have edge cases for particular versions of iOS
6    // returns null if not iOS
7    var getIosVersion = function () {
8        if (/iP(hone|od|ad)/.test(navigator.platform)) {
9            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
10            var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
11            return version;
12        }
13
14        return null;
15    };
16
17    var lastWindowHeight = window.innerHeight;
18    var lastWindowWidth = window.innerWidth;
19    var windowSizeChangeIntervalHandler = null;
20
21    var pcBootstrap = {
22        reflowHandler: null,
23        iosVersion: getIosVersion(),
24
25        createCanvas: function () {
26              var canvas;
27              if (document.getElementById(CANVAS_ID)) { 
28                  canvas = document.getElementById(CANVAS_ID);
29              } else {
30                  canvas = document.createElement('canvas');
31                  canvas.setAttribute('id', CANVAS_ID);
32                  canvas.setAttribute('tabindex', 0);
33                  document.body.appendChild(canvas); 
34              }
35              canvas.onselectstart = function () { return false; };
36
37              // Disable long-touch select on iOS devices
38              canvas.style['-webkit-user-select'] = 'none';
39
40              return canvas;
41          },
42
43
44        resizeCanvas: function (app, canvas) {
45            canvas.style.width = '';
46            canvas.style.height = '';
47            app.resizeCanvas(canvas.width, canvas.height);
48
49            var fillMode = app._fillMode;
50
51            if (fillMode === pc.FILLMODE_NONE || fillMode === pc.FILLMODE_KEEP_ASPECT) {
52                if ((fillMode === pc.FILLMODE_NONE && canvas.clientHeight < window.innerHeight) || (canvas.clientWidth / canvas.clientHeight >= window.innerWidth / window.innerHeight)) {
53                    canvas.style.marginTop = Math.floor((window.innerHeight - canvas.clientHeight) / 2) + 'px';
54                } else {
55                    canvas.style.marginTop = '';
56                }
57            }
58
59            lastWindowHeight = window.innerHeight;
60            lastWindowWidth = window.innerWidth;
61
62            // Work around when in landscape to work on iOS 12 otherwise
63            // the content is under the URL bar at the top
64            if (this.iosVersion && this.iosVersion[0] <= 12) {
65                window.scrollTo(0, 0);
66            }
67        },
68
69        reflow: function (app, canvas) {
70            this.resizeCanvas(app, canvas);
71
72            // Poll for size changes as the window inner height can change after the resize event for iOS
73            // Have one tab only, and rotate from portrait -> landscape -> portrait
74            if (windowSizeChangeIntervalHandler === null) {
75                windowSizeChangeIntervalHandler = setInterval(function () {
76                    if (lastWindowHeight !== window.innerHeight || lastWindowWidth !== window.innerWidth) {
77                        this.resizeCanvas(app, canvas);
78                    }
79                }.bind(this), 100);
80
81                // Don't want to do this all the time so stop polling after some short time
82                setTimeout(function () {
83                    if (!!windowSizeChangeIntervalHandler) {
84                        clearInterval(windowSizeChangeIntervalHandler);
85                        windowSizeChangeIntervalHandler = null;
86                    }
87                }, 2000);
88            }
89        }
90    };
91
92    // Expose the reflow to users so that they can override the existing
93    // reflow logic if need be
94    window.pcBootstrap = pcBootstrap;
95})();
96
97
98(function () {
99        // template varants
100    var LTC_MAT_1 = [];
101    var LTC_MAT_2 = [];
102
103    // varants
104    var canvas = pcBootstrap.createCanvas();
105    var app = new pc.AppBase(canvas);
106
107    function initCSS() {
108        if (document.head.querySelector) {
109            // css media query for aspect ratio changes
110            // TODO: Change these from private properties
111            var css = `@media screen and (min-aspect-ratio: ${app._width}/${app._height}) {
112                #application-canvas.fill-mode-KEEP_ASPECT {
113                    width: auto;
114                    height: 100%;
115                    margin: 0 auto;
116                }
117            }`;
118            document.head.querySelector('style').innerHTML += css;
119        }
120
121        // Configure resolution and resize event
122        if (canvas.classList) {
123            canvas.classList.add(`fill-mode-${app.fillMode}`);
124        }
125    }
126
127    function displayError(html) {
128        var div = document.createElement('div');
129        div.innerHTML = `<table style="background-color: #8CE; width: 100%; height: 100%;">
130        <tr>
131            <td align="center">
132                <div style="display: table-cell; vertical-align: middle;">
133                    <div style="">${html}</div>
134                </div>
135            </td>
136        </tr>
137    </table>`;
138        document.body.appendChild(div);
139    }
140
141    function createGraphicsDevice(callback) {
142        var deviceOptions = window.CONTEXT_OPTIONS ? window.CONTEXT_OPTIONS : {};
143
144        if (typeof window.Promise === 'function') {
145            var LEGACY_WEBGL = 'webgl';
146            var deviceTypes = [...deviceOptions.deviceTypes, LEGACY_WEBGL];
147

148            var gpuLibPath = window.ASSET_PREFIX ? (window.ASSET_PREFIX.replace(/\/$/g, '') + '/') : '';
149
150            // new graphics device creation function with promises
151            var gfxOptions = {
152                deviceTypes: deviceTypes,
153                glslangUrl: gpuLibPath + 'glslang.js',
154                twgslUrl: gpuLibPath + 'twgsl.js',
155                powerPreference: deviceOptions.powerPreference,
156                antialias: deviceOptions.antialias !== false,
157                alpha: deviceOptions.alpha === true,
158                preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer
159            };
160        
161            pc.createGraphicsDevice(canvas, gfxOptions).then((device) => {
162                callback(device);
163            }).catch((e) => {
164                console.error('Device creation error:', e);
165                callback(null);
166            })
167        } else {
168            var igl1 = deviceOptions.deviceTypes.indexOf('webgl1');
169            var igl2 = deviceOptions.deviceTypes.indexOf('webgl2');
170            
171            // old webgl graphics device creation
172            var options = {
173                powerPreference: deviceOptions.powerPreference,
174                antialias: deviceOptions.antialias !== false,
175                alpha: deviceOptions.transparentCanvas !== false,
176                preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer,
177                preferWebGl2: igl2 > igl1
178            };
179
180            if (pc.platform.browser && !!navigator.xr) {
181                options.xrCompatible = true;
182            }
183
184            callback(new pc.WebglGraphicsDevice(canvas, options));
185        }
186    }
187
188    function initApp(device) {
189        try {
190            var createOptions = new pc.AppOptions();
191            createOptions.graphicsDevice = device;
192
193            createOptions.componentSystems = [
194                pc.RigidBodyComponentSystem,
195                pc.CollisionComponentSystem,
196                pc.JointComponentSystem,
197                pc.AnimationComponentSystem,
198                pc.AnimComponentSystem,
199                pc.ModelComponentSystem,
200                pc.RenderComponentSystem,
201                pc.CameraComponentSystem,
202                pc.LightComponentSystem,
203                pc.script.legacy ? pc.ScriptLegacyComponentSystem : pc.ScriptComponentSystem,
204                pc.AudioSourceComponentSystem,
205                pc.SoundComponentSystem,
206                pc.AudioListenerComponentSystem,
207                pc.ParticleSystemComponentSystem,
208                pc.ScreenComponentSystem,
209                pc.ElementComponentSystem,
210                pc.ButtonComponentSystem,
211                pc.ScrollViewComponentSystem,
212                pc.ScrollbarComponentSystem,
213                pc.SpriteComponentSystem,
214                pc.LayoutGroupComponentSystem,
215                pc.LayoutChildComponentSystem,
216                pc.ZoneComponentSystem,
217                pc.GSplatComponentSystem,
218            ].filter(Boolean);
219
220            createOptions.resourceHandlers = [
221                pc.RenderHandler,
222                pc.AnimationHandler,
223                pc.AnimClipHandler,
224                pc.AnimStateGraphHandler,
225                pc.ModelHandler,
226                pc.MaterialHandler,
227                pc.TextureHandler,
228                pc.TextHandler,
229                pc.JsonHandler,
230                pc.AudioHandler,
231                pc.ScriptHandler,
232                pc.SceneHandler,
233                pc.CubemapHandler,
234                pc.HtmlHandler,
235                pc.CssHandler,
236                pc.ShaderHandler,
237                pc.HierarchyHandler,
238                pc.FolderHandler,
239                pc.FontHandler,
240                pc.BinaryHandler,
241                pc.TextureAtlasHandler,
242                pc.SpriteHandler,
243                pc.TemplateHandler,
244                pc.ContainerHandler,
245                pc.GSplatHandler
246            ].filter(Boolean);
247
248            createOptions.elementInput = new pc.ElementInput(canvas, {
249                useMouse: INPUT_SETTINGS.useMouse,
250                useTouch: INPUT_SETTINGS.useTouch
251            });
252            createOptions.keyboard = INPUT_SETTINGS.useKeyboard ? new pc.Keyboard(window) : null;
253            createOptions.mouse = INPUT_SETTINGS.useMouse ? new pc.Mouse(canvas) : null;
254            createOptions.gamepads = INPUT_SETTINGS.useGamepads ? new pc.GamePads() : null;
255            createOptions.touch = INPUT_SETTINGS.useTouch && pc.platform.touch ? new pc.TouchDevice(canvas) : null;
256            createOptions.assetPrefix = window.ASSET_PREFIX || '';
257            createOptions.scriptPrefix = window.SCRIPT_PREFIX || '';
258            createOptions.scriptsOrder = window.SCRIPTS || [];
259            createOptions.soundManager = new pc.SoundManager();
260            createOptions.lightmapper = pc.Lightmapper;
261            createOptions.batchManager = pc.BatchManager;
262            createOptions.xr = pc.XrManager;
263
264            app.init(createOptions);
265            return true;
266
267        } catch (e) {
268            displayError('Could not initialize application. Error: ' + e);
269            console.error(e);
270            return false;

271        }
272    }
273
274    function configure() {
275        app.configure(window.CONFIG_FILENAME, (err) => {
276            if (err) {
277                console.error(err);
278                return;
279            }
280
281            initCSS(canvas, app._fillMode, app._width, app._height);
282
283            if (LTC_MAT_1.length && LTC_MAT_2.length && app.setAreaLightLuts.length === 2) {
284                app.setAreaLightLuts(LTC_MAT_1, LTC_MAT_2);
285            }
286
287            // do the first reflow after a timeout because of
288            // iOS showing a squished iframe sometimes
289            setTimeout(() => {
290                pcBootstrap.reflow(app, canvas);
291                pcBootstrap.reflowHandler = function () {
292                    pcBootstrap.reflow(app, canvas);
293                };
294        
295                window.addEventListener('resize', pcBootstrap.reflowHandler, false);
296                window.addEventListener('orientationchange', pcBootstrap.reflowHandler, false);
297
298                app.preload(() => {
299                    app.scenes.loadScene(window.SCENE_PATH, (err) => {
300                        if (err) {
301                            console.error(err);
302                            return;
303                        }
304
305                        app.start();
306                    })
307                })
308            });
309        });
310    }
311
312    function main() {
313        createGraphicsDevice((device) => {
314            if (!device) {
315                return;
316            }
317
318            if (!initApp(device)) {
319                return;
320            }
321
322            if (window.PRELOAD_MODULES.length) {
323                loadModules(window.PRELOAD_MODULES, window.ASSET_PREFIX, () => {
324                    configure(() => {
325                        console.timeEnd('start');
326                    });
327                })
328            } else {
329                configure();
330            }
331        });
332    }
333    main();
334})(); // Add scope to avoid polluting window scope