WebGL 2.0で作り直し始める。そのためにthree.jsの利用をやめ、twglを使うことにする。

公開:2017-12-28 11:39
更新:2020-02-15 04:37
カテゴリ:シューティングゲーム,ゲーム製作,HTML5,ES6,JS,Blender,twgl.js

シューティングゲームつくりは入力関係のコードを書き、テキスト表示をGLSLで書き直し、マップエディタを作り始めるところまできた。 が、ここにきてWebGL2.0をどうしてもいじりたくなり、three.jsの利用をやめ、twglを覚えながらコードを書き直しているところである。

three.jsの利用をなぜやめたかといえば、WebGL2.0のサポートがthree.jsにはまだないからである。

https://github.com/mrdoob/three.js/issues/9965

WebGL2Rendererというレンダラーがすでに実装され始めており、以下サイトで公開されてはいるが動作しない。どうもソースコードへのurlが間違っているようであるが。

https://threejs.org/examples/webgl2_sandbox.html

今のところmrdoob氏はWebVRのサポートに注力していて、WebGL2.0の対応にまで時間を割けないようである。さらにWebGL2RendererはBufferオンリーのサポートとし、コードもクリーンアップしたいらしい。

早晩サポートされるであろうけれど、上記理由で歩みはかなりゆっくりしているので、それを待っているのもなんだし、自前でレンダラーを書くのもちとつらい。そもそもthree.jsの機能の1/10も使ってないので、これを機会に素のWebGL2.0で作り直そうかなと思うのだが、素のWebGLというのがまた厄介である。とにかくリソースのハンドルがもうC言語的で面倒この上ない。大量のリソースを効率よく管理しなければならず、このようなAPIにならざるを得ないのはしょうがないのだがね。。

そういうわけでヘルパライブラリを探してたらtwglというのを見つけて、これはWebGL2.0も使えるようなので飛びついたのである。かなり薄いラッパーであることも私好みなのである。

で今画面回りを書き直しているところである。 下画面はデスクトップ版のChrome/Firefoxのみで動作するのであしからず。。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/test/twgl/001/.eslintrc.json

/test/twgl/001/index.html

/test/twgl/001/js/bundle.js

/test/twgl/001/js/charCodes.js

/test/twgl/001/js/console.js

/test/twgl/001/js/eventEmitter3.js

/test/twgl/001/js/graphics.js

/test/twgl/001/js/main.js

/test/twgl/001/js/mz700fon.js

/test/twgl/001/js/screen.js

/test/twgl/001/js/text.js

/test/twgl/001/js/vscreen.js

/test/twgl/001/package.json

/test/twgl/001/rollup.config.js

/test/twgl/001/twgl-cube.html

/test/twgl/001/webgl2-textures.html