Hi, i’m developing a scene that can’t be served by a http server, so all the resources are locals and, for CORS policy, when i’ve to use external resources i embed them in code in base64. It works like a charm, but i’m not pretty satisfied with the background of my scene.
The ideal thing would be to create a SkyBox but, if i’ve understood right, is only possible to give a path to the 6 imagese to load: i cant’ do that for CORS.
My only possibility is to load a single base64 file embedded in code. Is there a way to do that? Instead of using 6 different file is it possible to use a single image file with correct UV mapping, or something like that?
Thank you
Check this example of base64-encoded environment texture, no external resources
https://www.babylonjs-playground.com/#IH5G0H#11
Regarding single image file with UV mapping, Creating A Box | Babylon.js Documentation . Don’t forget to invert the normals (sideOrientation) if the camera is inside the cube.
Yes, i’ve already tryed something like that, but the result is not so good (like the PG you linked, the background is not pretty well defined). SkyBox with 6 files seems to perform better.
I could try using UV mapping.
Options:
- user high-resolution texture, but file size will grow up considerably.
- if low-resolution, but nice blurry background, instead of jagged artifacts is acceptable, you can give the SkyBox a PBRMaterial and experiment with material.microSurface. Code-only example, https://github.com/atmin/pan0.net/blob/master/src/environment.ts
- generate procedural texture, or use DynamicTexture and draw something on the canvas
1 Like