How To Make Your Personal Spooky Magic Eye Footage (Autostereograms) « The weblog on the backside of the ocean
The straightforward standalone C++ code that goes with this submit and makes autostereograms, could be discovered at https://github.com/Atrix256/Autostereogram.
The Nineteen Nineties! They felt like a wasteland of tradition on the time, however trying again, there was hyper colour t-shirts, the start of mainstream computing and the web, the peak of different rock, and naturally magic eye photos.
Unfocus your eyes such that the 2 dots overlap. A 3D picture ought to emerge!
Fast PSA for those who can’t see it!
To make an autostereogram, you want two issues:
1. Colour Picture: A tileable repeating sample. This could additionally simply be “white noise”.
2. Depth Picture: A gray scale depth map, or a black and white masks. This defines the 3D form. Brighter pixel values are nearer in depth.
For the above, I snagged these two from pintrest.
The picture you’re making goes to be the width and top of the depth picture, however goes to have as many colour channels as the colour picture.
You construct the output picture row by row, from left to proper. To begin out, we will simply tile the output picture with the colour picture. The Output Picture pixel at (x,y) is the Colour Picture pixel at (x % ColorWidth, y % ColorHeight). That makes a tiled picture, which doesn’t have any 3d impact in any respect:
To get a 3D impact we have to modify our algorithm. We have to learn the Depth Picture at pixel (x,y) to get a price from 0 to 255. We divide that by 255 to get a fractional worth between 0 and 1. We then multiply that worth by the “most offset quantity”, which is a tuneable parameter (i set it to twenty), to get an offset quantity. This offset is how a lot we must always transfer forward within the sample.
So, as an alternative of Output Picture pixel (x,y) utilizing the Colour Picture pixel (x % ColorWidth, y % ColorHeight), we’re calculating an offset from the Depth Picture and utilizing the Colour Picture pixel ((x + offset) % ColorWidth, y % ColorHeight).
Doing that, we aren’t fairly there. Some 3D results are beginning to come out, but it surely doesn’t look fairly proper.
In actual fact, for those who use the less complicated depth map of the rectangles proven beneath, you may see the rectangles simply fantastic, however there appears to be holes to the fitting of them.
What we have to do isn’t just look into the Colour Picture at an offset location, however that we have to have a look at the Output Picture we’re constructing, at an offset location. Particularly, we have to have a look at it within the earlier colour tile repetition. We use the Output Picture pixel at ((x + offset – ColorWidth), y).
An issue with that although, is that when x is lower than ColorWidth, we’ll be taking a look at a pixel x worth that’s lower than 0 aka out of bounds. When x < ColorWidth, we must always use the Colour Picture pixel as an alternative, utilizing the identical method we had earlier than ((x + offset) % ColorWidth, y % ColorHeight).
That fixes our drawback with the less complicated squares depth map. The holes to the fitting are gone.
And it additionally largely fixes our “grave” picture:
There may be one drawback remaining with the grave picture although. How these pictures work is that your left eye must lined up with an unmodified tile on the left, and your proper eye must be lined up with a modified tile on the fitting. The grave picture has depth data very near the left aspect, which makes that not be doable. To repair this, you may add an additional “empty colour tile” on the left. That makes our picture just a little bit wider but it surely makes it work. This additionally has the additional advantage of centering the depth map, the place it beforehand was shifted to the left a bit.
There we’re, we’re accomplished!
Different Particulars
- I discovered it helpful to normalize the greyscale depth map. A few of them don’t use the complete 0 to 1 vary, which implies they aren’t making essentially the most use of the depth obtainable. Remapping them to 0 to 1 helps that.
- Some masks have been meant to be binary black or white, however the pictures i downloaded type the web had some gray in them (they have been .jpg which is a part of the issue – lossy compression). Having an choice to binarize these masks was helpful, forcing every pixel worth or 0 or 1, whichever was nearer.
- The binary masks i downloaded had the half i used to be occupied with being black, with a white background. I made the code in a position to invert this, so the curiosity half would come out as an alternative of receeding in.
- The gap between the helper dots on the pictures are the width of the Colour Picture. A wider colour picture means an individual has to work more durable to get these dots to overlap, and it might not even be doable for some folks (I’m not sure of particulars there hehe). I used tile sizes of 128.
- It’s arduous to make out fantastic element from the depth maps. It looks as if bigger, coarse options are the best way to go, as an alternative of fantastic particulars.
Extra Footage
Right here is the grave, with a special colour texture. I discover this one more durable to see.
And one other, utilizing RGB white noise (random numbers). I can see this one fairly simply, but it surely isn’t as enjoyable themed because the pumpkin picture 🙂
And right here is greyscale white noise (random numbers) used for the colour picture. I can see this simply fantastic too.
I additionally tried utilizing blue noise as a Colour Picture however I can’t see the 3d in any respect, and it isn’t a thriller what the 3d picture is. You’ll be able to see the repetition of the depth map object from the suggestions. I feel it’s attention-grabbing that the repetition is required to make it look proper. I’ve no understanding of why that’s, however for those who do, please go away a remark!
Listed below are some pictures that aren’t the grave. I discover the pumpkin colour texture works fairly properly 🙂
Hyperlinks
This video kicked off this nerd snipe: https://youtu.be/-okxLz1UauA?si=y_QK8-Bv4EzZSGBv
This was additionally helfpul: https://flothesof.github.io/making-stereograms-Python.html
Right here is the code I wrote that makes these autostereograms once more: https://github.com/Atrix256/Autostereogram
Lastly, I feel it could be actually neat to make a recreation that used this system to render 3d. It may very well be one thing easy like a brick breaking recreation, or as complicated as a primary particular person shooter. A problem with that is that it’s essential to course of the picture from left to proper, as a result of suggestions loop wanted. That received’t be the quickest operation on the GPU, forcing it to serialize pixel processing except anybody has any intelligent concepts to assist that. Nonetheless, it could be fairly neat as a tech demo!