add Env to NME Preview

[onekit-boss]

We can custom Env, Image and toggle Env / Background color now.

[bjsplat]

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.

[bjsplat]

Snapshot stored with reference name:
refs/pull/14398/merge

Test environment:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/14398/merge/index.html

To test a playground add it to the URL, for example:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/14398/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/14398/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/14398/merge
https://gui.babylonjs.com/?snapshot=refs/pull/14398/merge
https://nme.babylonjs.com/?snapshot=refs/pull/14398/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/14398/merge#BCU1XR#0

[Popov72]

Just to be sure we are ok with the GUI, here's how it appears:

cc @PatrickRyanMS

[sebavan]

LGTM if @PatrickRyanMS is all good with it :-)

[sebavan]

Also one last thought for @RaananW to be sure importing .env would not break any kindz of buildzzzz 🐝🐝🐝🐝🐝

[RaananW]

Also one last thought for @RaananW to be sure importing .env would not break any kindz of buildzzzz 🐝🐝🐝🐝🐝

Works fine, as this is just a static file in the public directory.
Might cause an issue when used as a package, as you will need to deliver the file yourself.

[onekit-boss]

Also one last thought for @RaananW to be sure importing .env would not break any kindz of buildzzzz 🐝🐝🐝🐝🐝

Works fine, as this is just a static file in the public directory. Might cause an issue when used as a package, as you will need to deliver the file yourself.

okay, I has remove it, and use "https://assets.babylonjs.com/environments/environmentSpecular.env"

[sebavan]

Nice thanks a lot !!! a last change and I can merge it in :-) Could you make "https://assets.babylonjs.com/environments/environmentSpecular.env" a public static so that users can point it at their own URL if need be :-)

[onekit-boss]

Nice thanks a lot !!! a last change and I can merge it in :-) Could you make "https://assets.babylonjs.com/environments/environmentSpecular.env" a public static so that users can point it at their own URL if need be :-)

yes. Now it is a exists URL of babylon assets (https://assets.babylonjs.com), not a file .

[onekit-boss]

Nice thanks a lot !!! a last change and I can merge it in :-) Could you make "https://assets.babylonjs.com/environments/environmentSpecular.env" a public static so that users can point it at their own URL if need be :-)

yes. Now it is a exists URL of babylon assets (https://assets.babylonjs.com), not a file .

I use this URL as other source codes of babylon.js .your can find the URL in bellow files:
packages\dev\core\src\Helpers\environmentHelper.ts
packages\tools\sandbox\src\tools\environmentTools.ts

[sebavan]

yes but in environmentHelper users can override it here https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Helpers/environmentHelper.ts#L344 and sandbox is not meant to be used as a framework.

Users needs to be able to control where they download assets from.

[onekit-boss]

yes but in environmentHelper users can override it here https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Helpers/environmentHelper.ts#L344 and sandbox is not meant to be used as a framework.

Users needs to be able to control where they download assets from.

your mean is. ........"user need custom a env of the NME Preview window?" . I has add a "upload button" on the right of "model ComboBox" in NME Preview window. so user can override the default env "https://assets.babylonjs.com/environments/environmentSpecular.env".

[sebavan]

Oh no, sorry, I just mean if you move it in a static public field or a let in the module so a developer consuming the npm package can change it before loading nme.

[onekit-boss]

a public static

or...... your mean is a public static filed of the class?

[sebavan]

something like this:

public static DefaultEnvironmentURL = "https://assets.babylonjs.com/environments/environmentSpecular.env"';

private _refreshPreviewMesh(force?: boolean) {
        switch (this._globalState.envType) {
            case PreviewType.Room:
                this._hdrTexture = new CubeTexture(DefaultEnvironmentURL , this._scene);
                if (this._hdrTexture) {
                    this._prepareBackgroundHDR();
                }
                break;
            case PreviewType.Custom: {
                const blob = new Blob([this._globalState.envFile], { type: "octet/stream" });
                const reader = new FileReader();
                reader.onload = (evt) => {
                    const dataurl = evt.target!.result as string;
                    this._hdrTexture = new CubeTexture(dataurl, this._scene, undefined, false, undefined, undefined, undefined, undefined, undefined, ".env");
                    this._prepareBackgroundHDR();
                };
                reader.readAsDataURL(blob);
                break;
            }
        }

[onekit-boss]

something like this:

public static DefaultEnvironmentURL = "https://assets.babylonjs.com/environments/environmentSpecular.env"';

private _refreshPreviewMesh(force?: boolean) {
        switch (this._globalState.envType) {
            case PreviewType.Room:
                this._hdrTexture = new CubeTexture(DefaultEnvironmentURL , this._scene);
                if (this._hdrTexture) {
                    this._prepareBackgroundHDR();
                }
                break;
            case PreviewType.Custom: {
                const blob = new Blob([this._globalState.envFile], { type: "octet/stream" });
                const reader = new FileReader();
                reader.onload = (evt) => {
                    const dataurl = evt.target!.result as string;
                    this._hdrTexture = new CubeTexture(dataurl, this._scene, undefined, false, undefined, undefined, undefined, undefined, undefined, ".env");
                    this._prepareBackgroundHDR();
                };
                reader.readAsDataURL(blob);
                break;
            }
        }

thanks. I got it :)

[PatrickRyanMS]

Just to be sure we are ok with the GUI, here's how it appears:

cc @PatrickRyanMS

sorry for the late response, I have been out of the office. The only thing I see is that the icon for environment is a little small in comparison to the rest on the bar. It should be sized to fit with the size of the other icons. If needed, I can provide a new icon, but it would be preferable to use the same svg if possible. Something like this:

[sebavan]

I ll adapt this one ASAP

[sebavan]

@PatrickRyanMS it looks real strange zoomed in like it would be a bold font :-( could you create another svg ? like the other ones in the bar ?

[PatrickRyanMS]

I can make a new svg to fit with the current icons. Give me a few minutes.

[PatrickRyanMS]

@sebavan, here's the updated icon. This is saved at the same size as the rest of the icons, so the css should be the same:
environment_24_regular.zip