# How can I paint equirectangular (360 degree) images?

I am creating a web-based virtual reality video game using A-frame. The a-sky element requires an equirectangular image to fit into the sky of the game. I want this sky to be outer space, which is difficult to get with just a cell phone. I'd rather just paint a space sky if I could, but I don't know how I could do this.

Does anyone know of a linux software (open source preferred) solution to painting an equirectangular sky background?

I found this explanation and solution which should work without any new software required (I can use Inkscape), but I was hoping for a simpler (lazier) application that's already prepared to just let me draw on a sky (360 image).

• How about Blender? Mar 24, 2019 at 17:59
• @joojaa I like blender. Is there a feature to paint on a ball or inside a ball with Blender? If yes, a link to instructions would be a great answer for this question... Mar 24, 2019 at 18:56
• I dont think its ontopic for this site youtube.com/watch?v=LcCQKuWPhXk Mar 24, 2019 at 19:07
• @joojaa I'm not sure what reasons you have to suggest this software suggestion on graphic design would be off topic for a graphic design stack exchange site, but from my limited understanding, this is a great answer to my question. If you post it, I will accept. Thanks for the help! Mar 24, 2019 at 19:17
• Well see this is about "Graphic" desigh not graphics design. How to wrap a image into 3d is not really graphic design Mar 24, 2019 at 19:46

## 2 Answers

These Wikipedia images should make it clear:

You want to draw an image which is distorted like the right one. Your VR system will map it onto a sphere like in the left and the system user watches it sitting in the midpoint of the sphere.

You "simply" take a rectangular area which is 2 times as wide as it's high. You want obviously draw space dust, stars and maybe some imagined planets, too.

Put the items into the rectangle, but you must decide the right scaling. Vertically there's needed no scaling. But horizontally you must stretch the items. The more stretching the further the item is from the equator. Single points, the north and south poles will fill alone the top and the bottom edges of the rectangle. Small items on the equator could be drawn as is without error.

In theory you can draw without stretching and with mathematical transform you can create the stretched image. The green area shows how much room you have:

If you insert the items into green area, cut it to small horizontal slices and stretch every green part as wide as the rectangle, you have the wanted equirectangular image.

The exact form of the edge of the green area is a half cycle of cosine curve (it's the same as sine curve, but shifted)

If you do the stretching to both directions, the job can seem subjectively easier:

In both cases the total stretching is the same (=nothing at the equator, one point to whole image width at the poles).

The practical drawing onto the green area is extremely difficult, because only very small items do not get distorted.

Drawing can be helped with lines which will become horizontal and vertical in the stretched image and present meridians and parallels on the globe map.

Parallels in unstretched image are the same as in the stretched image, but meridians are differently scaled cosine curves:

The stretching is possible in programs which have mapping with custom equations. The mapping takes content to point (x,y) in the stretched image from unstretched image point (x',y'), where y' =the same y and x' =(W-1)/2 + (x-(W-1)/2)cos(Pi(y-(H-1)/2)/(H-1)).

W and H are the image size in pixels, the coordinates are assumed to have ranges from 0 to (W-1) and (H-1). This is for bidirectional stretching, one directional stretching has nearly same formula , only replace (W-1)/2 with (W-1).

This is the stretched image and the stretching dialog in Affinity Photo:

The numbers reflect the dimensions W=3000, H=1500. As a photo this could be quite high resolution, but for this it's too coarse - as you see, polar areas are fuzzy. The image should contain sharp rectangles.

Placed on the sphere the result is a little cleaner due the pinched polar areas, but still far from the ideal:

I tested also actual drawing. Directly as stretched it was hopeless, nothing became recognizable near poles and the rest was (at best) laughably distorted, when the result was projected on a sphere.

Filling the green area before stretching worked marginally better, if the meridians and parallels were in place for reference, but in practice it was also hopelessly non-productive.

ADD: User Gerald Falla has told in his answer how it should be done. We can try it.

Actually Affinity Photo has live equirectangular mapping. One makes an empty drawing say 3000 px wide and 1500 px high, fills it (if needed) with squares for easier orientation and goes to layer live equirectangular projection mode. There he can paint the shapes, but for feedback he watches the sphere from the centerpoint.

There should be no problem to get the shapes drawn undistorted, if the person can draw well on normal plane. The drawing generates under the hood the right equirectangular image.

At first we have 3000x1500 px bitmap image with rectangular grating. The equator and the zero-meridian are red.

Of course it sits on a sphere:

Let's goto the live equirectangular layer projection and pan the north pole into the viewport. Then draw with mouse something:

When the layer live projection was closed, the equirectangular image was shown:

I bet only Leonardo Da Vinci or Archimedes could see what it is. On sphere it's this (as flipped):

• Its actually better do draw this in 3d. As then you can see the problems as they get done. Blender should be able to do this. Mar 24, 2019 at 18:06
• @joojaa If one could paint onto a sphere directly vector shapes in a system which uses floating point math there should be no problems with the accuracy. Unfortunately I have only the shown elementary tools. There's not even int(x) function for proper roundings. Drawing a bitmap image onto a sphere would not help if the length of the equator is only 3142 pixels. If there's a mode where one draws directly to the equirectangular image, but gets all visual and motion feedback as projected on the sphere, even bitmap drawing would be useful in resolution this low.
– user82991
Mar 24, 2019 at 18:16
• You'd be wrong about that, see the drawing tools actually project the image onto the map so the pixels get adequately smeared. In either case tha background image in A-Frame is not actually a sphere but rgather a spherical box, so theres far far less pinching. Again the projection method works EVEN better here. Mar 24, 2019 at 18:28
• @joojaa so the asked equirectangular map isn't what the questioner actually needs?
– user82991
Mar 24, 2019 at 18:32
• @Philosophist Its way way better to use 6 images in a box layout. You get to use less image data for a superior effect Mar 24, 2019 at 19:48

I'm going to give a graphics software answer here, which is in a different direction than all these - both Affinity Photo and Photoshop support 360 equirectangular painting Photoshop you'll want a 360 VR plugin like Flexify - Affinity Photo supports this natively.

I will address method in Affinity as I have that on hand here, and am embedded at a client site where I cannot install plugins so can't address the Photoshop method - but I know there are dozens of tuts out there.

Instead of starting blank slate which would be hard for you to tell was an equirectangular 360, I'm loading one I did for a client some time back - this the image loaded but not projected:

You select the target layer, and then go to the menu: Layer>Live Projection>Equirectangular:

And this is what you then see, only it's live-pannable, and you can work in it:

And just to show this should work for painting skies, I quickly droppedin a black fill layer, fired up the Xenon Astro brushes and got this quick result:

If you need a quick demo of someone working in that view - here's a YouTube link to a quick tut on doing brush-based touch up work in an equirectangular projection:

360 pano retouching in Affinity Photo

Hope this helps.

Well whoooops the - I missed that OP very clearly asked for Linux and open-source... mea goofa.

So looks like there is a GIMP plug-in called Panorama GIMP Plug-in which should help you with this in GIMP - and if that doesn't do it, Joojaa is right that there's a workflow using GIMP & Blender which can handle this pretty well, and is well documented out there bot in video tuts and written docs.

Hope this helps more than my tone-deaf ignoring of your system requirements!

PanoTools GIMP Wiki

• This is a great answer, but do you have a software that runs on Linux to do this? Mar 25, 2019 at 16:04
• Sorry - missed that part mate. Added to answer. Mar 25, 2019 at 16:11
• Note the photoshop can also paint on 3d objects UV maps just like blender. Mar 25, 2019 at 16:23
• Thanks, everyone, for the help. I will try each of these methods and select an answer. I would upvote each of these for the detail and effort put in, but I'm still stuck below 15 rep here. Mar 25, 2019 at 16:28
• I'll just leave this here: magazine.artstation.com/2017/04/… Mar 25, 2019 at 23:16