3D GIFs Created with a Simple Visual Effect

http://www.mymodernmet.com/profiles/blogs/3d-gifs

by bpierre • 12 years ago

546 104 12 years ago

well that effect is cognitively bookmarked for the next hackathon. Presumably it will work in games if used sparingly.

nwhitehead• 12 years ago

This would be pretty easy to do in games since you have all the z-buffer info already. I'm thinking of a HUD that has multiple horizontal "monitors" that show you the action. Then when things get close, they pop out of the monitors for the 3D effect. That would be awesome!

neals• 12 years ago

Kinda reminds of that other visual effect, where they add circles to a photo and give the illusion of the people in the picture being naked. Won't post the link here cause NSFW, but I can imagine it being a related effect: adding visual markers to change perception.

tekacs• 12 years ago

In case anyone has trouble searching for this, the term you're looking for is 'bubbling'. Parent poster has already warned you that this could presumably be considered NSFW somewhere (apparently)

gatehouse2• 12 years ago

Yeah, I'd consider it Not-Safe-For-Work (nudity). Since you've been warned thrice here is a link: http://i.imgur.com/OeSyGw5.jpg

fsniper3• 12 years ago

TIL There is a subreddit for this. http://www.reddit.com/r/bubbling.

afhof2• 12 years ago

The interesting effect of bubbling is not so much that people appear naked, but that the original picture, containing clothed people (typically bikinis), appear naked.

supercoder• 12 years ago

I've read this sentence 5 times and still have no idea what your argument is.

joyofdata• 12 years ago

The meaning of this statement is that bubbling is basically covering up more of the body then the bikini. So, technically a bikini reveals more than a bubbled bikini.

MarcScott• 12 years ago

I think these appeared on Tumblr a year or so ago. Found a nice looking tutorial for making them here - http://www.youtube.com/watch?v=TmAWiVxOyto

optimo• 12 years ago

is it okay to not be impressed with this 'effect'?

trentmb• 12 years ago

Why wouldn't it be?

jasonlfunk• 12 years ago

Thanks for asking first, we'll get back to you.

d232• 12 years ago

It's HN, so the OP could have cured AIDS while being the first on Mars and it would be fine to not be impressed.

Edit - ah perfect, see here: https://news.ycombinator.com/item?id=7249107

pareshverma91• 12 years ago

Showing the same gifs without those white solid lines for comparison would have been better. Anyways cool stuff :).

cstrat• 12 years ago

yeah this is something I want to see. i would think that the blur that goes on on the background part of the images plays some part in the 3D effect.

would like to see how it plays out without the white lines.

torbit• 12 years ago

I just tried the blur effect, but it is too much manual work. I spent 20 minutes, and finished a very small part of the gif. I just deleted it. It wasn't getting the 3D feel I wanted. I think having solid bright color instead of a blur, gives it more impact in the outcome.

PeterisP• 12 years ago

Do note that the effect is much stronger (at least for me) if the moving object goes outside of the perceived image bounding box - the http://bit.ly/1bUkBJQ example in the original article.

frooxie• 12 years ago

Drawing outside the panel is a standard method in comics when you want to add extra impact or a 3d effect to a panel.

For example: http://siguealconejoblanco.es/comics/wp-content/uploads/2013...

shmerl5• 12 years ago

Why specifically GIFs? It's a generic animation technique, works with any video format.

As was pointed out many times, if you have control over your site, don't use GIFs for video and animation. Use proper video formats (WebM and etc.). It will only save space and loading time and improve quality.

derefr2• 12 years ago

Basically: GIFs autoplay on people's Tumblr dashboards, proper video formats don't, and that's pretty much all people are trying to achieve in the first place.

If we just had some sort of file-extension/media-type (.webg, maybe?) that signalled to a browser "I'm a video container, but treat me like a gif, by defaulting to autoplaying, looping, and muting me", we'd replace gifs instantly.

arjie• 12 years ago

Facebook does this for videos uploaded to its services (Facebook, Instagram) and shared on feeds. It works quite well there.

ijk2• 12 years ago

It'd also have to be compatible with all browsers (including primitive versions of IE) to cover the other reason people use gifs.

shmerl5• 12 years ago

Video tag autoplays on any site where you have control over HTML. For example on Blogger. Can't say anything about Tumblr - never used it.

You don't need any special containers. Just use video tag properly, it covers all that functionality since the beginning:

https://developer.mozilla.org/docs/Web/HTML/Element/video

Something like <video src="..." loop="true" autoplay="true" muted="true".../>

Muting can also be simply achieved by making audio empty in the video if you need to.

seszett2• 12 years ago

I don't think the current popularity of GIF compared to HTML5 <video> is really because of autoplay (since <video> can do that too, and loop too).

The big advantage of GIF is that it works in an <img> tag just like any other image, so you don't need a website to explicitly support it.

Another advantage, I think, is that GIFs are guaranteed not to play sound, which is great when browsing say imgur.com or pr0gramm.com at work (edit: of well, I had missed the "muting me" part of your comment, so let's just say that we agree that it's an important component).

kalleboo• 12 years ago

Also, video tags only play in full-screen on iPhones, which is pretty unacceptable for the type of use people have in blogs.

Grue32• 12 years ago

Gif is also a non-lossy format (albeit with a limited palette). Pretty much all video codecs are lossy. What will really replace GIF is animated PNG.

Jakob• 12 years ago

I think one of the reasons is that iOS devices and some android ones don’t support autoplay (presumably to prevent battery drain). iPhones with iOS 7 will play videos only in full screen, hiding the rest of the website.

There are services which convert gifs to videos to use the much more efficient encoding: http://gfycat.com/about. So we’ve come full circle once again.

hcarvalhoalves• 12 years ago

I think this would work without the bars, by just having the object pop out from the boundary box.

s-macke2• 12 years ago

http://www.well.com/user/jimg/stereo/stereo_list.html

Other idea, but gives similar 3d effects

kingkawn2• 12 years ago

i think that using stereoscopic video footage run frame by frame back and forth from one lens to the other would be an interesting experiment

kingkawn2• 12 years ago

also using 60 fps footage to do it so that it was essentially watching to 30 fps pieces at once

lstamour2• 12 years ago

NSFW, upper right.

s-macke2• 12 years ago

It's sunday

the_cat_kittles• 12 years ago

lets see- i wonder if you could take a 3d scan of a scene (still or moving) and then superimpose a 3d lattice of white lines or something, and automatically generate the correct occlusion? that would make this effect very precise. that might be kind of cool. sort of like projecting a 2d lattice on a golf green to read the break

Houshalter• 12 years ago

There's this: http://www.cs.uiuc.edu/homes/dhoiem/projects/popup/index.htm...

Siecje• 12 years ago

Does anyone have the originals to compare?

wikiburner• 12 years ago

This was submitted last week, but didn't get many upvotes, so I'm glad to see this submission taking off today:

https://news.ycombinator.com/item?id=7200147

The following was a really interesting discussion, that I'd love to hear more opinions on:

==================================

pedalpete 8 days ago | link

This is really interesting. I wonder if the lines have to be so solid, or if a similar effect could be accomplished without breaking the image so much.

Would a bunch of almost imperceptible lines work? What about a smallish change in colour saturation or similar? reply

gojomo 8 days ago | link

I was wondering the same thing. Might a finer mesh/grid work? Or bars with some dimensional shading themselves? Or slight transparency?

Could the bars/layer even be animated, along some consistent plane, so that there's no static background part of the scene that's always obscured. (That might allow even thicker bars, if that's otherwise helpful for the plane-of-reference establishing effect, but which aren't as distracting, since the mind's persistence will 'see around' them.)

Combining these, maybe there could be more than one synthetic depth plane active at once, distinguished by color, translucence, or direction-of-motion? There'd be some perceptual dimming with all that layered-in non-native 'depth chrome', a little like looking through lenses or filters... but hey, other stereo 3D tech has similar tradeoffs.

vor_• 12 years ago

Unfortunately, I don't perceive the effect (I'm assuming there's supposed to be an optical illusion of 3D). The animations all look flat to me.

hrjet• 12 years ago

Yeah; I experience a sense of perspective, but not a sense of depth.

It would be interesting if this effect was combined with the wiggle 3d effect.

SpeakMouthWords• 12 years ago

One particularly interesting thing about the origin of this effect is that it spawned from the file size limit on .gif files on tumblr. If users wanted to exceed the balance of gif length, frame rate, and detail that they wanted, they would upload multiple sections of the same scene side by side. Tumblr's formatting would then add in the white bars automatically. This presumably gave the inspiration to use this for a 3-D effect.

gberger• 12 years ago

Uhh... But in the scenario that two gifs are side by side, how would the part that goes above the white bar appear, if the white bar is not part of any image?

ATLobotomy• 12 years ago

SpeakMouthWords was describing the origin of the white bars shown here (i.e. originally separating gifs).

These style gifs came later (i.e. gifs with 3d effect from the addition of the bars), integrating the white bars that had come to be expected from Tumblr posts.

flibertgibit• 12 years ago

This affect does not work on me, and, yes, I have two working eyes and neither is "lazy".

Crito2• 12 years ago

Yeah, I am not seeing this effect at all. Perhaps relevant: one of my eyes has poor eyesight, but 3d movies still work for me without wearing corrective lenses...

I suspect this only "works" if you really want it to.

ryanhuff• 12 years ago

These worked pretty "effortlessly" on me.

anonymfus2• 12 years ago

Try to close that eye.

anonymfus2• 12 years ago

Well, because this effect does not use stereopsis, it actually works better for people who don't rely on it. So if you want to make it stronger, close one eye.

arnarbi• 12 years ago

Works great for me, and I have amblyopia.

obamasupporter• 12 years ago

Awesome

samweinberg• 12 years ago

I wonder how prominent the bars have to be for this effect to still work. Can they be translucent or a color other than white?

dredmorbius4• 12 years ago

I'd seen this a few times in recent weeks and wasn't overly impressed, but yeah, sure, whatever. Clicked to open the link in a new tab, continued to other tasks for a while. It took me some time before I navigated back to it.

I flinched when I did as Capt. America's shield came flying toward me.

Maybe there is something to this after all.

CodeWithCoffee• 12 years ago

To answer other commenter's questions about the color, my perception is that it has to be the same color as the page background. This gives the illusion that the image is behind a 'window' in the page that is covered by the bars. Then when something moves from 'behind' the bars to 'in front' of them it gives the illusion of depth.

rurounijones• 12 years ago

For me the success of the effect was determined by how smoothly the object went in front of the lines.

The black and white image of the puppy didn't work for me at all because you could see the "pop" as it suddenly went in front.

Ice-Age and the Avengers clip seemed to stand out much more for me because it was smoother (To my eyes at least).

LambdaAlmighty• 12 years ago

Didn't work on me.

I didn't understand what the "visual effect" is supposed to be until I read the description.

I still see animated 2D GIFs with bars over them (=no real difference if the bars were removed).

ggambetta• 12 years ago

The bars aren't over them; at some point they appear to be below some parts, which is what gives the 3D effect.

chippy• 12 years ago

In my opinion it's very clever and interesting, but it's not particularly nice. It's very obvious in it's cleverness.

braum• 12 years ago

what a useless statement.

ahcox2• 12 years ago

They look particularly good expanded out to fill the page:

   http://hoog.li/g?g=http%3A%2F%2Fwww.viralnova.com%2F3d-images%2F&cimw=480

   http://hoog.li/g?g=http://www.mymodernmet.com/profiles/blogs/3d-gifs&cimw=320

ahcox2• 12 years ago

... Whoops:

http://hoog.li/g?g=http%3A%2F%2Fwww.viralnova.com%2F3d-image...

http://hoog.li/g?g=http://www.mymodernmet.com/profiles/blogs...

jazlyn• 12 years ago

its really an awesome gif collection. You may also like: http://www.thephotomag.com/2012/12/collection-of-30-still-ph...

slowmover• 12 years ago

These are called cinemagraphs, and here's a bunch of them for you: http://www.reddit.com/r/cinemagraphs

hawleyal• 12 years ago

"3D"

bigfaceworm• 12 years ago

Off topic: Captain America's throwing form is atrocious. See this for good form: https://www.youtube.com/watch?v=Z0dXR6EiReY

3D GIFs Created with a Simple Visual Effect

Related Stories