WebGL 着色器语言(GLSL ES)

1.类型转换内置函数

转换/函数/描述

转换为整形数/int(float)/将浮点数的小数部分删去,转换为整形数(比如,将3.14转换为3)

转换为整形数/intl(bool)/true被转换为1,false被转换为0

转换为浮点数/float(int)/将整形数转换为浮点数(比如,将8转换为8.0)

转换为浮点数/float(bool)/true被转换为1.0,false被转换为0.0

转换为布尔值/bool(int)/0被转换为false,其他非0倍转换为true

转换为布尔值/0.0被转换为false,其他非0值被转换为true

2.矢量和矩阵类型

类型/GLEL ES 数据类型/描述

矢量/vec2、vec3、vec4/具有2、3、4个浮点数元素的矢量

矢量/ivec、ivec3、ivec4/具有2、3、4个整形数元素的矢量

矢量/bvec、bvec3、bvec4/具有2、3、4个布尔值元素的矢量

矩阵/mat2、mat3、mat4/2*2、3*3、4*4的浮点数元素的矩阵(分别具有4、9、16个元素)

3.分量名

类别/描述

x、y、z、w/用来获取顶点坐标分量

r、g、b、a/用来获取颜色分量

s、t、p、q/用来获取纹理坐标分量

由于矢量可用来存储顶点的坐标、颜色、纹理坐标,所以GLSL ES支持以上三种分量名称以增强程序的可读性。事实上,任何矢量的x、r或s分量都会返回第一个分量,y、g、t分量都返回第二个分量,等等。比如:

vec3 v3 = vec3(1.0, 2.0, 3.0) //将v3设置为(1.0, 2.0, 3.0)
float f;
f = v3.x; //设置f为1.0
f =  v3.y //设置f为2.0
f = v3.z //设置f为3.0

f = v3.r; //设置f为1.0
f = v3.s; //设置f为1.0

将多个分量名共同置于点运算符后,就可以从矢量中同时抽取出多个分量。这个过程称为混合(swizzing)。下面的例子中,我们使用了x、y、z和w,其他的集合也有相同的效果:

vec2 v2;
v2 = v3.xy; //设v2为(1.0, 2.0)
v2 = v3.yz; //设v2位(2.0, 3.0) 可以省略任意分量
v2 = v3.xz; //设v2位(1.0, 3.0) 可以跳过任意分量
v2 = v3.yx; //设v2为(1.0, 1.0) 可以逆序
v2 = v3.xx; //设v2为(1.0, 1.0) 可以重复任意分量  

vec3 v3a;
v3a = v3.zyx; //设v3a位(3.0, 2.0, 1.0),可以使用所有分量

4.[]运算符

矩阵中的元素任然是按照列主序读取的。与在javascript中一样,下表从0开始,所以通过[0]可以访问到矩阵中的第一列元素,[1]可以访问到第二列元素,[2]可以访问到第三列元素,如下所示:

此外,连续两个[]运算符可以访问某列的某个元素:

float m23 = m4[1][2]; //将m23设置为m4的第二列中的第三个元素(7.0)。

5.数组

GLSL ES只支持一维数组,而且数组对象不支持pop()和push()等操作,创建数组时也不需要使用new运算符。声明方式如下:

float floatArray[4]; // 声明含有4个浮点数元素的数组
vec4 vec4Array[2]; // 声明含有两个vec4对象的数组

数组的长度必须是大于0的整形常量表达式,如下定义:

1.整形字面量(0、1)

2.用const限定字修饰的全局变量或局部变量,不包含函数参数

因此,下面的代码将会出错:

int size = 4;
vec4 vec4Array[size]; //错误。如果第一行为const int size = 4;则不会报错

6.取样器(纹理)

我们必须通过取样器(sampler)类型变量访问纹理。有两种基本的取样器类型:sampler2D和samplerCube。取样器变量只能是uniform变量,或者需要访问纹理的函数,如texture2D()函数的参数。比如:

uniform smapler2D u_Sampler;

此外,唯一能赋给去取样变量的就是纹理单元编号,而且你必须使用WebGL方法gl.uniform1i()来进行赋值。例如:

gl.uniform1i(u_Sampler, 0) //将纹理单元编号0传给着色器

7.规范声明

如果函数定义在其调用之后,那么我们必须在进行调用之前先声明该函数的规范。规范声明不预先告诉WebGL系统函数的参数、参数类型、返回值类型等等。例如:

float luma(vec4); //规范声明
main(){
    ...
    float brightness = luma(color); //luma()在定义之前就被调用了
}

float luma(vec4 color){
    return 0.2126 * color.r + 0.7162 * color.g + 0.0722 * color.r;
}

8.内置函数

9.存储限定字

在GLSL ES中,我们经常使用attriute、varying和uniform限定字来修饰变量,如图所示:

    此外,我们有时也会使用const限定字,它表示着色器中的某个变量使恒定的常量。几个存储限定自的使用分别如下:

1.Attribute变量

attribute变量只能出现在定点着色器中,只能被声明为全局变量,被用来表示逐顶点的信息。顶点着色器中能够容纳的attribute变量的最大数目与设备有关,你可以通过访问内置的全局常量获取该值。但是,支持WebGL环境都支持至少8个attribute变量。如下所示:

2.uniform变量

可以用在顶点着色器和片元着色器中,且必须是全局变量。uniform变量是只读的,它可以是除了数组或结构体之外的任意类型。如果顶点着色器和片元着色器中声明了同名的uniform变量,那么它就会被两种着色器共享。

3.varying变量

必须是全局变量,它的任务是从顶点着色器向片元着色器传输数据。我们必须在梁总着色器中声明同名、同类型的varying变量。它的类型只能是以下类型:float、vec2、vec3、vec4、mat2、 mat 3、mat4。

10.精度限定字

GLSL ES新引入了精度限定字,目的是帮助着色器程序提高运行效率,消减内存开支。使用精度限定字,你就能够精细地控制程序在效果和性能间的平衡。然而,精度限定字是可选的,如果你不确定,可以使用下面这个适中的默认值:

#ifdef GL_ES
precision mediump float;
#endif

如下所示,WebGL程序支持三种精度,其限定字分别为highp、mediump、lowp。

下面是声明变量精度的几个例子:

mediump float size; //中精度的浮点型变量
highp vec4 position; //具有高精度浮点型元素的vec4对象
lowp vec4 color; //具有低精度浮点型元素的vec4对象

为每个变量都声明精度很繁琐,我们也可以使用关键字precision来声明着色器的默认精度,并且这行代码必须放在顶点着色器或片元着色器的顶部,格式如下:

precision mediump float;

我们已经发使用精度限定字一般都只在片元着色器中使用,这是因为,除了片元着色器的float类型没有默认精度,其他类型都有默认精度。如下是数据类型的默认精度:

    11.预处理指令

GLSL ES支持预处理指令。预处理指令用来在真正编译之前对代码进行预处理。都已#号开始。下面就是预定义float类型精度的预处理指令:

#ifdef GL_ES
precision mediump float;
#endif

下面是我们在GLSL ES中可能用到的三种预处理指令。

#if 条件表达式
If 如果条件比倒是为真,执行这里
#endif

#ifdef 谋宏
如果定义了某宏,执行这里
#endif

#ifndef 某宏
如果没有定义某宏,执行这里
#endif

可以使用一下指定进行宏定义:

#define 宏名 宏内容

可以使用undef 宏名,结束宏定义。例如:

#define NUM 100
#ifNUM == 100
如果宏NUM为100,执行这里
#else
否则,执行这里
#endif

预定义的内置宏有:

宏/描述

GL_ES/在OpenGL ES2.0中定义为1

GL_FRAGEMENT_PRECISION_HIGH/片元着色器支持highp精度

时间: 2024-12-11 00:02:56

WebGL 着色器语言(GLSL ES)的相关文章

OpenGLES2.0着色器语言glsl

OpenGLES2.0中是强制使用可编程的渲染管线的,使用的是glsl着色器语言,因为着色器语言是使用的GPU,即图形处理单元,而不是CPU,这样可以使CPU从繁重的几何计算和像素的处理中解脱出来了.这就加大了处理的速度. 下面的这篇教程是转载的.原文地址如下,感谢作者manyou http://www.apkbus.com/blog-99192-39382.html 一.着色语言基础 数据类型概述 1. 标量 标量也被称为"无向量"其值只有大小,并不具有方向.标量之间的运算遵循简单的

OpenGL ES着色器语言之语句和结构体(官方文档第六章)内建变量(官方文档第七、八章)

OpenGL ES着色器语言之语句和结构体(官方文档第六章) OpenGL ES着色器语言的程序块基本构成如下: 语句和声明 函数定义 选择(if-else) 迭代(for, while, do-while) 跳跃(discard, return, break, continue) 6.1函数定义   着色器是由一系列全局声明和函数定义组成的.函数声明规范如下: // prototype returnType functionName (type0 arg0, type1 arg1, ...,

OpenGL ES着色器语言之着色概览(官方文档)

OpenGL ES着色器语言之着色概览(官方文档第二章) 事实上,OpenGL ES着色语言是两种紧密关联的语言.这些语言用来在OpenGL ES处理管线的可编程处理器创建着色器. 在本文档中,除非另外说明,一个语言功能适用于所有语言,并且通用用法将把他们当做一个语言来看待.特定语言将指出它们的目标处理器:顶点(vertext)或片元(fragment). 任何被着色器使用的OpenGL ES状态值都会自动地被跟踪并且作用于着色器上.这个自动状态跟踪机制允许应用程序为状态管理而使用OpenGL

OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)和varying,uniform,attribute修饰范围

OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)   所有变量和函数在使用前必须声明.变量和函数名是标识符. 没有默认类型,所有变量和函数声明必须包含一个声明类型以及可选的修饰符.变量在声明的时候首先要标明类型,后边可以跟多个变量,之间用逗号隔开.很多情况下,变量在声明的时候可以使用等号“=”进行初始化. 用户定义类型可以使用struct,在结构体中所有变量类型都必须是OpenGL ES着色器语言定义的关键字.OpenGL ES着色语言是类型安全的,因此不支持隐式类型转换.

OpenGL ES着色器语言之操作数(官方文档第五章)

OpenGL ES着色器语言之操作数(官方文档第五章) 5.1操作数 OpenGL ES着色器语言包含如下操作符. 5.2数组下标 数组元素通过数组下标操作符([ ])进行访问.这是操作数组的唯一操作符,举个访问数组元素的例子: diffuseColor += lightIntensity[3] * NdotL; 5.3函数调用 如果一个函数有返回值,那么通常这个函数调用会用在表达式中. 5.4构造器 构造器使用函数调用语法,函数名是一个基本类型的关键字或者结构体名字,在初始化器或表达式中使用.

OpenGL ES着色器语言之变量和数据类型(二)(官方文档第四章)

OpenGL ES着色器语言之变量和数据类型(二)(官方文档第四章) 4.5精度和精度修饰符 4.5.1范围和精度 用于存储和展示浮点数.整数变量的范围和精度依赖于数值的源(varying,uniform,纹理查找,等等),是不是顶点或者片元着色器,还有其他一些底层实现的细节.最低存储需要通过精度修饰符来声明.典型地,精度操作必须要保留变量包含的精度存储.仅有的例外是需要大量复杂计算的内建函数,如atan(),返回值的精度低于声明的精度. 强烈建议顶点语言提供一种匹配IEEE单精度浮点数或更高精

第4章:缓冲区、着色器、GLSL

原文链接: http://www.rastertek.com/gl40tut04.html Tutorial 4: Buffers, Shaders, and GLSL This tutorial will be the introduction to writing vertex and pixel shaders in OpenGL 4.0. It will also be the introduction to using vertex and index buffers in OpenG

OpenGL官方教程——着色器语言概述

OpenGL官方教程——着色器语言概述 OpenGL官方教程——着色器语言概述 可编程图形硬件管线(流水线) 可编程顶点处理器 可编程几何处理器 可编程片元处理器 语言 可编程图形硬件管线(流水线) 将 Pertransformed Vertices (每一个待转换顶点) 传人 Programmable Vertex Processor (可编程的顶点处理器) 得到 Transformed Vertices (转换的顶点) 将 Transformed Vertices (转换的顶点) 传入 Pr

WebGL中的OpenGL着色器语言

在webgl中,调用了OpenGL-ES-2.0的API,而在OpenGL-ES专为嵌入式设备设计,其和其它设备一样,都是使用GLSL(GL Shading Language)来编写片段程序并执行于GPU的着色器上,来完成对对象的渲染.GLSL在其中起着相当重要的作用,所以要玩好webgl,我们就得把GLSL搞懂,本文主要介绍shader的基础使用及组成. 整个管线处理过程: 1.指定几何对象 1.顶点数组(直接将顶点数据传送至shader里) 2.顶点索引(将顶点数据保存于缓冲区中,用索引来从