【解説】3DCG描写で使用されるWebGL 2.0とはどんな技術?

みなさんはWebGLという技術をご存じですか?

WebGLというのは、Web上で3Dを描写する技術のことです。

この記事では、WebGLとOpenGL、WebGL 2.0という技術について、簡単に紹介したいと思います。

そして最後にONE TECHが提供している「HOUSE DECOR VR」の紹介を行ないたいと思います。(HOUSE DECOR VRは、WebGL 2.0の技術を使用しております)

WebGL2.0とは?

3DCG描写で使用されるWebGL 2.0とはどんな技術?
3DCG描写で使用されるWebGL 2.0とはどんな技術?

WebGLとは、Webブラウザ(Microsoft EdgeやGoogle Chromeなど)で3DCGと呼ばれる3次元グラフィックスを高速に描画する技術の一つです。

一般的にWebブラウザ上で3DCGを描画する処理は、コンピュータの動作が遅くなるため実用的ではありませんでした。

しかしWebGLを使えば、次のようなコンテンツをWebブラウザ上で表現することが可能です。

・3Dモデル表示

・3Dアニメーション

・リアルな映像のゲームコンテンツ

・リッチな映像表現の広告

これからWebGLという技術について紹介いたしますが、WebGLを知るには、まずOpenGLという技術仕様を知る必要があります。

OpenGL

OpenGL

Khronos Groupが策定しているAPIにOpenGLという技術があります。

OpenGLは、様々な環境やハードウェア、OSに対応したグラフィックスライブラリです。

主にWindowsやMac、UNIXなどで使用することができます。

通常のソフトウェアはCPU※を使って処理しますが、OpenGLはGPU※を活用して高速な映像処理を実行しています。

※GPU

GPUはGraphics Processing Unitの略です。3Dグラフィックスを描画する際に必要な計算処理を行う半導体チップを指します。(引用:GPUとは

※CPU

CPUはCentral Processing Unitの略です。マウス、キーボード、ハードディスク、メモリー、周辺機器などからデータを受け取り、コンピューターでは 制御・演算を実行するプロセッサーを指します。

●OpenGLの特徴

3DCG表現で使用される技術として、OpenGLの他に、DirectX (Direct3D) という技術があります。

OpenGLは、DirectX (Direct3D)と 比較すると処理実行速度が遅い傾向にあります。

しかしOpenGLはDirectX(Direct3D)と比較して、マルチプラットフォームに対応しており、移植性が高い点が特徴です。

WebGL2.0までの変遷とは?

●OpenGLの強み

OpenGLの強みとして、次の点が挙げられます。

・2D / 3Dグラフィックスどちらも表現することが可能な点

・OpenGLと連携できる外部ライブラリが豊富

WebGL

WebGL

WebGLは、先ほど紹介したOpenGLをWeb上で使いやすくするAPIです。GPUを使って処理しているため、ブラウザ上でも3DCGを表現することが可能です。

●WebGLの強み

WebGLの強みとしては、次の点が挙げられます。

・最近販売されたスマートフォンならWebGLに対応していることが多く、モバイル上で3Dの描写をすることが可能。

・Web上で3D描写をする場合、ほかにも似たような技術があるがブラウザ上で動かせるプラグイン※が必要でした。WebGLはそのデメリットを解消した技術仕様。

※プラグイン

アプリケーションの機能を拡張するソフトウェアを指します。(引用:プラグイン

●WebGL2.0までの変遷とは?

WebGL 2.0の変遷は、上記の図のようになっています。WebGL2.0は、WebGL 1.0にさらに機能を追加した増強版の技術だと思ってください。

WebGL 2.0は、WebGL 1.0よりも処理速度が向上し、表現力の機能が充実していることが特徴です。

HOUSE DECOR VR

バーチャル住宅展示&商談システム「House Decor VR」による新たな住宅展示の可能性
バーチャル住宅展示&商談システム「House Decor VR」による新たな住宅展示の可能性

HOUSE DECOR VRとは、ONETECH ASIAが提供するVRバーチャル住宅展示場システムです。

HOUSE DECOR VRは、ユーザーが自宅にいながらPCやスマホでバーチャル住宅展示とバーチャル商談を体験できるシステムです。

近年新型コロナウイルス(COVID-19)の影響で、私たちは気軽に外へ出かけることができなくなりました。

コロナ禍でのアンケート調査によると、コロナ禍になってモデルハウスや住宅展示場にでかけるのを控えた人が、回答者327人中85人近くいました。

コロナ禍によって、今後どのような影響がでるか分かりません。ONE TECH ASIAでは、オンラインで住宅展示を体験することで、商談する機会を増やすシステム開発を進めております。

動画 HOUSE DECOR VR

このバーチャル住宅展示場システム「HOUSE DECOR VR」は、WebGL 2.0を使って開発しています。

ONE TECH ASIAでは、WebGL 2.0の利点を活かしてPCやスマホやスマートフォンで誰でもバーチャル訪問ができるように開発いたしました。

バーチャル住宅展示場システム「HOUSE DECOR VR」についてご興味のある方は、ぜひONETECH ASIAお問い合わせください。

参考記事:バーチャル住宅展示&商談システム「HOUSE DECOR VR」

バーチャル住宅展示&商談システム「House Decor VR」による新たな住宅展示の可能性 (onetech.jp)

まとめ

いかがでしたか?今後3Dを使った表現がWeb上でどんどん登場するようになるでしょう。スマートフォンと相性のいい3D描画技術は、販売促進の広告表現として当たり前になるかもしれません。この機会にWebGLの技術について少し触ってみるといいでしょう。

しかしWebGLはエンジニアにはとっつきやすい技術ではありますが、今までプログラミングをあまり経験したことがない人には少し難しいかもしれません。

ONETECH ASIAでは、3DCG制作代行も行なっております。過去にはWebアプリ向けの家具3DCGの制作代行から、AI画像認識の学習データ用の3DCG作成の実績もあります。

▼ONETECH ASIAの3DCG制作開発実績

国立大学医学部で利用する人体CGのアニメーション制作をベトナムオフショアで実施しました。マイクロソフトホロレンズの医療向けソフトウェアが最終利用形態です。今回は、モデリングデータはいただき、3DS Maxでリギング、モーションまで担当しUNITYパッケージで納品しました。

寿司協会様からの依頼で寿司職人向けのトレーニング補助アプリをスマートグラス「マイクロソフト ホロレンズ2」で作成しました。CGコンテンツは3DsMAXで製作し、ホロレンズARアプリはUNITYで制作しました。今回は要望を聞き取り企画から提案しアプリ制作まで実施しました。

ある商品(消費財)のAI画像認識のための教師データ用のCGを制作しました。商品の現物を参考にしながら酷似したCGモデルを制作しました。CGモデルをUnityで様々な角度や陰影をつけた画像をAIの学習データとして抽出します。Unityのツールも開発しました。

3DCG制作 – Works | ONETECH社の開発実績

もし3DCG制作でお困りのことがありましたら、遠慮なくお問い合わせください。また3DCGの制作代行だけでなく、AR、VR、XR開発、UNITY開発などでお困りのことがあれば、ONE TECH ASIAでご相談にのります。

株式会社one technology japan
株式会社One Technology Japan | ベトナムオフショア開発 | 信頼第一のONETECH

ONETECHはベトナムオフショア開発でAR/MR/VRソフトウェアの開発に力を入れています。AR/MR/VRソフトウェアの開発のご相談はぜひOne Technology Japanへお気軽にお問い合わせください。

無料相談・お問い合わせ
ご相談やお見積もりは全て 無料 で対応いたします。

    「個人情報保護方針」をお読みいただき同意いただける場合は「この内容を送信する」ボタンを押して下さい。
    入力していただいたメールアドレス宛に自動返信メールを送信していますので、お手数ですがそちらをご確認ください。
    無料相談・お問い合わせ
    ご相談やお見積もりは全て 無料 で対応いたします。

      「個人情報保護方針」をお読みいただき同意いただける場合は「この内容を送信する」ボタンを押して下さい。
      入力していただいたメールアドレス宛に自動返信メールを送信していますので、お手数ですがそちらをご確認ください。
      無料相談
      お問い合わせ