VEDA最近のアップデート: 3Dモデル読み込み、Floatテクスチャ、全画面モード

こんにちはアマギです。
WebGL/GLSLでVJシステム VEDA を開発しています。

VEDAを使うと、Atomでこんなパフォーマンスが出来るようになります↓

www.youtube.com

最近ブログに書いてなかったけど、いろいろとおもしろ機能を追加してました。
この記事では最近のアップデート内容を紹介します。

過去のアップデート内容については以下の記事をご覧ください。

目次

新機能

3Dモデル読み込み

3Dモデルを読み込んでシェーダーを当てられるようになりました。 モデルを読み込むと、頂点シェーダー内で attribute vec3 positionattribute vec3 normal が利用可能になります。

モデルを読み込むには、設定コメントに MODEL プロパティを追加して下さい:

/*{
    PASSES: [{
        MODEL: {
            PATH: "./foo/bar.obj"
        }
    }]
}*/

現在サポートしているファイル形式は次のとおりです:

  • OBJ
  • JSON (Three.js用に生成されたファイル)

OBJファイルの場合、別途 MTLファイルを指定することで、テクスチャをまとめて読み込むことができます。 また、JSONファイルの場合、テクスチャがjpgなどで指定されていれば自動で読み込まれます。(ddsなどChromiumで表示できない形式は対応していません。)

具体的な利用方法はサンプルファイルをご覧ください。

今後、glTFやfbx等への対応も検討しています。 ゆくゆくはアニメーションにも対応したい……!

3Dモデルのファイル形式に詳しい皆様、PullRequestお待ちしております😹

Floatテクスチャ

これまでのVEDAでは、レンダリング先のバッファはRGBA/UNSIGNED_BYTE形式で固定でした。 つまり、RGBA各チャンネルに8bitずつしか使えないので、パーティクルの計算などを行なうには精度が足り無いという問題がありました。

今回のアップデートにより、設定コメントの PASSES 内に FLOAT: true と書くことで、RGBA各チャンネルの情報を32bitの浮動小数点数として保存できるようになりました。 これにより、いわゆるGPGPU1的な計算ができるようになります。

Floatテクスチャについて詳しく知りたい方は、 wgld.org の記事をご覧ください。

wgld.org | WebGL: 浮動小数点数テクスチャ |

全画面モード

ctrl-escape を入力すると、シェーダーの描画結果だけをAtomのウインドウいっぱいに表示できるようになりました。 キーボード入力を利用したシェーダーを表示する際や、スクリーンショットを撮影するのに便利です〜。

今後の開発について

今後は、ひとまず以下に挙げる機能の開発を進めていこうと思っています。

  • 3Dモデルの対応ファイル形式を追加
  • 任意のuniform変数を追加/設定できるGUI

↑のどっちかが落ち着いたら v3.0 リリースかな。

WebGL2.0に対応するためにVEDAのコア部分をPure WebGLで書き直そうとしたりもしてたけど、最近Three.jsのWebGL2.0開発が盛り上がってきてるっぽいので、そっちを待つことにしました。

今後のアップデートもお楽しみに!
機能の要望や質問などあれば、TwitterGitHubで気軽にお声がけください!

【宣伝】GLSLワークショップやります

今週の土曜(2018-04-28)、京都でGLSLライブコーディングのワークショップを開催します! GLSLやライブコーディングに興味のある方!ぜひご参加ください!!

お申込みはこちら: http://toplap.jp/post/2018-04-28


  1. 最終的な計算結果は画面に描画されるだけなので、世間一般に言うGPGPUとしては使えないが、WebGL界隈ではCompute Shaderを用いた表現をGPGPUと呼ぶことが多い