YouTube

Got a YouTube account?

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

Japanese subtitles

← Texturing and Postprocessing

Get Embed Code
2 Languages

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

  1. フラグメントシェーダが
    テクスチャにアクセスするのは可能です
  2. 抽出やフィルタリングの理論は
  3. 今までのレッスンで学んだことと同じで
    残っているのは
  4. テクスチャアクセスを設定する構文だけです
    ここで大事なのは
  5. texture2D関数を使うことです
  6. そうして返ってきたテクスチャの色を使います
    three.jsのコードベースで
  7. 検索するとテクスチャアクセスを使うシェーダは
    40以上あります
  8. マテリアルシェーディングのメインファイルは
  9. WebGLShaders.jsにあるのでぜひ見てください
    その他に
  10. キューブマップを求めるtextureCubeも
    見ておくといいでしょう
  11. 残りの多くは画像処理を行うシェーダになり
  12. ピクセルが他の画像にも使用されます
  13. 具体例としては
    カラー画像をグレースケールに変換したい時です
  14. 式は
    luminance=赤の数値、緑の数値、青の数値になります
  15. これは色を線形化する式で 輝度は度合い
    グレースケールです
  16. 入力値がガンマ補正されていない時に使う
  17. lumaを求める式もあります
  18. 2つとも緑が多く青が少ないのに驚きます
  19. どちらも最後に加えるだけでいいと
    思うかもしれませんが
  20. 実際はここでまた透明性が問題になります
  21. もしこれをポストプロセスとして適用したい場合
  22. レンダリング終了後にグレースケール変換したいですが
  23. その時すでに画像はモニタに送られています
  24. ただし画像をモニタ外でテクスチャにすることもでき
  25. これはオフスクリーンテクスチャなどと呼ばれています
  26. これは2つのテクスチャを掛け合わせる
    通常のやり方と違い
  27. テクスチャに画像処理を行うのが目的で
  28. ピクセルを読み込んでグレーに変換します
  29. 1つのテクセルを
    新しいピクセルに吐き出すだけと思うでしょうが
  30. GPUは三角形を描画し
    テクスチャを読み書きするものです
  31. 一方 今回は画像を正確に埋める
    UV座標つきの四角が必要となります
  32. これをスクリーン・フィリング・クアッドと呼びます
    UV値を使用し
  33. 最終的に表示するピクセルに対応するテクセルを
  34. 1つずつ把握するのです
    非効率的に思えますし 実際そうですが
  35. 処理速度は十分あり
    各フレームが行うポストプロセスの
  36. パスをかなり処理することができます
  37. three.jsでは
    EffectComposerのクラスを使えば数行のコードで
  38. パスを作り つなぐことが可能です
    グレースケールの場合
  39. 頂点シェーダはこのように簡単なものになります
  40. UV座標をコピーしスクリーン・フィリング・クアッドを
  41. クリッピング座標へ投影します この作業のポイントは
  42. フラグメントシェーダが
    各ピクセルの値を求めることです
  43. コードは単純で テクスチャはスクリーンの場所により
  44. 求められます
    その後テクセルがピクセルと関連づけられ
  45. このテクセルによりグレースケールの色が得られます
  46. 式はlumaを使えば
    色がフラグメントシェーダに保存されます
  47. それだけでなくマルチなポストプロセスパスは
  48. よく必要とされる上 より効率的なのです
  49. 例えばブラーは2つのパス
    水平ブラーと垂直ブラーが可能なため
  50. 1つのパスよりテクスチャの検索が少なくなります
  51. マルチパスは入力テクスチャ=出力
    またはその反対にもなり得ます
  52. この処理はデータが行き来することから
  53. ピンポンと呼ばれます
    これは水平ブラーの場合 左が入力で
  54. 右が出力になり
    垂直平ブラーでは右が入力で左が出力です
  55. グレースケールに変換したい時は別のパスを足し
  56. 逆方向をもう一度行います
    では実際の例を見てみましょう
  57. 重要なのは
    フラグメントシェーダ内で何でもできることです
  58. 隣接するテクセルを抽出して混ぜ合わせ
  59. 画像をボカすなど約100の演算ができます
  60. ポストプロセスをつなげ次に送ることも可能です
    フィーリクスのこのデモにも
  61. 我々が実現可能な効果があります 実際 three.jsには
  62. 多数のポストプロセスがライブラリに格納されています
  63. フィーリクスの講義へのリンクもあるので
  64. 補足の資料をぜひ見てください