41頁目。x-shader/x-vertex? vs?
<script id = "vs" type="x-shader/x-vertex">
void main()
{
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 20.0;
}
</script>
script → 今からHTMLじゃなくてJavaScriptでプログラムを書きますよ~、の意味だと思います。
vs → そしてこのJavaScriptのプログラムの名前をvsにしますよ。 (vsは著者が決めた名前と思います)
type → JavaScriptに渡すデータの形式はx-shader/x-vertexですよ。
x-shader/x-vertex → 恐らく頂点シェーダを渡したい時はこう書く。x-が何を意味しているのかは分かりません。
vsの中身が、gl_Positionとgl_PointSize。
◾️フラグメントシェーダの場合。
x-vertexがx-fragmentになっていたりするが、fsの場合もvsの時とほぼ同じ。
<script id = "fs" type="x-shader/x-fragment">
void main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
下記のようにdocument.を使ってHTMLからgl_Position他の内容を呼び出している様です。
var VS_SOURCE = document.getElementById("vs").textContent;
var FS_SOURCE = document.getElementById("fs").textContent;
ちなみに、gl_Position他をJavaScript側に書く場合は、文字列として書かなければならない為、シングルクォーテーションで囲ったり、\nで改行したりする必要があるそうです。(松田先生はこちらの方) 次の様に書きます。
var VS_SOURCE =
'void main() \n'+
'{ \n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n'+
'gl_PointSize = 20.0;
} \n';
いいなと思ったら応援しよう!
是非サポートをお願いいたします。