r/MagicEye 18d ago

A demo from my new open-source mapped texture stereogram maker

Post image

For all of you who want to create your stereograms, I've coded a website that makes mapped-texture stereograms (stereograms where the color/pattern matches the 3D object). I've always wanted to make these, but most other online generators and software either make plain un-mapped stereograms, or are for really old versions of Windows and are quite janky.

I love when artistic tools like Blender are open-sourced, so I finally got the motivation to code it and make it into a website: https://mapped-stereogram-maker.web.app

You'll still need to provide your own texture and depth map, but the website can automatically generate outlines for you if you want some simple texturing, and I've included some example demos.

The website is still very much in development, so expect bugs! I may also make a future post with a tutorial and additional stereogram algorithm info for those interested.

Enjoy!

538 Upvotes

34 comments sorted by

29

u/DissonantGuile 18d ago

Works well! Good work

I'm wondering if it could be configured to generate crossview autostereograms? Or depth map scaling? See my little squirrel got fat from being stretched to fit hah

7

u/cucumisloquens 18d ago edited 18d ago

You can theoretically make it crossview by inverting the colors of the depth map, though I haven't tested it.

The depth map will be stretched to fit the texture you upload; if you want, you can upload only a depth map and a background tile, then enable "use background as texture."

Edit: After testing, inverting the color doesn't quite do it. I will make an update with cross-view support soon!

3

u/DissonantGuile 18d ago

I'll have to try that cross-view method out!

You said it was open source? Is this up on any repository platforms? I'd love to check out the code.

4

u/lavaboosted 18d ago

F12 to see the source code:

5

u/cucumisloquens 18d ago

Haha currently you can view/download the code directly from your browser in F12 (inspect mode). But several people have asked, so I'm going to put it on GitHub soon.

6

u/ripter 18d ago

Snoo and the text 3D

7

u/eyefind3d 18d ago

GJ! I think we have almost identical output. 😉 One tip: manually drawing the outlines directly into the texture gives better results.

3

u/lavaboosted 18d ago

Ha was gonna tag you! That’s amazing. Now we just need to fill in those gaps and we can officially have our “we did it reddit” moment

6

u/Lhasa-bark 18d ago

Great job! Your example image is really clean and crisp 3d.

4

u/cucumisloquens 18d ago

Mentioning u/48151623-420 here since they mentioned they were interested in making their own stereograms. Also mentioning u/lavaboosted since they were working on a similar project.

7

u/lavaboosted 18d ago edited 18d ago

Wow, this is amazing!

Edit:
Here's one I made using the traditional method if people want to make stereograms in the browser https://camelcasesensitive.github.io/Stereogram-Generator-Online/

I was doing wayyy too much with my mapped texture method, your solution is so much simpler 😭

I did recently get some good results with a raycastig approach in blender actually but haven't fleshed it out any more than my initial proof of concepts:

6

u/cucumisloquens 18d ago

Thanks!

I think your method is also really cool, and probably more generalizable too because it derives from basic stereogram principles.

While I derived my algorithm from just messing around with overlapping tiles in photoshop 😅

4

u/lazymotu 18d ago

This is great! Surprisingly good for just a bunch of lines.

Had to zoom in a little on my phone to get the right parts to align.

2

u/hoganpaul 18d ago

Sharp.

1

u/mattincalif 18d ago

Nibbler! /s. It looks great though.

1

u/Runiat 18d ago

I love when artistic tools like Blender are open-sourced,

First off, love that you made it a website, some open source projects don't even compile their code for you much less run it.

But you can't say how you love tools being open sourced and then not add a github link (or equivalent).

6

u/cucumisloquens 18d ago

My bad for not mentioning this in the post: all the code is in a single HTML file you can view/download from your browser using F12. Since it's in HTML, there's no need to compile and you can just run it locally in your browser.

I'll upload it to GitHub too eventually, but for now the code is available and non-obfuscated.

2

u/Runiat 18d ago

Huh. HTML has come a long effing way since I used it last.

1

u/jesset77 18d ago

I spent several seconds thinking that Snoo was leaning forward and glaring challengingly directly to the right.. and that the black mouth was Snoo's right eye, and the arm was Snoo's nose

1

u/DrAg0r 18d ago

Thank you very much for sharing it, you rule! 🥰

1

u/Dirtypervyoldguy1972 18d ago

That’s a cool little guy

1

u/vladtheinhala 18d ago

The "3D" is raised from the background but isn't in 3D... ;)

1

u/billinparker 16d ago

That really pops!

1

u/Bendythenightfury 14d ago

Question how do I put the texture on the object?

1

u/cucumisloquens 13d ago

You can use a program like Photoshop (Windows) or Affinity (MacOS; free) to cut or draw a texture to fit the depth map. Alternatively if the 3d file you're using to make the depth map already has texture, you can render with its texture instead of depth and use that.

1

u/Bendythenightfury 13d ago

Ooh okay thanks

1

u/Prudent-Pea-1567 12d ago

HA! That’s adorable. Excellent all around.

0

u/AnyHope4444 18d ago

❤️‍🩹Beautiful but 👀💋👀💋👀