Abstract skybox creation
polycounter lvl 20
Just wondering if anyone has some tools or tips to create a more abstract skybox based off an image like this http://sokpok.com/wp-content/uploads/2014/10/abstract%20colors%20wallpaper-cBtx.jpg . I've only ever really dealt with generating something realistic using teragen or manually stitching some panoramas but i'm not really sure how to go about making something like this seamless so any tips would be much appreciated!
Replies
Alternatively, make it tile horizontally, then apply it to a sphere and 3d paint the tops and bottoms to be seamless.
http://www.skypaint.com/
It has a tutorial with CryEngine:
http://docs.cryengine.com/display/SDKDOC2/SkyPaint+Tutorial
I'd love to hear about a more modern workflow that relies on one of the major 3D packages (Max, Maya, Blender etc.).
However, I'll give you another option.
Open up Photoshop and create a new document 3x as high as you want the resolution for one cube face, and 4x as wide.
Be sure your grid is set up to be power of 2 friendly. I recommend the main divisions being at least 1/4 of your single face resolution with 4 divisions each (or some other power of 2 to your liking). You'll need it later
First thing: Paint your abstract texture, then make it tile horizontally. (Filter-other-offset (use half the total res in x, and have edge pixels wrap around. Then paint or clone stamp or whatever out the seam in the middle, being sure to not touch the edges of the piece)
Keep your main detail to the center area, but letting some drift up and down is fine. Just remember that only 1/4 of the bottom and top thirds will wind up being in the final texture.
(uv layout for cube)
Next, copy out a triangular section that is the full face width wide, and half the resolution high from the top and bottom thirds. This is where grid snap with 4 divisions per face comes in super handy. Easy selection with the polygonal lasso.
Rotate all these sides together to for single squares where your top and bottom faces are:
Fix up the resulting seams, bringing out or adding detail as you want, just DON'T TOUCH THE EDGES of your top and bottom faces. This results in a clean cube with whatever content you feel like painting in. So at this point you can use this as is if you've got an unwrapped cube, or you can export each face separately from Photoshop in a variety of manners.
In the case of the below demo, I left the whole texture as one piece, and just added some extra buffer as appropriate to allow for mipmapping.
Download the cube object.
[sketchfab]32ff08d3482b410bbee8d765d2871478[/sketchfab]
It's visible in the Sketchfab example, as linear distortions in the corners. If it was mapped on a sphere you wouldn't need the distortion, because every surface would be equidistant from the camera. But, it's a cube, so...
After some thinking, I believe the following is what's needed to add the perspective distortion to any cubemap image that you create like described above.
1) Create a cube object in your favourite 3D program. Make it any size, and completely centre it in the scene.
2) Tesselate \ subdivide each of the faces once to add a vertex on the center of each face.
3) Connect the center vertex to the corner vertices, to ensure that the triangulation is correct.
4) Reposition the center vertices such that their new position is their current position multiplied by the "square root of two."
For example, the front face of my cube has its center vertex at [ 0, 50, 0 ]. Then I'll position this vertex at [ 0, 50 * sqr(2), 0 ].
The result of 50 * sqrt(2) is 70.7106781, so this vertex should be relocated to [ 0, 70.7106781, 0 ].
You would do this for all the center vertices. The top center vertex, for example, was [ 0, 0, 50 ] and now it's [ 0, 0, 70.7106781 ].
5) Map each face of the cube with the corresponding cubemap texture that you created. Make sure their orientations are right (you might need to rotate some of textures).
Make sure that all textures \ materials are SELF ILLUMINATED, so that the brightness from the textures is preserved.
6) FLIP the geometry of the cube, so all faces are facing in.
7) Position a camera at [ 0, 0, 0 ] (so it's inside and in the centre of the cube ) and set its FOV (field-of-view) value to 90º degrees. If you display the camera frustum, you'll see that it aligns with the cube face.
Set the rendering size to a square power of two, like 512x512, 1024x1024 etc.
8) Render each cube face by orienting the camera appropriately. These rendered faces are now distorted and can be reassembled into a cubemap texture to be used in-game.
- - - - -
I've tried to do the same with the Displace or Pinch filters found in image editing software, but I realised that these filters are linear and you also need "perspective correction" which is something that you only find in 3D software rendering.
The only way to manually add perspective distortion for making cubemap textures from scratch that I found is by means of the above, using a 3D program.
Though if you're working in 3ds Max, a faster/easier way is to put a camera at the origin, construct your scene however you like around it (sphere with a equirectangular pano on it, and 3d paint the seams, layer other maps or geom inside it, etc.), then use the Reflect/Refract map to automatically render the cube faces (as outlined here on the wiki). I've used that method many times to edit/render cubes.
Edit... if doing Kryzon's method, Reflect/Refract will automate steps 7 and 8.
So I imagine a possible workflow is:
1) Create the abstract cubemap as per Valias' post.
2) Add some distortion to the textures using the modified cube from my post (it's still an approximation, it's not perfect).
3) On step #7, use the Reflect\Refract material automatic rendering of cubemaps to image files.
The Reflect/Refract adds the angular distortion for you, as long as your source looks seamless when you look at it through the "origin" camera.
Like, don't put that map on a cube, first thing.
What's cool is you can layer multiple cubemaps together in Max if you want. Map them onto nested cubes, and use step #2 here http://wiki.polycount.com/wiki/Cube_map#Cubemap_Seams to avoid cubemap seams, then use Opacity mapping with a 2nd UV set to blend them however you like.
And you can layer them with latlong panos too. It's pretty cool.
I was trying to find an "all ps" way of doing it.
Also I think some games still wind up using a cubemap for a skybox, or at least for reflections. Especially if they're not in the photo-real PBR Category of art direction, so its still important to be able to make a decent cube map.
ANyhow, I got some decent results by just using photoshop's "spherize" filter. (ALso, protip, if all those layers making the top and bottom are smart objects, they all reference the same image data, so you can apply filters and such and update everything at once without redoing the masking)
However, projecting from a mapped sphere onto the cube via render to texture definitely gives the smoothest results, But you'll want to create the texture to take the spherical distortion into account ahead of time.
Examples:
Photoshop spherize
[sketchfab]823ef763b11648d7b0f0af76abf6974c[/sketchfab]
3ds max bake from sphere textured with original horizontally tiling texture onto single smoothing group cube:
[sketchfab]f3a667d3c5cd4c8d83eabfa60567072d[/sketchfab]
Now the map to sphere and project option definitely has some serious upsides, in that you only need the texture to tile one way, and there's less fixing later.
But also, that if you're rendering to texture anyway, you can render multiple objects in a scene out, and so make even better use of the 3d software.
[SKETCHFAB]0974ba6fc94c4fdc867e9ba093d1a0cd[/SKETCHFAB]
First, the "Polar Coordinates" filter found in Photoshop and GIMP can be useful here as a preview of how your texture will look when mapped on a sphere. You can use this Polar Coordinates filter to see your texture "mapped" on a circle and fix the pinching manually by painting on top of it.
The GIMP filter has a "Map from top" option that allows you to choose between the top and bottom poles, but with Photoshop you need to flip the texture vertically and use the filter on the flipped version to be able to do that.
Additionally, Paul Bourke presents a method to distort a texture in order to compensate for the pinching when you map it to a sphere.
A person implemented Paul's algorithm in Lua, and I ported it to Python as a Python-Fu plugin for GIMP that you can get here:
https://www.dropbox.com/s/bkkv40yad9at53u/polarCorrection.py?dl=1
The plugin uses Paul's algorithm to do this:
That distorted version, when mapped on a sphere, looks [generally] better on the poles.
(The sphere on the right is the one with the corrected texture.)
If you use 3ds max and you don't want to download GIMP just to use that script, there's a 3ds max plugin that does the same. It's available as an Utility:
http://pxfactory.eu/plug/sc/sc.html
- - - - -
So with this in hand, you can create a rectangular texture with a square size or in a 2 : 1 ratio, for example, and paint it with your abstract graphics.
Then you run that spherical-map-correction plugin with GIMP or Max and offset the image horizontally by half the width so you can see and fix the seam that appears, then offset it back to normal.
Optionally, now you can use the Polar Coordinates built-in filters to see your texture warped as a circle and retouch the pole area, but know that this filter BLURS the entire texture (it loses detail when you go back and forth) and you might want to restore the details around the middle region by keeping an intact copy of the texture before using the Polar Coordinates filter, to lay on top afterwards.Sometimes just painting on the poles with the Polar Coordinates filter will solve the pinching.
Then you can finally proceed to your 3D program where you'll map the texture to a sphere and 3D paint it some more if you want.
Then you can render the sphere to a cubemap etc.
- - - - -
The difference here is that by working on an image editing program you'll probably have more control over the brushes and details in the texture than if you went straight to 3D painting.
I wish I had thought of that before trying the image editing route.
The quickest ways (and fortunately, with the best results) to make a skybox out of digital painting material seem to be either...
- Directly painting on the geometry, which can be a geosphere or subdivided cube with a "spherify" modifier, using a 3D paint tool such as 3D-Coat or Blender's texture painting tool. The geometry needs to be UV-mapped with uniform texel density before you texture-paint on it.
- Painting texture assets and assembling a 3D scene to use them, and render the scene to a cubemap. Then you paint over any seams that appear in the cubemap texture, like this article demonstrates:
https://judegodin.wordpress.com/2011/12/06/how-the-hell-do-i-make-a-cubemap/