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';

いいなと思ったら応援しよう!

桜富士彦mk2
是非サポートをお願いいたします。