Skip to content

Commit 503e85e

Browse files
ProcStackProcStack
committed
Added Launcher Options
You can now assign shadow map biasing, sky haze type, and loader phrases from the PXLNAV_OPTIONS object to pass to `new pxlNav()`
1 parent 34f915a commit 503e85e

File tree

20 files changed

+593
-5573
lines changed

20 files changed

+593
-5573
lines changed

‎Build/pxlNav.min.js‎

Lines changed: 113 additions & 110 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Build/pxlRooms/CampfireEnvironment/CampfireEnvironment.js‎

Lines changed: 29 additions & 29 deletions
Large diffs are not rendered by default.

‎Build/pxlRooms/FieldEnvironment/FieldEnvironment.js‎

Lines changed: 7 additions & 7 deletions
Large diffs are not rendered by default.

‎Build/pxlRooms/SaltFlatsEnvironment/SaltFlatsEnvironment.js‎

Lines changed: 24 additions & 24 deletions
Large diffs are not rendered by default.

‎Build/pxlRooms/VoidEnvironment/VoidEnvironment.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import*as e from"../../../Source/js/libs/three/three.module.js";function s(){return`
1+
import*as e from"../../three.module.js";function s(){return`
22
#ifdef GL_FRAGMENT_PRECISION_HIGH
33
precision highp float;
44
#else

‎Public/js/ProckStackGitio.js‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,15 @@
99
// For `pxlNav` scripting, the entry-point is `./Source/js/pxlNavCore.js`
1010
//
1111

12-
import { pxlNav, pxlNavVersion, VERBOSE_LEVEL, PXLNAV_OPTIONS, ANTI_ALIASING } from './pxlNav.js';
12+
import { pxlNav, pxlNavVersion, pxlEnums, PXLNAV_OPTIONS } from './pxlNav.js';
1313
import { ProcPages } from './ProcPages.js';
1414
import { BlogManager } from './BlogManager.js';
1515

1616

1717
// Console logging level
1818
// Options are - NONE, ERROR, WARN, INFO
19-
const verbose = VERBOSE_LEVEL.ERROR;
19+
const verbose = pxlEnums.VERBOSE_LEVEL.ERROR;
2020

21-
// Anti-aliasing level
22-
// Options are - NONE, LOW, MEDIUM, HIGH
23-
const antiAliasing = ANTI_ALIASING.LOW;
24-
25-
// Set camera to static Camera Positions
26-
// Locations pulled from the 'Camera' group in the pxlRoom's FBX file
27-
const enableStaticCamera = true;
2821

2922
// The Title of your Project
3023
// This will be displayed on the
@@ -37,10 +30,47 @@ const pxlRoomRootPath = "../pxlRooms";
3730
const startingRoom = "CampfireEnvironment";
3831
const bootRoomList = ["CampfireEnvironment", "SaltFlatsEnvironment"];
3932

33+
// -- -- --
34+
35+
// Set or Update the loader message
36+
// This will appear under the loader bar on the first screen
37+
const loaderPhrases = [
38+
"...chasing the bats from the belfry...",
39+
"...shuffling the deck...",
40+
"...checking the air pressure...",
41+
"...winding the clock...",
42+
"...tuning the strings...",
43+
"...ringing the quartz...",
44+
"...crashing the glasses...",
45+
"...sharpening the pencils...",
46+
];
47+
48+
// -- -- --
49+
50+
// Anti-aliasing level
51+
// Options are - NONE, LOW, MEDIUM, HIGH
52+
const antiAliasing = pxlEnums.ANTI_ALIASING.LOW;
53+
54+
// Shadow edge softness
55+
// Options are - OFF, BASIC, SOFT
56+
// *Mobile devices are limited to `OFF` or `BASIC` automatically
57+
const shadowMapBiasing = pxlEnums.SHADOW_MAP.SOFT;
58+
59+
// Set camera to static Camera Positions
60+
// Locations pulled from the 'Camera' group in the pxlRoom's FBX file
61+
const enableStaticCamera = true;
62+
63+
// Visual effect for the sky
64+
// Options are - OFF, VAPOR
65+
const skyHaze = pxlEnums.SKY_HAZE.OFF;
66+
67+
68+
4069

4170
// -- -- -- -- --
4271

4372
// Create the main page manager
73+
// - Not related to pxlNav -
4474
const procPages = new ProcPages();
4575
procPages.init();
4676
procPages.setPxlNavVersion(pxlNavVersion);
@@ -49,9 +79,10 @@ if (window.location.hash !== "#Blog") {
4979
procPages.hidePage("Blog");
5080
}
5181

82+
// -- -- --
5283

53-
// -- -- -- -- --
54-
84+
// Build procstack.github.io blog entries
85+
// - Not related to pxlNav -
5586
var blogEntryListing = document.getElementById('blogEntryListing');
5687
var blogEntryContent = document.getElementById('blogEntryContent');
5788
const procBlog = new BlogManager( blogEntryListing, blogEntryContent );
@@ -67,27 +98,13 @@ pxlNavOptions.verbose = verbose;
6798
pxlNavOptions.antiAliasing = antiAliasing;
6899
pxlNavOptions.staticCamera = enableStaticCamera;
69100
pxlNavOptions.pxlRoomRoot = pxlRoomRootPath;
101+
pxlNavOptions.skyHaze = skyHaze;
102+
pxlNavOptions.shadowMapBiasing = shadowMapBiasing;
103+
pxlNavOptions.loaderPhrases = loaderPhrases;
70104

71105
// Create the pxlNav environment manager
72106
const pxlNavEnv = new pxlNav( pxlNavOptions, projectTitle, procPages.curRoom, bootRoomList );
73107

74-
// -- -- -- -- --
75-
76-
77-
// Set or Update the loader message
78-
// This will appear under the loader bar on the first screen
79-
const loaderPhrases = [
80-
"...chasing the bats from the belfry...",
81-
"...shuffling the deck...",
82-
"...checking the air pressure...",
83-
"...winding the clock...",
84-
"...tuning the strings...",
85-
"...ringing the quartz...",
86-
"...crashing the glasses...",
87-
"...sharpening the pencils...",
88-
];
89-
90-
pxlNavEnv.setLoaderPhrases( loaderPhrases );
91108

92109

93110

‎Public/js/pxlNavLoader_basic.js‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,15 @@
99
// For `pxlNav` scripting, the entry-point is `./Source/js/pxlNavCore.js`
1010
//
1111

12-
import { pxlNav, pxlNavVersion, VERBOSE_LEVEL, PXLNAV_OPTIONS, ANTI_ALIASING } from './pxlNav.js';
12+
import { pxlNav, pxlNavVersion, pxlEnums, PXLNAV_OPTIONS } from './pxlNav.js';
1313

1414

1515
// Console logging level
1616
// Options are - NONE, ERROR, WARN, INFO
17-
const verbose = VERBOSE_LEVEL.INFO;
18-
19-
// Anti-aliasing level
20-
// Options are - NONE, LOW, MEDIUM, HIGH
21-
const antiAliasing = ANTI_ALIASING.LOW;
17+
const verbose = pxlEnums.VERBOSE_LEVEL.INFO;
2218

2319
// The Title of your Project
24-
// This will be displayed on the
20+
// This will be displayed on the load bar
2521
const projectTitle = "pxlNav : Field Env.";
2622

2723
// pxlRoom folder path, available to change folder names or locations if desired
@@ -31,8 +27,10 @@ const pxlRoomRootPath = "../pxlRooms";
3127
const bootRoomList = ["FieldEnvironment", "VoidEnvironment"];
3228
const startingRoom = bootRoomList[0];
3329

30+
// -- -- --
3431

35-
// This will appear under the loader bar on the first screen
32+
// Set a list of phrases to display during the loading process
33+
// The loader with randomly pick a phrase from the list
3634
const loaderPhrases = [
3735
"...chasing the bats from the belfry...",
3836
"...shuffling the deck...",
@@ -44,12 +42,36 @@ const loaderPhrases = [
4442
"...sharpening the pencils...",
4543
];
4644

45+
// -- -- --
46+
47+
// Anti-aliasing level
48+
// Options are - NONE, LOW, MEDIUM, HIGH
49+
const antiAliasing = pxlEnums.ANTI_ALIASING.LOW;
50+
51+
// Shadow + Edge softness
52+
// Default is `BASIC` - a simple shadow edge
53+
// Options are - OFF, BASIC, SOFT
54+
// *Mobile devices are limited to `OFF` or `BASIC` automatically
55+
const shadowMapBiasing = pxlEnums.SHADOW_MAP.SOFT;
56+
57+
// Set camera to static Camera Positions
58+
// Locations pulled from the 'Camera' group in the pxlRoom's FBX file
59+
// Default is `false`
60+
const enableStaticCamera = false;
61+
62+
// Visual effect for the sky
63+
// Default is `OFF`
64+
// Options are - OFF, VAPOR
65+
const skyHaze = pxlEnums.SKY_HAZE.VAPOR;
66+
4767

4868

4969
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
5070
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
5171
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
5272

73+
74+
5375
// -- Below are the initialization and event handling for pxlNav
5476
// -- No need to edit the below code unless you're adding custom event handling
5577

@@ -59,15 +81,16 @@ let pxlNavOptions = Object.assign({},PXLNAV_OPTIONS);
5981
pxlNavOptions.verbose = verbose;
6082
pxlNavOptions.antiAliasing = antiAliasing;
6183
pxlNavOptions.pxlRoomRoot = pxlRoomRootPath;
84+
pxlNavOptions.staticCamera = enableStaticCamera;
85+
pxlNavOptions.skyHaze = skyHaze;
86+
pxlNavOptions.shadowMapBiasing = shadowMapBiasing;
87+
pxlNavOptions.loaderPhrases = loaderPhrases;
88+
6289

6390

6491
// Create the pxlNav environment manager
6592
const pxlNavEnv = new pxlNav( pxlNavOptions, projectTitle, startingRoom, bootRoomList );
6693

67-
// -- -- --
68-
69-
// Set or Update the loader message
70-
pxlNavEnv.setLoaderPhrases( loaderPhrases );
7194

7295
// -- -- --
7396

‎Source/js/pxlNav.js‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
//
22
// Core pxlNav Engine
3-
export const pxlNavVersion = "0.0.15";
3+
export const pxlNavVersion = "0.0.16";
44
// Written by Kevin Edzenga 2020;2024
55

66
// -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
@@ -45,8 +45,8 @@ export const pxlNavVersion = "0.0.15";
4545
import * as THREE from './libs/three/three.module.js';
4646
import * as PxlBase from './pxlNav/pxlBase.js';
4747
import { pxlShaders } from './pxlNav/shaders/shaders.js';
48-
import { VERBOSE_LEVEL, PXLNAV_OPTIONS, ANTI_ALIASING } from './pxlNav/core/Types.js';
49-
export { VERBOSE_LEVEL, PXLNAV_OPTIONS, ANTI_ALIASING };
48+
import { pxlEnums, PXLNAV_OPTIONS } from './pxlNav/core/Types.js';
49+
export { pxlEnums, PXLNAV_OPTIONS };
5050

5151

5252
const pxlCore = "pxlNav-coreCanvas"; // Name of DIV in Index
@@ -75,7 +75,7 @@ var sH = window.innerHeight;
7575
* @param {string[]} roomBootList - A list of rooms to load
7676
* @example
7777
* // Initialize the pxlNav environment
78-
* const pxlNavEnv = new pxlNav( VERBOSE_LEVEL.ERROR || 2, "My Crunkle Dunk Project", "./pxlRooms", "CampfireEnvironment", ["CampfireEnvironment", "SaltFlatsEnvironment"] );
78+
* const pxlNavEnv = new pxlNav( pxlEnums.VERBOSE_LEVEL.ERROR || 2, "My Crunkle Dunk Project", "./pxlRooms", "CampfireEnvironment", ["CampfireEnvironment", "SaltFlatsEnvironment"] );
7979
* @returns {pxlNav} - The pxlNav environment object
8080
* @example
8181
* // Subscribe to events emitted from pxlNav for callback handling
@@ -228,6 +228,10 @@ export class pxlNav{
228228
this.pxlGuiDraws.setDependencies( this );
229229

230230
this.pxlGuiDraws.prepLoader();
231+
if( !this.options.hasOwnProperty("loaderPhrases") ){
232+
this.options["loaderPhrases"] = ['...loading the pixels...'];
233+
}
234+
this.pxlGuiDraws.setLoaderPhrases( this.options["loaderPhrases"] );
231235

232236
this.pxlQuality.init() // Load cookies and update settings
233237
}
@@ -257,6 +261,7 @@ export class pxlNav{
257261
// -- -- --
258262

259263
init(){
264+
this.pxlTimer.init();
260265

261266
this.pxlEnv.boot(); // Environment Asset Prep
262267
this.pxlQuality.startBenchmark(); // Start benchmark timer
@@ -283,15 +288,15 @@ export class pxlNav{
283288
this.pxlDevice.setCursor("grab");
284289
})
285290
.catch( (err)=>{
286-
if( this.verbose > VERBOSE_LEVEL.NONE ){
291+
if( this.verbose > pxlEnums.VERBOSE_LEVEL.NONE ){
287292
console.error("Error in pxlNavCore.init(); Load level - ", err);
288293
console.error(err);
289294
}
290295
})
291296
.finally( ()=>{
292-
if( this.verbose > VERBOSE_LEVEL.ERROR ){
293-
console.log("pxlNavCore Room Build Promise-Chain Completed; ", this.loadPercent);
294-
console.log(" -- Starting pxlNav in Room `"+this.pxlEnv.bootRoom+"`");
297+
if( this.verbose > pxlEnums.VERBOSE_LEVEL.ERROR ){
298+
console.log("'pxlNavCore' Room Build Promise-Chain Completed; ", this.loadPercent);
299+
console.log("-- Starting pxlNav in Room `"+this.pxlEnv.bootRoom+"`");
295300
}
296301
this.start();
297302
});
@@ -402,14 +407,14 @@ export class pxlNav{
402407
this.pxlEnv.engine.debug.checkShaderErrors=true;
403408
//%
404409

405-
if( this.verbose >= VERBOSE_LEVEL.INFO ){
410+
if( this.verbose >= pxlEnums.VERBOSE_LEVEL.INFO ){
406411
if(this.pxlEnv.engine.extensions.get('WEBGL_depth_texture')){
407412
console.log(" ** WebGL Depth Texture support enabled **");
408413
}else{
409414
console.log(" ** WebGL Depth Texture NOT supported **");
410415
}
411-
console.log("-- Depth Composer pass currently not used, --");
412-
console.log(" -- A future technology for Metal Asylum --");
416+
console.log("-- Depth Composer pass currently not enabled; --");
417+
console.log("-- Switching to World-Space Shader pass --");
413418
}
414419
let bgCd=0x000000;
415420
let bgCdHex="#000000";
@@ -423,11 +428,12 @@ export class pxlNav{
423428
//this.pxlEnv.engine.outputEncoding=THREE.sRGBEncoding;
424429
this.pxlEnv.engine.outputEncoding=THREE.GammaEncoding;
425430

426-
this.pxlEnv.engine.shadowMap.enabled=true;
427-
this.pxlEnv.engine.shadowMap.type=THREE.BasicShadowMap;
428-
this.pxlEnv.engine.shadowMap.type=THREE.PCFScatterShadowMap;
429-
//THREE.PCFScatterShadowMap;//PCFShadowMap;//PCFSoftShadowMap;
430-
//this.pxlEnv.engine.shadowMap.type=THREE.PCFSoftShadowMap;
431+
if(this.options.shadowMapBiasing == pxlEnums.SHADOW_MAP.OFF){
432+
this.pxlEnv.engine.shadowMap.enabled=false;
433+
}else{
434+
this.pxlEnv.engine.shadowMap.enabled=true;
435+
this.pxlEnv.engine.shadowMap.type=THREE.BasicShadowMap;
436+
}
431437

432438

433439
// Build render targets for depth and world space reference
@@ -561,12 +567,16 @@ export class pxlNav{
561567
// -- LIGHTS -- -- -- -- -- -- -- -- -- -- -- -- //
562568
///////////////////////////////////////////////////
563569
//Shadow Maps-
564-
this.pxlEnv.engine.shadowMap.enabled=true;
565-
if(this.mobile){
566-
this.pxlEnv.engine.shadowMap.type=THREE.BasicShadowMap;
570+
if(this.options.shadowMapBiasing == pxlEnums.SHADOW_MAP.OFF){
571+
this.pxlEnv.engine.shadowMap.enabled=false;
567572
}else{
568-
this.pxlEnv.engine.shadowMap.type=THREE.PCFSoftShadowMap;
569-
//this.pxlEnv.engine.shadowMap.type=THREE.PCFSoftShadowMap;
573+
this.pxlEnv.engine.shadowMap.enabled=true;
574+
if(this.options.shadowMapBiasing == pxlEnums.SHADOW_MAP.BASIC || this.mobile){
575+
this.pxlEnv.engine.shadowMap.type=THREE.BasicShadowMap;
576+
}else if(this.options.shadowMapBiasing == pxlEnums.SHADOW_MAP.SOFT){
577+
this.pxlEnv.engine.shadowMap.type=THREE.PCFSoftShadowMap;
578+
//this.pxlEnv.engine.shadowMap.type=THREE.PCFSoftShadowMap;
579+
}
570580
}
571581

572582
// Every light is another frag level dot to matrix calculation

‎Source/js/pxlNav/core/FileIO.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export class FileIO{
1818
this.pxlAnim=null;
1919
this.pxlDevice=null;
2020
this.pxlShaders=null;
21+
22+
this.options={};
2123

2224
// Turn on Verbose Logging to Javascript Console
2325
this.runDebugger = false;
@@ -42,6 +44,7 @@ export class FileIO{
4244
this.pxlAnim=pxlNav.pxlAnim;
4345
this.pxlDevice=pxlNav.pxlDevice;
4446
this.pxlShaders=pxlNav.pxlShaders;
47+
this.options=pxlNav.options;
4548
}
4649

4750
log(...logger){
@@ -1195,7 +1198,7 @@ export class FileIO{
11951198
resUV: { value: this.pxlDevice.screenRes },
11961199
},
11971200
vertexShader:this.pxlShaders.scene.skyObjectVert(),
1198-
fragmentShader:this.pxlShaders.scene.skyObjectFrag()
1201+
fragmentShader:this.pxlShaders.scene.skyObjectFrag( this.options.skyHaze )
11991202
});
12001203
c.geometry.computeFaceNormals();
12011204
c.geometry.computeVertexNormals();

‎Source/js/pxlNav/core/Timer.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,19 @@ export class Timer{
1313
this._prevMS=msTime;
1414

1515
this.videoFeeds=[];
16+
this.booted=false;
1617
}
1718

1819
// Reset pxlNav clock
1920
// Benchmarking steps the timer
2021
init(){
21-
this.prevMS=this.curMS;
22-
this.msRunner.x=0;
23-
this.msRunner.y=0;
24-
this.step();
22+
if(!this.booted){
23+
this.prevMS=this.curMS;
24+
this.msRunner.x=0;
25+
this.msRunner.y=0;
26+
this.step();
27+
this.booted=true;
28+
}
2529
}
2630

2731
get runtime(){

0 commit comments

Comments
 (0)