Hoodoos and Attribution Error Blog Entry

-Left and Right Hoodoos are linked to NDC, relative camera-screen space, so they always stay to the sides of the screen.
-Attribution Error blog post on AI Notes & Research

Author: ProcStack

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

@@ -41,7 +41,8 @@ import { RoomEnvironment, pxlEffects } from "pxlNav";
 
 import { rabbitDruidVert, rabbitDruidFrag,
          envGroundVert, envGroundFrag,
-         salioaPlantVert, salioaPlantFrag
+         salioaPlantVert, salioaPlantFrag,
+         hoodooVert, hoodooFrag
  } from "./Shaders.js";
 
 const FloatingDust = pxlEffects.pxlParticles.FloatingDust;
@@ -104,6 +105,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     this.inspectDuration = 1.5;
     this.inspectInitialTransition = 0;
 
+    this.initialHoodooSet = false;
 
     this.touchMouseData={
       'active':false,
@@ -131,11 +133,11 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
         ndcPosition: null
       },
       'leftHoodooPosition': {
-        basePosition: new Vector3( -.9, 0.5, 200 ),
+        basePosition: new Vector3( -.83, 0.47, 165 ),
         ndcPosition: null
       },
       'rightHoodooPosition': {
-        basePosition: new Vector3( .9, 0.5, 200 ),
+        basePosition: new Vector3( .73, 0.47, 165 ),
         ndcPosition: null
       },
     };
@@ -199,6 +201,15 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     coreCanvas.addEventListener("mouseup", (e)=>{ this.mapOnUp(e); }, false);
 
     setTimeout(()=>{ this.setCameraSpaceNDC(); }, 0);
+
+    if( !this.initialHoodooSet ){
+      setTimeout(() => {
+        this.updateHoodooPositions();
+        this.geoList["Scripted"]["Hoodoo_Left_geo"].updateMatrix();
+        this.geoList["Scripted"]["Hoodoo_Right_geo"].updateMatrix();
+      }, 10 );
+      this.initialHoodooSet = true;
+    }
   }
 
   stop(){
@@ -304,6 +315,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
 
   mapOnDown(e){
     //let target= e.path ? e.path[0] : e.target; // Chrome or Firefox
+    if ( !this.inspectToMode ) return false;
     if( this.pxlTimer.active ){
       this.touchMouseData.button=e.which;
       this.touchMouseData.active=true;
@@ -319,6 +331,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     }
   }
   mapOnMove(e){
+    if ( !this.inspectToMode ) return false;
     if( this.pxlTimer.active || this.pxlDevice.cursorLockActive){
       this.pxlDevice.getMouseXY(e);
       if((this.touchMouseData.active || this.pxlDevice.cursorLockActive) && this.touchMouseData.startPos ){
@@ -332,6 +345,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     }
   }
   mapOnUp(e){
+    if ( !this.inspectToMode ) return false;
 
     this.touchMouseData.dragCount++;
     this.touchMouseData.dragTotal+=this.touchMouseData.dragCount;
@@ -413,6 +427,21 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     curMesh.morphTargetInfluences[0] = this.eyeBlinkInf.x;
   }
 
+  // -- -- --
+
+  updateHoodooPositions(){
+    if( this.geoList["Scripted"]?.hasOwnProperty( "Hoodoo_Left_geo" ) && this.ndcPositions.leftHoodooPosition.ndcPosition ){
+      let locPos = this.ndcPositions.leftHoodooPosition.ndcPosition.clone();
+      this.geoList["Scripted"]["Hoodoo_Left_geo"].position.copy( locPos );
+      this.geoList["Scripted"]["Hoodoo_Left_geo"].updateMatrix();
+    }
+    if( this.geoList["Scripted"]?.hasOwnProperty( "Hoodoo_Right_geo" ) && this.ndcPositions.rightHoodooPosition.ndcPosition ){
+      let locPos = this.ndcPositions.rightHoodooPosition.ndcPosition.clone();
+      this.geoList["Scripted"]["Hoodoo_Right_geo"].position.copy( locPos );
+      this.geoList["Scripted"]["Hoodoo_Right_geo"].updateMatrix();
+    }
+  }
+
   // -- -- --
 
     prepInspectMode( curMesh ){
@@ -537,6 +566,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     if( this.inspectToMode && this.inspectController && this.ndcPositions.inspectorPosition.ndcPosition ){
       setTimeout(()=>{
         this.inspectController.position.copy( this.ndcPositions.inspectorPosition.ndcPosition );
+        this.updateHoodooPositions();
       });
     }
     super.resize( sw, sh );
@@ -617,6 +647,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
       }
     }
 
+
     // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 
     // TODO : This needs to not be needed --
@@ -737,6 +768,40 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     envGroundUniforms.noiseTexture.value = this.pxlUtils.loadTexture( "Noise_UniformWebbing.jpg" );
     envGroundUniforms.smoothNoiseTexture.value = this.pxlUtils.loadTexture( "Noise_Soft3d.jpg", null, textureOptionsRepeat );
 
+    // -- -- --
+    
+    let hoodooLeftUniforms = UniformsUtils.merge(
+      [
+        UniformsLib[ "lights" ],
+        {
+          'cloudTexture' : { type:'t', value: this.cloud3dTexture },
+          'fogColor' : { type: "c", value: this.fogColor },
+        }]
+      )
+      let hoodooLeftMtl=this.pxlFile.pxlShaderBuilder( hoodooLeftUniforms, hoodooVert(), hoodooFrag() );
+      hoodooLeftMtl.lights= true;
+      
+      this.materialList[ "Hoodoo_Left_geo" ]=hoodooLeftMtl;
+      
+    // -- -- --
+
+    let hoodooRightUniforms = UniformsUtils.merge(
+      [
+        UniformsLib[ "lights" ],
+        {
+          'cloudTexture' : { type:'t', value: this.cloud3dTexture },
+          'fogColor' : { type: "c", value: this.fogColor },
+        }]
+      )
+      let hoodooRightMtl=this.pxlFile.pxlShaderBuilder( hoodooRightUniforms, hoodooVert(), hoodooFrag() );
+      hoodooRightMtl.lights= true;
+      
+      this.materialList[ "Hoodoo_Right_geo" ]=hoodooRightMtl;
+      
+
+
+
+      
     // No need for normal maps on mobile
     //   Just wasted resources with little pay off
     let enableNormalMap = !this.mobile;

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

@@ -3,13 +3,15 @@
 import {envGroundVert, envGroundFrag} from "./Shaders/envGround.js";
 import {rabbitDruidVert, rabbitDruidFrag} from "./Shaders/rabbitDruid.js";
 import {salioaPlantVert, salioaPlantFrag} from "./Shaders/salioaPlant.js";
+import {hoodooVert, hoodooFrag} from "./Shaders/hoodoo.js";
 
 // -- -- -- -- -- -- -- -- -- -- -- //
 
 export {
   envGroundVert, envGroundFrag,
   rabbitDruidVert, rabbitDruidFrag,
-  salioaPlantVert, salioaPlantFrag
+  salioaPlantVert, salioaPlantFrag,
+  hoodooVert, hoodooFrag
 };
 
 

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

@@ -0,0 +1,123 @@
+// This is the shader for the crystals stickin out of the water
+//   I wasn't sure what to make for a "plant" in a salty environment
+//     With a little mysticism goin on
+// I should call it a `Salioa Cluster`
+//   But I gotta rename this "salt flats" environment anyway hahaha
+
+import { pxlShaders }  from "pxlNav";
+const shaderHeader = pxlShaders.core.shaderHeader;
+
+
+export function hoodooVert(){
+  let ret=shaderHeader();
+  ret+=`
+    attribute vec4 color;
+
+    varying vec2 vUv;
+    varying vec3 vPos;
+    varying vec3 vWorldPos;
+    varying vec3 vLocalPos;
+    varying vec3 vN;
+    varying vec3 vLocalN;
+    varying vec3 vCd;
+    varying float vAlphaAdd;
+    
+    void main(){
+        vUv=uv;
+        vCd=color.rgb;
+        
+        vAlphaAdd = max(0.0, position.y);
+        vAlphaAdd = min(1.0, vAlphaAdd*vAlphaAdd*.035 + max(0.0,1.0-vAlphaAdd*1.3 ) );
+        vCd.g = 1.0-vCd.g;
+        
+        vLocalPos = position;
+        vN = (modelViewMatrix * vec4(normal, 0.0)).xyz;
+        vLocalN =  normal;
+
+        // Shift position to Instance position-
+        vec4 pos = vec4( position, 1.0 );
+        vPos = pos.xyz;
+
+        vec4 mvPos=modelViewMatrix * pos;
+        gl_Position = projectionMatrix*mvPos;
+        vWorldPos = gl_Position.xyz;
+        
+        
+    }`;
+  return ret;
+}
+
+export function hoodooFrag(){
+  let ret=shaderHeader();
+  ret+=`
+    uniform sampler2D diffuse;
+    uniform sampler2D noiseTexture;
+    uniform sampler2D cloudTexture;
+        
+    uniform vec2 time;
+    uniform vec3 fogColor;
+     
+    varying vec2 vUv;
+    varying vec3 vWorldPos;
+    varying vec3 vPos;
+    varying vec3 vN;
+    varying vec3 vLocalN;
+    varying vec3 vCd;
+    varying float vAlphaAdd;
+    
+    
+    struct DirLight {
+      vec3 color;
+      vec3 direction;
+    };
+
+    #if NUM_DIR_LIGHTS > 0
+      uniform DirLight directionalLights[NUM_DIR_LIGHTS];
+    #endif
+    
+    void main(){
+        float timer = time.x*.01;
+        vec3 pos = vPos*0.006666666666666; // Loop point is 150 units
+        vec2 uv = vUv;
+        float depth = min(1.0, gl_FragCoord.z / gl_FragCoord.w * .0035 );
+        float depthFade = max(0.0, min(1.0, 1.1-depth ));
+        depthFade *= depthFade*depthFade;
+        
+        
+        // Initial color read
+        vec4 Cd = texture2D(diffuse,vUv);
+        
+        vec2 nUv = fract( vec2( (pos.x*2.+pos.z*1.5 + timer )*(1.0+ vCd.g*2.5) , pos.y*vCd.g ) );
+        float nCd = texture2D(noiseTexture,nUv).r;
+        
+        
+        // -- -- -- -- -- -- -- --
+        // -- Direction Lights  -- --
+        // -- -- -- -- -- -- -- -- -- --
+
+        vec3 lights = vec3(0.0, 0.0, 0.0);
+        #if NUM_DIR_LIGHTS > 0
+
+          for(int x = 0; x < NUM_DIR_LIGHTS; ++x) {
+            vec3 lightInf= ( max(0.0, dot(normalize(directionalLights[x].direction+nCd*.65), reflect( normalize(vPos), vN ) ))) * directionalLights[x].color;
+            lights += lightInf;
+          }
+          
+          lights = lights*(((1.0-vCd.g-vCd.r)*.5+.5)+ .5);
+        #endif
+        
+        lights = mix( vec3(0.0), lights, max( 0.0, nCd*vCd.g*.75 + vCd.r*.5 ) );
+        
+        // Add blue lighting around some of the crystals
+        lights += vec3( 0.3038, 0.3643, 0.679 ) * ( nCd*.2+.2  );
+        
+        
+        
+        Cd.rgb += Cd.rgb * lights * (depthFade*.5+.5) ;
+        
+        Cd.a = 1.0;
+        
+        gl_FragColor=Cd;
+    }`;
+  return ret;
+}