Added Fireflies to CampefireEnv

_Added mesh-to-particle support to pxlNav v0.0.28-dev
__This lets you assign a mesh to become a particle system from your CGI program
____Add `pSystem=true` to the object, then assign it with a `ParticleBase` pxlParticle system.
_Added Fireflies to CampefireEnv using mesh-to-particle
_Turned on dust for Mobile on OutletEnv

Added some wavering shadow edges from the "fire"

Author: ProcStack

docs/js/pxlNav.esm.js

@@ -32,20 +32,20 @@ import {
   MeshPhongMaterial
 } from "../../libs/three/three.module.min.js";
 
-import { RoomEnvironment, pxlShaders, pxlEffects } from "../../pxlNav.esm.js";
+import { RoomEnvironment, pxlEffects } from "../../pxlNav.esm.js";
 
 import { rabbitDruidVert, rabbitDruidFrag,
          campfireLogVert, campfireLogFrag,
          campfireVert, campfireFrag,
          instPlantsVert, instPlantsFrag,
          grassClusterVert, grassClusterFrag,
          envGroundVert, envGroundFrag,
-         rgbaMapVert, rgbaMapFrag } from "./Shaders.js";
+         fireflyVert, fireflyFrag } from "./Shaders.js";
 
 const BillowSmoke = pxlEffects.pxlParticles.BillowSmoke;
 const EmberWisps = pxlEffects.pxlParticles.EmberWisps;
 const FloatingDust = pxlEffects.pxlParticles.FloatingDust;
-const DefaultVert = pxlShaders.core.defaultVert;
+const ParticleBase = pxlEffects.pxlParticles.ParticleBase;
 
 export class CampfireEnvironment extends RoomEnvironment{
   constructor( roomName='CampfireEnvironment', assetPath=null, msRunner=null, camera=null, scene=null, cloud3dTexture=null ){
@@ -64,13 +64,9 @@ export class CampfireEnvironment extends RoomEnvironment{
     this.animInitCycle = "Sit_Idle";
 
     this.animMixer = null;
-    
-    this.materialList={};
-    this.particleList={};
 
     this.campfireLight = null;
 
-    
     this.pxlCamFOV={ 'PC':60, 'MOBILE':80 };
     this.pxlCamZoom=1;
     this.pxlCamAspect=1;
@@ -347,13 +343,57 @@ export class CampfireEnvironment extends RoomEnvironment{
     // -- -- --
 
     // Generate geometry and load texture resources
-    dustSystem.build( dustSystemSettings );
+    //dustSystem.build( dustSystemSettings );
 
     this.particleList[systemName] = dustSystem;
   }
 
 
 
+  // Build a mesh-to-particle system for the fireflies
+  //   Using the `fireflies_vfx` geometry from the CampfireEnvironment.fbx
+  //     Marked with the custom property `pSystem = true`
+  buildFireflies(){
+    //if( this.mobile ) return;
+
+    let nameOfSystem = "fireflies_vfx";
+    if( this.particleList?.hasOwnProperty( nameOfSystem ) && this.particleList[nameOfSystem].type == "BufferGeometry" ){
+      let fireflyUniforms = {
+          'atlasTexture' : { type:'t', value: null },
+          'atlasAlphaTexture' : { type:'t', value: null },
+          'noiseTexture' : { type:"t", value: null },
+          'pointScale' : { type: "v", value: new Vector2( 5.0, 0.0 ) },
+          'tint' : { type: "c", value: new Color( 1.5, 1.4, 0.6 ) },
+          'fogColor' : { type: "c", value: this.fogColor },
+          'rate' : { type:"f", value:.035 }
+        };
+      fireflyUniforms.atlasTexture.value = this.pxlUtils.loadTexture( "sprite_dustAtlas_rgb.jpg", null, {'encoding':SRGBColorSpace} );
+      fireflyUniforms.atlasAlphaTexture.value = this.pxlUtils.loadTexture( "sprite_dustAtlas_alpha.jpg" );
+
+      // -- -- --
+  
+      // Make the firefly system itself
+      let fireflySystem = new ParticleBase( this, "fireflySystem" );
+
+      // Build settings using the ParticleBase class's `getSettings()` method
+      let fireflySettings = fireflySystem.getSettings();
+      fireflySettings["atlasPicks"] = [
+        ...fireflySystem.dupeArray([0.0,0.50],4), ...fireflySystem.dupeArray([0.25,0.50],4),
+        ...fireflySystem.dupeArray([0.0,0.75],4), ...fireflySystem.dupeArray([0.25,0.75],4)
+      ];
+      fireflySettings["additiveBlend"] = true;
+
+      // Assign your `userData.pSystem = true` geometry to the particle system to use
+      fireflySystem.setGeometry( this.particleList[ nameOfSystem ] );
+
+      // Build + Add the particle system to the scene using `ParticleBase.build( settings, uniforms, vertex shader, fragment shader )`
+      fireflySystem.build( fireflySettings, fireflyUniforms, fireflyVert(), fireflyFrag()  );
+
+      // Optional, overwrite the `pSystem` geometry with the built particle system
+      this.particleList[ nameOfSystem ] = fireflySystem;
+    }
+  }
+
 
 
   // -- -- --
@@ -366,7 +406,6 @@ export class CampfireEnvironment extends RoomEnvironment{
     let particleSource = this.geoList['Scripted']['ParticleSource_loc'];
     let particleSourcePos = particleSource.position;
 
-
     var ambientLight = new AmbientLight( 0x101010 ); // soft white light
     this.scene.add( ambientLight );
 
@@ -404,18 +443,15 @@ export class CampfireEnvironment extends RoomEnvironment{
     // Add Billowing Smoke
     this.buildBillowSmoke( particleSourcePos );
 
-    
-    // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-    
-
     // Quick buggers zippin out of the flame-ola
     this.buildEmberWisps( particleSourcePos );
-
-    // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 
     // Floating debris in the air
     this.buildDust();
 
+    // Add lightning bugs to the background
+    this.buildFireflies();
+    
     // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 
     // Lets load in our rabbit bugger
@@ -508,7 +544,7 @@ export class CampfireEnvironment extends RoomEnvironment{
     }
 
     // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-        
+
   }
 
 
@@ -634,7 +670,7 @@ export class CampfireEnvironment extends RoomEnvironment{
     envGroundUniforms.dataDiffuse.value = this.pxlUtils.loadTexture( this.assetPath+"EnvGround_dataMask.webp", null, {'encoding':SRGBColorSpace} );
 
     envGroundUniforms.noiseTexture.value = this.cloud3dTexture;
-    envGroundUniforms.uniformNoise.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg", null, {'encoding':LinearSRGBColorSpace} );
+    envGroundUniforms.uniformNoise.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg", null, {'encoding':LinearSRGBColorSpace} );
 
     var defines = {
       'USE_MAP' : "",
@@ -689,8 +725,8 @@ export class CampfireEnvironment extends RoomEnvironment{
 
 
     campfireUniforms.noiseTexture.value = this.cloud3dTexture;
-    campfireUniforms.smoothNoiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg" );
-    campfireUniforms.webNoise.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_NCross.jpg" );
+    campfireUniforms.smoothNoiseTexture.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg" );
+    campfireUniforms.webNoise.value = this.pxlUtils.loadTexture( "Noise_NCross.jpg" );
 
 
     let campfireMtl=this.pxlFile.pxlShaderBuilder( campfireUniforms, campfireVert(), campfireFrag() );
@@ -749,18 +785,20 @@ export class CampfireEnvironment extends RoomEnvironment{
         UniformsLib[ "lights" ],
         shadowMapUniforms,
         {
+          'cloudTexture' : { type:'t', value: null },
           'noiseTexture' : { type:'t', value: null },
           'intensity' : { type: "f", value: 1.25 },
           'fogColor' : { type: "c", value: this.fogColor },
         }]
     )
 
     grassClusterUniforms.intensity.value = this.mobile ? 1.0 : 1.3; // Lower intensity for mobile devices
-    grassClusterUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.jpg", null, {'encoding':SRGBColorSpace} );
+    grassClusterUniforms.cloudTexture.value = this.cloud3dTexture;
+    grassClusterUniforms.noiseTexture.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg", null, {'encoding':SRGBColorSpace} );
 
 
     let grassMat=this.pxlFile.pxlShaderBuilder( grassClusterUniforms, grassClusterVert(hasShadowSettings), grassClusterFrag(hasShadowSettings) ); 
-    grassMat.side = FrontSide;
+    grassMat.side = DoubleSide;
     grassMat.lights = true;
     grassMat.transparent = false;
 
@@ -781,13 +819,15 @@ export class CampfireEnvironment extends RoomEnvironment{
       {
         'diffuse' : { type:'t', value: null },
         'alphaMap' : { type:'t', value: null },
+        'cloudTexture' : { type:'t', value: null },
         'noiseTexture' : { type:'t', value: null },
         'intensity' : { type: "f", value: 2.25 },
         'fogColor' : { type: "c", value: this.fogColor }
       }]
     )
     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.cloudTexture.value = this.cloud3dTexture;
+    grassCardsAUniforms.noiseTexture.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg" );
     grassCardsAUniforms.diffuse.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_diffuse.webp" );
     grassCardsAUniforms.alphaMap.value = this.pxlUtils.loadTexture( this.assetPath+"grassCardsA_mask.jpg" );
 
@@ -811,49 +851,20 @@ export class CampfireEnvironment extends RoomEnvironment{
     grassCardsFarMat.side = DoubleSide;
     grassCardsFarMat.lights = true;
     grassCardsFarMat.transparent = false;
-        
 
     // -- -- --
 
-    // -- -- -- -- -- -- -- -- -- -- -- -- --
-    // -- Grass Cluster Instances Material -- --
-    // -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 
-    let grassClusterCardsUniforms = UniformsUtils.merge(
-      [
-      UniformsLib[ "lights" ],
-      /*UniformsLib[ "shadowmap" ],*/
-      {
-        'rgbMap' : { type:'t', value: null },
-        'alphaMap' : { type:'t', value: null },
-        'intensity' : { type: "f", value: 0.85 },
-        'noiseTexture' : { type:'t', value: null },
-        'fogColor' : { type: "c", value: this.fogColor }
-      }]
-    )
-    grassClusterCardsUniforms.noiseTexture.value = this.pxlUtils.loadTexture( this.assetPath+"Noise_UniformWebbing.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,
-    }
+    // -- -- -- -- -- -- -- -- -- -- -- -- --
+    // -- -- -- -- -- -- -- -- -- -- -- -- --
+    // -- -- -- -- -- -- -- -- -- -- -- -- --
 
-    let grassFlatMat=this.pxlFile.pxlShaderBuilder( grassClusterCardsUniforms, rgbaMapVert(), rgbaMapFrag( grassLODSettings ) );
-    grassFlatMat.side = DoubleSide;
-    grassFlatMat.lights = true;
-    grassFlatMat.transparent = false;
-    //grassFlatMat.alphaTest = .5;
-    //grassFlatMat.blending = ;
-        
-    
-    // -- -- --
 
     this.materialList[ "EnvironmentGround_geo" ] = environmentGroundMat;
     this.materialList[ "CampfireFlame_geo" ] = campfireMtl;
     this.materialList[ "grassClusterA_lod0_geo" ] = grassMat;
     this.materialList[ "grassClusterA_lod1_geo" ] = grassMat;
-    this.materialList[ "grassClusterA_lod2_geo" ] = grassFlatMat;
+    this.materialList[ "grassClusterA_lod2_geo" ] = grassCardsMat;
     //this.materialList[ "mushroomA_lod0_geo" ] = grassMat;
     //this.materialList[ "mushroomA_lod1_geo" ] = grassMat;
     this.materialList[ "grassCardsA_lod0_geo" ] = grassCardsMat;

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

@@ -1,14 +1,14 @@
 Room & Environment Requirements --
 
-You're main room javascript must be named how it is used in `pxlNav.js`
+You're main room javascript must be named how it is used in `pxlNav.esm.js`
 <br/>To start you're development, use this premade room for an example structure.
 
 
 Make a back-up of the `CampfireEnvironment.js` file,
 <br/>&nbsp;&nbsp;Then start here for any modifications made in your testing.
 
 To stop pxlNav from loading this room environment,
-<br/>&nbsp;&nbsp;Change the `startingRoom` variable in `./Source/js/pxlNav.js`
+<br/>&nbsp;&nbsp;Change the `startingRoom` variable in `./src/js/pxlNav.js`
 <br/>&nbsp;&nbsp;&nbsp;&nbsp;To your desired room name -
 <br/>&nbsp;&nbsp;&nbsp;&nbsp;`const startingRoom = "CampfireEnvironment";`
 

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

@@ -28,6 +28,9 @@ import { campfireLogVert, campfireLogFrag } from "./Shaders/campfireLog.js";
 // Shader for the Grass Cluster, using a noise texture to blend areas of different grass textures --
 import { grassClusterVert, grassClusterFrag } from "./Shaders/grassCluster.js";
 
+// Add in some fireflies
+import { fireflyVert, fireflyFrag } from "./Shaders/fireflySystem.js";
+
 // -- -- --
 
 export {
@@ -37,5 +40,6 @@ export {
   envGroundVert, envGroundFrag,
   campfireVert, campfireFrag,
   campfireLogVert, campfireLogFrag,
-  grassClusterVert, grassClusterFrag
+  grassClusterVert, grassClusterFrag,
+  fireflyVert, fireflyFrag
 };

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

@@ -108,8 +108,18 @@ export function envGroundFrag(settings={}){
   };
   settings = Object.assign({}, defaultSettings, settings);
 
-  let ret=shaderHeader();
+  let ret=`
+  // Ground settings --
+    const float ShadowFlickerRate = 0.250;
+  
+  // -- -- --
+
+  `;
+  ret += shaderHeader();
   ret+=`
+  
+  // -- -- --
+  
     uniform sampler2D diffuse;
     uniform sampler2D dirtDiffuse;
     uniform sampler2D noiseTexture;
@@ -275,6 +285,9 @@ export function envGroundFrag(settings={}){
         animWarpUV = vec2(.45,  length(animWarpUV)*.04 - timer );
         vec3 animWarpCd = texture2D(uniformNoise,animWarpUV).rgb*depthFade;
         
+        animWarpUV = ( vec2( vLocalPos.xz*.01 + vec2(.235,.39) * time.x * ShadowFlickerRate ) );
+        vec3 animNoiseCd = texture2D(noiseTexture,animWarpUV).rgb ;
+
         // -- -- --
         
         // -- -- -- -- -- -- -- -- 
@@ -386,28 +399,14 @@ export function envGroundFrag(settings={}){
       #endif
         
         // -- -- --
-        
-        // -- -- -- -- -- -- -- --
-        // -- Firepit Flicker - -- --
-        // -- -- -- -- -- -- -- -- -- --
-        
-        float animWarpFit = max( animWarpCd.r, max(animWarpCd.g,animWarpCd.b) )*.8 -.2;
-        
-        // Main Pit
-        Cd.rgb += (firePitColor + firePitColor*animWarpFit) * (campfireMask*1.1-.1) * vInnerPitMask * .5 * ashMask;
-        
-        // Region around Pit and Druid Rabbit
-        Cd.rgb += (fireGlowColor + fireGlowColor*animWarpFit) * vPitMask * vPitMask * .35 * ashMask;
-        
-        // -- -- --
 
         
       `;
       if( settings.shadows ) {
         ret+=`
+        float shadowInf = 0.0;
       #if NUM_POINT_LIGHT_SHADOWS > 0
         
-        float shadowInf = 0.0;
         float detailInf = 0.0;
         float lShadow = 0.0;
 
@@ -416,17 +415,42 @@ export function envGroundFrag(settings={}){
         float shadowMixFit = max(0.0,min(1.0, shadowMix*shadowMix*.04)*1.4-.4);
         float shadowRadius = max(0.0, 1.0-shadowMixFit * ${settings.shadowReach});
         
+        float biasShift;
         for( int x = 0; x < NUM_POINT_LIGHT_SHADOWS; ++x ) {
-            lShadow = getPointShadow( pointShadowMap[0], pointLightShadows[x].shadowMapSize, pointLightShadows[x].shadowIntensity * shadowRadius, pointLightShadows[x].shadowBias+shadowMixFit*.3, pointLightShadows[x].shadowRadius+shadowMixFit*30.0, vPointShadowCoord[x], pointLightShadows[x].shadowCameraNear, pointLightShadows[x].shadowCameraFar );
+            biasShift =  animNoiseCd.x + animNoiseCd.y*animNoiseCd.z + .2;
+            biasShift = pointLightShadows[x].shadowRadius * ( animNoiseCd.x*animNoiseCd.y* biasShift + max(animNoiseCd.x,animNoiseCd.y) );
+            biasShift += shadowMixFit*5.0;
+            lShadow = getPointShadow( pointShadowMap[0], pointLightShadows[x].shadowMapSize, pointLightShadows[x].shadowIntensity * shadowRadius, pointLightShadows[x].shadowBias+shadowMixFit*.3, biasShift, vPointShadowCoord[x], pointLightShadows[x].shadowCameraNear, pointLightShadows[x].shadowCameraFar );
             shadowInf = max( lShadow, shadowInf);
         }
         shadowInf = shadowInf*.875+.125;
         Cd.rgb *= shadowInf;
       #endif
         `;
+      }else{
+        ret += `
+        float shadowInf = 1.0;
+        `;
       }
       ret += `
 
+
+        // -- -- --
+                
+        // -- -- -- -- -- -- -- --
+        // -- Firepit Flicker - -- --
+        // -- -- -- -- -- -- -- -- -- --
+
+        float animWarpFit = max( animWarpCd.r, max(animWarpCd.g,animWarpCd.b) )*.8 -.2;
+
+        // Main Pit
+        Cd.rgb += (firePitColor + firePitColor*animWarpFit) * (campfireMask*1.1-.1) * vInnerPitMask * .5 * ashMask * shadowInf;
+
+        // Region around Pit and Druid Rabbit
+        Cd.rgb += (fireGlowColor + fireGlowColor*animWarpFit) * vPitMask * vPitMask * .35 * ashMask * shadowInf;
+
+
+
         // -- -- -- -- -- -- -- -- -- -- -- --
         // -- Final shading and fog color - -- --
         // -- -- -- -- -- -- -- -- -- -- -- -- -- --