HIKKYでのWebGL開発模様
みなさんこんにちは。エンジン開発部のemadurandalと申します。
HIKKYではVketCloudエンジンという、自社開発のエンジンをサービス展開に使っています。
メタバースサービスでは既成のエンジンをベースにするプラットフォーマーさんが多い中、自社開発エンジンで望む、というのはなかなかチャレンジングかもしれません。
Vket CloudエンジンはWebベースで動作しますので、３D処理はもちろんWebGLで動作します。今回はそのWebGLの開発模様をお届けしたいと思います。
基本はC++で開発
VketCloudエンジンですが、基本はC++で開発します。え、WebGLなのに？？
そう、VketCloudエンジンは実はC++で開発されています。C++コードをEmscriptenでWebAssemblyにして、WebGLを呼び出しているのです。
このような開発方法ですと、そのWebGLの開発手法もちょっと普通とは違います。
大半のGL関数は共通
EmscriptenはネイティブのOpenGL関数をビルド時にWebGLの対応する関数に変換してくれます。
そのため、ある機能を開発する時、まずはネイティブ版（OpenGL版）が最初に出来上がります。これの良いところは、ネイティブならではのデバッグツールやプロファイラが利用できるところです。
弊社のエンジンチームでは、OpenGLのデバッグにRenderDocをよく使います。生のWebGLで直接開発する場合ですと、どうしてもデバッグの手段は限られてしまいますが、ネイティブ開発の段階でRenderDocを使えるというのは大きな強みです。
ネイティブ動作の後のWebGL対応作業
ネイティブ版で機能が動作した後は、次にWebGL版の対応作業を行います。
OpenGLとWebGLは互いにある程度の互換性があるとはいえ、完全ではありません。そのため（特にテクスチャ等のリソースをWebから読み込むときなど）、いくつかのGL関数はネイティブGLでなく、WebGLの関数を直接記述して個別対応する必要があります。
よく悩まされるのは、iOSやAndroidなどのモバイル機器への対応です。これらの機器は機種によって、スペックや対応するWebGL拡張が限られていることも多く、ネイティブ版では問題なく動作していたのに、モバイルWebGLだと動かなかったり、描画がおかしかったりすることがあります。
それらに遭遇した場合、いくつかのツールで対応します。
１．Spector.js
WebGL開発をされている方はご存知、Spector.jsというデバッグツールです。これは各フレームのキャプチャ画像やシェーダーコード、その時のGL状態など、多くの情報を確認できる優れものです。
２．RenderDoc
Spector.jsでも取れない情報を取れるのがRenderDocです。RenderDocはネイティブ専用のフレームデバッガーですが、実はちょっとした工夫をするとWebGLのデバッグにも使うことができます。Spector.jsでも太刀打ちできない場合は、RenderDocの出番となります。
３．長年の経験
最終的には経験がデバッグの役に立つことがあります。チーム内にはOpenGL/WebGLに詳しい人、C++全般に詳しい人、３Dレンダリングに詳しい人、さまざまな人材がいますので、そうした人たちのノウハウを結集してトラブルが解決する場合があります。
デバッグ・QAの末、リリースバージョンに載る
ネイティブとWebGL版の両方で機能が動作したら、次にその機能が仕様を満たしているか、各プラットフォームできちんと動作しているかをQAチームがチェックします。そのチェックを通過した後、VketCloudの次のリリースバージョンに開発した機能内容が含まれることになります。
まとめ
今回はHIKKYでのWebGL開発についてご紹介しました。
HIKKYではC++やWebGLに明るい技術者さんを募集しています。ご興味のある方は、HIKKY広報または知り合いのHIKKYメンバーに声をおかけください。
おすすめ記事
