2022.12.23 ネクスラボ
こんにちは。
NEXMEDIAのコンテンツ開発チーム「ネクスラボ」です。
ここでは様々なデータの活用方法やコンテンツのアイデアを日々模索し、 その一部を公開しています。
「製品や展示品などの3Dデータを、 もっと簡単に多くの方に見てもらいたい」
「営業ツールとして3Dモデルを使って説明したいが、 専用ソフトがない環境でも使いたい」
といった要望は多いのではないでしょうか。
例えば、 普段製品紹介に活用しているWebサイトに、 製品を360度好きな方向から眺められる3DCGモデルを置けるとしたら…？
対人での営業はもちろん、 Webマーケティングでも大きく役立つはずです。
そこで、第2弾は、 「3DデータのWeb配信」が可能となる、 「WebGL」技術を使用したコンテンツについて解説します。
Web上で3Dデータを見せることを考えた場合、 まず初めに基本となる3Dデータを用意する必要があります。
その方法は大きくわけて3つありますが、 これは「Webで見せるから必要」という訳ではなく、 映像コンテンツやAR・VRなど、 あらゆる3Dコンテンツを制作する場合でも同様に必要となります(今後のホログラムの記事でも改めて解説しますね)。
①3DのCADデータが既にある
実際の製品を作るときの設計用の3Dデータです。 これがあるとコストが抑えられます。
②3Dスキャンする
様々なスキャン方法がありますが、 何でもスキャンできる訳ではなく色々と制限があります。
形がしっかりした工業製品などには向きませんが、 物によっては短時間で3D化が出来ます。
③モデリングする
3Dデザイナーが写真やデザイン画から作成します。
初期コストは掛かりますが、 一度作成すればCG動画を作ったりなど、 様々なコンテンツに活用できます。
弊社では多くのパターンに対応できますので、 データをお持ちでない場合もお気軽にお問い合わせください。
こうして用意した3Dデータのファイルを、 見せたい相手に直接送ること自体は可能です。
ですが、 3Dデータは特殊な形式（ファイルフォーマット）の場合が多く、 受信側の端末では開けない！ 色や素材が表示されない！ という事態が多発します。
また、 受信側がパソコンではなくスマートフォン ・ タブレットなどで閲覧する場合では、 更に困難になります。
そこで「WebGL」技術を使用します。
WebGLとは、 特殊なソフトなどを必要とせず、 ブラウザだけでインタラクティブな2次元および3次元のコンピュータグラフィックを描画する技術です。
“ブラウザだけ”というのが肝で、 パソコンやスマートフォンなどの端末を問わず、 URLを送るだけで3Dデータを共有可能になります。
実際にWebGLを使い、 ブラウザで閲覧できるようにした3Dデータのサンプルがこの下にあるヘッドフォンです。
パソコンでご覧になっている場合は、 ぜひヘッドフォンの左上に表示されたQRコードで、 スマートフォンやタブレットなどからもアクセスしてみてください。
パソコンから見た時と同じようにヘッドフォンの3Dモデルが表示されるかと思います。
このようにWebGLを使うことで、 普段使用している端末とWebブラウザのみで3Dを表示でき、 専門ソフトをお持ちでない多くの方にも簡単にコンテンツをご覧いただけるようになります。
なお、 上記のヘッドフォンをマウスや指で直接触って動かしていただくと、 3Dモデルの回転や拡大縮小ができることにお気づきでしょうか？
WebGLでは3Dデータから出力した画像や映像を表示している訳ではなく、 端末内でリアルタイムの描画処理を行っているため、 閲覧する側が自由自在にアングル変更や拡大縮小できるのです。
この手軽さ故に、 WebGLは
● 不特定多数の人が閲覧するオンラインショッピングサイトや企業サイトの製品紹介
● 3DCGの制作環境以外での表示が必要となる営業ツール
などに適しています。
かつては動画も形式によっては自分のパソコンで再生できない時代がありました。
ですが、 今やYouTubeなどのURLをクリックするだけで再生できるのが当たり前。
今後は3DCGもそうなっていくのです。
次に、 実際どのようにして3DデータをWebGL化しているかをご説明します。
○ 3Dデータの軽量化
まず、 用意した一般的な3DデータはWebでの表示にはサイズが大きすぎる場合がほとんどです。
そのため、 Web上での閲覧者の待ち時間を減らすために、 データを軽くする処理を行います。
その後、 Webでも扱いやすい「glb形式」などに変換します。
この軽くて扱いやすいデータにする工程は、 ARやメタバースコンテンツで3Dデータを使用する場合にも必要になります。
難易度は高いですが非常に重要な作業になります。
○ 各種設定のプログラミング
次に、 描画(レンダリング)するための設定をプログラムで記述します。
設定項目は物体の色／金属かどうかなどの質感／どんな照明で見せるかのライティング／背景の有無など、 多岐にわたります。
○ HTMLファイルの用意とWebサーバーへのアップロード
それが終わったら、 3Dデータと各種設定を繋げるHTMLファイルを用意します。
後はこの一式を通常のWebサイト同様にサーバーにアップロードします。
これで先ほどのサンプルのように、 URLによってブラウザ上でアクセスできるようになります。
正直なところ制作側には多少の手間が掛かりますが、 それは閲覧する側に“クリックだけでOK”という快適な体験を提供するために必要な手間と考えています。
ここまでが3DデータをWebGLで表示するまでの基本ですが、 ここからさらにカスタマイズすることにより、 3DCGの世界をより広げることができます。
まずは下のサンプルをご覧ください。
こちらは、 閲覧者がスノーボード盤面の絵柄を変更できるようになっています。
好きなJPEG画像をご用意いただき、 その画像ファイルをマウス操作で右上の部分にドラッグ＆ドロップしてみてください。
即座にスノーボードの柄が変わるはずです。
これなら、 全く3Dの知識がない方でも2D画像（JPEG）さえ用意できれば、 その画像が3Dモデルの形状に合わせて貼りつけられた状態を確認できます。
オーダープリントが可能なTシャツのような、 個人でカスタマイズできる商材のイメージ確認に使えますね。
さらに進めると、 次の動画のようなコンテンツも作れます。
こちらは操作する人の手の下にあるセンサーデバイスが手の動きを読み取り、 パソコン画面上にWebGLで表示された3Dモデルを、 マウスやトラックパッドを触らずに操作できるようにしたものです。
操作にあたって別途センサーによる入力デバイスが必要になりますので、 いつでも・誰でもという訳にはいきませんが、 withコロナ時代にはこういった非接触での操作が可能となるようなアイデアにも需要があると考えています。
なお、 このコンテンツの延長線上には、 当社が製作してきた下記のような事例もあります。
「WebGL」の技術を使用したコンテンツはいかがでしたでしょうか？
様々な可能性を感じていただけたのではと思います。
3Dデータをオンライン化することで、 Webアクセス解析の結果をマーケティングに活かすこともできます。
3DデータやCADデータを使用したサービスをご検討されていましたら、 ぜひ当社にお声がけください。
最後までご覧いただき、 ありがとうございました。
