JASL:JavaScript-likeにGLSLを書きたい

JASL:JavaScript-likeにGLSLを書きたい:

この記事は「WebGL Advent Calendar 2018」22日目です

更新遅くなってしまい申し訳ありません．そして実装も中途半端でございます....笑

こういう思想を持つ人もいるんだなあぐらいの気持ちで読んでいただけると幸いです

はじめに

WebGLではGLSLとJavaScript，２つの言語を書かなくてはなりません

そのため，２つの言語間での記述の違いに戸惑いが生まれます

GLSLでは明確に型を定義しなくてはならないのに対し，JavaScriptでは型定義は基本的に行わなくていいです．varとか書いとけばいい

こういう言語間の違いでミスが生まれる経験は誰しもがあるんじゃないでしょうか

今回はGLSLでもvarとか書けたらいいよね！っていう割と思想的なお話です

プロトタイプ

変数p,colorをvar文で定義してます．エディタが勝手に型を変換して実行してくれます

実装

めっちゃゴリ押しです．一応こんな感じで実現できるよってお話です

一度var文で定義されている行を取り出します

var p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 

次に正規表現で，=から右辺を取り出します

= (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 

取り出したこの行を，一度

float x = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 

のようにfloat型の変数で再定義します

こいつを用意しておいたWebglContextに突っ込んでコンパイルして，エラーを見ます

次のようなエラーが出ます

ERROR: 0:5: '=' : cannot convert from 'highp 2-component vector of float' to 'highp float'

このエラーはつまり，vec2型からfloat型に代入していてエラーが出ています．つまり，'highp 2-component vector of float'がvec2型を表しているわけです

したがって，var をvec2に変換し，実行します

もし右辺がfloat型ならエラーは出ません．そのためvarはfloatに変換します

おわりに

GLSLをJavaScriptみたいにvarのみで変数定義できればいいよね！ってお話でした

実際に型のつけ忘れとか間違いの際に，エラー文では一応右辺の方が判定できてるんだなあと思い，ちょっとそれを利用して遊んでみた感じです

実装が甘々ですので，まだ全然実用には至っていません(例えばuniform変数はvar文で定義できてないですし，右辺がないと型が判定できません...)

https://ukeyshima.github.io/jasl/

サンプルはここで動作を確認できます！