【WebGL】デイリーコーディング2日目

～～～2日目～～～

今回はフラグメントシェーダーで色を塗るのではなく
バーテックスシェーダーで頂点に色を塗りました。

前回のバーテックスシェーダー

attribute vec3 position;
uniform mat4 mvpMatrix;
void main(void)
{
     gl_Position = mvpMatrix * vec4(position, 1.0);
}

今回のバーテックスシェーダー

attribute vec3 position;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;
void main(void)
{
     vColor = color;
     gl_Position = mvpMatrix * vec4(position, 1.0);
}

前回と比べてattribute宣言の変数とvarying宣言の変数が増えました。
attributeは頂点一つ一つに使用され、
varyingはバーテックスシェーダーとフラグメントシェーダーの橋渡しを行います。

フラグメントシェーダー

precision mediump float;
varying vec4 vColor;
void main(void)
{
     gl_FragColor = vColor;
{

フラグメントシェーダーにもvaryingで変数が宣言されています。
これも橋渡しのために必要みたいです。
橋渡しに使われるvColorに頂点色が代入されているのでフラグメントシェーダーに色情報が渡っている...
と考えられます(ここ内部的に何が起こってるのかわからない)

色がついた

三角形

今回、勉強させていただいたページです


1日目からかなり時間が空きました。
記録用とはいえ学習しながらブログ書いてはなかなか忙しいですね...
記録を書くことに集中してしまうと、手が止まってしまったりであまりよくないです。
デイリーコーディングのほうはだいぶ軌道に乗ってきました。
ブログはまとめて書いてみたりしてゆっくり慣れていこうと思います。