Skip to content

Commit 7387435

Browse files
ProcStackProcStack
committed
THREE.172 Implemented
_Needed to remove all of ColorSpace auto-adjustments in Three's FBXLoader.js __It assumed any color should be Linear converted to sRGB, and pxlNav already has gamma adjustment Reliance on edits isn't good, but Three upgraded from 133 to 172
1 parent 36449bf commit 7387435

File tree

30 files changed

+466
-259
lines changed

30 files changed

+466
-259
lines changed

‎Public/index.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
2020
<meta name='theme-color' content='#000822'>
2121
<meta name="description" content="ProcStack's GitHub Portfolio">
22-
<meta name="keywords" content="ProcStack, Kevin Edzenga, Trancor, Technical Artist, Technical Director, Creative Technologist, 3d modeling, 3d animation, 3d rendering, 3d texturing, 3d lighting, 3d shading, 3d scripting, 3d programming, 3d development, 3d art, 3d graphics, 3d visual effects">
22+
<meta name="keywords" content="ProcStack, Kevin Edzenga, Trancor, Technical Artist, Technical Director, Creative Technologist, 3d modeling, 3d rendering, texturing, shading, scripting, 3d programming, graphics developer, 3d development, 3d art, 3d graphics, visual effects">
2323
<meta name="author" content="Kevin Edzenga">
2424
<meta name="robots" content="index, follow">
2525
<meta name="revisit-after" content="7 days">

‎Source/js/libs/three/FBXLoader.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
QuaternionKeyframeTrack,
3232
RepeatWrapping,
3333
SRGBColorSpace,
34+
LinearSRGBColorSpace,
3435
ShapeUtils,
3536
Skeleton,
3637
SkinnedMesh,
@@ -544,12 +545,14 @@ class FBXTreeParser {
544545

545546
if ( materialNode.Diffuse ) {
546547

547-
parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Diffuse.value ), SRGBColorSpace );
548+
//parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Diffuse.value ), SRGBColorSpace );
549+
parameters.color = new Color().fromArray( materialNode.Diffuse.value );
548550

549551
} else if ( materialNode.DiffuseColor && ( materialNode.DiffuseColor.type === 'Color' || materialNode.DiffuseColor.type === 'ColorRGB' ) ) {
550552

551553
// The blender exporter exports diffuse here instead of in materialNode.Diffuse
552-
parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.DiffuseColor.value ), SRGBColorSpace );
554+
//parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.DiffuseColor.value ), SRGBColorSpace );
555+
parameters.color = new Color().fromArray( materialNode.DiffuseColor.value );
553556

554557
}
555558

@@ -561,12 +564,14 @@ class FBXTreeParser {
561564

562565
if ( materialNode.Emissive ) {
563566

564-
parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Emissive.value ), SRGBColorSpace );
567+
//parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Emissive.value ), SRGBColorSpace );
568+
parameters.emissive = new Color().fromArray( materialNode.Emissive.value );
565569

566570
} else if ( materialNode.EmissiveColor && ( materialNode.EmissiveColor.type === 'Color' || materialNode.EmissiveColor.type === 'ColorRGB' ) ) {
567571

568572
// The blender exporter exports emissive color here instead of in materialNode.Emissive
569-
parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.EmissiveColor.value ), SRGBColorSpace );
573+
//parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.EmissiveColor.value ), SRGBColorSpace );
574+
parameters.emissive = new Color().fromArray( materialNode.EmissiveColor.value );
570575

571576
}
572577

@@ -612,12 +617,14 @@ class FBXTreeParser {
612617

613618
if ( materialNode.Specular ) {
614619

615-
parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Specular.value ), SRGBColorSpace );
620+
//parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Specular.value ), SRGBColorSpace );
621+
parameters.specular = new Color().fromArray( materialNode.Specular.value );
616622

617623
} else if ( materialNode.SpecularColor && materialNode.SpecularColor.type === 'Color' ) {
618624

619625
// The blender exporter exports specular color here instead of in materialNode.Specular
620-
parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.SpecularColor.value ), SRGBColorSpace );
626+
//parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.SpecularColor.value ), SRGBColorSpace );
627+
parameters.specular = new Color().fromArray( materialNode.SpecularColor.value );
621628

622629
}
623630

@@ -639,11 +646,11 @@ class FBXTreeParser {
639646
case 'DiffuseColor':
640647
case 'Maya|TEX_color_map':
641648
parameters.map = scope.getTexture( textureMap, child.ID );
642-
if ( parameters.map !== undefined ) {
643-
649+
/*if ( parameters.map !== undefined ) {
650+
console.log(parameters.map );
644651
parameters.map.colorSpace = SRGBColorSpace;
645652
646-
}
653+
}*/
647654

648655
break;
649656

@@ -653,11 +660,11 @@ class FBXTreeParser {
653660

654661
case 'EmissiveColor':
655662
parameters.emissiveMap = scope.getTexture( textureMap, child.ID );
656-
if ( parameters.emissiveMap !== undefined ) {
663+
/*if ( parameters.emissiveMap !== undefined ) {
657664
658-
parameters.emissiveMap.colorSpace = SRGBColorSpace;
665+
//parameters.emissiveMap.colorSpace = SRGBColorSpace;
659666
660-
}
667+
}*/
661668

662669
break;
663670

@@ -671,7 +678,7 @@ class FBXTreeParser {
671678
if ( parameters.envMap !== undefined ) {
672679

673680
parameters.envMap.mapping = EquirectangularReflectionMapping;
674-
parameters.envMap.colorSpace = SRGBColorSpace;
681+
//parameters.envMap.colorSpace = SRGBColorSpace;
675682

676683
}
677684

@@ -681,7 +688,7 @@ class FBXTreeParser {
681688
parameters.specularMap = scope.getTexture( textureMap, child.ID );
682689
if ( parameters.specularMap !== undefined ) {
683690

684-
parameters.specularMap.colorSpace = SRGBColorSpace;
691+
//parameters.specularMap.colorSpace = SRGBColorSpace;
685692

686693
}
687694

@@ -2369,6 +2376,7 @@ class GeometryParser {
23692376

23702377
c.fromArray( buffer, i );
23712378
ColorManagement.toWorkingColorSpace( c, SRGBColorSpace );
2379+
//ColorManagement.toWorkingColorSpace( c, LinearSRGBColorSpace );
23722380
c.toArray( buffer, i );
23732381

23742382
}

‎Source/js/pxlNav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ class pxlNav{
431431
this.pxlEnv.engine.autoClear=true;
432432
ColorManagement.enabled = false;
433433
this.pxlEnv.engine.outputColorSpace = SRGBColorSpace;
434-
//this.pxlEnv.engine.outputColorSpace = SRGBColorSpace;
434+
//this.pxlEnv.engine.outputColorSpace = LinearSRGBColorSpace;
435435

436436
this.pxlEnv.engine.debug.checkShaderErrors=false;
437437
//%= Dev

‎Source/js/pxlNav/core/Enums.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,66 @@ export const VERBOSE_LEVEL = {
1111
'INFO' : 3
1212
}
1313

14+
// Anti-aliasing settings
15+
// Low - cross kernal sampling, 1 center sample + 4 samples diangonally from center pixel
16+
// medium - 1 center sample + 8 samples diangonally from center pixel
1417
export const ANTI_ALIASING = {
1518
'OFF' : 0,
1619
'LOW' : 1,
1720
'MEDIUM' : 2,
1821
'HIGH' : 3
1922
}
2023

24+
// Sky Haze settings should be passed through the pxlNav.Options
2125
export const SKY_HAZE = {
2226
'OFF' : 0,
2327
'VAPOR' : 1
2428
}
2529

30+
// Shadow edge softness, currently mapped to THREE.PCFSoftShadowMap THREE.PCFShadowMap
31+
// Set in pxlNav.js, used in pxlNav.Environment.js
2632
export const SHADOW_MAP = {
2733
'OFF' : 0,
2834
'BASIC' : 1,
2935
'SOFT' : 2
3036
}
3137

38+
39+
// 'COLOR_SHIFT' is used in Utils.js, inturn used when loading assets through FileIO.js
40+
//
41+
// Upgrade from Three.133 -to- Three.172 introduced color issues from Three.152 for pxlNav ---
42+
// Since Three.152, by-default color space is converted on import.
43+
// Please don't assume color spaces for me.
44+
//
45+
// So, given how I'm rendering things,
46+
// `FBXLoader.js` has been significantly altered to remove any auto color space conversion.
47+
// I don't like needing to edit third-party files
48+
// But I don't want to have to undo what it does just half a second later.
49+
// ```ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.SpecularColor.value ), SRGBColorSpace )```
50+
// Why? Please stop.
51+
// And given how much else I've needed to change-
52+
// TODO : Custom FBX Loader for pxlNav
53+
//
54+
// TODO : Add color correction to pxlNav to re-implement Three's pre-152 asset processing behavior
55+
// Tech artists will prep assets for the color spaces they need...
56+
// We know if a color is linear or sRGB for the use-case of that asset.
57+
// Each individual asset may required sRGB -or- Linear as it was created.
58+
//
59+
// TLDR; Re-implement THREE.GammaFactor -> pxlNav.Device.GammaFactor + pxlNav.Utils.gammeCorrectColor()
60+
// Then use in pxlNav/Environment.js + pxlNav/core/FileIO.js for color conversion.
61+
// Then figure out which of the post process needs the gamma correct and any extra shaders...
62+
export const COLOR_SHIFT = {
63+
'KEEP' : 0,
64+
'sRGB_TO_LINEAR' : 1,
65+
'LINEAR_TO_sRGB' : 2,
66+
'WINDOWS_TO_UNIX' : 3,
67+
'UNIX_TO_WINDOWS' : 4,
68+
'LINEAR_TO_WINDOWS' : 5,
69+
'WINDOWS_TO_LINEAR' : 6,
70+
'LINEAR_TO_UNIX' : 7,
71+
'UNIX_TO_LINEAR' : 8
72+
}
73+
3274
// -- -- --
3375

3476
// Easy access to the enums
@@ -37,5 +79,6 @@ export const pxlEnums = {
3779
'VERBOSE_LEVEL' : VERBOSE_LEVEL,
3880
'ANTI_ALIASING' : ANTI_ALIASING,
3981
'SKY_HAZE' : SKY_HAZE,
40-
'SHADOW_MAP' : SHADOW_MAP
82+
'SHADOW_MAP' : SHADOW_MAP,
83+
'COLOR_SHIFT' : COLOR_SHIFT
4184
}

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import {
2323
} from "../../libs/three/three.module.min.js";
2424
import { FBXLoader } from "../../libs/three/FBXLoader.js";
2525

26+
import { COLOR_SHIFT } from "./Enums.js";
27+
2628
export class FileIO{
2729
constructor( folderDict={}){
2830
this.pxlTimer=null;
@@ -48,6 +50,11 @@ export class FileIO{
4850
this.vidRoot = this.findInDict( folderDict, "vidRoot", "images/screenContent/" );
4951

5052
this.workerList = [];
53+
54+
// No need for these to be in a Consts.js file yet
55+
this.oneTwoPFour = 1.0/2.4;
56+
this.twelvePNineTwoDiv = 1.0/12.92;
57+
this.onePOFiveFiveDiv = 1.0/1.055;
5158
}
5259

5360
setDependencies( pxlNav ){
@@ -92,14 +99,16 @@ export class FileIO{
9299

93100
// -- -- --
94101

95-
// Convert Linear to sRGB
96-
tosRGB( val ){
97-
if( val <= 0.0031308 ){
98-
val *= 12.92;
99-
}else{
100-
val = 1.055 * Math.pow(val, 1.0/2.4) - 0.055;
102+
convertVertColor( meshObj, space=COLOR_SHIFT.KEEP ){
103+
if (meshObj.geometry && meshObj.geometry.attributes && meshObj.geometry.attributes.color) {
104+
let colors = meshObj.geometry.attributes.color;
105+
for( let x=0; x<colors.count; ++x ){
106+
let color = new Color().fromBufferAttribute(colors, x);
107+
this.pxlUtils.convertColor(color, space);
108+
colors.setXYZ(x, color.r, color.g, color.b);
109+
}
110+
colors.needsUpdate = true;
101111
}
102-
return val;
103112
}
104113

105114
// -- -- --
@@ -382,7 +391,6 @@ export class FileIO{
382391
let curScale = scale;
383392
if( hasColor ){
384393
let curScalar = mesh.geometry.attributes.color.getX(x);
385-
curScalar = this.tosRGB(curScalar);
386394
curScale = new Vector3(curScalar, curScalar, curScalar);
387395
}
388396
matrix.compose(position, quaternion, curScale);
@@ -1305,6 +1313,8 @@ export class FileIO{
13051313
let userScreenSeed=0;
13061314
// Run the mask layers outside shader calculations
13071315
let maskArray=[ new Vector3(1,0,0), new Vector3(0,1,0), new Vector3(0,0,1) ]
1316+
// Non-included masks
1317+
// TODO : Add method to pass materials through to UserScreens from textureList{}
13081318
let maskPaths=[this.assetRoot+"DJ_Vector_Masks_1.jpg", this.assetRoot+"DJ_Vector_Masks_2.jpg", this.assetRoot+"DJ_Vector_Masks_3.jpg"];
13091319
let modMaskId=0;
13101320
let modPathId=0;

0 commit comments

Comments
 (0)