Babylon.js
Babylon.js copied to clipboard
BabylonJS
[For Testing Purposes] Create mrtkv3 button
The design team is currently working on creating an interactive documentation for showcasing graphics tools components. This PR creates a TouchHolographicV3Button which mirrors the visual design of the MRTK v3.0 button. For the time being, we would be using snapshots from this experimental PR and other PRs to create this documentation pending when we figure out the best way to release these new designs.
TODOs
- [ ] Figure out how to handle versioning between this button and the TouchHolographic button. As new designs for MRTK components are released, we might need to figure out the best way for users to switch from one version to the other. Otherwise, the growing list of varying components like the button might become confusing to use.
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
This PR is in draft mode for a reason (see description), so I wouldn't want to merge it just yet
Hi @RaananW I'm trying to figure out the best way to version or name this button. As more buttons or components are created in the future, things might get very complicated, and it would be confusing to users which buttons to use. My team and I might be creating more MRTKV3 components and I would appreciate any help I can get on how subsequent new versions of these components should be represented in code.
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.
Snapshot stored with reference name: refs/pull/12707/merge
Test environment: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html
To test a playground add it to the URL, for example:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12707/merge/index.html#WGZLGJ#4600
Links to test babylon tools with this snapshot:
https://playground.babylonjs.com/?snapshot=refs/pull/12707/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/12707/merge https://gui.babylonjs.com/?snapshot=refs/pull/12707/merge https://nme.babylonjs.com/?snapshot=refs/pull/12707/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/12707/merge#BCU1XR#0
Hi @RaananW I'm trying to figure out the best way to version or name this button. As more buttons or components are created in the future, things might get very complicated, and it would be confusing to users which buttons to use. My team and I might be creating more MRTKV3 components and I would appreciate any help I can get on how subsequent new versions of these components should be represented in code.
That's a good question. Regarding structure I think it will be great if you create a V3 (or MRTK3) directory and put the component(s) there. However, this will present an issue with our UMD packages if the component has the same name as the V2 component. It would need to be exported as a different component (or in a different namespace, which will be less than ideal). I'll get back to you on this one very soon.
So - did some thinking (and I am so sorry for the late reply).
Let's move everything MRTKv3-related to a different directory inside the controls' directory called MRTKv3. When exporting from the index.ts file of this directory, you will need to import and export as, i.e.:
import { TouchHolographicButton } from './touchHolographicButton';
export { TouchHolographicButton as TouchHolographicButtonV3 };
This way we can have 2 different implementations of the touch holographic buttons, and the UMD will have V3 at the end of it. When importing using es6 one could import the holographic button directly from either V3 or the V2 implementation.
I hope it makes sense! let me know if you need further explanation or any help with that.
Hello @RaananW @sebavan, I am picking up the work on this PR and I will work through your comments and share.
Hello @RaananW @sebavan I was unable to continue working on the same branch + PR, so I have moved the work here https://github.com/BabylonJS/Babylon.js/pull/12989 and implemented some of your feedback.
I moved the button control to the MRTKv3 folder, updated the nits and created a PR for the assets. We can close this PR once the comments have resolved and continue working on the new PR, let me know what you think about this.
closing to only keep https://github.com/BabylonJS/Babylon.js/pull/12989 open