3D関連

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

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

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

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

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

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

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

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

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

GIF
APNG

どうやってアニメーションgifやAPNGを作るのか??

  • 写真の撮り方
    ターンテーブルに載せて、カメラは三脚に取り付け複数枚取るのが簡単です。
    当社の3Dスキャナー FacTrans を応用し画像が作成可能です。
  • データの作り方
    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データはお札立なのですが、
     開業した際に、パワースポットで有名な戸隠神社の御札を買い事務所に飾っています)
  • データの撮り方②
    写真を取る際は、前述したように面倒な作業が必要です。
    当社の FacTrans miniやFacTrans Basicを使用しデータ作成をする機能を実装中です。
  • データを撮った後の手順
    Java Scriptを使う方法、WordPressを使う方法ございますので、別の機会に説明したいと思います。

Arcana製作所では簡単に商品画像を撮影する装置の開発や販売も行っておりますので、お気軽にお問い合わせください。