YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

← Shader Inputs

Get Embed Code
2 Languages

Showing Revision 1 created 03/11/2014 by Fran Ontanaya.

  1. 両方のシェーダがプログラマブルなら状況は変わり
  2. どんな機能も思いのままに作れます
  3. マテリアルとライトを決めればthree.jsのライブラリが
  4. 最適なプログラムを作成してくれます
  5. またShader Materialを使えば
    好きなマテリアルも作れます
  6. 2つのシェーダは構造が似ています
    まず入力値を決めます
  7. three.jsの変数はuniformとvaryingがありますが
    WebGLには
  8. 頂点の位置や法線、UV座標を示す
    attribute変数があります
  9. three.jsでは これらの変数は組み込まれており
  10. 位置やUV座標、法線と名付けられています
  11. uniform変数はあまり変化のないデータ
    例えばライトの位置、色、マテリアルの輝きを表します
  12. 頂点シェーダが算出した値は
    varying変数と呼ばれ
  13. フラグメントシェーダへと送られます
  14. 順番は まず頂点シェーダが値を計算し
    その後ラスタライザが
  15. 三角形の面全体の値を補間します つまり
  16. これらの値はフラグメントごとに変わるわけです
  17. 補間したい頂点のデータが多ければ多いほど
  18. 時間とリソースが必要となってしまいます
  19. フラグメントシェーダに送られたuniformデータは
  20. 最小単位のgl_FragColorとして出力されます
  21. グラフィックAPIでは
    大抵フラグメントシェーダが一度に
  22. 多数の出力を行います これをMRT
    マルチプルレンダーターゲットと呼びます
  23. ただしWebGLではまだサポートされていません
  24. ではここでthree.jsのシェーダの仕組みを
    まとめてみましょう
  25. 頂点シェーダでuniformとattributeを入力し
    gl_Positionと
  26. varying値を出力
    フラグメントシェーダにこのvarying値と
  27. uniform値が取り込まれ gl_FragColorが出力されます