3D関連

360°回転する商品画像作成

ECサイトなどで商品画像が360°回転するものを見たことありますでしょうか?
こういった撮影、データ作成サービスを行われている会社もあるようです。

どのようにデータを作り、公開するのか大きく2つの方法をご紹介します。

①アニメーションgifやAPNGを使う方法

アニメーションgifはご存知でしょうか?

このように動くgif画像です。多くのブラウザで対応しています。
ECサイトによっては使えないところもあるので注意が必要です。

アニメーションというと、写真など使えないのか?と思う方もいるかも知れませんが、写真でも問題ありません。
ただし、色数に制限があります。
pngやjpgが1,670万色に対して256色と大幅に下がり荒く見えてしまいます。

アイキャッチや使い方紹介、フロー説明には向いていますが
細部を見せたいという使い方には不向きです。

また、最近ではPNGの派生規格として生まれたAPNGというものがあります。
この形式のデータであれば、gifの色数の制限がなくなり、綺麗なアニメーションを表示することができます 。
LINEのスタンプとかはこの形式らしいです。
数年前までは一部のブラウザのみで再生可能な規格でしたが、近年ではほとんどのブラウザで表示可能です。
ファイルサイズはgifに比べて大きくなるので注意が必要です。

GIF
APNG
  • 写真の撮り方
    ターンテーブルに載せて、カメラは三脚に取り付け複数枚取るのが簡単です。
    手軽に自動で撮影する方法を現在、開発を行っています。
  • データの作り方
    a. webサービスでも提供されています。
    https://www.bannerkoubou.com/anime/

    b. Pythonでも作れます。
    Pythonでソフトを組み、自動で撮影する装置と組み合わせることで
    作業を単純化することができ、複数の商品を撮影したい方にはオススメです。
from PIL import Image
import os
import glob

files = sorted(glob.glob('./images/*.jpg'))  
images = list(map(lambda file : Image.open(file) , files))
images[0].save('image.gif' , save_all = True , append_images = images[1:] , duration = 150 , loop = 0)
#image.gifをimage.pngにすればAPNGとして出力されます。

上記のような感じで、Pythonの画像処理ライブラリ Pillow (PIL) を使いgifやAPNGが作成できます。

②Java Scriptを使う方法

アニメーションgifの場合は、一定の速度で勝手に動く画像になりますが、
Java Scriptを使うことで、スワイプして動かすような動画も作れます。

  

このサイトはWordPressで運用していますが、WordPressですと更に簡単に埋め込みが可能です。
ご覧のようにスワイプしたり、マウスで自由に方向を変えることが出来ます。

  • データの撮り方①
    このデータは Fusion360 をScriptで操作し、自動で回転させ3Dデータからデータを撮っています。
    (ちなみにこの3Dデータはお札立なのですが、
     開業した際に、パワースポットで有名な戸隠神社の御札を買い事務所に飾っています)
  • データの撮り方②
    写真を取る際は、前述したように面倒な作業が必要です。
    これを簡単にできる方法を現在、開発行っております。
  • データを撮った後の手順
    Java Scriptを使う方法、WordPressを使う方法ございますので、別の機会に説明したいと思います。

Arcana製作所ではこのようなことも行っておりますので、お気軽にお問い合わせください。