Using GIF comics to create 3D effects without glasses

Since taking Stan Heller‘s 3D art class at Mission Comics, I’ve been wanting to make more anaglyphic pieces, but didn’t want to have to order red/cyan glasses for people to read… after pondering the problem, I thought I could try using animated GIFs to show depth (parallax scrolling). I’d like to note that this isn’t the first time a webcomic has used an animated gif as part of it’s story, but those other comics where using them to convey movement of time (rather than keeping each panel a “snapshot” of time) and also usually only as a novelty effect in a single panel.
The advantages of this technique include; no glasses necessary, plays on browsers without requiring Flash, can use any colors, and works for people who can’t get the 3D effect from stereoscopic glasses.
Downsides are: constant uncontrollable movement, file size is large (because I’m loading 6 big pages of art), and it takes FOREVER to make.
Since the left right motion reminds me of old lenticular cards, I’m calling this style “lengifular 3D”. If you’d like to repost the above comic, you can find the original file here.

Comments

24 responses to “Using GIF comics to create 3D effects without glasses

  1. stanheller Avatar
    stanheller

    Doc,

    All except one of your panels seem to be moving at the same rate of speed, but the one exception makes me think that the speed is a function of the individual panel. Can you vary the speeds? Would having the panels work at different speeds be MORE or LESS desirable?

    Talked with a friend today who told me about a thin screen 3D TV app that runs left and right eye images at a rate fast enough so the end result is 3D without glasses. I'm a bit dubious, but the 3D TV bandwagon seems to have started rolling.

    I'm going to make a prediction.

    Sometime this year, one of the networks will have a 3D TV show and they will mail out loads of 3D glasses. If we are lucky, they will be the red/cyan ones. I still think the polarized ones are too expensive for a mass promo, but at volume, those things can be made for five cents a pair.

    I think the 3D episode of “Chuck” last year used TV Guide to distribute glasses. Could be wrong about that…

    All I know is the chatter on 3D keeps increasing. Avatar probably pushed it over the top. What happens next…

    I'd still like to see you make an anaglyph book. Think about it.

    =stan

  2. schalicto Avatar
    schalicto

    Good stuff! I really enjoy this technique!

  3. cianna Avatar

    very very cool. I love it!

  4. DocPop Avatar

    Thanks for the feedback and help, Stan. I can vary the speed that each frame of animation plays at, but can't have different panels playing at different speeds of other panels. For this comic I'm using 6 frames of animation. Most of those frames really just 4 variations of view, then 2 frames of repeated view (so I'm going A,B,C,D,C,B repeat). Each frame plays for 0.4 seconds in this example, but I could have each frame do .3 or frames A and D play .4 while frames B and C play .2 (to make it feel like a pause is happening).

    About your prediction, ESPN will soon be launching the first 3D only channel, and Sony-Imax-Discovery will be launching a 3D channel in 2011. Avatar has greatly changed things for 3D, and it feels like a re-emerging technology. I'm excited.

    I might still do an anaglyph comic this year. In fact, this lengifular 3D comic came about while I was working on a 3D comic about Avatar.

  5. Star Avatar

    Good work, Doc!

  6. Nina Avatar
    Nina

    I think you would enjoy this: http://www.agifaday.com/

  7. Mark Avatar
    Mark

    Cool! But what's lacking in linear perspective, shading, texture gradients, depth of field, etc.? True, there's something extra juicy about stereoscopic depth, motion parallax or kinetic depth. Is it the extra juiciness you're after or breaking free of the page or …?

    Other methods, all a bit lame
    – Use web cam to detect head movements to drive motion parallax (could do this with Flash but its a hassle, plus web cam is weak link)
    – Audience slides a strip of frames where you can only see 1 whole frame at a time and there's parallax when the frames are sliding (weak link is that parallax stops when you've settled on a frame which is most of the time)
    – Put a jiggle handle on the bottom of the frame so that audience controls the parallax and it feels a bit more cause-and-effect (guess this needs Flash)
    – Looping animation of some of the objects in the frame for kinetic depth

  8. DocPop Avatar

    if you EVER feel like elaborating any of those ideas, I'd be down. It'd be awesome to make a comic for Android/iPhone that uses the accelerometer to control the 3D effect! But we've already talked about that stuff in other forms.

    As far as what I want to achieve… with this page, I just wanted to see how it looked. I was working on a stereoscopic effect, but was concerned about the glasses, then this popped in my head. I made a panel, which people kind of liked, but I wanted to really flesh out the concept to see how it works. I think it's cool, but mostly still novelty. Not sure if I'd try it again, unless I could work out a way for the user to control it (which would mean not a gif, which would mean not universal, which I guess defeats the purpose of my goal).
    Thanks for the feedback.

  9. Jeff Miller Avatar

    Scott McCloud would be intrigued. Where comics usually use space to depict time, you use time to depict space!

  10. DocPop Avatar

    I don't know about Scott, but you just blew my mind with that
    observation! It was tough to do all (but one) of the animations
    without showing motion through time though. The temptation to create
    motion was strong, but I really wanted to focus on depth not time.

  11. gWebber Avatar

    Very interesting, Doc. Have you though about making this “page” as seven seperate gif files?, they might load a bit faster that way.

  12. DocPop Avatar

    I thought about it, but then I'd lose the context. I wanted to
    recreate a comic book page with depth rather than a series of Gifs.
    Once all the pages load, I can have them play at any speed. I could
    also increase the load time by only doing 2 or 4 pages rather than 6.

  13. phm Avatar
    phm

    I like it but you don't really understand the concept. The foreground objects should be moving more than the background in order to give a sense of depth. I realize you may have been not doing this for the effect of humor, but I think it would be funnier if you actually did it correctly.

  14. DocPop Avatar

    I'm new to working with 3D, but what your describing is definitely backwards.
    Hold two objects close to your face and lined up with each other, then tilt your head to the left or right slightly. The two objects up front will have only slightly appeared to have moved apart, but the objects in the background will have substantially moved from their starting point.

  15. Reyn Avatar
    Reyn

    When you're driving on the road, the road closer to you seems to move faster than the road farther away. When you're on an airplane that's taking off looking out the window, the runway appears to be whizzing by. But when you're in the air, the cities down below crawl by slowly. What you stated is true, but only if the FOV of the reader is orbiting around the foreground object, not panning.

  16. Reyn Avatar
    Reyn

    Sorry, I worded that incorrectly. What you 'demonstrated', not 'stated'. Sorry for confusion.

  17. DocPop Avatar

    The illusion I'm going for is of someone moving left and right slightly while still looking at the foreground image. So the camera view would be rotating rather than panning.

  18. Aaron Poehler Avatar

    Interesting effect, could be really effective if used sparingly–i.e. one a panel here and there, rather than across the entire piece. The name “lengifular” is cringe-inducingly awful though and should be dropped immediately.

  19. […] your oddity of the day: A 3D webcomic. (Warning: May induce motion sickness.) (Via Comics […]

  20. […] mural. What Vic didn’t mention is that the modern renaissance man also holds the power of 3-D animated GIFs. A modern, Da Vinci, perhaps? Amazing, but also extremely dizzying after about 15 […]

  21. […] new find in Doctor Popular. He’s started a fantastic new project around creating 3D comics without using glasses. […]

  22. Wangsta Avatar
    Wangsta

    Cooltastic!

  23. Dc Avatar
    Dc

    Muito bacana!!!

Leave a Reply

Your email address will not be published. Required fields are marked *