[InspectorV2] Texture preview component #17236
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/17236/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/17236/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/17236/merge#BCU1XR#0 |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17236/merge/ |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
|
Devhost visualization test reporter: |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17236/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/17236/merge/ |
packages/dev/inspector-v2/src/components/properties/textures/texturePreview.tsx
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/textures/texturePreview.tsx
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/textures/texturePreview.tsx
Outdated
Show resolved
Hide resolved
packages/dev/inspector-v2/src/components/properties/textures/texturePreview.tsx
Outdated
Show resolved
Hide resolved
| {texture.isCube ? ( | ||
| <Toolbar className={classes.controls} aria-label="Cube Faces"> | ||
| {["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => ( | ||
| <ToolbarButton className={classes.controlButton} key={label} appearance={face === idx ? "primary" : "subtle"} onClick={() => setFace(idx)}> |
There was a problem hiding this comment.
Any reason to manually track the "toggled" state and appearance rather than using ToolbarToggleButton?
There was a problem hiding this comment.
just bc i didnt know about that :) -- im not seeing it in fluent docs, can u point me to it?
| previewCanvas.style.width = w + "px"; | ||
| previewCanvas.style.height = h + "px"; |
There was a problem hiding this comment.
It doesn't seem like we would want to set the style width/height to the pixel width/height, it seems like they should be independent. I would think ideally you would just have the same kind of image "fit" options that you have with the Fluent Image component. I wonder if it would be helpful to actually use the Fluent Image and pass through a fit prop from the TexturePreivew component. I think we could do that if instead of rendering the directly, we called canvas.toDataURL() and then passed that in as the src on a Fluent Image?
There was a problem hiding this comment.
there are some nuances to how the texture renders to the preview canvas context, i'll let @alexchuber chime in here!
| await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size | ||
| const { w, h } = updatePreviewCanvasSize(previewCanvas); // Grab desired size | ||
| const data = await ApplyChannelsToTextureDataAsync(texture, w, h, face, channels); // get channel data to load onto canvas context |
There was a problem hiding this comment.
Do we need to guard against the texture being disposed while this async work is happening? Should this component be watching the texture's onDisposeObservable?
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
…exturePreview.tsx Co-authored-by: Ryan Tremblay <ryantrem@msn.com>
…exturePreview.tsx Co-authored-by: Ryan Tremblay <ryantrem@msn.com>
|
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/17236/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/17236/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/17236/merge#BCU1XR#0 |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17236/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/17236/merge/ |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
This PR introduces texturepreview to texture properties pane
Note that I am porting over logic from inspectorv1 and it can be simplified in future PR.
Note that the styling is not using tokens as this component hasn't yet undergone UX pass.