Une introduction au langage glsl dans webgl, un langage de développement de jeux

Prenez l'habitude d'écrire ensemble ! C'est le 12ème jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

GLSL, le nom complet de Open Graphics Library Shading Language, est un langage de shader de bibliothèque graphique ouvert.

C'est-à-dire de courts programmes personnalisés écrits par des développeurs, qui sont exécutés sur le GPU (Graphic Processor Unit) de la carte graphique , au lieu d'une partie fixe du pipeline de rendu

Environnement d'exécution matériel du langage glsl - carte graphique

Ici appliquez directement l'explication de la carte graphique sur l'encyclopédie.

La carte graphique ( carte vidéo , carte d' affichage , carte graphique , adaptateur vidéo ) est l'un des composants de base de l'ordinateur personnel, qui convertit les informations d'affichage requises par le système informatique pour piloter l' affichage , et fournit l'affichage avec progressif ou entrelacé . signaux de balayage

Le GPU est le cœur de la carte graphique.

Les technologies de base utilisées par le GPU comprennent le matériel T&L (conversion de géométrie et traitement de l'éclairage), le mappage de matériaux d'environnement cubique et le mélange de sommets, la compression de texture et le mappage de relief, le moteur de rendu à quatre pixels 256 bits à double texture , etc., et la technologie matérielle T&L peut être dit être des symboles GPU de

La mémoire d' affichage est appelée mémoire vidéo, également appelée mémoire tampon de trame. Comme son nom l'indique, sa fonction principale est de stocker temporairement les données de rendu traitées ou sur le point d'être extraites par la puce d'affichage . Semblable à la mémoire de la carte mère, elle est l'un des principaux indicateurs de performance pour mesurer la carte graphique.

La carte graphique fournit des API à appeler par opengl, et opengl protège les différences d'API des différentes cartes graphiques. Il suffit de comprendre l'api d'opengl pour développer des jeux 3d.

OpenGL encapsule un pipeline de rendu pour nous, tandis que glsl nous donne le contrôle sur le fonctionnement de la carte graphique dans le processus de pipeline de rendu.

Voici un ensemble complet de processus du pipeline de rendu :

e824b899a9014c08a50b51190d7b02087bf4f45e.png

Habituellement, nous ne traitons que des Vertex Shaderparties et FragmentShaderdes parties d'entre eux.

vue d'ensemble

Le langage d'ombrage OpenGL est en fait deux langages étroitement liés. Ces langages sont utilisés pour créer des shaders pour les processeurs programmables contenus dans le pipeline de traitement OpenGL.

Le langage de shader OpenGL est en fait deux langages étroitement liés. Ces langages sont utilisés pour créer des shaders pour les processeurs programmables dans le pipeline OpenGL.

GPU, unité de traitement graphique, qui est subdivisée en diverses sous-unités de traitement, telles que l'unité de traitement des sommets, l'unité de traitement des fragments, l'unité de mappage de texture, etc. La chaîne de code glsl est compilée par opengl en instructions de bytecode (langage d'assemblage) exécutables par l'unité de traitement de vertex et l'unité de traitement de fragment.

L'unité de traitement de fragment effectue une colorisation au niveau des pixels sur les données tramées et ne peut plus manipuler les données de sommet à ce moment.

Ce qui précède est la tâche à effectuer par le langage glsl.

instructions précompilées pour glsl

Le code de shader pour glsl est compilé dynamiquement pendant l'exécution.

Voici toutes les instructions précompilées pour le langage glsl :

  • #define, définir une variable
  • #undef, indéfinir une variable
  • #si, déclaration de jugement
  • #ifdef ,如果定义,就执行
  • #ifndef ,如果未定义就执行。
  • #else, 条件分支
  • #elif, 条件分支
  • #endif,结束if语句
  • #error, 触发编译报错

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

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

上述代码执行结果如下:

Image 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语言常用函数

  • clamp, serre un vecteur dans une plage, entre une valeur minimale et une valeur maximale. Tout ce qui dépasse cette plage prendra la valeur minimale ou maximale correspondante.
  • texture2D, échantillonnage de texture.
  • mix, un mélange linéaire de deux valeurs.
  • max, prend la valeur maximale.

Plus de fonctions intégrées peuvent être trouvées dans ce document : www.khronos.org/registry/Op…

Bien sûr, ces fonctions intégrées sont également exposées à l'API webgl via le contexte.

C'est tout pour le langage glsl.

Je suppose que tu aimes

Origine juejin.im/post/7085587372565332004
conseillé
Classement