glTF（GLB）形式の企業3Dロゴをサイトに実装
今回、合同会社キューブリックのサイトロゴを3Dで制作しました。
作ってくれたのは、同じプログラミングスクール出身の友人（田中さん）です。田中さんとは、pythonで人工知能の作成を学んだ仲なのです。
私はWEBエンジニアとして長い経験がありますが、田中さんは42歳で初めてプログラミングを始めた方でした。
現在、田中さんはOCR技術や3Dを専門に学んでいて、せっかく立体で作ってもらったので、静止画像に書き出すのではなく、そのままWeb上で表示する形にしました。せっかくのご厚意をムダにはできません。
以下、「キューブリック」という社名が、3Dで動かせるようになっています。
よーく覗き込むと、あなたの部屋の中が映りこんで…、ません！気のせいでした。
ロゴデータは glTF（GLB）形式を採用
ロゴデータは glTF（GLB）形式で書き出しています。
glTFはWeb向けに設計された3Dフォーマットで、軽量かつ扱いやすいのが特徴です。GLBはそのバイナリ版で、テクスチャなどを含めて1ファイルにまとまります。
Web配信を前提とするなら、有力な選択肢のひとつです。
GLBファイルのブログ実装方法
今回は実装コストを抑えるため、3Dビューアサービスの Sketchfab を利用しています。WebGLの実装やThree.jsのコードを書く必要がないため、検証や導入段階としては扱いやすい方法です。
手順はシンプル。
- GLBファイルをアップロード
- 表示設定を調整
- 発行されるiframeコードを取得
- HTMLに貼り付け
Sketchfabのiframeを貼り付けるだけで、ブラウザ上に3Dモデルを表示できます。
3Dロゴというと大げさに聞こえるかもしれませんが、glTF（GLB）形式と外部サービスを組み合わせれば、比較的手軽にWebへ組み込むことができます。
今回は実験的な取り組みですが、表現の幅としては面白い選択肢のひとつだと感じています。
田中さん、この度はありがとうございました。
