一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して12日目です。クリックしてイベントの詳細をご覧ください。

Open Graphics Library Shading LanguageのフルネームであるGLSLは、オープングラフィックライブラリシェーディング言語です。

つまり、レンダリングパイプラインの固定部分ではなく、グラフィックカードのGPU（グラフィックプロセッサユニット）で実行される、開発者によって作成された短いカスタムプログラムです。

glsl言語のハードウェア実行環境-グラフィックカード

ここでは、百科事典のグラフィックカードの説明を直接適用します。

グラフィックカード（ビデオカード、ディスプレイカード、グラフィックカード、ビデオアダプタ）は、コンピュータシステムがディスプレイを駆動するために必要なディスプレイ情報を変換し、ディスプレイにプログレッシブまたはインターレースを提供する、パーソナルコンピュータの基本コンポーネントの1つです。スキャン信号

GPUはグラフィックカードの心臓部です。

GPUで使用されるコアテクノロジーには、ハードウェアT＆L（ジオメトリ変換と照明処理）、キュービック環境マテリアルマッピングと頂点ミキシング、テクスチャ圧縮とバンプマッピング、デュアルテクスチャ4ピクセル256ビットレンダリングエンジンなどが含まれ、ハードウェアT＆LテクノロジーはのGPUシンボルと言われる

ディスプレイメモリは、フレームバッファとも呼ばれるビデオメモリと呼ばれます。その名前が示すように、その主な機能は、ディスプレイチップによって処理された、または抽出されようとしているレンダリングデータを一時的に保存することです。マザーボードのメモリと同様に、グラフィックカードを測定するための主要なパフォーマンス指標の1つです。

グラフィックカードは、openglが呼び出すためのAPIを提供し、openglはさまざまなグラフィックカードのAPIの違いを保護します。3Dゲームを開発するには、openglのAPIを理解するだけで済みます。

OpenGLはレンダリングパイプラインをカプセル化し、glslはレンダリングパイプラインプロセスでのグラフィックスカードの操作を制御します。

以下は、レンダリングパイプラインのプロセスの完全なセットです。

Vertex Shader通常、私たちは部品とそれらの部品のみを扱いFragmentShaderます。

glslの概要

OpenGLシェーディング言語は、実際には2つの密接に関連する言語です。これらの言語は、OpenGL処理パイプラインに含まれるプログラム可能なプロセッサのシェーダーを作成するために使用されます。

OpenGLシェーダー言語は、実際には密接に関連している2つの言語です。これらの言語は、OpenGLパイプラインでプログラム可能なプロセッサのシェーダーを作成するために使用されます。

GPU、グラフィックス処理ユニット。頂点処理ユニット、フラグメント処理ユニット、テクスチャマッピングユニットなど、さまざまなサブ処理ユニットに分割されます。glslコード文字列は、openglによって、頂点処理ユニットとフラグメント処理ユニットによって実行可能なバイトコード（アセンブリ言語）命令にコンパイルされます。

フラグメント処理ユニットは、ラスタライズされたデータに対してピクセルレベルのカラー化を実行し、現時点では頂点データを操作できなくなります。

上記は、glsl言語によって実行されるタスクです。

glslのプリコンパイル済み命令

glslのシェーダーコードは、実行時に動的にコンパイルされます。

glsl言語用にプリコンパイルされたすべての手順は次のとおりです。

＃define、変数を定義する
＃undef、変数の定義を解除
＃if、判断ステートメント
#ifdef ,如果定义，就执行
#ifndef ,如果未定义就执行。
#else, 条件分支
#elif, 条件分支
#endif,结束if语句
#error, 触发编译报错

下面就拿error这个预编译指令示例:

  #define num 2
  #if num == 3
  #error 3vertex shader error
  #else
  #error vertex shader error
  #endif
复制代码

上述代码执行结果如下:

画像1.png

如果num定义为3，则会打印出3vertex shader error

glsl的的关键字语言类型

作为一门语言，肯定有很多关键字，具有特定的功能。下面是glsl目前使用到的关键字:

attribute const uniform varying // 变量修饰符
centroid break continue do for while if else  // 控制语句
in out inout 
float int void bool true false invariant // 基本类型
discard return // 操作符
mat2 mat3 mat4 mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4 // n维矩阵类型
vec2 vec3 vec4 ivec2 ivec3 ivec4 bvec2 bvec3 bvec4 // n维向量类型
sampler1D sampler2D sampler3D samplerCube sampler1DShadow sampler2DShadow // 采样类型
struct // 结构体
复制代码

变量修饰符

变量修饰符关键字是一定需要掌握的，在3d图形编程中使用频率很高。

attribute通常用于修饰顶点数据，顶点法线，纹理数据等。 uniform通常用于存储变换矩阵等不常变化的数据。 varying修饰符则用于从顶点着色器向片元着色器传递数据。

struct结构体

glsl提供的自定义数据结构类型。

struct light {
  vec3 color;
  vec3 position;
}
light l = light(vec3(1.0,0.0,0.0), vec3(1.0,0.0,0.0));
复制代码

discard

表示丢弃当前片元，该片元像素不会被上色，只可用于片元着色器

sampler2D

在片元着色器中，采样纹理中的颜色数据，赋值给片元着色器。

varying vec2 texCoord;
uniform sampler2D uSampler;
void main() {
	gl_FragColor = texture2D(uSampler, texCoord);
}
复制代码

其他关键字基本在语言中是通用的，所以就不做过多介绍了。

像操作符，方法调用与其它语言基本无区别。

注意一点，glsl没有===操作符和!==操作符。

这些使用示例可以直接查看mdn上的代码示例，自己尝试更改实操，体会才更深。 glsl是一门强类型语言，其基本的数据类型如下:

类型	说明
void	空类型,即不返回任何值
bool	布尔类型示例值true,false
int	带符号的整数,示例值 1
float	带符号的浮点数,示例值0.0
vec2, vec3, vec4	n维浮点数向量, 示例值 vec3(0.0,0.0,0.0)
bvec2, bvec3, bvec4	n维布尔向量
ivec2, ivec3, ivec4	n维整数向量
mat2, mat3, mat4	浮点数矩阵
sampler2D	2D纹理

glsl内建变量

gl_Position，高精度浮点型四维向量的顶点坐标。
gl_FragColor，高精度浮点型四维向量的像素值。

glsl语言常用函数

クランプ、最小値と最大値の間の範囲内でベクトルをクランプします。この範囲を超えるものはすべて、対応する最小値または最大値を取ります。
texture2D、テクスチャサンプリング。
mix、2つの値の線形混合。
max、最大値を取ります。

その他の組み込み関数は、このドキュメントにあります：www.khronos.org/registry/Op…

もちろん、これらの組み込み関数は、コンテキストを介してwebglapiにも公開されます。

glsl言語については以上です。

ゲーム開発言語であるwebglのglsl言語の紹介