基於three.js的shader入門教程 一

threejs交流羣511163089

掃盲一下

shader是什麼東西 這暫時不重要 這裏重要的是寫這個需要編程語言。

threejs用的是glsl這款,語法跟C差不多。

這個在web端暫時只有頂點着色器 片源着色器可以用,這倆是啥?

模型是三角面構成的,每個點有個三維座標。

頂點着色器 一般是爲了把你的模型的每個點投到屏幕上,上色的時候,你如果想看得見這個點,必須投到屏幕的可視座標系裏頭。

void main()
{
 gl_Position =projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

gl_Position還會除個w,就是投到屏幕的座標。

另外three裏幫你內置了很多變量,省了一些事情。

片源着色器 就是每個頂點上色怎麼上。

那麼上頂點顏色,只塗了三個點,三角面中間是啥顏色喃?你不用操心,有人自動幫你根據那三個點的顏色進行插值了。

void main()
{
 gl_FragColor=vec4(1.0,1.0,1.0,1.0);
}

gl_FragColor就是你輸出最終的顏色了,後面vec4對應了這個R G B A。

 

看看有人看不,有人看再寫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章