Dear fellow BJSers,
I was looking at how to generate a seamless skybox texture from a simple 2D image. Not necessarly panoramic and not equirectangular. Really just a simple 2D picture (preferably panoramic) which I could quickly make into a reasonably integrated skyBox texture.
May be I didn’t search enough but I sort of ended up doing my own version template in photoshop.
My idea was nothing really complex. Simply applying bleed and masks to the different faces and build-up the unwrapped texture in a similar way you would do for creating a box for packaging.
The base version template I came out with uses dynamic objects for both the image and masks.
4 types of masks are applied to the bleed areas and duplicates of the source dynamic object (the source image) are positionned and rotated on the grid so to form the blend between faces.
At this early stage, I first had to assess that this approach and method would eventually provide with some satisfactory results (in most cases). And this is just where I stand today: With a template that builds-up from the import of a single 2D image placed inside the dynamic source object container.
I still need to work a little around improving those masks. Also may be giving more options and more latitute for blending. For now, there’s an option to make the horizontal blend (either from the right blended over the left or from the left blended over the right). I thought it was important to give this freedom here, as the far left or the far right of the image may contain some details one would not wish to eliminate or alter with a blend. Though, it doesn’t change the fact that the integration (in this early version) is still only just a simple blend. Eventually, I will later investigate on an option to also fill-in with context.
For now, my next steps will be to turn this template into a distributable. This means I will use psd actionscript to let the user select from the options and generate all faces in various formats and sizes.
The final scripted version should let you export to either jpg, png or hdr, in sizes of 1k, 2k or 4k.
The template is created in 2K resolution but since everything is build from dynamic objects, it doesn’t really matter. One of the issues I’m facing to turn this into a distributable is that if I keep a sample image at this resolution of 2K, the size of the file is just huge (over 2Gb). This comes from that for creating all blends and integration, the original 2K unwrapped picture (as a dynamic object) is duplicated up to 20 times!
So, I haven’t yet decided which path I will take for distribution. Whether I will have everything build on the fly from the actionscript. Or whether I will keep parts and/or reduce the original template resolution.
Anyways, at this early stage, I simply wanted to share my progress with you.
You can see below 2 examples of image and result.
The first is the image I used to create the template.
The second is a completely unadapted shot from the nasa of the ‘pillars of eternity’.
With this second shot, it’s easier to understand that the template will not be doing any ‘miracles’ towards a seamless integration. It will not recreate parts of shapes that have been cut by cropping. It will also not make a perfect and smooth blend of a light or color that is too far off what you have on the connecting face. So, despite the efforts I put (and will continue to put) into this, a certain level of edit will still be required to really create the outmost seamless skybox cube texture from a single 2D image.
Though I hope and I think that this template (and then the scripted version to come) will still help towards making things easier and will also put the final touch of integration to it with less efforts.
The template is built adding inner and outer bleed to the connecting faces:
Simply paste your image in the dynamic object source placeholer:
The dynamic source object is duplicated up to 20 times and masks from vector gradients are applied as opacity masks to create the blend between faces:
Cropped preview of the final unwrapped texture:
https://media-geneva.ch/demos/bjs/skybox-generator/skybox-template-preview.html
**First test with an (inappropriate, non-edited) example picture. **
Notice how some shapes and details are cropped. For a better result, these shapes and details should be inside the cropped faces area.
https://media-geneva.ch/demos/bjs/skybox-generator/skybox-template-space-example.html
That’s it for today. Please let me know if you find any interest in this.
Also, let me know if you are aware of a plugin or something a like (for photoshop or else) that already does this (and then, better then mine). In which case it would only mean that I lost my time on this and should search better on what already exists before doing things like that. Anyways, it’s still a quite fun exercise to do so I guess I won’t regret having investigated this a little.
…And then by any means, I’m going to use it now to generate my space skyBox for my current project (which was the initial goal).
Meanwhile, have a great day