事の経緯
- AR.js+three.jsで動く名刺を作っていました
- ぼく「ちょっとGLSL完全に理解したしこれ名刺のやつに組み込みたくね？」
やってみた
一日中three.jsとGLSLやってた成果物がこちらになります。 pic.twitter.com/6ttbyNdJJS
— Kurogoma4D🗼 (@Krgm4D) June 27, 2019
GLSL Sandboxでそれなりに動くシェーダを用意し，
バーテックスシェーダを各所を参考にしながら書き，
なんとなくシェーダは別ファイルで置いときたかったので先人の知恵を使ってセットアップ…
となんやかんやで動きはしました． 動きは…
ぼく「なんかおかしくね？」
上の動画をよくよく見ていただければ分かると思うんですが，シェーダの向きがが名刺の上に出してる板ポリの向きに合ってません．常にカメラの向きに投影されている状態になってます．
まぁ動いてはいるし楽しいので別にいいんですが，気持ちよくないので解決策を探しました．
解決策
結論としては，フラグメントシェーダ内での座標のとり方が問題になってました．
やることはただ一つだけです．
gl_FragCoord.xyをUV座標.xy * resolution.xyに書き換える
以上です．three.jsの場合，UV座標はvaryingとしてバーテックスシェーダから渡してくる必要がありますが，上の処理をするだけで下のように想定通りポリゴン上にシェーダを投影してくれます．
three.js × GLSL完全に理解した
— Kurogoma4D🗼 (@Krgm4D) July 1, 2019
（ちゃんとポリゴンのUV上に投影できた） pic.twitter.com/RU9mvwCfUi
しかしthree.jsも資料は十分あるはずなのになぜ詰まったのか… ちなみにこのワークアラウンドはShadertoyの作品をthree.jsに移植する記事を見て気づきました(mainImageの引数で上の計算をしていたため)． GLSL Sandboxの場合，作者がthree.jsと同じなのでuniformとかゴニョゴニョせずすんなり移植できるのが良いですね．
おまけ
AR名刺のソースコードがこちら
https://github.com/Kurogoma4D/bizcard