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.
packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx
Outdated
Show resolved
Hide resolved
| 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 (because when converted to a number, the new value is identical to the existing one) and the field won't be updated to "0x00000001".
There was a problem hiding this comment.
if thats the case do we still want to use useEffect with no dependency array? wouldnt that result in it never updating>
There was a problem hiding this comment.
No, it's the contrary it seems, it makes the function always being called:
There was a problem hiding this comment.
in that case we can remove the useEffect?
There was a problem hiding this comment.
If I completely remove useEffect, the field doesn't update on blur:
Without useEffect:
Enregistrement.de.l.ecran.2025-12-19.204901.mp4
With useEffect:
Enregistrement.de.l.ecran.2025-12-19.205356.mp4
packages/dev/sharedUiComponents/src/fluent/primitives/textInput.tsx
Outdated
Show resolved
Hide resolved
packages/dev/sharedUiComponents/src/fluent/primitives/textInput.tsx
Outdated
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/materials/normalMapProperties.tsx
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/materials/normalMapProperties.tsx
Outdated
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/materials/pbrBaseMaterialProperties.tsx
Outdated
Show resolved
Hide resolved
packages/dev/inspector-v2/src/services/panes/properties/materialPropertiesService.tsx
Outdated
Show resolved
Hide resolved
| <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.
There was a problem hiding this comment.
colorpropertyline is supposed to only allow nonnull values
the change shoudl be at the boundproperty layer, not here
i think my recent change may actually help fix this though, to expand boundproperty to support null values
There was a problem hiding this comment.
I deleted my changes, updated my PR with the latest changes on master, but I still get the error. I don't know how to fix it, as I'm fairly new to REACT programming... I've commented out the property for now.
There was a problem hiding this comment.
I see a new PR has been committed regarding the nullable values for BoundProperty, let me try it.
[...] I updated my PR with the new code, but it still doesn't work for the translucencyColor property, so I commented it.
There was a problem hiding this comment.
yes! u would send 'nullable defaultValue={null}' as part of the boundproperty
There was a problem hiding this comment.
I can't set defaultValue to null:
translucencyColor does allow null in the PBR material, though:
There was a problem hiding this comment.
oh right, defaultValue null is only valid if the underlying component (ex: color3propertyline) supports null values. in this case we don't -- maybe instead we shoudl just do conditionally showing this property depending on whether color exists? or if u want the property to always appear, u can send a non-null defaultvalue , ex: white. it will only be applied when the user selects the 'checkbox' to mark it as non-null
There was a problem hiding this comment.
I tried passing Colors3.White() as the default value, and it crashes at runtime with the same error as before:
maybe instead we shoudl just do conditionally showing this property depending on whether color exists?
I can't really do that, because we have to give the user the possibility to use null or non null values, so I need to show the checkbox.
|
@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: |
… inspectorv2-pbrmat
… inspectorv2-pbrmat
|
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. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17562/merge/ |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
Note that unlike Inspector v1, we don't have a special page for
PBRMetallicRoughnessMaterialandPBRSpecularGlossinessMaterial. They now both use the same editing page asPBRMaterial.