Support For Panorama CubeTexture PNG

[MackeyK24]

Is there Any way we can use a a panorama cube map as a PNG file ... NON HDR FORMAT.

 

Right now we HAVE to split BABYLON.CubeTexture into six sides... But HDRCubeTexture allows for 1 single panorama cube map texture that it internally splits into faces...

 

Can we make BABYLON.CubeTexture support single panorama png files...

 

or maybe create a BABYLON.PNGCubeTexture that supports single panorama png files

 

@Sebavan or @Deltakosh WHAT DO YOU THINK ABOUT THIS ONE

 

[Sebavan]

instead of Texture.SKYBOX_MODE you can use Texture.EQUIRECTANGULAR_MODE and you have a lot more options in :-)

[Wingnut]

http://www.babylonjs-playground.com/#11GAIH#11

http://www.html5gamedevs.com/topic/27338-avoiding-a-mirrored-360-panoramic-view-fixed_equirectangular_mode/

Nobody mentioned HDR in that PG or thread, so I hope it is on-topic.  It was mostly about flipping left/right. 

Equirectangular was used, though.  It is an interesting way to do panos.

That's all I got.  (a reasonably good memory of previous discussions) 

[Fabri]

Excellent memory Wingnut...  

I agree with experts suggestions....MackeyK24 you are in good hands!

[MackeyK24]

6 hours ago, Sebavan said:

instead of Texture.SKYBOX_MODE you can use Texture.EQUIRECTANGULAR_MODE and you have a lot more options in :-)

 I tried this... shows nothing:

            var boxSize = 1000;  
            var pngTexture = new BABYLON.Texture("http://mackey.cloud/files/panorama.png", scene);
            var pngSkybox = BABYLON.Mesh.CreateBox("pngSkyBox", boxSize, scene);
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.disableLighting = true;
            skyboxMaterial.reflectionTexture = pngTexture;
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.EQUIRECTANGULAR_MODE;
            pngSkybox.material = skyboxMaterial;
            pngSkybox.infiniteDistance = true;

 

@Sebavan Can you please point out what i am doing wrong

[MackeyK24]

Yo @Sebavan and @Wingnut I tried your suggestion ... I think i got something showing up, but faces are in the wrong place... I assume there is more i need to do than just change coordinatesMode.

Please take a look at my playground and hook it up ... PLEASE.

http://www.babylonjs-playground.com/#LANDI#0

[Sebavan]

http://www.babylonjs-playground.com/#1CQJEI#1

[MackeyK24]

4 hours ago, Sebavan said:

http://www.babylonjs-playground.com/#1CQJEI#1

Yo @Sebavan or @Deltakosh

That basically will work for the skybox ONLY... But what i really am trying to d is use reflectionTexture = BABYLON.CubeTexure BUT using a SINGLE panorama  image instead of of SIX separate images... Maybe to splitting in code the same way HDRCubeTexture splits the faces... Or something where i can use as a reflectionTexture (not only for the skybox, bit for each PBR material the skybox is providing reflection for)

Thats what i am really trying to do.. avoid splitting by skybox images (at the server level at least... don't mind using code to split)... so i don't have to make six separate server trips for skyboxes ... How do think i can do this

 

[Sebavan]

http://www.babylonjs-playground.com/#1CQJEI#2

sorry for the short messages, pretty busy but basically you need to play with the coordinate mode :-)

[Nabroski]

Old playground on an other topic, the links where broken, i leave it here

http://babylonjs-playground.com/#TJTTT#3

 

[MackeyK24]

18 hours ago, Nabroski said:

Old playground on an other topic, the links where broken, i leave it here

http://babylonjs-playground.com/#TJTTT#3

 

 Yeah... But i need to use it as a panorama reflection texture... just like HDRCubeTexture does or the 6-sided CubeTexture does.

So they will get used as the material.reflectionTexture for every game object that is supposed to reflect the skybox. Now setting the diffuse and emissive textures using coordinatesMode will work for the SKYBOX itself to actually render the SKY... but needs to ALSO be used as the reflectionTexture for the rest of the game objects. I just HATE having to make SIX server trips to get a six sided skybox images... When a single panorama version (from which the 6 sides where split from) can be used MUCH more efficiently ... Specially for loading.

[Nabroski]

@MackeyK24 Just to be sure we are talking on the same page.

you want to do this? 
http://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map

your picture has an
https://en.wikipedia.org/wiki/Equirectangular_projection

and you wan't to convert it back to a cube texture

for 6images google: for MXHR old technic but gold

and btw just for testing 768kb < 23mb i dont dont how you debug this. if everything is fine put an high-res pic back in.

[Nabroski]

48 minutes ago, Matriax said:

I not understand why babylon does in 6 files, what are the pros to do it in that way that is prefered?

@MatriaxThis is the way, it works in computer graphics.  https://www.google.de/search?q=cube texture opengl

You have to provide a UV MAP created by a 3th party program. So the 'XY' Engine knows what you are going to do

https://www.google.de/search?q=cube texture opengl#q=cube+texture+blender+uv

sorry im out of time on everything

(im just testing something)

http://babylonjs-playground.com/#1QV2O9#0

 

@MackeyK24 http://www.babylonjs.com/cyos/

[Nabroski]

i think Sebavan already told the 'right' solution.

im out of here

[MackeyK24]

1 hour ago, Nabroski said:

i think Sebavan already told the 'right' solution.

im out of here

 

That kinda works for the skybox itself... BUT DOES NOT WORK FOR material.reflectionTexture on EVERY other game object in the scene that need to reflect the skybox... Unless i am missing something there... That solution was to to simple set the material.emissiveTexture and a SPHERICAL coordinates mode... Right ... How can that work for proving reflection ???

 

[Nabroski]

Hey MackeyK 

no way i debug this in a playground & for everything else i'm out of time, sorry. please crush your texture to ->> jpg quality settings 60% or download and upload the image i provided

 

[Nabroski]

okay i see
http://www.babylonjs-playground.com/#1CQJEI#3

so the pbr material only supports cubetexures. you have to write your own shader. 

[Nabroski]

http://www.babylonjs-playground.com/#1CQJEI#4

[MackeyK24]

1 hour ago, Nabroski said:

http://www.babylonjs-playground.com/#1CQJEI#4

Wow... that looks beautiful ... But unfortunately still will not not work with the same WORKFLOW you would use for matieral.reflectionTexture on ALL OTHER NON SKYBOX meshes...

 

For Example... Lets say you have a scene with THREE cubes... Each cube has a PBR material setup with its own texture.

The NORMAL babylon skybox reflection workflow.

1... Setup the skybox mesh (cube or sphere) apply the CubeTexture (including HDRCubeTexture) to the skybox mesh material.reflectionTexture (can also use emissive or diffuse texture for actual SKYBOX mesh)

2... For every other scene object (our case three cubes already setup with its own material/shader) that is to use 'Skybox Reflection' we assign the CubeTexture or HDRCubeTexture to the material.reflectionTexture (Reflection Texture ONLY... Must not alter the already mesh rendering... but simply ADD reflection to it)

If using  HDRCubeTexture just uses the ONE HDR panorama cubemap file...

If using CubeTexture is uses 6 sided images...

What i really want is CubeTexture to use ONE PNG panorama cube map file instead of having to load six separate images for CubeTexture....

 

Keep in mind I STILL NEED TO USE AS IF IT WS A REGUAR CubeTexture or HDRCubeTexture (meaning material.reflectionTexture) even a separate shader would not work for it would OVERIDE the shader or material that is already assign to the mesh that it is supposed to provide reflection for.

 

This seems so complicated... I would have thought it would be EASY since the HDRCubeTexture already does this by splitting the cube faces from the panorama HDR file... How come CubeTexture does not have feature... ONLY SIX SEPARATE images supported... Does NOT seem that efficient... when we can make a PNG panorama just like there is a HDR panorama (or simple convert a HDR image to PNG image... losing and colors out of 0 to 1 range of course... but that is ok... i just want the panorama features of the cube map... not really concerned about colors out the 0 to 1 range... Just wanna make kool good looking skyboxes... With reflection for ALL other scene objects)

 

wow... that ws a mouth full

 

[Nabroski]

so zip it and unzip it. ya!

 

(nothing serious i just fooling around)http://www.babylonjs-playground.com/#1ZXE0P#2

 

[Sebavan]

Guys,

For the reflection I provided this link: 

http://www.babylonjs-playground.com/#1CQJEI#2

It is all what you need to support it as you can see here:

http://www.babylonjs-playground.com/#1CQJEI#5

 

[MackeyK24]

6 hours ago, Sebavan said:

Guys,

For the reflection I provided this link: 

http://www.babylonjs-playground.com/#1CQJEI#2

It is all what you need to support it as you can see here:

http://www.babylonjs-playground.com/#1CQJEI#5

 

 

Almost... @Sebavan

First WE need to have separate material setup for the sphere or box that is to reflect the skybox

Second... image is SWAPPED.... what is on the left should be on the right in the original .png (Example the sign with the again writing should be to your left... but when using this BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE they show up on the right )

 

try this one: http://www.babylonjs-playground.com/#1CQJEI#7

[MackeyK24]

20 hours ago, MackeyK24 said:

 

Almost... @Sebavan

First WE need to have separate material setup for the sphere or box that is to reflect the skybox

Second... image is SWAPPED.... what is on the left should be on the right in the original .png (Example the sign with the again writing should be to your left... but when using this BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE they show up on the right )

 

try this one: http://www.babylonjs-playground.com/#1CQJEI#7

 

Anybody got any idea why the image is swapped left to right ???