WebGL、実践編

概要

http://events.html5j.org/conference/2017/9/session/#d2

  1. WebAppフレームワークとWebGLライブラリ (Vueとthree.js)
  2. 今日からはじめるShader(仮)

1. WebAppフレームワークとWebGLライブラリ (Vueとthree.js)

動画

使うもの

  • WebAppフレームワーク(React / Vue.js / Angular など)
  • webpack
  • WebGLライブラリ(three.js / pixi.js など)

アジェンダ

  1. webpack を使って three.js を import
  2. Canvas を WebAppフレームワークと組み合わせて使う
  3. メモリの開放
  4. アセットの圧縮

webpack を使って three.js を import

  • いろいろなプラグインがある
  • 問題点は、ES6 modules が import/export に対応していないこと
    • webpack imports-loader を使う
      • 無理をしているので warnings が出てしまうけど、production build すれば消えるので気にしない

Canvas を WebAppフレームワークと組み合わせて使う

  • Canvas をコンポーネントの一部として管理するほうが WebAppフレームワークとは相性がいいはず
  • Vue.js なら mounted() React なら componentDidMount() を使う

メモリの開放

  • メモリリークが発生するので削除してあげる
  • コンポーネントが削除される直前のタイミングで three.js や WebGL の Context をうまく削除
  • React なら componentWillUnmount() を使う
  • 最後に canvas のサイズを1にする(次のガベージコレクションまで保持されちゃうので)
  • とにかく開放するのが正解というわけでもない
    • 頻繁につけたり消したりするようなら、あえて削除しないのもあり
    • チラつきの発生をふせぐため、要素を display:none で隠すなど

アセットの圧縮

圧縮率のすごさ

draco > gzip圧縮 > original

doraco

Google が開発した three.js 専用の圧縮ツール

compress 3D model files with Draco

2. 今日からはじめるShader(仮)

資料

動画

SHADERって何ができるの

  • GPU側でプログラムを実行できる
  • グラフィックの演出に使われることが多い
    • Web
    • Game
    • VJ
    • Media Art
  • CPU負荷の高い演算をやらせる

など

使う言語

  • GLSL(OpenGL)
  • HLSL(DirectX)
  • Cg(OpenGL/DirectX)

今回はGLSLの話をします

シェーダにはいくつか種類がある

  • バーテックスシェーダ
  • ジオメトリシェーダ
  • フラグメントシェーダ

※ 今回、ジオメトリシェーダは割愛

データ型

  • void, bool, int, float(見覚えのあるやつ)
  • vec2, vec3, vec4(座標や色に使えるやつ)
  • mat2, mat3, mat4(座標変換などに使えるやつ)
  • sampler2D(テクスチャのデータに使うやつ)

変数につくキーワード

  • uniform
  • attribute
  • varying

どうはじめるか

  • とにかく、簡単に始めよう 楽しむことが一番大事
  • オンラインエディタであそぶ

オンラインエディタのメリット、デメリット

メリット

  • テスト環境を自分で用意する必要がない
  • よく使う関数は、あらかじめ渡されるように設定されている
  • コードの間違いに気が付きやすい
  • 選択肢がまぁまぁある

デメリット

  • 欲しい変数がないことがある
  • いざ、自分のプロジェクトに導入しようと思ったときに知らなければいけないことが多い

ライブコーディング

Shdr Editor ( http://shdr.bkcore.com/ ) で色々やってみる

fNormal を fPosition (座標)に書き換えてみる

precision highp float;
uniform float time;
uniform vec2 resolution;
varying vec3 fPosition;
varying vec3 fNormal;

void main()
{
  gl_FragColor = vec4(fPosition, 1.0);
}

xyz = rgb

  • xyz は 3つ置くと vec3 になる。2つなら vec2。1つならただの float型 が返る
  • zxy や xxx にしてもその順番で値が返る
void main()
{
  vec3 pos = fPosition.xxx; // fPosition.rgb;
  gl_FragColor = vec4(pos, 1.0);
}

四則演算みたいなの

void main()
{
  vec3 pos = fPosition * .5; // fPosition.rgb;
  gl_FragColor = vec4(pos, 1.0);
}

その他デモ