Mobile Optimized SaltFlatsEnv

Added a version of SatFlatsEnvironment for Mobile,
Dropping the ground from 66k to 30k polygons, dropped the diffuse texture from 4k to 2k, and disabled Normal Map math when on Mobile
`SaltFlatsEnvironment_mobile.fbx`

Author: ProcStack

docs/bots/siteContent.json

@@ -70,10 +70,10 @@
         "type": "image",
         "src": "../pages/pxlNav/images/userDetails.webp",
         "alt": "Showing User Details in different CGI programs",
-        "caption": "Add custom User Details to objects in your 3d modeling software, Allowing pxlNav to better understand your FBX file."
+        "caption": "Add custom User Details to objects in your 3d modeling software, Allowing pxlNav to better understand your FBX / GLTF file."
       }
     ],
-    "content": "\n    The background of this page is running '<span class=\"textNudge\">pxlNav</span>',\n    <br>&nbsp;&nbsp; A javascript package to extend Three.js for more interactive / game like mechanics.\n\n    <br>\n    \n    <br><span class=\"textNudge\">pxlNav</span> is a player controller + rendering set-up that brings more interactive functionality to Three.js.\n    <br>&nbsp;&nbsp; It's basically a wrapper for Three.js, using Three's renderer, character rig + animation features, to create something like a game engine... I guess.\n    \n    <br>\n    <br>\n    <br>\n    <div class=\"innerCenter\">\n      Install it for your web project using NPM\n      <div class=\"textBoldBox\">npm -i pxlnav</div>\n      <br>\n      If you are familiar with GLSL,\n      <br>Press the <span class=\"textBoldBox\">Y</span> key to use the <span class=\"textName\">Shader Editor</span> in <span class=\"textNudge\">pxlNav</span>.\n    </div>\n\n    <br>\n    <br>You can use any 3d modeling software to make interactive environments called <span class=\"textName\">Rooms</span>, making it a little easier to make games/interactive environments.\n    \n    <br>\n    <br>It supports rig + animation fbx files for your character animation, and a simple curve in your scene can act as your camera path ( add another if you want the camera to look somewhere as it's traveling the path ).\n    <br>&nbsp;&nbsp; Animated textures by using a second texture, particle effects, FPS navigation, ground collision, obstacles, items, portals, and more.\n\n    <br>\n    <br>Lets say, in Maya or Blender, you make a scene, add extra User Detail attributes to your objects to tell <span class=\"textNudge\">pxlNav</span> how to interact with them.\n    <div class='textSpacer'></div>\n    Giving you the ability in your modeling software to set up-\n    <br>&nbsp;&nbsp; Teleporter colliders within scene or between <span class=\"textName\">Rooms</span>, set item pick-ups, ground colliders, animated textures, and more set in your 3d modeling software of choice.\n    <div class='textSpacer'></div>\n    <br>&nbsp;&nbsp; For customized object coding in javascript, mark objects as 'isScripted' and you can easily access that specific object by name in code.\n    <div class='textSpacer'></div>\n    <br>&nbsp;&nbsp; Then <span class=\"textNudge\">pxlNav</span> loads your FBX and acompanying javascript file as a <span class=\"textName\">Room</span> that can be portal'ed to if ya wanted.\n\n    \n    <br>\n    <br>Note : GLTF & GLB using Draco compression is nearly implemented & bug free, added to the next version of pxlNav, v1.0.0\n    <br>&nbsp;&nbsp;&nbsp;&nbsp; To be released with support for React & Next and example projects for each.\n    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; See the <span class=\"textName\">v1.0.0-dev</span> branch for progress.\n    <br>\n    <br>\n  ",
+    "content": "\n    The background of this page is running '<span class=\"textNudge\">pxlNav</span>',\n    <br>&nbsp;&nbsp; A javascript package to extend Three.js for more interactive / game like mechanics.\n\n    <br>\n    \n    <br><span class=\"textNudge\">pxlNav</span> is a player controller + rendering set-up that brings more interactive functionality to Three.js.\n    <br>&nbsp;&nbsp; It's basically a wrapper for Three.js, using Three's renderer, character rig + animation features, to create something like a game engine... I guess.\n    \n    <br>\n    <br>\n    <br>\n    <div class=\"innerCenter\">\n      Install it for your web project using NPM\n      <div class=\"textBoldBox\">npm -i pxlnav</div>\n      <br>\n      If you are familiar with GLSL,\n      <br>Press the <span class=\"textBoldBox\">Y</span> key to use the <span class=\"textName\">Shader Editor</span> in <span class=\"textNudge\">pxlNav</span>.\n    </div>\n\n    <br>\n    <br>You can use any 3d modeling software to make interactive environments called <span class=\"textName\">Rooms</span>, making it a little easier to make games/interactive environments.\n    \n    <br>\n    <br>It supports rig + animation fbx files for your character animation, and a simple curve in your scene can act as your camera path ( add another if you want the camera to look somewhere as it's traveling the path ).\n    <br>&nbsp;&nbsp; Animated textures by using a second texture, particle effects, FPS navigation, ground collision, obstacles, items, portals, and more.\n\n    <br>\n    <br>Lets say, in Maya or Blender, you make a scene, add extra User Detail attributes to your objects to tell <span class=\"textNudge\">pxlNav</span> how to interact with them.\n    <div class='textSpacer'></div>\n    Giving you the ability in your modeling software to set up-\n    <br>&nbsp;&nbsp; Teleporter colliders within scene or between <span class=\"textName\">Rooms</span>, set item pick-ups, ground colliders, animated textures, and more set in your 3d modeling software of choice.\n    <div class='textSpacer'></div>\n    <br>&nbsp;&nbsp; For customized object coding in javascript, mark objects as 'Scripted' and you can easily access that specific object by name in code.\n    <div class='textSpacer'></div>\n    <br>&nbsp;&nbsp; Then <span class=\"textNudge\">pxlNav</span> loads your 3d scene file and accompanying javascript file as a <span class=\"textName\">Room</span> that can be portal'ed to if ya wanted.\n\n    \n    <br>\n    <br>Note : GLTF & GLB using Draco compression is nearly implemented & bug free, added to the next version of pxlNav, v1.0.0\n    <br>&nbsp;&nbsp;&nbsp;&nbsp; To be released with support for React & Next and example projects for each.\n    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; See the <span class=\"textName\">v1.0.0-dev</span> branch for progress.\n    <br>\n    <br>\n  ",
     "pageURL": "https://procstack.github.io/pxlNav/Whats_pxlNav.htm",
     "relativeURL": "./pxlNav/Whats_pxlNav.htm"
   },

docs/js/pxlRooms/SaltFlatsEnvironment/Assets/BasinTerraces_diffuse_mobile.webp

@@ -1,4 +1,4 @@
-Texture files can be included/embeded within the FBX,
+Texture files can be included/embeded within the FBX / GLTF,
   But its advised against doing that.
 There is some image management done in pxlNav for easier accessibility to shared resources
   Being, if an already loaded image is requested again,

docs/js/pxlRooms/SaltFlatsEnvironment/Assets/README.md

@@ -50,6 +50,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     this.assetPath=assetPath+"Assets/";
 
     this.sceneFile = this.assetPath+"SaltFlatsEnvironment.fbx";
+    this.sceneMobileFile = this.assetPath+"SaltFlatsEnvironment_mobile.fbx";
     this.animInitCycle = "Walk";
 
     // Animation Source & Clips are managed under the hood,
@@ -355,18 +356,26 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
         [
         UniformsLib[ "lights" ],
         {
-          'normalTexture' : { type:'t', value: null },
           'noiseTexture' : { type:'t', value: null },
           'smoothNoiseTexture' : { type:'t', value: null },
           'cloudTexture' : { type:'t', value: this.cloud3dTexture },
           'fogColor' : { type: "c", value: this.fogColor },
         }]
     )
-    envGroundUniforms.normalTexture.value = this.pxlUtils.loadTexture( this.assetPath+"BasinTerraces_normal.webp", null, textureOptionsLinearSRGB );
     envGroundUniforms.noiseTexture.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg" );
     envGroundUniforms.smoothNoiseTexture.value = this.pxlUtils.loadTexture( "Noise_Soft3d.jpg", null, textureOptionsRepeat );
+    
+    // No need for normal maps on mobile
+    //   Just wasted resources with little pay off
+    let enableNormalMap = !this.mobile;
+    if( enableNormalMap ){
+      //'normalTexture' : { type:'t', value: null },
+      envGroundUniforms.normalTexture = { type:'t', value: null };
+      envGroundUniforms.normalTexture.value = this.pxlUtils.loadTexture( this.assetPath+"BasinTerraces_normal.webp", null, textureOptionsLinearSRGB );
+    }
 
-    let mat=this.pxlFile.pxlShaderBuilder( envGroundUniforms, envGroundVert(), envGroundFrag() );
+
+    let mat=this.pxlFile.pxlShaderBuilder( envGroundUniforms, envGroundVert(enableNormalMap), envGroundFrag(enableNormalMap) );
     mat.side=FrontSide;
     mat.lights= true;
 
@@ -394,6 +403,15 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     this.materialList[ "SalioaPlant_geo" ]=salioaMtl;
 
 
+    
+    // -- -- -- 
+    
+    // Check for Mobile, use mobile scene file if so
+    //   I'll set up something more automatic for `pxlNav` in a future update
+    if( this.mobile && this.sceneMobileFile ){
+      this.sceneFile = this.sceneMobileFile;
+    }
+    
     // -- -- -- 
 
     return this.pxlFile.loadRoomFBX( this );