handdrawn skybox with procreate tutorial

in this documentation we are going to create a handdrawn skybox with procreate. since its more about the process itself i wont go into the exact details of each function i use in procreate. in the upcoming video tutorial we will go more into detail.

basic concept

why we dont use a 6 sided skybox

there are different methods to set up a skybox in unity. one of the methods is to have 6 seamingless sky textures set up in a way they form an actual box around the player (camera) position e.g. problems with these methods often occure when viewing the boarders between two. most of the times it can be seen, that the sky is a box and not a globe. to fix that, you usually have to compensate the edge/seam with stretching your texture at certain points. 



to archieve something visually more appealing and with a more reliable workflow, i will show you in this tutorial how i archieved the following skybox with a few tools and an easy to follow step by step guide.


what do you need?

to begin with you need a 3d ball, which can be easily created inside of blender. make sure it has enough subdivisions and is shaded smooth. 


afterwards save it as an .obj file (procreate cant use fbx files). now you gotta import the sphere into procreate, which can be easily done with dropbox for example.

afterwards you have to import the sphere into procreate and load it up. if youve done this correctly you should be presented with something like this. you can image the sphere as your future skybox. since the normals of the sphere point outwards, the stuff you draw on the outside will "inverted" on the inside, once imported into unity. but more about that later.

starting the design process!

the foundation of our skybox

as usual when you start to draw something with procreate, make sure you use enough layers and keep them organized. this will help you a lot when you made a mistake or want to check seperate layers for their looks.

to get a better orientation when you start to draw on the sphere, i suggest that you create an extra layer which gives you a defined horizon cut for example. if you havent tried already, there are 2 main methods to start to paint your skybox. you can either directly draw onto the sphere or let procreate show you the surface of the sphere on a 2d texture. to do that you just have to go into the options and activate the 2d texture settings.

if you want you can activate a reference of the 3d rendered sphere under canvas. that will help you to understand what you are drawing on the 2d texture even more. in the following we can see the guiding lines i previously talked about. they are the point of reference for the heigth of my skybox

adding a few gradients to my lines, i ended up with something like this.

clouds, islands etc.

there are 2 different ways to go from here. you can either start drawing on your 2D texture or directly onto your sphere. because the UVs of the 2D texture are stretched around the sphere it is advised to draw directly onto the sphere. definetly check out existing youtube tutorials for creating/drawing clouds etc. in procreate. 

quick tips 

make sure you have a basic understanding about the way clouds look and how they reflect/absorb lighting. i suggest you to check out the basic shapes of clouds on google images. 

keep an organized workflow. dont forget to create different layers for each cloud and combine them afterwards.

compare your current status, meaning you should frequently check out the look inside unity for example.

dont get irritated about the way we archieve our skybox. in unity we can see the same skybox we draw on the outside of the sphere, while we are standing inside the sphere in unity. 




exporting from procreate and importing in unity

exporting from procreate is pretty easy. as usual you have to go into your settings and press share. from there you can share the texture as a png into dropbox for example. 

afterwards you can import the texture into unity. from here on you have a create a new material via right click>create>material. then you got to switch the materials shader to skybox/cubemap.

at this point you still wont be able to drag your texture into the new material slot. to change that you have to go into your texture settings of your skybox and change a few things.

1. texture shape has to be changed to "cube"

2. Mapping to "Latitude - Longtitude Layout(Cylindrical)

3. Convolution Type to "none"


then go ahead and drag your skybox texture into the material slot. the last step is to drag your material onto your old skybox and there you go. 

© copyright. all rights reserved