MackeyK24

Support For Panorama CubeTexture PNG

Recommended Posts

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 :)

 

Share this post


Link to post
Share on other sites

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)  :)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
4 hours ago, Sebavan said:

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 :)

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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.

web-web-panorama.jpg

Share this post


Link to post
Share on other sites

The same thing i was looking for, a way to simply set the sky and reflection texture for objects in one single image instead to do it in six.

A panoramic file like @MackeyK24 said or like most other program does, a cube image like this one:

http://opengameart.org/sites/default/files/Daylight Box UV.png

Basically is do the same thing that SkyBox does but using one image instead six. And if is compatible with panoramic or cube boxes like the previous images will be perfect.

 

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

 

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites
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 ???

 

Share this post


Link to post
Share on other sites
1 hour ago, Nabroski said:

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 :)

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 ???

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.