強火で進め

このブログではプログラム関連の記事を中心に書いてます。

「第2回html5jゲーム部勉強会」で WebGL の話を聴いて来ました

第2回html5jゲーム部勉強会 - ゲーム開発事例 - connpass
https://html5jgame.connpass.com/event/49555/

2/15 に開催された「第2回html5jゲーム部勉強会」のメモです。

スクエニさんの「Unity WebGLを用いた乖離性ミリオンアーサーブラウザ版移植事例」の講演については写真と Twitter 禁止だったので書くとまずいと思うのでこの講演については書いていません。

Emscriptenの逆襲 HTML5

  • 講演者:sun6925 とよしま
  • 今回は SION II の話
  • Oh!X編集部が作ったゲーム


  • I/O のアクセスから GVRAM の中身を追跡
  • ビットマップ文字データをスキャンし、 01 の文字列をキーと対応する文字の情報をテーブル(連想配列)に格納 (例) {"010101000111011" : "A"} ※01の並びはメモが間に合わなかったので適当です。
  • 仕方ないのでGVRAMのアクセスパターンから文字を推定(ビットマップのパターンと文字コードの対応を持つテーブルを持って置き換え
  • Gamepad API も使っているのでゲームパッドも利用可能
  • DeviceOrientationEvent API(Cardboard対応の為)
requestAnimationFrame
void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop)

の引数 fps には0を使わないと requestAnimationFrame の値が反映されない

  • Canvas 2面を使ってダブルバッファを実現(display [none/block] を交互に切り替え)
  • 加えて、X68 の環境を再現する為に複数のフレームを持っている
WebFontについて
  • WebFont は実際に必要になるまで読まれない

以下の手順が必要

1. document.fonts(FontFaceSet)にフォントを登録
2. フォントの読み込みを開始する
3. フォントの読み込み完了を待つ

  • FontFaceで作成した場合、 document.fonts.add(fontFace)
  • CSSで指定したフォントの場合には自動的に登録されるので考慮不要

ロードの処理

  • FontFaceを使った場合:FontFace.load()
  • 登録済みの場合:document.fonts.load("50px myfont")
DeviceOrientationEvent(Cardboard対応)
  • バイスの傾きがEular角で通知される
Web Audio API

JavaScriptでリアルタイムで波形を合成

  • 現仕様ではノイズ耐性が低い(描画負荷やGCに気を付ける)
  • これから出る予定の AudioWorklet を使えば改善される

ソースコードhttps://github.com/toyoshim/sion2hd

PlayCanvas は、とまらない

PlayCanvasは、とまらない @html5jゲーム部 2017/2/15
https://www.slideshare.net/MasakazuOgawa/playcanvas-html5j-2017215

PlayCanvas | 3D HTML5 & WebGL Game Engine
https://playcanvas.com/

進化するEdge+α

進化するEdge+α
https://www.slideshare.net/sakkuru/edge-72208291

  • 講演者:さっくる @sakkuru
  • Azure:Cognitive Services(マシーンラーニングなどを活用したAPI)