3次元の描画 / 1.頂点シェーダー / 2.ラスタライザ / 3.ピクセルシェーダ

HTML5用語集

カテゴリー: compileShader()メソッド  閲覧数:491 配信日:2018-08-23 10:36


3次元の描画


ポリゴン表示が基本になっている
・ポリゴンは一般的に三角形の面をつなげたものが使われる
・三角形は頂点の位置が決まれば自動的に面の位置も形も決まるため、実際に計算するのは頂点の位置だけで良い

3次元描画処理の流れ

順番 処理名 処理内容 入力 出力
1 頂点シェーダー 「ポリゴンの頂点の位置」を「画面上の位置」へ変換 頂点 頂点
2 ラスタライザ 「ポリゴン」を「ピクセルの並び」へ変換する 頂点 ピクセル
3 ピクセルシェーダ 「ピクセルの色」を求める ピクセル ピクセル

1.頂点シェーダー


「頂点の位置」を計算する
・下記の全てを考慮し、「画面上ではどの位置に頂点が来るか」を計算する
※頂点の位置は、「モデルの位置(ベース座標)」や「モーションによる変形(ボーン計算)」、「カメラの位置(投影計算)」などで変化する

役割
・「モデル(ポリゴン)の頂点の位置」を、「画面上の位置」へ変換すること

実際には?
・モデルのデータの「頂点」には「位置(3次元座標)」以外の色々なパラメータを入れることができる

2.ラスタライザ


「ポリゴン」を「ピクセルの並び」に変換する

3.ピクセルシェーダ


「実際に表示する色」を決定
・「ピクセルの色」を求める

役割
・「色を計算する」こと
・「テクスチャ(=画像)から"テクスチャ座標"の位置にある色を持ってくる」という処理



説明しよう!シェーダーとはッ!

指定期間人気ページランキング / 2020-5-29 → 2025-6-3
順位 ページタイトル抜粋 アクセス数
1 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1452
2 フォーム | その他 940
3 HTML5用語 250
4 VBO | WebGLRenderingContext 239
5 new Image() | new Image()オブジェクト生成(HTMLImageElementインターフェイス) 170
6 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 164
7 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 129
8 createLinearGradient() メソッド | createLinearGradient()メソッド(CanvasRenderingContext2D ) 115
9 drawImage() メソッド | drawImage()メソッド(CanvasRenderingContext2D ) 108
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 99
11 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 98
12 now()メソッド(Performanceインターフェイス) カテゴリー 92
13 getContext()メソッド(HTMLCanvasElement) カテゴリー 91
14 saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す 87
15 「線形グラデーションで塗りつぶした四角形」を描画するためには? 86
16 globalAlphaプロパティ(CanvasRenderingContext2D ) カテゴリー 85
17 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 84
17 new Image()オブジェクト生成(HTMLImageElementインターフェイス) カテゴリー 84
18 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 83
18 setItem()メソッド(HTMLStorageオブジェクト) カテゴリー 83
2025/6/4 1:01 更新