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

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

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

www.youtube.com

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

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

新機能
今後の開発について
【宣伝】GLSLワークショップやります

新機能

3Dモデル読み込み

🔮🔮VEDA v2.8.0🔮🔮
OBJ files supported!!
You can pass `.obj` files in PASSES, then use them in vertex shaders or fragment shaders!! https://t.co/xH8dz690UN #GLSL #VEDAJS #WebGL #Atom pic.twitter.com/4MKF9qrVNC
— amagi@4/28 GLSLワークショップin京都 (@amagitakayosi) March 15, 2018

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

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

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

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

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

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

なるほどネ #GLSL pic.twitter.com/FslQolN3Fu
— amagi@4/28 GLSLワークショップin京都 (@amagitakayosi) 2018年4月21日

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

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

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

Floatテクスチャ

✨✨VEDA v2.5.0✨✨
Compute Shader!!
You can run GPGPU shaders like particles🤖🤖🤖https://t.co/xH8dz690UN #GLSL #VEDAJS #Shader pic.twitter.com/2Z4p1IzlQh
— amagi@4/28 GLSLワークショップin京都 (@amagitakayosi) January 31, 2018

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

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

GLSLスクールのCurl Noiseのサンプルコードを少しいじってVEDAで動かしてみた #GLSL #VEDAJS pic.twitter.com/XWFbHONMHi
— amagi@4/28 GLSLワークショップin京都 (@amagitakayosi) February 5, 2018

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

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

全画面モード

🎹🎹VEDA v2.8.0🎹🎹

Fullscreen Mode!

When you hit `ctrl-escape` the shader will be displayed fully in the window.
This is useful for taking screenshots, or shaders which uses keyboard inputs with `sampler2D key`.https://t.co/xH8dz690UN #VEDAJS #GLSL #Atom #livecoding pic.twitter.com/g2S671d5f3
— amagi@4/28 GLSLワークショップin京都 (@amagitakayosi) April 17, 2018

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