Inspector V2: fully support PBR materials #17562
Conversation
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17562/merge/index.html#WGZLGJ#4600 Links to test your changes to core in the published versions of the Babylon tools (does not contain changes you made to the tools themselves): https://playground.babylonjs.com/?snapshot=refs/pull/17562/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/17562/merge#BCU1XR#0 If you made changes to the sandbox or playground in this PR, additional comments will be generated soon containing links to the dev versions of those tools. |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17562/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17562/merge/ |
| @serialize() | ||
| public translucencyIntensity: number = 1; | ||
|
|
||
| private _useAlbedoToTintRefraction = false; |
There was a problem hiding this comment.
I don't quite understand this change, but maybe there is a pattern that I just haven't been exposed to... how do the _useAlbedoToTintRefraction and useAlbedoToTintRefaction properties relate? It looks like they can be set independently.
There was a problem hiding this comment.
This one was a bug, changing the value of useAlbedoToTintRefraction wouldn't trigger a rebuild of the effect. That's why it's now a getter/setter like the other properties.
| } | ||
| return valueString; | ||
| export type HexPropertyLineProps = NumberInputPropertyLineProps & { | ||
| numBits?: number; |
There was a problem hiding this comment.
Should this be further constrained? I assume we don't expect 27 bits for example. Should it be something like numBits?: 32 | 24 | 16 | 8?
| setHexVal(GetHexValFromNumber(props.value)); | ||
| }, [props.value]); | ||
| setHexVal(GetHexValFromNumber(props.value, props.numBits)); | ||
| }); // we don't set [props.value] as dependency because several string representations can map to the same number (e.g., 0x0, 0x00, 0x0000, etc.) |
There was a problem hiding this comment.
But the hex string should only change if either the value or numBits props change, right? So shouldn't this be:
| }); // we don't set [props.value] as dependency because several string representations can map to the same number (e.g., 0x0, 0x00, 0x0000, etc.) | |
| }, [props.value, props.numBits]); |
There was a problem hiding this comment.
No, because if you have 0x00000001 in the edit box, and update it to be 0x001 for eg, this won't trigger an update on blur and the field won't be update to 0x00000001.
|
|
||
| export type TextInputProps = PrimitiveProps<string> & { | ||
| validator?: (value: string) => boolean; | ||
| validateOnBlur?: boolean; |
There was a problem hiding this comment.
The idea here is to validate either every time the value changes (e.g. a keystroke) or defer validation until the text input loses focus?
There was a problem hiding this comment.
Exactly. If validateOnBlur is set, validation will only occur during the onBlur event, not with every keystroke.
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| if (props.validateOnBlur) { | ||
| tryCommitValue(event.currentTarget.value); | ||
| } |
There was a problem hiding this comment.
We could still call HandleOnBlur. It's only two lines of code duplicated, but maybe it would be more in the future?
| event.stopPropagation(); | |
| event.preventDefault(); | |
| if (props.validateOnBlur) { | |
| tryCommitValue(event.currentTarget.value); | |
| } | |
| HandleOnBlur(event); | |
| if (props.validateOnBlur) { | |
| tryCommitValue(event.currentTarget.value); | |
| } |
|
|
||
| function CheckNormalMapPropertyNames(mat: MaterialWithNormalMaps): mat is { invertNormalMapX: boolean; invertNormalMapY: boolean } { | ||
| return (mat as any).invertNormalMapX !== undefined; | ||
| } |
There was a problem hiding this comment.
We can avoid the any cast:
| } | |
| type MaterialWithPublicNormalMaps = { | |
| invertNormalMapX: boolean; | |
| invertNormalMapY: boolean; | |
| }; | |
| type MaterialWithInternalNormalMaps = { | |
| _invertNormalMapX: boolean; | |
| _invertNormalMapY: boolean; | |
| }; | |
| export type MaterialWithNormalMaps = MaterialWithPublicNormalMaps | MaterialWithInternalNormalMaps; | |
| function IsMaterialWithPublicNormalMaps(mat: MaterialWithNormalMaps): mat is MaterialWithPublicNormalMaps { | |
| return (mat as MaterialWithPublicNormalMaps).invertNormalMapX !== undefined; | |
| } |
| {CheckNormalMapPropertyNames(material) && ( | ||
| <> | ||
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="invertNormalMapX" /> | ||
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="invertNormalMapY" /> | ||
| </> | ||
| )} | ||
| {!CheckNormalMapPropertyNames(material) && ( | ||
| <> | ||
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="_invertNormalMapX" /> | ||
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="_invertNormalMapY" /> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
You can just call the check function once:
| {CheckNormalMapPropertyNames(material) && ( | |
| <> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="invertNormalMapX" /> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="invertNormalMapY" /> | |
| </> | |
| )} | |
| {!CheckNormalMapPropertyNames(material) && ( | |
| <> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="_invertNormalMapX" /> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="_invertNormalMapY" /> | |
| </> | |
| )} | |
| {CheckNormalMapPropertyNames(material) ? ( | |
| <> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="invertNormalMapX" /> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="invertNormalMapY" /> | |
| </> | |
| ) : ( | |
| <> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert X Axis" target={material} propertyKey="_invertNormalMapX" /> | |
| <BoundProperty component={SwitchPropertyLine} label="Invert Y Axis" target={material} propertyKey="_invertNormalMapY" /> | |
| </> | |
| )} |
| <BoundProperty component={Color3PropertyLine} label="Reflectance Color" target={material} propertyKey="_metallicReflectanceColor" isLinearMode /> | ||
| <BoundProperty | ||
| component={SwitchPropertyLine} | ||
| label="Use only metallic from MetallicReflectance texture" |
There was a problem hiding this comment.
This is a really long label. Could we change the label to something shorter like "Metallic Only", and then set the long string in the description prop?
| ], | ||
| }); | ||
|
|
||
| propertiesService.onPropertyChanged.add((changeInfo) => { |
There was a problem hiding this comment.
Store the observer, and then call pbrMaterialPropertyChangedObserver.remove() from the dispose function down around line 242.
| propertiesService.onPropertyChanged.add((changeInfo) => { | |
| const pbrMaterialPropertyChangedObserver = propertiesService.onPropertyChanged.add((changeInfo) => { |
| <SyncedSliderPropertyLine label="G" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "g")} /> | ||
| <SyncedSliderPropertyLine label="B" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "b")} /> | ||
| {color instanceof Color4 && <SyncedSliderPropertyLine label="A" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, "a")} />} | ||
| <SyncedSliderPropertyLine label="R" value={(color?.r ?? 0) * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "r")} /> |
There was a problem hiding this comment.
How are you ending up in a situation where the color us null or undefined?
There was a problem hiding this comment.
translucencyColor in material.subSurface can be null, so I had to add nullable to the corresponding BoundProperty. When I did that, I got errors like "accessing .r field for a null object", that's why I had to update these lines of code.
|
@Popov72 #17557 got merged but @georginahalpern is working on a new way in #17568. |
|
Graph tools CI has failed you can find the test results at: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17562/merge/testResults/ |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17562/merge/index.html#WGZLGJ#4600 Links to test your changes to core in the published versions of the Babylon tools (does not contain changes you made to the tools themselves): https://playground.babylonjs.com/?snapshot=refs/pull/17562/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/17562/merge#BCU1XR#0 If you made changes to the sandbox or playground in this PR, additional comments will be generated soon containing links to the dev versions of those tools. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17562/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17562/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
3 participants
Note that unlike Inspector v1, we don't have a special page for
PBRMetallicRoughnessMaterialandPBRSpecularGlossinessMaterial. They now both use the same editing page asPBRMaterial.This PR is created in draft mode, as #17557 needs to be merged so that I can update my PR accordingly.