Skip to content

ChangeLog.md

Latest commit

 

History

History
232 lines (174 loc) · 10.4 KB

ChangeLog.md

File metadata and controls

232 lines (174 loc) · 10.4 KB

pxlNav Change Log :: 0.0.28 - 1.0.0

React.js project futher implemented!
Major version reached! v1.0.0 baby!

For 0.0.27 - 0.0.28 see below vvv

This milestone marks the addition of React and Next support for pxlNav.
Before now it was purely written as an ESM module,
The separation of ESM and CJS was a bit bothersome, especially for someone who doesn't know React or Next


I just know JavaScript
I'm an environment kitty, not a framework kitty

Major Changes

  • pxlNav now loads as a component and attempts to draw to screen in React & NextJS
  • pxlNav Types and Component files added; JSX & TS with D-Types
  • pxlNav is still formatted in ESM, and intended to be ran in Native JS as a Module for better dynamic loading of rooms.
  • GLTF/GLB Rooms are now supported; Supported scene files - FBX, GLTF, GLB

All Changes

Please note, if you are using pxlNav in React or NextJS,
Put room JS files in ./src/pxlRooms/ROOM_NAME
Put room assets in ./public/pxlRooms/ROOM_NAME/Assets

JSX & TypeScript notes


pxlNav is still formatted in ESM. I still intend for dynamic loads to be a primary strength of pxlNav to recieve server requests to load files on the fly from the server. Building for React/Next requires all script files are known and compiled together. This restricts the dynamicality of pxlNav, and some of the main reasons it was written outside of React to begin with.
If you don't need server derived loads, this doesn't pertain to you.
At that point, you'd already find what rooms are available on initial load, auth verification.

To run pxlNav in React or Next, you must agregate the room scene files before the site is compiled.
So if you get a server request to load a new, unknown, room, React will inform you the scene files can't be loaded.
Warning you that script files can't be loaded from outside of the module.

I'll do my best to test React & Next builds of pxlNav are stable with all core functionality
But please submit any bugs as issues on github should you come across 'em.

pxlNav Change Log :: 0.0.27 - 0.0.28

NOTE -

React.js & Next.js support in ./src/react-next-dev is initial pass of pxlNav as a component;
These are in development and will be moved to ./examples when working

Major Changes

  • FileIO.js no longer auto applying diffuse map to emissive map

  • pxlNav.js has two new callbacks you can listen to, step & render-prep

  • FileIO.js instances use normal of instance-to-mesh, up = cross( (0,1,0), normal )

  • FileIO.js + Room Environment has mesh-to-particle support set in FBX using the pSystem (bool) custom attribute

All Changes

  • FileIO.js split loadRoomFBX() into loadPath(), loadRoom(), loadRoomGLTF(), and loadRoomFile()
       - loadRoomFile() performs all mesh + object checks in the scene file
       - loadRoom() checks file extention and runs either loadRoomFBX() or loadRoomGLTF()
       - loadPath() takes a file path and runs loadRoom()

  • FileIO.js all room loading functions take a settings[object] now, to aid with backwards compatability in the future

  • FileIO.js now has setLogging( bool ), getSettings(), & readSettings()
       - meshIsChild (default false) is used when your GLB is optimized to split mesh + transforms, where the child of the named transform is the geometry itself.
         - Not all GLB's have split mesh + transforms by default, and would be a manual step in asset development.
           If you aren't manually optimizing your GLB, then leave this false
       - getSettings() returns -

  let settingsObj = {
    'fileType' : this.pxlEnums.FILE_TYPE.AUTO,
    'filePath' : '',
    'meshKey' : '',
    'meshIsChild' : false, 
    'enableLogging' : false
  };


   - Can be used -

  let loadSettings = Option.assign( {}, this.pxlFile.getSettings() );
  loadSettings['filePath'] = this.sceneFile;
  loadSettings['enableLogging'] = true;
  let fieldFbxLoader = this.pxlFile.loadRoom( this, loadSettings );

  // -- or file specific --

  // `fileType` is optional, default is `AUTO` 
  let loadSettings = {
    'filePath' : this.assetPath + "OutletEnvironment.glb",
    'fileType' : this.pxlEnums.FILE_TYPE.GLB,
    'meshIsChild' : true, 
    'enableLogging' : true
  };

  let fieldFbxLoader = this.pxlFile.loadRoomGLB( this, loadSettings );
  • FileIO.js removed enableLogging from the list of args to pass to loadRoomFBX
  • FileIO.js added GLTF + GLB support
       - Use this.pxlFile.loadRoomGLB
       - Or you can use this.pxlFile.loadRoom no matter your file type
    let loadSettings = Object.assign( {}, this.pxlFile.getSettings() );
    loadSettings['fileType'] = this.pxlEnums.FILE_TYPE.GLB; // Optional; Default is 'AUTO'
    loadSettings['filePath'] = this.assetPath+"OutletEnvironment.glb";
    loadSettings['meshIsChild'] = true; // If your GLB has been "optimized" to split transforms & meshes
    loadSettings['enableLogging'] = true;

		let fieldFbxLoader = this.pxlFile.loadRoom( this, loadSettings );

  • FileIO.js instances use normal of instance-to-mesh, up = cross( (0,1,0), normal )
       - Up isn't imported or exported by default in Three / CGI programs
       - If no normals, a random vector * ( 1, 0, 1 ) is calculated

  • package.json prepping the repo for the Next.js + React.js projects to be added

  • pxlNav.js + Environment.js were never reaching load state for pxlRoom module
       - Attempt to catch errors & check for methods added mostly to Environment.js

  • Device.js catches failed promises / rejections; global catch for missed erroneous Promises / Async
       - May error twice, but shouldn't error in the first place; saving potential heart ache.
         Testing to be had still... unit test failed promises

  • pxlNav.js has two new callbacks you can listen to, step & render-prep
       - step runs every frame, will return -
  event = {
      'time': #.# - Time since pxlNav started in seconds
      'delta': #.# - Time since last `step()`,
    }


   - render-prep fires after shaders & animations update, but before the room step() -

  event = {
      'time': this.pxlTimer.runtime
    }

  • File.js no longer auto applying diffuse map to emissive map
       - Was applying the diffuse map to emissive to quickly make objects brighter, but that was implemented for Antib0dy.Club, which didn't need shadows. Now it's hindering shadow influence. So it's been removed.

  • File.js + room env materialList items can store more mesh options on *material*.meshSetting={}
       - castShadow, receiveShadow, frontSided, & doubleSided as booleans
       - frontSided true is 'front', false is 'back'
       - doubleSided true is 'double' sided, false is 'front'

  • FileIO.js + Room Environment has mesh-to-particle support set in FBX using the pSystem (bool) custom attribute
       - This will parse a geometry object to a buffer object of merged verticies
       - Access it from your Room --

import { fireflyVert, fireflyFrag } from "./Shaders.js";

// 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(){
  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 ) }
      };
    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;
  }
}

  • particles.js now exporting ParticleBase

  • ParticleBase.js default behavior expects Uniform, Vertex, Fragment shaders + BufferGoemetry to use as the vertex locations to convert vertices to particles.

  • EmberWisps.js + Smoke.js particle systems now use shaderSettings.offsetPos [Vector3], only Smoke was using offsetPos.xz
       - Applied after all animation positioning calculated --

  vec4 mvPos = modelViewMatrix * vec4( animatedPosition + offsetPos, 1.0 );

  • FloatingDust.js clamps alpha after multiplying FloatingDust.getSettings()['pOpacity'] into the frag

  • shaders.js + pxlParticles now export a settings objects that holds all the possible settings per Particle effect

 emberWispsSettings, emberWispsVert, emberWispsFrag,
 dustSettings, dustVert, dustFrag
 heightMapSettings, heightMapVert, heightMapFrag
 smokeSettings, smokeVert, smokeFrag
 snowSettings, snowFallVert, snowFallFrag
  • pxlNavBridge.js + pxlNavContainer.jsx first passes added to allow for React & Next usage with pxlNav
       - First pass added, to be updated for v0.0.29