• jan@cosmigo.com

Stereo Drawing in PMNG


#1

After my recent exchange with @Morintari on 3D images, I’ve started to look more into PMNG Stereo Drawing.

As I’ve mentioned, I’m a great fan of all things 3D and have been creating anaglyphs images with Photoshop since the 90’s. Here’s a 3D anaglyph website I had created back then:

http://www.neurolinguistic.com/teknoboy/italy-02.htm

So, I’m well aware of how to manually create anaglyphs in Photoshop, by working on separate color channels and offsetting images on a channel either right or left to make them appear nearer of further away.

Here follow a few consideration and questions I have regarding stereo drawing in PMNG, so hopefully @jan.cosmigo might help me better understand how to use them. Currently, the official documentation doesn’t really cover the topic in depth:

Interlaced Preview

The documentation mentions:

Another approach to display stereoscopic images is to use interlacing. That means all pixel lines (scan lines) of a display are divided. Every even scan line shows pixels from the left image and every odd scan line shows pixels from the right image. The display uses a special polarization techniques and every image scan lines use another polarization. Special glasses then filter the light so that only even scan lines can be seen on the left eye and odd scan lines on the right eye.

I actually have a 3D Tv supporting stereo images via polarized lenses. Scanlines are just one of the accepted stereo formats, it also supports SBS (side by side) images/videos — either horiziontally sided, or vertically. It usually does a good job at auto-detecting the stereo input format, but you can also select it manually.

On YouTube, for example, most stereo videos are available as SBS, because it’s easier to convert SBS to anaglyph by applying color filters, whereas scanlines might require a more complex approach.

My problem right now is how to connec the PC to the 3D Tv. The Tv is too far away and has a big screen. So, even if I manage to cable it up, I’d still need to be working far away in order to properly see the screen. Also, full HD is too high a resolution to work in pixel art.

Any ideas on this? All I can think of is create the images on the PC (previewing them via anaglyph mode) and then save them on a USB pendrive and preview them on the Tv images viewer app.

Anaglyph Preview

I noticed that the anaglyph preview doesn’t allow to swap red/blue channels. Unfortunately, there’s no standars as to wether the red lense should be on the right or on the left, and 3D glasses are made in both formats. I have a box full of them, and most have the red lens on the right eye.

Also, blue/red is not the only option, there are also green/red glasses. So, ideally PMNG should allow to choose the lens colors and positions in the preview window.

Composite Output

I haven’t figured out how to save the final 3D image to file. Let’s say I’ve created a stereo image in color. Now I need to export it as both an anaglyph image and a polarized image. How do I do that?

Saving Anaglyphs

I’d expect the anaglyph output dialog to allow me to choose the lens colors to use (ie. red/blu or green/red), to actually tweak the used colors slightly (not all lenses are equal in color) and to decide which lens goes over which eye.

The final image on disk should then be saved as we see it in the previer — i.e. both red/green channels merged together in a red/green image, all colors stripped out.

Saving Interlaces

As for the polarized lenses images, I’d expect the save/export dialog to offer a variety of options:

  • Interlaced scan-lines
  • Side-by-side horiziontally
  • Side-by-side vertically

General Thoughts

Having worked with stereo anaglyphs in Photoshop, I’m not quite sure how the same tools and workflow for interlaced images could also work for anaglyphs. When working on anaglyphs, there are a variety of techniques, but basically you always work with greyscale colors in CYM color mode, and then start offsetting the Cyan (or Magenta) layers that you want to be further away or nearer to the observers.

Depending on the target medium, the maximum offset could be as little as 30px (for screen viewing) or a matter of cms when targetting printed material (depending on the DPI resolution).

Depending on the actual image contents, you often had to add to tweak backgrounds for the 3D displaced layers (unless transparent objects). For example, if you’re drawing a dragonfly, you must ensure that the body is always opaque (by applying some grey shade) and that the wings are transparent — see-trhough displacement enhances the 3D illusion.

In anaglyph drawing, you basically need to use as many grey shades as possible to enhance depth illusion, and try to avoid pure white and black. Also, don’t use flat colors but always use noise, dithering patterns or duotones patterns — because flat-colored areas tend to look empty in 3D space. There are many considerations regarding the choice of these patterns, for in 2D images granular textures tend to make object look further away, as dark colors do, so there’s also a wisdom on how to choose shades and noise patterns that match the object collocation on the Z axis in a stereo image.


#2

Anaglyph Glasses

OK, after various tests I’ve worked out that PM currently expect anaglyph glasses to be with BULE lens on RIGHT eye, like these:

anaglyph glasses

Max Delta Ranges

Also, after some tests in anaglyph previews, it looks like an offset of 20 (i.e. max -20/+20) is a reasonable setting for 1:1 previewing — higher values would prevent being able to focus on the furthermost and nearest elements at the same time, causing eye strain. More ore less, this range is the same I had used in the 90’s, although screen resolutions were about half of today average monitor.

Of course, the above ranges might be affected by the number of elements present in an image — i.e. if many other elements float at other Z values, especially near Z=0-10, then you might push the delta-limit to 30, for intermediate objects would help keep focusing references in view, and simplify looking at the overall scene.

Dithering/Halftones Tools

From my first tests, I’ve found some problems using the dithering fill tool in stereo mode. If I fill a background with a halftone pattern (on left frame), although the offset is honored on the right frame, the fill tool doesn’t fill the whole right frame, but leaves gaps. It seems that it’s working based on the left frame as a cropping reference.

This might be a serious limitation, for background patterns are crucial to provide a stereo reference of the furthermost element in a picture. So you’d expect the pattern to fill the right frame completely, but with the right delta-offset (positive or negative).

Manual Offsetting

Overall, it’s often preferrable to work on the left and right frames manually, by applying a brush on both frames. In Photoshop I’d be using the arrow keys to manage horiziontal offset, with each key carrying out exactly one pixel offset, and ShiftArrow shifting by 10 pixels.

In PMNG arrows don’t allow to move a brush one pixel at the time, apparently.

Also, in stereo drawing it would be useful to control tools by means of coordinate insertion — e.g. draw a line from 10,20 to 40,70, or a circle centered at 100,100 with radius 30, etc. For some operations are best handled procedurally.

Stereo drawing is a tricky art, requires various tricks of the trade, and overall is quite different from normal painting. To have the base tools work efficiently in stereo-drawing is quite a challange IMO. And anaglyph is quite different from interlaced 3D, and different rules apply too.


#3

Anaglyph Example

Here’s an anaglyph stereo image I’ve created as an example to prove my point about the importance of using noise instead of flat colors:

3RD PARTY CREDITS — Composite image created using Kenney’s free assets (public domain via CC0 license)

As you can see by comparing the top and lower images, the latter has more 3D depth thanks to noise addition to the flat colors. The image was created using Photoshop, with some quick-and-dirty techniques, using noise filters, etc. But the same principles would apply to pixel art, except that dithering halftones would be used instead of algorithmic noise.


#4

tajmone, So glad to see that your giving PMNG’s stereo drawing a chance! You are our 17th user, we’re well on our way to twenty! The more users the more tools! The modus operondi for drawing in PMNG is a little differant than what you would do in Photoshop. I always start at a delta of zero and as my sprite has more and more depth layers I increase in delta. For example if I was drawing a character like Mario I would draw his spine at 00 delta the inner arms away from the camera would be at -1 his outer shoulders at +1 and that would complete the character. You can manipulate the anaglyph layers directly but to do this you must cut out that layer with a brush cutter. Offset it in one of the two screens and be sure that you paste it down so it is on the exact y value as it is in the other screen. Of course this would be so much easier with 3-D brushes. Which I am working on Jan@.cosmigo to include and the more people that use the 3-D features the more tools we will have supporting them!


#5

@Morintari:

this would be so much easier with 3-D brushes. Which I am working on Jan@.cosmigo to include and the more people that use the 3-D features the more tools we will have supporting them!

Interesting. How would a 3D brush be created/stored? You draw it in stereo mode and PM saves both images (left/right) for the single brush?

The modus operondi for drawing in PMNG is a little differant than what you would do in Photoshop.

Yes, it is. In Photoshop I’d basically create two separate folders, one for all the RED layers, the other for the BLUE ones — and I’ll filter the color channels on the folder properties, not on the single layers. This approach allows to place all the righ/left layers in a single stack for each color, which is required to preserve opacity of elements piled up on each channel.

Basically, every image is turned to greyscale by desaturating it, on the BLU channel folder, and then I start to offsett right or left the layers in the RED folder, to make object look near or far away. This method assumes that all objects are “flat”, and it’s more like a 3D comic composition where figures are cut out and placed at different Z depths, and each element is flat. In order to create 3D details in the single elements, you’d need more complex workflow, maybe using bump maps.

I vaguely remember a tool for converting 2D photos to anaglyphs, but I can’t remember exactly how it worked. It uses some greyscale images as a bumpmap to cut and displace the elements in the photo, if I remember correctly. Then you had to manually retouch the various holes left from displacement.

But one thing that it’s sure in all stereo imaging is that layers are important. So I wonder if having some layer settings for stereo wouldn’t be useful in PMNG — e.g. set the delta offset on a per layer base, and let PMNG draw the right frame. This might allow to get right of the right frame too, for it would be generated at preview/export time by PM based on the layer settings. Just a thought.


#6

Tajmone said"
Interesting. How would a 3D brush be created/stored? You draw it in stereo mode and PM saves both images (left/right) for the single brush?"

Well a user would cut it out with the brush cutter. While the stereo option was used this would let the brush know that it was a stereo brush. Once the user cut it out then they could use it or even displace it, or they could put it in the brush container and it would have a red “S” on it.

Tajmone said"But one thing that it’s sure in all stereo imaging is that layers are important. So I wonder if having some layer settings for stereo wouldn’t be useful in PMNG — e.g. set the delta offset on a per layer base, and let PMNG draw the right frame. This might allow to get right of the right frame too, for it would be generated at preview/export time by PM based on the layer settings. Just a thought."

Well that is a nice idea but I also like the way PMNG works it allows the user to draw in 3-D with as few layers as possible.