Threejsの発展編を学ぶ@udemy

Threejsの発展編を学ぶ。
以下のudemyで学びます(ありがとうございます)

【Three.js発展講座】シェーダー言語を駆使して複雑な3Dオブジェクトを自在に操りたい人のためのマスター講座
https://www.udemy.com/course/threejs-shader-glsl/

シェーダーとは？

• シェーディング=影=>陰影
  • リアルに表現できる
  • いろんな色が表現できる

シェーダーとは？描画の流れ

• CPU
• API: WebGL
  • JSのAPI
  • GLSL言語で表現
• GPU
  • シェーダー

GLSL言語ってどんな感じなんだろう？

要は、
JS -> WebGL(GLSL) -> シェーダーということ

シェーダーまでの流れ

• GLSL
  • VertexShader
    • 頂点シェーダ
    • ⊿の形を頂点で定義
  • FragmentShader
    • ⊿に色をぬる
  • 最終的にシェーダーでレンダリング

ピクセルを塗るって話
ゲームによくあるアンチエイリアス処理とかの話がこれから出てきそうな予感

VertexShader

• Vertex: 天頂
• マス目に頂点をセット
• 線を引く（骨格ができる）

FragmentShader

• Fragment: 断片
• 頂点が属しているピクセルを塗る
• 頂点にも色がつけられる
  • 頂点から色が伸びていって重なって補完されていく（混ざっていく）

Webpackでglsl言語をパッキングしている

環境構築、npm iで爆速で終わった最高

お！.glsl拡張子出てきた

以前までは

• geometry x material = meshとしていた

シェーダーは

• RawShaderMaterial()
  • Raw = 無加工ね
  • vertexとfragmentが引数にあるね

マテリクス

• model
  • 位置
• view
  • カメラ
• projection
  • カメラが映す領域

なぜ掛け算する？

• 3D -> 2Dにする必要がある
• 座標変換がいる
• 行列の乗算で座標変換する
• vec4: 4次元ベクトル

glslはc言語に似ている
パフォーマンスの担保のためにかなり厳格な静的型付け言語っぽいね

シェーダー修飾子

• attribute
  • 頂点など
• uniform
  • 一定, 画一
  • = グローバル変数の意味
• varying
  • vertexからfragmentにわたすとき

旗を作る

エラーはコンソールから周辺情報を見ればOK
0:Line

sin()きた

js -> glslにuniformsでglsl内で使用する変数を注入できる
グローバル変数(=uniform)にはプレフィックスをuつけてuFrequencyとする慣例

uv座標きたー

• uv座標
  • 飴玉の包み紙のイメージ
  • ここにマッピング

ShaderMaterialにはattribute vec2 uv;が用意されている

テクスチャ画像は2の累乗で用意するとメモリ効率が良い
例. 1024 * 1024

uniformsでglsl間で使用するグローバル変数を定義