Photoshop to BJS skyBox cube texture template/generator

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. :thinking: :face_with_monocle:

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. :grin:

…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 :grin:

4 Likes

Hats of to you, really amazing work :clap:

Just wanted to quickly share my progress building my skybox (better said, space box) using my new template. The original image is an edit (already an assembly of dozens of layers and masks with masks painting). It’s a very early version from this morning. I’m only starting to assemble, tone and scale everything so the lines and breaks you might be able to detect in these screenshots do not come from the wrapping. They are among the many parts I still need to work in the original edit. I’m happy though to see that this dynamic template skybox builder seems to do a reasonable job.
I hope I will be able to finish my spacebox by tomorrow and will post the result here.
Meanwhile, have a great day :sunglasses:



2 Likes

I am getting closer to what I want. :sweat_smile: This isn’t yet the final version but it can be considered an alpha. I had a lot of editing work to do at first before even thinking about the integration.
I still have to work the integration of sides a little. Particularly on the top of the box. Incidentally, with this, I just realized I do not have enough bleed in my template to make a smooth integration of something as volumetric as a space box.

Else, I made some enhancements to my spacebox by also adding a blend of 2 rotated capsule meshes casting clouds and some stars over my skybox. This really helps getting this volumetric feeling without affecting performance all too much. Obviously and despite for what the song says :musical_keyboard:We do not live in a box:wink: And I found that this is even more true when attempting to create a space environment.


https://media-geneva.ch/demos/bjs/skybox-generator/skybox-template-space-example-new.html

4 Likes

It would be really cool if we could make this into a web service. Drop your image in, get a skybox back. Do you think what you’re doing in photoshop is possible via something like jimp - npm or https://imagemagick.org ?

I guess it would be possible to make. May be use bitmap masks instead of generated from vector.
But then, there are still two issues with this. First thing is the size of the image needed to generate a 2k even more 4k from an unwrapped image. It would take a lot of processing time. And then, by any means, the blending of sides won’t do any magic. There’s still a need for editing the original image, make sure the skyline is on the same height on both sides, make sure the blending will not blend a building or some other detail…
Finally, I also do not feel for monitoring and maintaining a web service. I know what it takes and I’m just not ready to do that (but if anybody else wants to do it, I’m always happy to give a helping hand).
I guess once my psd version template is finished and scripted with actionscript for ez export, I will share it somewhere. But I’m not planning on turning this into some sort of factory making.