Embeddable / base64 Environment Textures, including .env

Feature requests
1

Having this would help in couple use case:

1- Inclusion in .babylon file just like regular textures can.
2- Where certain meshes need to have their own environment separate from whatever the scene may have. Example:

I have a code base which is a mesh based GUI sub-system that has had many incarnations. While I am currently planning to use it as a cross-wrist summon-able portal for webXR, see demo video, I can also use it to generate animate-able, 3D credits.

When creating credits using StdMaterials & a light which follows the camera, things seem less than commercial quality:

credit_0
credit_01087×1448 102 KB

In PBR, using studio256.env, it looks very good from certain angles (but too bright), & dead at others.

credit_2
credit_21338×1494 135 KB

credit_1
credit_11325×1481 90 KB

It is clear there is no stock env which is going to be acceptable. The studio texture by @PatrickRyan being ported to Blender is a good starting point (maybe being inside a ring or box where the walls are well lit, but slightly varying, and darker ceiling & floor would be good). Being able to pack the env directly into the source code is far less clunky. for inserting the module into multiple scenes.

3 Likes
2

I guess it’s already possible to do it as in the nme you can embed a .env file as a static resource for a cube texture.

Save this material in .json and you will see the base64 encoded data in the file:

1 Like
3

I’ll have to look at this. One thing unrelated is the base64 string is there twice, once as the url, and a 2nd time as the name. Not sure who does that, seems just a little long.

4

Ok, I have spent some time looking at CubeTexture.ts. If the url in the constructor can be a data string, I think I can also just use that as the first arg of the BABYLON.CubeTexture.CreateFromPrefilteredData() call I am using in my code.

For a .babylon, inline textures for materials are done with the base64String item. When specifying a file for the scene.environment,it looks like it could be replaced with a data string if it is a .env, since either the CubeTexture constructor or CreateFromPrefilteredData() is called.

For a native to Blender environment file that also works with us, a HDR, a HDRCubeTexture is needed. It is a subclass of BaseTexture, so not sure about this case.

5

Normally, passing base64 encoded data as the url parameter of the texture constructors should work (with the data:XXX syntax).

6

HI @Evgeni_Popov, i’ve tried to use .env base64 encoded. But seems not to work.
I’ve followed your instruction, saving json from nme and then copy and paste the base64 string.
For testing i’ve used this playground 've found: https://www.babylonjs-playground.com/#IH5G0H#7

Where do i mistake?
Thanks

7

You need to instruct the CubeTexture constructor that the data you pass are a .env file by setting the forceExtension parameter to .env:

https://www.babylonjs-playground.com/#IH5G0H#11

2 Likes
8

Great!! thank you.

9

Hi @Evgeni_Popov, i resume this old post.
I had succesfully loaded the base64 embedded .env file. But, i can’t include in my project files too big. So the quality of the background scene is not so good. Is there another way to insert a background? I think that the 6 picture skybox would be perfect, but it can’t be done with base64 embedded file (this is the only way i can do it due to CORS policy).
What do you suggest?
Thank you in davance.

10

Using base64 for 6-files skybox is possible:

https://www.babylonjs-playground.com/#IH5G0H#12

2 Likes
11

Perfect! I’ll give it a try!
Thanks

12

@Evgeni_Popov It works like a charm! Thank you :wink:

1 Like