HTML5 WebGL 制作サンプル

トレンドの移り変わりの激しいWEBフロントエンドにおいて、標準技術の仕様的進化とブラウザ実装が進んでいます。 その組込・制作のためのサンプル。主にゲーム系での利用を前提としています。

  • WebGL(three.js)
  • WebComponents(CustomElement/Shadow DOM/HTML Template)
  • 最新ECMAScript実装
  • PWA(service worker/push通知)
  • マルチプレイ

    socket.ioを利用したユーザー同時プレイとチャットサンプル。↑↓←→かASWDキー、画面タッチでキャラクターを操作。
    誰もいない場合は複数ウィンドウで開くとそれぞれ操作できます。

    PC/モバイル対応。Chrome推奨。

    16PUZZLE

    WebComponents技術 Three.js Oimo.jsなどを用いてWPAを意図して構成。 3D要素設計としてA-Frameを意識し、Three.jsと物理演算(oimo.js)を取り込む形でコンポーネント化。 操作系イベントの処理・伝達が課題。

    16ピースのパネルを操作して並べる。スマホでは加速度センサーで揺らすことができる。

    テクスチャ貼り付けによる立体MAP表示

    平面テクスチャを立体MAPへ貼り付け。雲や噴煙など一部を別レイヤーで追加

    CustomElementによってタグでモデルや立体データを追加読込み・配置