シェーダー

WebGLRenderingContextcompileShader()メソッド

シェーダーとは?

 状態:-  閲覧数:2,685  投稿日:2018-08-20  更新日:2018-08-24  

表記


英語
・shader

3次元オブジェクトを2次元描画するために必要な変換処理を行うプログラムの集まり


3Dオブジェクトをディスプレイに映し出すためのプログラム
・3次元コンピュータグラフィックスにおいて、シェーディング(陰影処理)を行うコンピュータプログラムのこと

シェーダーの役割


3次元の座標(ポリゴンの頂点座標)を2次元へ座標変換する
・座標変換を主な役割とするシェーダを頂点シェーダ(バーテックスシェーダ)

ピクセルの色を決める
・ピクセルの色を計算するシェーダをフラグメントシェーダ(ピクセルシェーダ)

WebGL では?


OpenGL レンダリングパイプライン の適切なステージで名付けられている、"シェーダー" というプログラムを 2 つ提供している

バーテックスシェーダー
・描画する各頂点の座標を提供する

フラグメントシェーダー
・描画する各ピクセルの色を提供する

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

 閲覧数:391 投稿日:2018-08-23 更新日:2018-09-05 

3次元の描画


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

3次元描画処理の流れ

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

1.頂点シェーダー


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

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

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

2.ラスタライザ


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

3.ピクセルシェーダ


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

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



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


compileShader()メソッド

コメント投稿(ログインが必要)