webGL系の技術を使いreactでノベルゲームを開発したいが、どのライブラリが標準的なのかわからない。

Question

###webGL系の技術を使いreactでノベルゲームを開発したいが、どのライブラリが標準的なのかわからない。
タイトル通りです。
すでにノベルゲームを作ってはいたですが、いろいろと限界を感じてしまい改良のためwebGLの技術を取り入れようと思いました。

最終的にはボラギノールタウンの2D版のようなものを作りたいと思っています。(私が作ったノベルゲームの試作サイトを見ていただけるとわかりやすいかと思います。)

しかしwebGL系のライブラリにはいろいろとあって何がスタンダードなのかわかりません。さらにreact自体あまり他のライブラリと相性が悪いらしく、createjsなどもいじってみたのですが機能しませんでした。

ならばwebGLをそのまま使おうかとも思いましたが、この技術自体結構ニッチで私にはきついかなという所感でした。(それでも腰を据えて開発していこうと思っているので、webGLを勉強するのが結局一番ならやってもいいかなとも思っています。)

長々と書いてきましたが、手探りの状態です。
些細なことでもいいので、アドバイスいただけたら幸いです。

--
追記
Q-なぜWebGLを使おうと思ったか。

正確にいえばreactでcanvasを使い画像を描画するのに、必要な知識を探しています。書き方が悪かったです。

別にWebGLじゃなくてもいいのですがボラギノールタウンのサイトを調べていると、一枚のcanvasに町が描かれているようなのでWebGLじゃないのかな？と勝手に解釈しました。もっといい方法があるのなら教えていただきたいです。この質問を閉じさせてもらいます。

Q-具体的に何が上手くいっていないのか。

端的にいえば私がとっている手法では、描画した画像を画面幅に合わせられないことが問題です。
私は以下のようなcss-in-jsでcanvasの比率を保ち、なんちゃってレスポンシブデザインを実現しました。

export const CanvasContainer = styled.div`
    position: relative;　
    background-color: #200050;       
    padding-top: 56.25%;
`;

しかしこれでは画面幅に合わせることができません。
なので別途違った手法をとる必要があるのではないかと考えました。
ここでcreatejsを試すと上手くいきました。しかしこれをreactに移植するとなぜか動きませんでした。前回の質問参照

さて次はどうしよう。調べるとwebGLというものがある。それじゃあwebGLについて質問しようかな、という感じです。

繰り返しになりますが、WebGLじゃなくてもいいのでreactではどんな画像描画に関してどんな技術が注目されているか、どんなライブラリが標準的なのか知りたいです。

Comments

[t_obara]

「色々と限界を感じてしまい」をもっと詳しく書かないと、この質問を見ている方はなぜWebGLなのかがさっぱり理解できません。

[m.ts10806]

１万字投稿できるのでこの文量で「長々と」とは感じませんが、
色々やってみて「なんかうまくいかなかった」で諦めているだけの状態では中々すすめようにもすすめづらいと思います。

[hood]

お二人ともコメントありがとうございます。
>「色々と限界を感じてしまい」をもっと詳しく書かないと
確かにそうですね。なぜWebGLを使おうと思ったのか具体的な部分も追記しようと思います。

>色々やってみて「なんかうまくいかなかった」で諦めているだけの状態
確かにそうですね。具体的に何が上手くいっていないのか追記しようと思います。

Answer 1

まずはじめに、私自身はWebGLに関しては素人に毛が生えたレベルの知識しかないので、あくまで参考程度に聞いてください。可能であればもっと詳しい人に聞いたほうが良いと思います。おそらくWebGL周りを主に扱っているのは、ブラウザゲームを作成したりしている人たちだと思うので、そこらへんをお仕事にされている方に聞くのが一番良いかなとは思います。

と、予防線を貼りつつ、２DのWebGLを扱うのであれば、フリーのライブラリの中では最近は PIXI.js がメジャーになってきているのかなというふうに思います。

用意されているAPIはcreate.js と割と似ていますし、また、pixi.js 自体はreactでも問題なく扱えます。

以下は、ステージを作って画像を読み込むだけの簡単なPixi + Reactのサンプルです。
code sandbox Sample

また、これの元になったリポジトリも以下にあるのでもしよろしければ参考にしてください。（ただしTypeScriptです）
github
DEMO

もしくはもっと手軽に扱うなら、react-pixiという、ReactのコンポーネントっぽくPIXIJSのオブジェクトを扱えるライブラリとかもあるので、これを試してみるのも良いかもしれません。
(ただし、日本語の情報は殆どないのと、私が試したときはTypeScriptとの相性が非常に悪かったので、TypeScriptを使うのであれば、素のReactにPixi.jsを使うほうが良いと思います)

それから、以前に create.js を Reactで使ってみてうまく行かなかったようですが、この手のDOMを直接書き換える系のライブラリをReactやVueなどのフレームワークで扱う際には、

• DOMを所得する際には document.getElementbyId() などは使わずに、useRefなどを使う
• 画像やCSSを扱う際には画像自体を import して使わないと読み込めない場合がある（ReactやVueなどのフレームワークでは、webpackなどを使って、ビルド時にイメージファイルやCSSをJSファイルにバンドルしてしまう場合があり、javaScript実行時の画像のファイルパスがプロジェクト内の画像ファイルパスと異なる場合がある。詳しくはcss-loaderやfile-loaderでググると良いかも）

参考

あたりが、素のJavascriptを扱うときとの大きな違いなのでそこらへんを注意すると良いかもしれません。

ちなみにご紹介されているボラギノールタウンもPixijsを使って実装されていますね。フレームワークはReactではなくVueを使っているみたいですが
(PIXI.jsを使っているサイトでdevtoolのconsoleを開くと、PIXIjsのロゴが表示されます)

Comments

[hood]

回答ありがとうございます！
>pixi.js 自体はreactでも問題なく扱えます。
そうだったのですね・・・PIXI.jsの見分け方なども初めて知りました。

またReactでのDomを書き換えるときの、不都合の直し方などまで教えていただきました。これをきっかけにもっと学んでいきたいと思います。
デモなども用意していただき助かります。

非常に丁寧な回答、ありがとうございました！