Una introducción al lenguaje glsl en webgl, un lenguaje de desarrollo de juegos

¡Acostúmbrate a escribir juntos! Este es el día 12 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .

GLSL, el nombre completo de Open Graphics Library Shading Language, es un lenguaje de sombreado de biblioteca de gráficos abierta.

Es decir, programas cortos personalizados escritos por desarrolladores, que se ejecutan en la GPU (Unidad de procesador gráfico) de la tarjeta gráfica , en lugar de una parte fija de la canalización de renderizado.

Entorno de ejecución de hardware del lenguaje glsl - tarjeta gráfica

Aquí aplica directamente la explicación de la tarjeta gráfica en la enciclopedia.

La tarjeta gráfica ( tarjeta de video, tarjeta de visualización , tarjeta gráfica , adaptador de video ) es uno de los componentes básicos de la computadora personal, que convierte la información de visualización requerida por el sistema informático para controlar la pantalla , y proporciona a la pantalla con progresivo o entrelazado señales de escaneo

La GPU es el corazón de la tarjeta gráfica.

Las tecnologías centrales utilizadas por la GPU incluyen hardware T&L (conversión de geometría y procesamiento de iluminación), mapeo de materiales de entornos cúbicos y mezcla de vértices, compresión de texturas y mapeo de relieve, motor de renderizado de textura dual de cuatro píxeles y 256 bits , etc., y la tecnología T&L de hardware puede se dice que son símbolos GPU de

La memoria de pantalla se conoce como memoria de video, también conocida como búfer de cuadros. Como su nombre indica, su función principal es almacenar temporalmente los datos de renderizado procesados ​​o a punto de ser extraídos por el chip de pantalla . Similar a la memoria de la placa base, es uno de los principales indicadores de rendimiento para medir la tarjeta gráfica.

La tarjeta gráfica proporciona API para que opengl llame, y opengl protege las diferencias de API de diferentes tarjetas gráficas. Solo necesitamos entender la api de opengl para desarrollar juegos 3d.

OpenGL encapsula una canalización de renderizado para nosotros, mientras que glsl nos da control sobre el funcionamiento de la tarjeta gráfica en el proceso de canalización de renderizado.

El siguiente es un conjunto completo de procesos de la canalización de representación:

e824b899a9014c08a50b51190d7b02087bf4f45e.png

Por lo general, solo tratamos con Vertex Shaderpartes y FragmentShaderpartes de ellos.

descripción general de glsl

El lenguaje de sombreado OpenGL es en realidad dos lenguajes estrechamente relacionados. Estos lenguajes se utilizan para crear sombreadores para los procesadores programables contenidos en la canalización de procesamiento de OpenGL.

El lenguaje de sombreado de OpenGL son en realidad dos lenguajes que están estrechamente relacionados. Estos lenguajes se utilizan para crear sombreadores para procesadores programables en la canalización de OpenGL.

GPU, unidad de procesamiento de gráficos, que se subdivide en varias unidades de subprocesamiento, como la unidad de procesamiento de vértices, la unidad de procesamiento de fragmentos, la unidad de mapeo de texturas, etc. La cadena de código glsl es compilada por opengl en instrucciones bytecode (lenguaje ensamblador) ejecutables por la unidad de procesamiento de vértices y la unidad de procesamiento de fragmentos.

La unidad de procesamiento de fragmentos realiza la colorización a nivel de píxel en los datos rasterizados y ya no puede manipular los datos de vértice en este momento.

Lo anterior es la tarea a realizar por el lenguaje glsl.

instrucciones precompiladas para glsl

El código de sombreado para glsl se compila dinámicamente durante el tiempo de ejecución.

Aquí están todas las instrucciones precompiladas para el lenguaje glsl:

  • #define, define una variable
  • #undef, anula la definición de una variable
  • #si, declaración de juicio
  • #ifdef ,如果定义,就执行
  • #ifndef ,如果未定义就执行。
  • #else, 条件分支
  • #elif, 条件分支
  • #endif,结束if语句
  • #error, 触发编译报错

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

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

上述代码执行结果如下:

Imagen 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, sujeta un vector dentro de un rango, entre un valor mínimo y un valor máximo. Cualquier cosa que supere este rango tomará el valor mínimo o máximo correspondiente.
  • textura2D, muestreo de texturas.
  • mix, una mezcla lineal de dos valores.
  • max, toma el valor máximo.

Se pueden encontrar más funciones integradas en este documento: www.khronos.org/registry/Op…

Por supuesto, estas funciones integradas también están expuestas a la API webgl a través del contexto.

Eso es todo por el lenguaje glsl.

Supongo que te gusta

Origin juejin.im/post/7085587372565332004
Recomendado
Clasificación