Course curriculum

    1. 本講座で学べること・デモ

    2. 本講座の学び方

    1. シェーダーがブラウザ上で動く仕組み

    2. GLSL言語を使ったシェーダーまでの流れ

    3. VertexShaderとFragmentShaderを図解で解説

    1. シェーダー開発環境を構築してみよう

    2. 環境構築したファイル群(webpack5)の中身の解説

    1. GLSL言語を書くためのファイルを用意しよう

    2. シェーダーを描画するための最低限のコーディングをしてみよう

    3. VertexShaderの中身の座標変換について解説

    4. FragmentShaderの中身を解説

    5. GLSL言語のコーディング基礎

    6. ストレージ修飾子について

    7. 試しにオブジェクトの位置や形を変更してみよう

    1. はじめに：完成品デモ

    2. RawShaderMaterialからShaderMaterialへ置き換えてみよう

    3. 平面を波の形に変形してみよう

    4. uniformsを使ってJavascriptからVertexShaderに値を送ろう

    5. Vector2型を使って縦方向にも波を追加してみよう

    6. UIデバッグを導入して波形を自由に変更してみよう

    7. 経過時間を取得して旗をなびかせてみよう

    8. シェーダーに色を付け加えてみよう

    9. 国旗のテクスチャを用意してシェーダーに貼り付けてみよう

    10. uv座標を取得してテクスチャと組み合わせてみよう

    11. 国旗に影を追加してみよう

    12. シェーダーの大きさを調整しよう

    13. 本セクションを振り返ってシェーダーの理解を深めよう

    1. 完成品デモの紹介

    2. まずはセットアップから

    3. ShaderMaterialを導入してみよう

    4. ベースとなる頂点シェーダーとフラグメントシェーダーを記述しよう

    5. 平面の波の高さ(振幅)を変更してみよう

    6. 波の周波数を変更してみよう

    7. UIデバッグで周波数を自在に変更させてみよう

    8. 時間の経過とともに波形を変更してみよう

    9. 波に色を追加してみよう

    10. 表面の色と深い色を組み合わせてリアルな海を表現してみよう

    11. 波の色の濃淡をはっきりさせてみよう

    12. ノイズを追加してよりリアルな海に近づけよう

    13. abs関数を使って山と谷をリアルに表現しよう

    14. 小さい波に対してUIデバッグを追加してみよう

    15. cnoiseを複数回利用してよりリアルな海を表現しよう

About this course

  • 24,000円
  • 61回のレッスン
  • 4.5時間の動画コンテンツ

Discover your potential, starting today