シェーダーと見え方の仕組み

形に、表面、光、カメラを組み合わせる

読む目安：約8分。教材としての制作提案です。生成・性能・料金の比較実験は実行していません。

この章で身につけること

• geometry/material/texture/shaderを混同しない
• 光と法線の役割を説明できる
• 既製マテリアルと独自シェーダーを選ぶ

形状と照明の影響を切り分ける

1. 1形状と頂点位置
2. 2面の法線
3. 3光との関係
4. 4フラグメントの色
5. 5描画画像

1. 1カメラと光を固定
2. 2材質の変数を一つ変更
3. 3同じ物体を比較

自作の概念図です。変形と陰影を分け、条件を固定した比較も示しています。法線マップは照明の計算を変えますが、輪郭を変えるには形状を動かす必要があります。

仕事の役割

• ルックデブ担当：材質と照明の見た目を詰める
• シェーダー担当：描画の計算を作る
• ライティング担当：光と影の演出

入力

• 単純な球と平面
• 固定カメラと光
• 変えるパラメータを一つ

制作工程

1. 同じ球を単色で表示する
2. 標準材質にしてroughnessだけ変える
3. 光を固定してテクスチャ有無を比較する
4. 法線表示で向きを可視化する
5. 必要な表現だけ独自シェーダーへ切り出す

出力

• 材質比較シーン
• 変数と見え方の関係の記録

八つの部品で見る

geometry（形状）は立体の形。material（マテリアル）は表面をどう見せるかの設定。texture（テクスチャ）は色や凹凸などを場所ごとに与える画像やデータ。shader（シェーダー）はGPUで形や色などを計算する小さなプログラム。light（光）は照らし方。camera（カメラ）はどこからどう見るか。render（レンダー）はそれらから画像を計算すること。composite（コンポジット）は計算した画像や層を合成・調整することです。マテリアルは単なる貼り付け画像ではなく、シェーダーやパラメータを使って見え方を決めます。

シェーダーを知らなくても使っている

Three.jsで既製のマテリアルを選ぶと、内部の描画プログラムが表面の見え方を計算します。自分でシェーダーを書くのは、水の特殊表現や独自の変形など、既製の設定だけでは足りないときです。まず標準材質で形と光を理解し、その後に独自計算へ進むと原因を切り分けやすくなります。

頂点と画面上の色

入門ではvertex shaderを「頂点の位置を計算する段階」、fragment shaderを「描画される細かな領域の色などを計算する段階」と考えます。uniformは時間や波の高さなど外から渡す共通設定です。例えば時間を増やせば波の位相が進みます。GLSLのShaderMaterialを使う本教材の例はWebGLRendererを前提にし、WebGPU向けの別方式と混ぜません。

凹凸が見えることと形が動くこと

normal（法線）は面が向く方向です。法線マップは照らし方に使う向きを変えて、細かな凹凸があるように見せられますが、通常それだけで輪郭の形は変わりません。大きな波で水平線や物体の輪郭を動かすには形状の変形が必要です。roughnessは反射の広がり、metalnessは金属らしい反射の扱いを制御する代表的なパラメータです。

品質チェック

• 形状、材質、光、カメラを同時に変更していない
• 色テクスチャとデータテクスチャを区別
• 法線と座標系が一致
• 対象レンダラーで動作を確認

失敗を切り分ける

症状	原因	次にすること
シェーダーが真っ黒	コンパイル失敗、光の不足、座標や値の不整合など	エラーを見て、一定色を返す最小例から段階的に戻す
凹凸はあるが波の輪郭が平ら	法線だけを変えている	頂点変形と必要な分割数を検討する

実験課題：同じ球で素材を比べる

状態：未実行（not-run）。実測結果ではなく、これから取り組む課題です。

課題：光とカメラを固定し、マット・つやあり・金属の3設定を比較する。どの変数を変えたかを必ず表示する。

成果物：三つの設定と比較表示

完了条件：材質と照明の影響を別々に説明できる

関連するCatalog候補と実践

先に読む章：つくるものと仕事の全体地図 · 3Dモデルを使える素材にする

ブラウザ内で動く海のシェーダー実習は、ローカル配布のThree.js 0.186.1とWebGLRendererを使い、モデルAPIを呼び出しません。平面、頂点の波、近似した光と色の三段階を扱います。物理的な海洋シミュレーション、実際の反射・屈折、岸の泡は実装していません。開いただけでは比較課題の完了にも、別端末の性能確認にもなりません。

海のシェーダー実習を開く

実験記録表で計画と証拠を残す

実験ノートを開く

一次資料

• Three.js Mesh — 確認日: 2026-10-03
• Three.js MeshStandardMaterial — 確認日: 2026-10-03
• Three.js Texture — 確認日: 2026-10-03
• Three.js ShaderMaterial — 確認日: 2026-10-03
• MDN Lighting in WebGL — 確認日: 2026-10-03

2026-10-04に確認した出典の範囲

ShaderMaterial はWebGLRenderer向けです。MeshStandardMaterial のroughnessは0〜1、既定値は1で、マップがある場合はその値と乗算します。変数を比較するときはマップを固定します。

リンク先の海の実習は独立した実践素材です。後で測るときは版、端末、実際の段階名を記録します。この章の課題と総合制作課題は未実行のままです。