广东省外贸网站建设,制作网站的基本工作流程,设计网站公司名称,百度网站域名费一年多少钱GLSL ES 概述
写在前面
程序是大小写敏感的每一个语句都应该以英文分号结束一个shader必须包含一个main函数#xff0c;该函数不接受任何参数#xff0c;并且返回voidvoid main()
{
}数据值类型
GLSL支持三种数据类型#xff1a;
整型浮点型#xff1a;必须包含小数点该函数不接受任何参数并且返回voidvoid main()
{
}数据值类型
GLSL支持三种数据类型
整型浮点型必须包含小数点不然会被认为是浮点型比如1表示整形1.0才表示浮点型布尔类型
GLSL是强类型语言这意味着
将浮点数赋值给一个整型变量是不对的同理将一个整数赋值给浮点数变量也不被允许// 会报错,错误信息如下
// Failed to compile shader: ERROR: 0:56: :
// cannot convert from const int to mediump float
float a1 1;// 会报错,错误信息如下
// Failed to compile shader: ERROR: 0:56: :
// cannot convert from const float to mediump int
int a1 1.0;在一个计算表达式中必须统一数据类型比如一个包含浮点数的表达式中不能使用整型数据这个经常由于不小心的书写导致编译失败。// 会报错
// Failed to compile shader: ERROR: 0:57: * :
// wrong operand types - no operation * exists that
// takes a left-hand operand of type mediump float
// and a right operand of type const int
float a1 1.0;
float a2 a1 * 3;数据转换
虽然GLSL是强类型语言但是我们可以通过显示转换实现数据类型的转变比如我们可以使用float()将数据类型转换为浮点数GLSL支持float、int和bool的相互转换
// 将整数转换为浮点数
float(int)
// true被转换为1.0 false被转换为0.0
float(bool)
// 将浮点数的小数删去整数部分转换为整型
int(float)
// true被转换为1 false被转换为0
int(bool)
// 0.0被转换为false其他值转换为true
bool(float)
// 0被转换为false其他值转换为true
bool(int)矢量和矩阵
GLSL可以通过基本数值类型组合成矢量和矩阵矢量的数据类型可以是浮点数整数和bool值但是矩阵WebGL1.0只支持浮点数
矢量
vec2, vec3, vec4具有2、3、4浮点数元素的矢量iec2, ivec3, ivec4具有2、3、4整数元素的矢量bec2, bec3, bec4具有2、3、4bool值元素的矢量
矩阵
mat22x2浮点数矩阵mat33x3浮点数矩阵mat44x4浮点数矩阵
赋值构造
在给矢量或者矩阵赋值的时候必须遵循
赋值两边的数据类型必须一致不然会报错赋值两边的元素个数必须一致对于矩阵默认的构造顺序是按照列主序的对于矩阵如果只传递了一个数值会构造一个对角线都是该值其他值都是0的矩阵
访问
访问矢量和矩阵可以有两种方式一种是通过.运算符一种是通过[] 使用点运算符访问有三种访问方式
x,y,z,w分别对应矢量的第1、2、3、4个分量注意矩阵是不能用该方式访问的r,g,b,a分别对应矢量的第1、2、3、4个分量注意矩阵是不能用该方式访问的s,t,p,q分别对应矢量的第1、2、3、4个分量注意矩阵是不能用该方式访问的
对于每一种访问方式都可以混合使用比如:
// 下面这些访问方式都是正确的
vec4 a1 vec4(1.0, 1.1, 1.2, 1.3);
float b1 a1.x;
vec2 c1 a1.xy;
vec2 d1 a1.yx;
vec2 e1 a1.xx;但是不同访问方式之间不可以混合使用
矩阵的访问更简单类似于C语言的数组访问使用[]从0开始0表示第一项使用[]访问的时候需要注意
矩阵是列主序的[]必须是整型字面值或者const整型或者循环索引或者三者的组合表达式
运算
如果一个矢量和一个数值进行运算结果是该数值和矢量的每个分量进行运算 如果一个矩阵和一个数值进行运算结果是该数值和矩阵的每个分量进行运算
结构体
GLSL使用如下方式定义一个结构体
struct light
{vec4 color;vec3 position;
};
light l1;
light l2;使用点运算符访问结构体的成员。
数组
GLSL中可以使用数组但是只可以使用一维数组 以下是数组的声明方式
float floatArray[4];
vec4 vec4Array[3];数组的长度必须是大于0的整型常量表达式
整型字面值用const限定符修饰的全局变量或者局部变量由前面两条组成的表达式
注意在使用数组的时候数组的索引只可以是整型常量表达式或者uniform变量。 注意数组不可以在声明的时候直接初始化必须显示的对每个元素进行初始化。
采样器
GLSL支持一种内置类型-采样器我们只能通过采样器来获取纹理的数据。 GLSL ES1.0支持两种采样器类型
sampler2D二维纹理贴图samplerCube三维纹理贴图
采样器只能是uniform变量
我们通过GLSL提供的内置函数来从采样器中访问纹理数据内置函数有两类可以参考文章WebGL 1.0 内置函数
唯一能赋值给采样器变量的就是纹理单元编号而且你必须使用WebGL方法
gl.uniform1i(u_Sampler, 纹理单元编号);for循环
GLSL中可以使用for循环和C语言很像但是有些限制
循环变量只能有一个循环变量只能是int或者float循环变量只能和整型常量做比较 有些时候循环变量的比较对象我们可能期望是一个uniform传递过来的动态值。这个时候直接进行比较是不可以的一种处理的办法是给一个足够大的比较值然后在循环体内部判断循环变量和uniform变量的大小在循环体内循环变量不可以被赋值
discard
discard只能在片元着色器使用表示放弃当前片元的处理。
函数
GLSL的函数和C语言类似如果我们在函数定义前就调用了函数需要先对函数进行声明。
对于函数的参数我们可以为参数指定限定词以控制参数的行为。 函数参数的限定词有下面几种
in这是默认的限定词。值传递函数内部修改参数的值不会影响传入的值const in也是值传递但是函数内部不可以修改该值out引用传递类似于C语言的指针或者C的引用内部修改会影响传入参数的值。inout和out一样也是引用传递但是和out不同之处为out不应该对传入的值抱有期待out主要为了传递出函数内部的值。而inout表明该参数既要被函数使用也要被函数修改。
存储限定符
GLSL中的存储限定符有四种
attributeuniformvaryingconst
const
表明当前变量不可以被修改是一个常量 const变量定义时就需要赋值。
attribute
attribute变量只能出现在顶点着色器attribute只能声明为全局变量在GLSL ES1.0中attribute只能是float、vec2、vec3、vec4、mat2、mat3、mat4可以通过访问内置的全局变量gl_MaxVertexAttribs来获取attribute变量支持的数目对于WebGL环境最小为8
attribute表示逐顶点数据应该传递顶点独有的属性数据对于所有顶点共有的属性应该使用uniform
uniform
uniform变量在顶点着色器和片元着色器中都可以使用uniform只能声明为全局变量uniform变量是只读的对于GLSL ES1.0uniform不能声明为数组或者结构如果在顶点着色器和片元着色器声明了同名的uniform变量该变量会被两个着色器共享。可以通过访问内置的全局变量gl_MaxVertexUniformVectors获取顶点着色器支持的uniform变量数量通过访问内置的全局变量gl_MaxFragmentUniformVectors获片元着色器支持的uniform变量数量对于WebGL环境gl_MaxVertexUniformVectors最小为128gl_MaxFragmentUniformVectors最小为16
varying
varying的目的是从顶点着色器传递数据到片元着色器。varying成对出现并且在顶点着色器和片元着色器中的名称和类型一致。varying只能是全局变量varying的类型和attribute一致
varying的中文翻译是变化的意思既然为了传递数据为什么用这么个名字呢 原因就是我们在片元着色器中看到的varying变量虽然和顶点着色器中的名称和类型一致但数据已经不一样了看下面的代码
// 顶点着色器
attribute vec2 a_Position;
attribute vec3 a_Color;
varying vec3 v_Color;
void main() {v_Color a_Color;gl_Position vec4(a_Position.x,a_Position.y,0.0,1.0);
};// 片元着色器
varying vec3 v_Color;
void main()
{gl_FragColor vec4(v_Color,1.0);
} 我们过一下其中的过程
顶点着色器将每个顶点的颜色赋值给v_Color如果有100个顶点就有100个v_Color值从顶点着色器到片元着色器的过程中发生了光栅话就是说在这个过程中根据绘制的图形会对v_Color进行插值片元着色器中的v_Color是每个片元插值后的值。所以采用了varying这个名称来标记光栅话的过程
从上面的解释可以看出一般而言varying都是针对于attribute变量的传递所以varying变量的数据类型和attribute变量是一致的。
可以通过访问内置的全局变量gl_MaxVaryingVectors获取着色器支持的varying变量数量对于WebGL环境gl_MaxVaryingVectors最小为8
最后给出一张不同限定符数据在GPU中的传递图
精度限定符
定义
GLSL ES 新引入了精度限定符目的是帮助着色器程序提高运行效率削减内存开支。 顾名思义精度限定符用来表示每种数据具有的精度 (比特数)。简而言之高精度的程序需要更大的开销 (包括更大的内存和更久的计算时间)而低精度的程序需要的开销则小得多。使用精度限定符你就能精细地控制程序在效果和性能间的平衡。
作用
精度限定符有两个作用
对于浮点数和采样器精度限定符限制了精度和取值范围对于整型数据精度限定符限制了取值范围
三种精度类型
因为我们使用采样器的时候传递的也是浮点纹理坐标所以我们总结一下不同的精度限定符对float和int的影响
highp高精度顶点着色器的最低精度 对于float取值范围为 ( − 2 62 , 2 62 ) (-2^{62},2^{62}) (−262,262)精度范围 2 − 16 2^{-16} 2−16对于int取值范围为 ( − 2 16 , 2 16 ) (-2^{16},2^{16}) (−216,216) mediump中精度片元着色器的最低精度 对于float取值范围为 ( − 2 14 , 2 14 ) (-2^{14},2^{14}) (−214,214)精度范围 2 − 10 2^{-10} 2−10对于int取值范围为 ( − 2 10 , 2 10 ) (-2^{10},2^{10}) (−210,210) lowp低精度 对于float取值范围为 ( − 2 , 2 ) (-2,2) (−2,2)精度范围 2 − 8 2^{-8} 2−8对于int取值范围为 ( − 2 8 , 2 8 ) (-2^{8},2^{8}) (−28,28)
实际上对于现在的机器大部分的值和上面的默认值不一样 我们可以使用下面的js方法获取不同精度的描述信息
getShaderPrecisionFormat(shaderType, precisionType)shaderType表示着色器类型可以是gl.FRAGMENT_SHADER或者gl.VERTEX_SHADERprecisionType要查询的精度限定符类型可以是 gl.LOW_FLOATgl.MEDIUM_FLOATgl.HIGH_FLOATgl.LOW_INTgl.MEDIUM_INTgl.HIGH_INT 返回值如果成功返回WebGLShaderPrecisionFormat对象的实例如果失败返回null下面是一个具体的例子
// 返回对象有三个值表示精度和取值范围一看就能明白
// 精度precision: 23
// rangeMax: 127
// rangeMin: 127
var precisionFormat gl.getShaderPrecisionFormat(gl.VERTEX_SHADER,gl.MEDIUM_FLOAT);对变量使用精度限定符有两种方式
直接在变量定义的前面添加精度限定符highp、mediump或者lowp给指定类型统一设置精度限定符
// 给float类型统一设置mediump
precision mediump float;// 给变量单独设置精度限定
mediump float a;
highp vec4 position;
lowp vec3 color;默认值
对于采样器默认精度值都是lowp对于顶点着色器int和float默认精度值都是highp对于片元着色器int的默认精度值是mediump对于片元着色器float没有默认精度值所以我们需要在片元着色器的最前边设置float的默认精度不然会导致编译错误。precision mediump float;预处理
GLSL ES支持预处理所谓的预处理就是在代码编译之前的处理过程
常用预处理指令
#if 条件表达式如果条件表达式为真执行这里
#endif#ifdef 某宏如果定义了某宏执行这里
#endif#ifndef 某宏如果没有定义某宏执行这里
#endif// 定义宏
#define 宏名 宏内容// 取消定义宏
#undef 宏名// 使用#else
#define NUM 100
#if NUM100如果NUM等于100执行这里
#else否则执行这里
#endif内置宏定义
GL_ES在OpenGL ES 2.0中定义为1GL_FRAGMENT_PRECISION_HIGH片元着色器是否支持highp
可以使用下面的方式对片元着色器的float进行精度设置
#ifdef GL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#endif设置版本
可以在着色器的顶部设置WEBGL的版本号
// 100表示设置WEBGL 1.00
#version 100
