Packed Textures & Outlet Cleanup

Adjusted outlet environment instance lod for mobile, rebuilt the textures, and cleaned up some problem spots.
Packed GrassCardsA and GrassClusterA's Card

Author: ProcStack

docs/js/pxlNavLoader.js

@@ -50,19 +50,19 @@ const loaderPhrases = [
 //   These can be adjusted from your `pxlRoom` but easily set defaults here
 const userSettings = Object.assign({}, pxlUserSettings);
 userSettings['height']['standing'] = 22.5; // Standing height in units; any camera in your room's FBX will override this height once loaded
-userSettings['height']['stepSize'] = 5; // Max step height in units
+userSettings['height']['stepSize'] = 4.5; // Max step height in units
 userSettings['movement']['scalar'] = 1.1; // Overall movement rate scalar
-userSettings['movement']['max'] = 12.0; // Max movement speed
-userSettings['movement']['easing'] = 0.55; // Easing rate between Step() calls
+userSettings['movement']['max'] = 10.0; // Max movement speed
+userSettings['movement']['easing'] = 0.75; // Easing rate between Step() calls
 userSettings['look']['mobile']['invert'] = true; // Invert the look controls on mobile devices
 userSettings['headBounce']['height'] = 0.3; // Bounce magnitude in units
-userSettings['headBounce']['rate'] = 0.025; // Bounce rate per Step()
+userSettings['headBounce']['rate'] = 0.04; // Bounce rate per Step()
 userSettings['headBounce']['easeIn'] = 0.03; // When move key is pressed, the ease into bounce; `bounce * ( boundInf + easeIn )`
 userSettings['headBounce']['easeOut'] = 0.95; // When move key is let go, the ease back to no bounce; `bounce * easeOut`
-userSettings['jump']['impulse'] = 0.625; // Jump impulse force applied to the player while holding the jump button
-userSettings['jump']['holdMax'] = 2.65; // Max influence of holding the jump button on current jump; in seconds
+userSettings['jump']['impulse'] = 0.75; // Jump impulse force applied to the player while holding the jump button
+userSettings['jump']['holdMax'] = 2.5; // Max influence of holding the jump button on current jump; in seconds
 userSettings['jump']['repeatDelay'] = 0.085; // Delay between jumps when holding the jump button
-userSettings['gravity']['ups'] = 0.30; // Units per Step() per Step()
+userSettings['gravity']['ups'] = 0.5; // Units per Step() per Step()
 userSettings['gravity']['max'] = 18.5; // Max gravity rate
 
 // -- -- --

docs/js/pxlRooms/CampfireEnvironment/Assets/CampfireEnvironment.fbx

@@ -789,7 +789,7 @@ export class CampfireEnvironment extends RoomEnvironment{
     grassClusterUniforms.intensity.value = this.mobile ? 2.25 : 2.0; // Lower intensity for mobile devices
     grassCardsAUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg" );
     grassCardsAUniforms.diffuse.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_diffuse.webp" );
-    grassCardsAUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_alpha.jpg" );
+    grassCardsAUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_mask.jpg" );
 
 
     let grassCardSettings = {
@@ -832,8 +832,8 @@ export class CampfireEnvironment extends RoomEnvironment{
       }]
     )
     grassClusterCardsUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg" );
-    grassClusterCardsUniforms.rgbMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassClusterA_cards_diffuse.webp", null, {'encoding':SRGBColorSpace} );
-    grassClusterCardsUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassClusterA_cards_mask.jpg" );
+    grassClusterCardsUniforms.rgbMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_diffuse.webp", null, {'encoding':SRGBColorSpace} );
+    grassClusterCardsUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_mask.jpg" );
 
     let grassLODSettings = {
       'depthScalar': 0.004,

docs/js/pxlRooms/CampfireEnvironment/Assets/grassCardsA_alpha.jpg

@@ -71,7 +71,7 @@ export class OutletEnvironment extends RoomEnvironment{
     this.pxlCamFOV={ 'PC':60, 'MOBILE':80 };
 
     // Near-Far Clipping Planes for your room
-    this.pxlCamNearClipping = 3;
+    this.pxlCamNearClipping = 2.25;
     this.pxlCamFarClipping = 12000;
 
     // Room Fog Settings
@@ -362,7 +362,7 @@ builBugs(){
     )
     grassCardsAUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg" );
     grassCardsAUniforms.diffuse.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_diffuse.webp" );
-    grassCardsAUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_alpha.jpg" );
+    grassCardsAUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_mask.jpg" );
 
     let grassCardSettings = {
       'buildAlpha' : true,
@@ -444,7 +444,6 @@ builBugs(){
         [
         UniformsLib[ "lights" ],
         {
-          'dataTexture' : { type:'t', value: null },
           'coastLineTexture' : { type:'t', value: null },
           'rippleTexture' : { type:'t', value: null },
           'noiseTexture' : { type:'t', value: null },
@@ -453,7 +452,6 @@ builBugs(){
           'intensity': { type:'f', value:1 },
         }]
     )
-    waterWayUniforms.dataTexture.value = this.pxlUtils.loadTexture( this.assetPath+"WaterWay_Data.webp", textureOptionsSRGB );
     waterWayUniforms.coastLineTexture.value = this.pxlUtils.loadTexture( this.assetPath+"WaterWay_CoastLine.webp" );
     waterWayUniforms.rippleTexture.value = this.pxlUtils.loadTexture( this.assetPath+"WaterRipples_CoastalB.jpg" );
     waterWayUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg", textureOptionsRepeat );
@@ -484,15 +482,13 @@ builBugs(){
       [
       UniformsLib[ "lights" ],
       {
-        'dataTexture' : { type:'t', value: null },
         'rippleTexture' : { type:'t', value: null },
         'noiseTexture' : { type:'t', value: null },
         'fogColor' : { type: "c", value: this.fogColor },
         'rate': { type:'f', value:1 },
         'intensity': { type:'f', value:1 },
       }]
     )
-    creekWaterUniforms.dataTexture.value = this.pxlUtils.loadTexture( this.assetPath+"CreekWater_Data.webp" );
     creekWaterUniforms.rippleTexture.value = this.pxlUtils.loadTexture( this.assetPath+"WaterRipples_CoastalB.jpg" );
     creekWaterUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg" );
 

docs/js/pxlRooms/CampfireEnvironment/Assets/grassCardsA_diffuse.webp

@@ -73,7 +73,6 @@ export function waterWayFrag(){
   uniform vec2 time;
   uniform float intensity;
   uniform float rate;
-  uniform sampler2D dataTexture;
   uniform sampler2D coastLineTexture;
   uniform sampler2D rippleTexture;
   uniform sampler2D noiseTexture;
@@ -96,15 +95,20 @@ export function waterWayFrag(){
     vec3 pos = vPos*0.001;
     vec2 uv = vUv;
     
-    vec3 dataCd = texture2D( dataTexture, vUv ).rgb;
+    float depth = min(1.0, max(0.0, gl_FragCoord.z / gl_FragCoord.w  * .00015 )) * step( .930, gl_FragCoord.z );
+    depth = pow( depth, 1.0-depth);
+
+    float depthFade = clamp( 2.-(depth*depth), 0.0, 1.0);
+    depthFade *= depthFade*depthFade;
+      
     
     uv.x = ( pos.x*1.2-timer*.19 );
     uv.y = ( pos.z*1.9+timer*.9 );  
     
     vec3 nCd=(texture2D(noiseTexture,uv).rgb-.5);
     
-    uv.x = ( pos.x*10.81-timer*17.1 + nCd.x*dataCd.r + nCd.z + dataCd.b );
-    uv.y = ( pos.z*7.51+timer*10.1  + nCd.y*1.50 - nCd.x + dataCd.g ); 
+    uv.x = ( pos.x*10.81-timer*17.1 + nCd.x * depth + nCd.z );
+    uv.y = ( pos.z*7.51+timer*10.1  + nCd.y*1.50 - nCd.x  ); 
     nCd = texture2D( noiseTexture, uv*.0135 ).rgb*.65+.35;
     
     // -- -- --
@@ -128,7 +132,7 @@ export function waterWayFrag(){
     
     // Calculate Alpha
     float alpha = clamp(((nCd.x*nCd.y*nCd.z)*.15)+.85, 0.0, 1.0) ;
-    alpha =  min(1.0,alpha +  (dataCd.r*vCd.b)* min(1.0,vCd.r*2.0)) ;
+    alpha =  min(1.0,alpha + vCd.b * min(1.0,vCd.r*2.0) * depth ) ;
     vec4 Cd=vec4( .226,.27,.43, alpha );
     
     
@@ -171,6 +175,7 @@ export function waterWayFrag(){
     alpha *= min(1.0,vCd.r*10.0);
     Cd.a=alpha;
     
+    
     // -- -- --
     
     

docs/js/pxlRooms/OutletEnvironment/Assets/grassCardsA_alpha.jpg renamed to docs/js/pxlRooms/CampfireEnvironment/Assets/grassCardsA_mask.jpg

@@ -48,7 +48,7 @@ export const pageListingData = {
 
       <br>
       <br>I also added a multi-joint 'lookAt' which would blend their neck joints to look at a target smoothly.
-      <br>&nbsp;&nbsp; I added in a joint rotation limits and calculated the linear algebra (target-to-joint space) to determine if the agent could look at their target or not.
+      <br>&nbsp;&nbsp; I added in joint rotation limits and calculated the linear algebra (target-to-joint space) to determine if the agent could look at their target or not.
 
       <br>
       <br>I could talk about the horse-and-jockey system I helped build, or the post-simulation joint editing tools, or the multi-limb IK with heel offsets & foot locking,