見出し画像

WebGL研究 (1) p5.jsから一歩進むためのWebGL、Three.js、PixiJS入門

北田 荘平 / THE GUILD

GPUを利用してWebブラウザ上で高性能な3Dグラフィックスを描画するための技術、WebGL。Flash全盛の時代を駆け抜けきった自分としては、なかなか触手が伸びず、利用する機会がなかったのですが、今年度の大学のプログラミングの講義で様々な応用テーマを扱っていたこともあり、何周か遅れてようやくシェーダーの世界に入門を果たしました。

(↓ きっかけはずっと買ってから読めていなかったこちらの本)

せっかくのスタートなので、シェダープログラムを、ライブラリを使わずに動かす方法、Three.js, PixiJSを利用して動かす方法について順に紹介したいと思います。

お題

  • 中心から外に向かって 黄→赤 に変化する円形のグラデーション

  • canvasの縦横比によって歪むことのない正円

  • canvasは画面一杯に広がり、ウインドウのリサイズにも追従する

それぞれコードは埋め込んだCODEPEN上でご覧ください。

ライブラリを使わない方法

セットアップ

セットアップの流れはこのようになります。すべて理解するのはなかなか難しいです。

  • シェーダー作成とコンパイル

  • プログラムオブジェクトを作成し、シェーダーをアタッチ

  • 頂点バッファを作成してGPUにアップロードする

  • attribute変数を有効化と指定
    バッファのデータがシェーダーの頂点属性にどのようにマッピングされるかを指定

GLSL部分

シェーダー内の処理ではJSからcanvasのサイズと縦横比を受け取って、円形のグラデーションが正円を保つための計算に使っています。

またシェダープログラム (GLSL) 内では、中心を0, 0とし、上下左右にに1ずつ広がる、縦幅2・横幅2の領域として座標を正規化。中心からの距離によって2つの色の中間の色を求めています。

感想

GLSLだけを使って何かしたい場合には良いですが、拡張性の面で不安も多く、インタラクション含めあれこれやるのに苦労しそうだなと感じました。


ライブラリを使う方法

Three.jsを使う

Three.jsを使う場合、3Dのライブラリを2D的に使うための平行投影のカメラ (OrthographicCamera) を利用します。空間上にカメラに対して正対して置かれた面 (ジオメトリ) のテクスチャ (メッシュ) としてシェーダーを設定して、それがぴったり画面に合うようにカメラの表示範囲を設定しています。シェーダーのGLSL部分はほぼ共通の考え方です。

JSの命令が理解しやすい粒度になり、さらに様々な便利機能を手にすることができるので、こちらの組み合わせが王道だと感じました。

PixiJSを使う

こちらはもともと2Dのライブラリのため、p5.jsなどのビジュアルプログラミング環境に近い感覚で扱えます。画面サイズに合わせたSpriteにフィルターとしてシェダーを指定しています。

しかし、頂点シェーダーを指定したら意図せず描画がズレてしまったり、uniform変数に渡した2次元ベクター型の値が正しく読めず、配列として渡してみたり、ちょっとこちらの力量不足もあって腑に落ちない挙動がいくつか見られました。。

PixiJSはGLSLコーディングを楽しむための環境、というよりは、メインは2Dのビジュアルプログラミングで、GLSLでフィルターを自分で書くこともできる、くらいの関係性と捉えると良いのかなと思いました。

ではその2Dのビジュアルプログラミング環境としての印象ですが、きちんとコントロールできればWebGLの恩恵を受けられかなり早いです！次に書く記事でもその辺りの紹介をします。

まとめ

なんのためにp5.jsから一歩進むのか、という切り口でまとめます。

WebGLの恩恵を受けて2Dのビジュアルプログラミングのスケッチを高速化したい場合、ぜひPixiJSにトライしてみましょう。本記事で例示したようなGLSLを使ったフィルター表現も加えられます。
ただ、自分はp5.jsのプログラムをそのままの思考で移植してみたらかえって遅くなってしまいました (その後最適化したら爆速に)。描画プロセスのチューニングや最適化の知見は必要になりそうです。

少しテーマからはずれますが、ゲームのような複雑な画面のシーン管理やレイヤー管理が必要な場合にも、PixiJSのオブジェクトを階層管理する手法が役に立つと思います。

p5.jsの通常のグラッフィク表現にはない、ぬるっとしたシェーダーっぽい表現に興味がある場合、とりあえずどこでもいいのでGLSLを書いてみましょう。(p5.jsにも未調査ですが、WebGLをサポートした機能があります)
そしてWebサイトに組み込んだりするなら、Three.jsのようなライブラリで処理を内包することを検討すると良いでしょう。Three.jsの経験がその後の選択肢を増やしてくれることにもなると思います。


以上、p5.jsの先にはどんなことがあるんだろう、という方向けの記事でした。

次回は、PixiJSを使ってパーティクルを大量に飛ばした時の処理速度比較について書く予定です！

この記事が気に入ったらサポートをしてみませんか？