AL-15414: added checkDeviceCapabilities

src_app/base/renderManager.js

 import { EventDispatcher } from "avvyland-web-core/build/avvy-core";
-import { BLOCK_TYPE, COUNT_STATIC_MESH, SETTINGS } from "../constants";
+import { BLOCK_TYPE, COUNT_STATIC_MESH, MAX_AVAILABLE_MEMORY_IOS, SETTINGS } from "../constants";
 import { LODs } from "../objects/lods";
 
 function RenderManager() {
@@ -51,6 +51,7 @@ function RenderManager() {
     EventDispatcher.bind("RenderManager.move", this, this.move);
     EventDispatcher.bind("RenderManager.remove", this, this.remove);
     EventDispatcher.bind("RenderManager.start", this, this.prepare);
+    EventDispatcher.bind("RenderManager.checkDevice", this, this.checkDeviceCapabilities);
 
     EventDispatcher.bind("RenderManager.changeInstanceToMesh", this, this.changeInstanceToMesh);
 
@@ -118,6 +119,31 @@ function RenderManager() {
 RenderManager.prototype.constructor = RenderManager;
 //RenderManager.prototype = Object.create(THREE.RenderManager.prototype);
 
+RenderManager.prototype.checkDeviceCapabilities = function(stats) {
+
+    const allAssetsByteSize = stats.geometryByteSize + stats.texturesByteSize;
+    const gl = this.renderer.getContext();
+    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+
+    if (debugInfo) {
+        const device = debugInfo && gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+        const isApple = /Apple|iOS/.test(device);
+
+        if (isApple && allAssetsByteSize > MAX_AVAILABLE_MEMORY_IOS) {
+            let warnPopup = EventDispatcher.query("InfoPopup.create", "Warning", null, {
+                header: "Warning!",
+                descriptionId: "temp__warning-text",
+                cbTitle: "OK",
+                modalClass: "loading__info-modal-warn",
+                cb: function() {
+                    warnPopup.hide();
+                },
+            });
+        }
+    }
+
+}
+
 RenderManager.prototype.prepare = function() {
     const shaderLib = EventDispatcher.query("Effects.getShaderLib");
     this.scene = EventDispatcher.query("MainScene.getScene").view;

src_app/brane/brane.js

 import { EventDispatcher } from "avvyland-web-core/build/avvy-core";
 import * as l1wrapper from "l1wrapper/wrapper-v2";
-import { IndexedDB } from "../../src_base/idb"
-import { STORAGE_URL } from "../../src_wizard/constants"
+import { IndexedDB } from "../../src_base/idb";
+import { STORAGE_URL } from "../../src_wizard/constants";
 
 const NEAREST_DISTANCE = 50;
 const TYPES_COUNT = 10;
@@ -147,10 +147,15 @@ Brane.prototype.updateSettings = async function (settings) {
 };
 
 Brane.prototype.updateChildren = async function (props, local) {
+
     let startTime = new Date()
-    if (!props.children) 
+    if (!props.children)
         return;
 
+    if (props.stats) {
+        EventDispatcher.send('RenderManager.checkDevice', props.stats);
+    }
+
     if (props.settings) {
 /*        props.settings.desktop.distance = 450
         props.settings.desktop.respawn.positionX = 175.81127518239927
@@ -203,11 +208,11 @@ Brane.prototype.updateChildren = async function (props, local) {
 
     props.children = newChildren;*/
     let self = this;
-    
+
     let blocks;
     if (local)
         blocks = props.children;
-    else 
+    else
         blocks = await this.getBlocks(props);
 
     let dummies = [];
@@ -264,7 +269,7 @@ Brane.prototype.updateChildren = async function (props, local) {
     async function processQueue(queue) {
         if (!queue)
             return
-        
+
         // console.log("Blocks count:", Object.keys(queue).length);
         console.time("Execution Time Queue - Blocks:" + Object.keys(queue).length);
 
@@ -277,7 +282,7 @@ Brane.prototype.updateChildren = async function (props, local) {
                     if (block) {
                         block.destroy()
                     }
-                } 
+                }
 
                 block = EventDispatcher.query("ObjectsStorage.getObjectById", k);
 
@@ -293,7 +298,7 @@ Brane.prototype.updateChildren = async function (props, local) {
         for (var k in result) {
             let dummmy = dummiesStorage[result[k].identity]
             if (dummmy) dummmy.destroy();
-            
+
             result[k].place();
             result[k].isPrototype = local;
             if (result[k].type == "1698476664020751600")
@@ -338,7 +343,7 @@ Brane.prototype.getBlocks = async function (props) {
 Brane.prototype.save = function (time=3000) {
     let tm = null;
     return function () {
-        clearTimeout(tm) 
+        clearTimeout(tm)
 
         tm = setTimeout(async () => {
             let objects = EventDispatcher.query("ObjectsStorage.getAll");
@@ -350,6 +355,14 @@ Brane.prototype.save = function (time=3000) {
                 if (object.isPrototype && !object.isGhost)
                     brane.children[object.identity] = {ID: object.identity, props: object.object.props}
             }
+
+            const dataStats = EventDispatcher.query("DataCache.stats");
+            brane.stats = {
+                blocks: Object.keys(brane.children).length,
+                geometryByteSize: dataStats.geometry,
+                texturesByteSize: dataStats.textures,
+            };
+
             await this.localDB.add(`brane_${this.object.ID}`, brane, true);
             await this.uploadToStorage(brane)
         }, time)
@@ -390,7 +403,7 @@ Brane.prototype.load = async function() {
     }
 
     await this.updateChildren(data, true)
-    
+
     return data
 };
 

src_app/constants.js

@@ -151,6 +151,7 @@ const MEDIA_FILE_SIZE = 209715200; //200 mb
 const MAX_FPS = 60;
 
 const COUNT_STATIC_MESH = 0;
+const MAX_AVAILABLE_MEMORY_IOS = 146800640; //140 мб
 
 const ARRAY_TEXTURE = false;
 
@@ -192,6 +193,7 @@ export {
     MEDIA_FILE_SIZE,
     REQUEST_COUNTER,
     MAX_FPS,
+    MAX_AVAILABLE_MEMORY_IOS,
     ARRAY_TEXTURE,
     LOCALE,
     COUNT_STATIC_MESH,

static/css/style.scss

@@ -635,7 +635,7 @@ canvas:active {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    
+
     border-radius: 16px;
 }
 
@@ -695,7 +695,7 @@ canvas:active {
     background: var(--surface-white-10);
     padding: 0px;
 }
-/* 
+/*
 .inventory__aside-button:hover {
     border: 2px solid #D3D6D9;
 } */
@@ -705,7 +705,7 @@ canvas:active {
 } */
 /* .inventory__aside-button.active:hover {
     background-color: #688AE1;
-    
+
 } */
 
 .inventory__section {
@@ -719,7 +719,7 @@ canvas:active {
 .inventory__select-wrapper {
     width: 292px;
     height: 100%;
-    
+
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -878,7 +878,7 @@ canvas:active {
 }
 
 .right-side__use-button span {
-    
+
     font-family: 'FF_Utility_Pro';
     font-style: normal;
     font-weight: 400;
@@ -1242,16 +1242,16 @@ canvas:active {
     border-radius: 16px;
     background: var(--surface-light-gray-white);
     background: transparent;
-    
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
-  
+
 }
 .inventory__item-counter {
     padding: 2px;
@@ -1579,7 +1579,7 @@ canvas:active {
 
 /* Block Detail Modal*/
 .block-detail__background,
-.inventory__background, 
+.inventory__background,
 .media__background,
 .menu__background,
 .profile__background,
@@ -1948,8 +1948,8 @@ canvas:active {
     line-height: 21px;
 }
 
-.props__header, 
-.profile-user-popup__header, 
+.props__header,
+.profile-user-popup__header,
 .tutorial-popup__header {
     margin: 0px;
     font-style: normal;
@@ -1969,7 +1969,7 @@ canvas:active {
     top: 0px;
 }
 
-.props__close-button, 
+.props__close-button,
 .profile-user-popup__close-button,
 .tutorial-popup__close-button {
     position: absolute;
@@ -2166,11 +2166,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 8px;
     background: var(--surface-border-input);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
@@ -2263,7 +2263,7 @@ canvas:active {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
-    
+
     color: var(--text-black);
 }
 
@@ -2391,7 +2391,7 @@ canvas:active {
     border-radius: 50%;
     border: 0;
     background: var(--primary-color);
-    cursor: pointer; 
+    cursor: pointer;
     color: #fff;
     font-size: 22px;
 }
@@ -2454,7 +2454,7 @@ canvas:active {
     border-radius: 12px;
 
     display: block;
-    width: 100%; 
+    width: 100%;
 }
 
 .pbr-color-props {
@@ -2465,7 +2465,7 @@ canvas:active {
     border-radius: 12px;
 
     display: block;
-    width: 100%; 
+    width: 100%;
 }
 
 .pbr-color-props-input {
@@ -2714,7 +2714,7 @@ canvas:active {
     text-align: center;
 
     color: var(--surface-white);
-    
+
 }
 
 .menu__title {
@@ -2726,7 +2726,7 @@ canvas:active {
     line-height: 29px;
     letter-spacing: 0em;
     text-align: left;
-    
+
 }
 
 .menu__wrapper {
@@ -2871,7 +2871,7 @@ canvas:active {
     font-weight: 500;
     font-size: 16px;
     line-height: 19px;
-    
+
     color: var(--light-dark-color);
 }
 
@@ -3055,7 +3055,7 @@ canvas:active {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.5;
-    
+
     color: var(--secondary);
 }
 .form-control-slider {
@@ -3167,7 +3167,7 @@ canvas:active {
     line-height: 24px;
 
     color: var(--text-black);
-    
+
 
     cursor: pointer;
 }
@@ -3400,7 +3400,7 @@ canvas:active {
     line-height: 24px;
 
     color: var(--text-error);
-    
+
 
     cursor: pointer;
 }
@@ -3438,7 +3438,7 @@ canvas:active {
     line-height: 24px;
 
     color: var(--text-white);
-    
+
 
     cursor: pointer;
 }
@@ -3674,7 +3674,7 @@ canvas:active {
     scrollbar-width: none;
 }
 /* .branes__list {
-    
+
 } */
 
 .branes__item {
@@ -3899,11 +3899,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 4px;
     background: var(--detail-header);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
@@ -3989,11 +3989,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 8px;
     background: var(--surface-border-input);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
@@ -4149,11 +4149,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 4px;
     background: var(--surface-border-input);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
@@ -4189,7 +4189,7 @@ canvas:active {
     background: #ffffff;
     cursor: pointer;
     margin-top: -14px;
-    
+
 } */
 
 
@@ -4351,7 +4351,7 @@ canvas:active {
     justify-content: space-between;
     width: 100%;
 }
-  
+
 .settings__control-range__min, .settings__control-range__max {
     font-family: 'FF_Utility_Pro';
     font-style: normal;
@@ -4395,11 +4395,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 6px;
     background: var(--surface-border-input);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
@@ -4821,11 +4821,11 @@ canvas:active {
     pointer-events: none;
     border-radius: 8px;
     background: var(--surface-border-input);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-            mask: 
-       linear-gradient(#fff 0 0) content-box, 
+            mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -5341,7 +5341,7 @@ canvas:active {
     .inventory__item-info .inventory__item-desc:not(:first-child) {
         display: none;
     }
-    .block-detail__modal { 
+    .block-detail__modal {
         width: 60%;
     }
 
@@ -5350,7 +5350,7 @@ canvas:active {
     } */
 }
 @media (max-width: 1024px) {
-    .block-detail__modal { 
+    .block-detail__modal {
         width: 70%;
     }
     /* .loading__status {
@@ -5358,7 +5358,7 @@ canvas:active {
     } */
 }
 @media (max-width: 768px) {
-    .block-detail__modal { 
+    .block-detail__modal {
         width: 80%;
     }
     .block-detail__image {
@@ -5426,7 +5426,7 @@ canvas:active {
         font-size: 12px;
         line-height: 12px;
     }
-    
+
     .mobile .item__button {
         min-height: 46px;
         max-height: 46px;
@@ -5475,9 +5475,9 @@ canvas:active {
         width: 30vw;
         height: 30%;
     }
-  
+
 }
-  
+
 @media (orientation: portrait) {
     .loading__logo {
         height: 30vh;
@@ -5588,7 +5588,7 @@ canvas:active {
     font-size: 20px;
 }
 .quick-bar__button-icon-image {
-    
+
     width: 48px;
     height: 48px;
 }
@@ -5659,7 +5659,7 @@ canvas:active {
     bottom: -12px;
     left: 50%;
     transform: translate(-50%, 0);
-    
+
     display: none;
     margin: 0 auto;
     padding: 4px;
@@ -5752,7 +5752,7 @@ canvas:active {
 
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.7);
-    
+
 
     z-index: 12;
 }
@@ -5847,6 +5847,11 @@ canvas:active {
     transform: translate(-50%, -50%);
 }
 
+.loading__info-modal-warn {
+    top: 15%;
+    transform: translate(-50%, -50%);
+}
+
 .info-popup__header {
     padding: 4px 24px;
     background: var(--main-color);
@@ -5864,7 +5869,7 @@ canvas:active {
     font-weight: 600;
     line-height: 18px;
     letter-spacing: 0em;
-    
+
     text-align: justify;
     color: var(--text-white);
     background-color: var(--black-color);
@@ -5937,7 +5942,7 @@ canvas:active {
 
     position: relative;
     padding: 20px 10px;
-    
+
     background: var(--black-color);
     border-radius: 5px;
 }
@@ -5958,7 +5963,7 @@ canvas:active {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
-    
+
     text-align: center;
 }
 
@@ -6348,9 +6353,9 @@ canvas:active {
     pointer-events: none;
     border-radius: 8px;
     background: var(--surface-border-input);
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
-    mask: linear-gradient(#fff 0 0) content-box, 
+    mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -6524,4 +6529,4 @@ canvas:active {
 
 .form-check-input:checked {
     background-color: var(--detail-header);
-}
\ No newline at end of file
+}