3D Images Without Glasses. How to Make a 3D Animated Gif.

Updated on March 22, 2020
mikejhca profile image

I created a program that makes animated GIFs from photos and videos. Then I used it to make 3D animations.

Animated GIF

Created with the same two pictures I used to create a real 3D image.
Created with the same two pictures I used to create a real 3D image. | Source

Real 3D

Look at your computer or phone and each eye sees from a different perspective. Two pictures are combined together to form a three dimensional image. Real 3D images are stereoscopic images. A left and right image are merged together. While wearing a headset or a pair of glasses each eye sees a different image. I bought a pair of three-dimensional anaglyph glasses and started making images that came out of the screen.

True stereoscopic images can look great. The image can look more interesting than the real thing. I took a photo of my coffee mug and it became one of my most popular photos. It is interesting because the handle appears to come out of the screen. The problem is that most people can not see the effect. Some people can not see in stereo and most people do not have the special glasses. Another problem is that they do not look good when viewed without 3D glasses.

A high quality pair of 3D glasses costs around $8.

3D Without Glasses

Split depth GIFs are animated GIFs with bars. Images appear to be contained within your flat screen. Placing bars onto a picture can make it look like the bars are in front of the everything else. Removing part of a bar can make it look like the bars are behind something. When the subject is no longer obstructed by the bars it appears to be in front of them. The bars were at the very front. Then an image moved past it. So it appears to be in front of the screen. It is a three-dimensional break out effect.

Wiggle stereoscopy is created by quickly alternating between similar images. Take two pictures of the same subject from two different perspectives. Then make an animated GIF or video. Quickly switching from one perspective to another can add the appearance of depth. Both eyes see both images so it is not true stereoscopy.

The main advantage of split depth animations and wiggle stereoscopy over stereoscopic images is that they can provide a three-dimensional effect without glasses. You can get some interesting pictures and it is easy to share them. The main disadvantages are that the effect is limited and they can be harder to make. Real 3D images can provide more depth and they can be made in 30 seconds.

The still hand appears to move in front of the bars.
The still hand appears to move in front of the bars. | Source

My First Stop Motion Animation

I took pictures of the toy with the arm in different positions to create movement.
I took pictures of the toy with the arm in different positions to create movement.

How to Make Animated GIFs

Animated GIFs are created using a series of pictures. Take 2 or more photos or a short video. Then save the images as an animated GIF. They are usually small and short. Most keep repeating. For a smooth transition the beginning and end pictures should be similar or the same. In the above animation I added the images in order. Then I added the same images in reverse order. It ends at the beginning.

They are popular online but viewing and working with them offline can be difficult. Often you only get the first picture. I could only view the GIFs on web pages, in e-mails or by opening the images with a browser. Right click and select "Open with" your preferred browser. Animations that look good on your computer or website may be blocked on social media sites if the dimensions are too big.

To save a video or series of images as an animated GIF you will need to find a program or make your own. Online GIF makers are easy to find. You could also use a paint program like Photoshop. All of my animations were made using a 3D GIF Maker I made while I was learning how to make three-dimensional images that did not require special glasses.

GIFs have fewer colors. So it reduces the quality of the images. You may want to do the animations as videos, WebP files or APNGs. An APNG uses PNG images for the animation instead of GIFs. With these alternatives you get better quality and a smaller file size. The downside is that it is less likely to play. When attached to an email I had to save the PNG file and open it in a web browser to view the animation.

I used TinyPNG to reduce the size of my Star Wars animation by 70%. For the smallest size possible I recommend WebP or video. It is easy to make a short video behave like an animated GIF on a web page. The video element in the code below plays the first video that works with the user's browser. The picture element displays the first picture that works.

<video autoplay loop muted inline title="3D Animation">
  <source src="3DVid.webm" type="video/webm">
  <source src="3DVid.mp4" type="video/mp4">
</video>

<picture>
  <source srcset="3DAnimation.webp" type="image/webp">
  <img src="3DAnimation.gif" >
</picture>
Boxing punches split depth GIF.
Boxing punches split depth GIF. | Source

Make barriers and borders. Then break through them.

Breaking Out

The breaking out of the screen effect works better when objects are getting closer to the camera. As it gets closer it becomes a little bigger. Adding bars is not the only way to make an image look 3D-ish. You are creating an optical illusion. Try to trick the viewer into making wrong assumptions by making fake borders.

For the tank animation I was able to use a filter to erase the background color. The hardest part is not accidentally erasing the moving object while you are removing the background colors. In the second animation I used a transparent public domain ghost image. All I needed to do was to change the size of the ghost 50 times and I got my program to do that for me.

Reducing the White Space

The photo above appears to have a lot of white space below it. Since the photo is supposed to appear to be smaller than it is the distance between it and the other content on the page should be minimized. White space can be reduced by adding text or images to the picture's background or by putting them under the picture.

I added some text to the picture but I could have done more. If the image above had a transparent background I would be able to put it on a web page with text underneath it below the background image. The animation would be on top of other content but the text would be visible until the ghost was over it.

The break out effect works best when the page background matches the image. I made the images on this page for a white background. Transparent backgrounds always match the background. Instead of having white around the background image it could be the same color as the area around it. See if the GIF maker or paint program you are using allows you to create a transparent background.

File types that support transparency include PNG, WebP, WebM, Mov and GIF. Images and videos can be see-through. To see an example check out my Star Wars animation. Open it in a new tab to see it with a black background. I do not recommend making GIFs with transparent backgrounds. Smooth edges can become jagged.

Positioning Content on a Web Page

The code below changes the position of the text on the page so it is under the image. GetBoundingClientRect gets the location and dimensions of the image. Position tells it that the position is being set using the code on the page. Setting the left and top values tells it where the text should appear. You can copy the code and save it in a text editor like NotePad in a directory with a picture.

The file name "transparent.gif" should be changed to the file you want to use. For best results use a transparent GIF. The file will open in your default web browser. Changing the position of the content on a web page can be very useful for special effects, games and online image editors.

Position.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, height=device-height"/>
<title>Moving Text Under a Picture</title>  
</head>  
<body>
<center><img id="pic1" style="max-width:90%";>
<div id="div0" style="font-size: 120%;text-align:justify;visibility:hidden;">Make a transparent image appear smaller than it is by placing text or images under it.</div>
<div id="div1" style="position:absolute;font-size: 120%;margin-left: auto; margin-right: auto;width:100%;text-align: justify;zIndex:0"></div>
</center>
<script>
   var Pic1=document.getElementById("pic1"),Div0=document.getElementById("div0"),Div1=document.getElementById("div1");
   function onload() //ready
   {
      Pic1.onload=function(){
         Pic1.onload="";
         const rect = Pic1.getBoundingClientRect();
         var LeftMargin=rect.width*.14;
         Pic1.style.marginLeft=LeftMargin+"px";
         Div0.style.width=rect.width+LeftMargin+"px";
         Div1.style.width=Div0.style.width;
         const rect2 = Div0.getBoundingClientRect();
         Div1.innerHTML=Div0.innerHTML;
         Div1.style.left=rect2.left+"px";
         Div1.style.top=(rect.top+rect.height*.85)+"px";
         Div0.style.display="none";
      }
      Pic1.src="transparent.gif";  
   };
   window.onload = onload(); 
   Div1.style.zIndex = "-1";
</script>
</body>
</html>

3D-ish Images

Split depth GIFs are almost 3D.

Wiggle 3D Stereograms

Stereograms are images that combine a left and right perspective. The different angles allow them to be seen in 3D. Wiggle images are supposed to be able to provide a real 3D effect without glasses. They can add depth but they only appear to go into or behind the screen. To make them you just need two or three images. A left, right and an optional transition photo taken between the left and right. The middle photo would be used twice.

Making wiggle GIFs is really easy but it can be hard to make ones that people like to look at. Limit the amount of shaking. Usually you want both pictures focused on the main subject so the subject of the picture barely moves. It should not look like you are recording an earthquake.

Click thumbnail to view full-size
Bear with wiggling nose.Dinosaur egg.Rancor star wars toy.Rancor star wars toy.
Source
Bear with wiggling nose.
Bear with wiggling nose.
Dinosaur egg.
Dinosaur egg. | Source
Source
Rancor star wars toy.
Rancor star wars toy. | Source
Rancor star wars toy.
Rancor star wars toy. | Source

Partially 3D Images

Wiggle stereograms are seen by both eyes so you don't get the full effect.

What is your favorite 3D-ish effect.

See results

With or Without Glasses

Wiggle stereoscopy is like a cheap knock off of true stereoscopic images. The images are shaky and they do not pop out of the screen far enough. Real 3D images tend to look much better but they require special glasses. Use wiggle stereoscopy if you want more people to see the effect. Use real 3D for better results. You could use the same pictures to do both.

Split depth animated GIFs do not provide a real 3D effect and they require more time and effort to make. They do tend to be more interesting to look at than wiggle stereoscopic images. So I think they are worth the extra effort. I liked the results I got when I added bars but my favorite ones appear to leave the picture.

If you are interested in making three dimensional pictures then I recommend getting a pair of three-dimensional glasses so you can do real 3D, wiggle 3D and split depth animations. Make images that look good with the glasses and ones that look good without them. The images on this page are some of the first animations I made. I was still learning how to make them and I did not have a lot of practice. Use them as examples but try to do better.

3D-ish animated PNG of a Star Wars ship. Background image taken by NASA.
3D-ish animated PNG of a Star Wars ship. Background image taken by NASA. | Source

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2020 Michael H

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://maven.io/company/pages/privacy

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)