Make the pit ashy, page center fix

Updated readme as well

Author: ProcStack

Build/pxlNav.min.js

@@ -140,18 +140,17 @@ text-shadow: 1px 1.5px 4px #252525;
 /*  -- -- --  */
 
 .gitPageContentParentStyle {
-  max-height: 0vh;
   overflow: hidden;
   position: fixed;
-  left: 0px;
-  width: 100vw;
+  width: 85vw;
   max-width: 1600px;
   height: 100vh;
   pointer-events: none;
   display: grid;
   justify-items: center;
 }
 
+
 .gpcpVisibleStyle {
   max-height: 100vh;
 }

Build/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -9,6 +9,7 @@
   max-width: calc(100vw - max(5vh,5vw));
   position: fixed;
   bottom: max(4vh,4vw);
+  justify-self: center;
   z-index: 2;
 }
 

Public/style/gitPage_mainStyle.css

@@ -5,7 +5,7 @@
   text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
   pointer-events: auto;
   max-height: 65vh;
-  max-width: calc(max(min(100vw - max(6vh, 6vw), 500px), min(100vw - max(6vh, 6vw), 40vw + ((1000px - 100vw)* 5))));
+  max-width: calc(max(min(100vw - max(7vh, 7vw), 500px), min(100vw - max(7vh, 7vw), 40vw + ((1000px - 100vw)* 5))));
   position: fixed;
   right: max(max(2vh,2vw), 50vw - 750px);
   bottom: max(4vh,4vw);

Public/style/gitPage_pxlNavStyle.css

@@ -7,6 +7,10 @@ Kevin Edzenga's web dev & shader resume site
 <br/>&nbsp;&nbsp;Made as a way to show off `pxlNav`
 ### 
 
+<img src="_show/AntibodyClub_chatImplemented.jpg" alt="procstack.github.io pxlNav environment" style="margin-left:auto;margin-right:auto;"/>
+<div style="margin-left:auto;margin-right:auto;">[procstack.github.io](https://procstack.github.io/)</div>
+
+
 ### The Good Bits -
 *Wanna see the template or example rooms using 3d fbx files?*
 <br/>&nbsp; `./Source/pxlRooms`
@@ -36,7 +40,7 @@ I decided to release the `pxlNav` framework for `three.js` I wrote for use in th
 <br/>&nbsp;&nbsp;&nbsp;&nbsp;With live video feeds of our house dj and event dj, switched dynamically durring events.
 
 
-<img src="_show/10_chatImplemented.png" alt="Antib0dy.club, using pxlNav with Three.js" style="margin-left:auto;margin-right:auto;"/>
+<img src="_show/AntibodyClub_chatImplemented.jpg" alt="Antib0dy.club, using pxlNav with Three.js" style="margin-left:auto;margin-right:auto;"/>
 <div style="margin-left:auto;margin-right:auto;">(Antib0dy.Club, networking has been removed though)</div>
 
 

Public/style/gitPage_reposStyle.css

@@ -1,6 +1,6 @@
 //
 //  Core pxlNav Engine
-export const pxlNavVersion = "0.0.13";
+export const pxlNavVersion = "0.0.14";
 //      Written by Kevin Edzenga 2020;2024
 
 // -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

README.md

@@ -356,23 +356,14 @@ export function envGroundFrag(){
     varying float vFarMask;
     varying float vPitMask;
     
-    #define PI 3.1415926535897932384626
     
-    /***********************************/
-    /** Start of THREE Shader Includs **/
-    /***********************************/
-
     struct DirLight {
       vec3 color;
       vec3 direction;
     };
 
     uniform DirLight directionalLights[NUM_DIR_LIGHTS];
     
-    /*********************************/
-    /** End of THREE Shader Includs **/
-    /*********************************/
-
         
     // Campfire ground glow colors
     const vec3 firePitColor = vec3( .80, .50, .30);
@@ -498,6 +489,12 @@ export function envGroundFrag(){
         // Add rocky hill sides, reduce region around campfire, remove pit itself
         Cd.rgb = mix( Cd.rgb, rockyHillCd, vRockyMask*(1.0-vPitMask)*campfireMaskInv);
         
+        // Darken the center pit
+        //   Gotta add that ash!
+        float ashMask = max(0.0, dataCd.b*vPitMask-.53);
+        ashMask = 1.0 - min( 1.0, ashMask*ashMask*3.5)*.95;
+        Cd.rgb = mix(  Cd.rrr*.4 + Cd.rgb*(.5+dirtNoise*.5), Cd.rgb, ashMask );
+        
         // -- -- --
 
         // -- -- -- -- -- -- -- --
@@ -512,6 +509,7 @@ export function envGroundFrag(){
         }
         // Add a fake bump map to the lighting
         lights = lights*baseDirtNoise;
+        //
         Cd.rgb += Cd.rgb*lights;
         
         // -- -- --
@@ -523,10 +521,10 @@ export function envGroundFrag(){
         float animWarpFit = max( animWarpCd.r, max(animWarpCd.g,animWarpCd.b) )*.8 -.2;
         
         // Main Pit
-        Cd.rgb += (firePitColor + firePitColor*animWarpFit) * (campfireMask*1.1-.1) * .25;
+        Cd.rgb += (firePitColor + firePitColor*animWarpFit) * (campfireMask*1.1-.1) * .25 * ashMask;
         
         // Region around Pit and Druid Rabbit
-        Cd.rgb += (fireGlowColor + fireGlowColor*animWarpFit) * vPitMask * vPitMask * .15;
+        Cd.rgb += (fireGlowColor + fireGlowColor*animWarpFit) * vPitMask * vPitMask * .15 * ashMask;
         
         // -- -- --
 
@@ -540,6 +538,7 @@ export function envGroundFrag(){
         shade *= dataCd.r;
         Cd.rgb=  mix( Cd.rgb*shade, fogColor, depth );
         
+        
         gl_FragColor=Cd;
     }`;
   return ret;
@@ -626,7 +625,6 @@ export function campfireLogFrag(){
     
     varying float vFlicker;
     
-    #define PI 3.14159265358979
     
     void main(){
         float timer = time.x*0.05;