您的位置:时时app平台注册网站 > web前端 > 【WebGL】《WebGL编制程序指南》读书笔记——第

【WebGL】《WebGL编制程序指南》读书笔记——第

2019-11-28 05:17

       []运算符通过数组下标来访问矢量或矩阵的因素,例:

  1. 矢量和浮点数的运算

 

举例:

       D. 精度节制词

彩世界网址 1

一、前言

(1卡塔 尔(阿拉伯语:قطر‎存款和储蓄约束字
在GLSL ES中,大家平时应用attributevaryinguniform约束字来修饰变量,如下图所示。此外,不时也会动用const限制字,它代表着色器中的有些变量是稳固的常量。

 

(2卡塔尔国标准表明
倘使函数定义在其调用之后,那么我们必需在进行调用以前先注脚该函数的正规。
规范会先行告诉WebGL系统函数的参数、参数类型、再次回到值等等
如:

       A. GLSL协助二种多少值类型:

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

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

       前段时间重自汗盗汗,妈蛋好难受,请假了3天,汽车驾驶员培训学校也没去,大致僵硬!几方今连绵起伏WebGL的上学。

能够选择的本子包涵100(GLSL ES 1.00卡塔尔国和101(GLSL ES 1.01卡塔尔国。如若不行使#version命令,暗许版本为100

       下一周随着看《WebGL编制程序指南》,稳定学习进程。

如:

彩世界网址 2

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

 

(3卡塔 尔(阿拉伯语:قطر‎访谈成分
为了访问矢量或矩阵中的成分,能够行使.[]运算符
(a).运算符

三、结尾

#version 101
  1. const 该变量值不可能被改换;

  2. attribute只可以出以后极端着色器且只好被声称为全局变量;

  3. uniform能够在终端或片元着色器中,且必需是全局变量,其为只读并且在同名时能被分享;
  4. varying必需是全局变量,成效便是从极点着色器向片元着色器传输数据,必得在三种着色器中扬言同名,同种类的varying变量。

彩世界网址 3

  1. 整数型(int卡塔尔国与浮点型(float卡塔尔,没小数点的正是整数,反之则是浮点数;
  2. 支撑布尔值类型(bool卡塔 尔(阿拉伯语:قطر‎;
  3. GLSL ES不扶持字符串类型
  4. 改换方式:转变类型(被改动类型卡塔 尔(阿拉伯语:قطر‎,如:int(float)

本章首要内容:
(1卡塔 尔(阿拉伯语:قطر‎数据、变量和变量类型。
(2)矢量、矩阵、结构体、数组、采样器(纹理)
(3)运算、程序流、函数
(4)attribute、uniform和varying变量
(5卡塔尔精度约束词
(6卡塔 尔(英语:State of Qatar)预管理和下令

  1. highp 高精度 (-2^62,2^62) 2^-16;

  2. mediump 中精度 (-2^14,2^14) 2^-10;

  3. lowp 低精度 (-2,2) 2^-8

仅有纹理单元编号能够给取样器变量,何况必得运用gl.uniformli()来展开赋值。

       B. [] 运算符

彩世界网址 4

 

  1. 精度节制字
    帮助着色器程序升高运营成效,减少内部存款和储蓄器开销。
    可选,不鲜明精度能够行使卓绝的暗许值:

二、正文

彩世界网址 5

       C. 变量约束词

取样器变量受到着色器协助的纹路单元的最大额约束。

       float m23 = m4[1][2]; m4的第2列中的第二个元素

// 将floatArray的第二个参数乘以3.14
float f = floatArray[1] * 3.14;
// 将vec4Array的第一个参数乘以vec4(1.0, 2.0, 3.0 ,4.0)
vec4 v4 = vec4Array[0] * vec4(1.0, 2.0, 3.0 ,4.0);

 

// 使用两个浮点数和一个vec2对象来创建mat2对象
mat2 m2 = mat2(1.0, 3.0, v2_2);      // 1.0  2.0
                                     //  3.0  4.0

 

GLSL ES关键字

(2卡塔尔 矩阵和浮点数的演算

任何方便的x,r或s分量都会回到第三个轻重,y,g,t分量都会重回第3个轻重。
如:

(4)运算符
对此矢量和矩阵,只好够接纳相比较运算符中的==!=,无法利用><>=<=
若是想要相比矢量和矩阵的大小,应该是用内置函数,比如lessThan()
假诺你想逐分量相比较,可以应用内置的函数equal()notEqual()

6-28.png

彩世界网址 6

6-27.png

(5卡塔 尔(英语:State of Qatar)矩阵与矩阵相乘

uniform sampler2D u_Sampler;

彩世界网址 7

[1] 在实行逻辑与(&&)运算时,唯有首先个表明式的总计值为true时才会思量第一个表明式。相像,在展开逻辑或(||)运算时,独有首先个表达式的值为false时才会简政放权第一个表达式。

彩世界网址 8

(2卡塔尔国赋值和布局
布局体有专门的工作的布局函数,其名称与组织体名风姿罗曼蒂克致。布局函数的参数的相继必须与布局体定义中的成员相继少年老成致。

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

能够未有return语句,可是回到类型必需是void
也足以将自身定义的结构体钦点为回到类型,不过构造体的成员中不可能有数组。

彩世界网址 9

(4卡塔尔内置函数

矢量和矩阵可用的运算符

  1. 预管理指令
    用来在真正编写翻译早先对代码进行预管理,#开始

彩世界网址 10

(c卡塔 尔(阿拉伯语:قطر‎向矩阵布局函数中出阿奴矢量和数值,遵照列主序利用矢量里的成分值和直接传入的数值来布局矩阵

  1. GLSL ES是强类型语言
    (1卡塔 尔(阿拉伯语:قطر‎GLSL ES必要切实指明变量的数据类型: <类型> <变量名>
    如: vec4 a_Position
    (2卡塔尔国定义函数时,必需钦命函数的再次回到值
    (3卡塔尔国在张开赋值操作(=卡塔 尔(英语:State of Qatar)的时候,等号左右两边的数据类型也亟须风姿浪漫律,不然就能出错

  2. 基本项目

因为函数申明时的参数是float类型,而调用时却传出了int类型的值。

只有片元着色器中的float类型没有暗许精度,大家须要手动钦赐。

常量索引值概念如下:
(a卡塔 尔(阿拉伯语:قطر‎整型字面量(0或1卡塔 尔(英语:State of Qatar)
(b)用 const 修饰的全局变量或部分变量。不包涵函数参数。
(c卡塔 尔(英语:State of Qatar)循环索引
(d卡塔 尔(英语:State of Qatar)由前述三条中的项整合的表明式

(3卡塔 尔(阿拉伯语:قطر‎参数节制词
GLSL ES中,可感到参数钦赐节制自,以调控参数的一言一动。
大家能够将函数参数定义成:
(a卡塔 尔(阿拉伯语:قطر‎传递给函数的
(b卡塔尔国就要在函数中被复制的
(c)既是传递给函数的,也是快要在函数中被赋值的。
当中(b卡塔 尔(阿拉伯语:قطر‎和(c卡塔尔都有一点相似于C语言中的指针

float f2 = 8.0;

WebGL中匡助的3种精度

除了===!=,取样器变量不得以看做操作数加入运算。

precision mediump float;

为变量钦命项目有利于WebGL系统一检查查代码错误,进步程序的运作效用。
如: float klimt // 浮点数变量

#ifdef GL_ES
precision mediump float;
#endif

(3卡塔 尔(阿拉伯语:قطر‎矩阵右乘矢量

for (int i = 0; i < 3; i  ) {
  sum  = i;
}

如:

彩世界网址 11

与矢量布局函数相近,固然传入的数值的数额超越1,有未有高达矩阵成分的多少,就能出错

配备最少支持8个varying变量

  1. 程序流程序调节制:分支和循环
    (1)if 和 if-else
const int index = 0  // const 关键字表示变量是只读的
vec4 v4a = m4[index]  // 同m4[0]相同
float square(float value) {
  return value * value;
}

void main() {
  ...
  float x2 = square(10);   // 错误。应用10.0
  ...
}

介意,你不可能用const限制字来修饰数组自己。

构造体构造函数的运用方式

声称着色器的暗中认可精度,那行代码必得在终点着色器或片元着色器的最上端:
precision 精度约束自 体系称称
表示接下去全数不以精度节制自修饰的该项指标量,其精度正是暗许精度,如:

  1. 运算符优先级

(2)for语句

彩世界网址 12

彩世界网址 13

彩世界网址 14

mat4 m4 = mat4(1.0, 2.0, 3.0);    // 错误。mat4对象需要16个元素

彩世界网址 15

varying变量只可以是以下项目:floatvec2vec3vec4mat2mat3mat4
终端着色器中赋给varying变量的值实际不是间接传给了片元着色器的varying变量,那中间产生了光栅化的进程:依据绘制的图形,对前边贰个(极点着色器varying变量卡塔尔国举办内插,然后再传递个后面一个(片元着色器varying变量卡塔尔国
辛亏因为varying变量需求被内插,所以大家要求约束它的数据类型

点名版本代码:

彩世界网址 16

// 使用两个vec2对象来创建mat2对象
vec2 v2_1 = vec2(1.0, 3.0);
vec2 v2_2 = vec2(2.0, 2.0);
mat2 m2_1 = mat2(v2_1, v2_2);   // 1.0  2.0
                                //  3.0  4.0

// 使用一个vec4对象来创建mat2对象
vec4 v4 = vec4(1.0, 3.0, 2.0, 4.0);
mat2 m2_2 = mat2(v4);     // 1.0  2.0
                          //  3.0  4.0

6-6.png

// RGBA颜色值转为亮度值函数
float luma(vec4, color) {
  return 0.2126 * color.r    0.7162 * color.g    0.0722 * color.b;
}

// 调用
attribute vec4 a_Color    // 传了(r, g, b, a)的值
void main() {
  ...
  float brightness = luma(a_Color);
  ...
}
  1. 矢量和矩阵
    (1卡塔尔国矢量和矩阵类型的变量都含有多个因素,每种成分是二个数值(整型数、浮点数和布尔值卡塔 尔(英语:State of Qatar)
    矢量将这个要素排成一列,能够用来代表顶点坐标或颜色值等,而矩阵将成分划分成行和列,能够用来表示转换矩阵。

(5)varying变量
必须是全局变量
从终端着色器向片元着色器传输数据。
总得在二种着色器中生命同名、同品种的varying变量

(2卡塔 尔(阿拉伯语:قطر‎赋值和组织
(a) = 等号用于赋值,如:vec4 position = vec4(1.0, 2.0, 3.0, 4.0);
(b卡塔 尔(阿拉伯语:قطر‎构造函数:特意创立钦点项目标变量的函数,布局函数的称呼和其创建的变量类型名称总是同样的。

彩世界网址 17

vec4Array[0] = vec4(4.0, 3.0, 6.0, 1.0);
vec4Array[1] = vec4(3.0, 2.0, 0.0, 1.0);

数组本身只扶持[]运算符,但数组的要素能够参加其自己类型扶植的即兴运算。如:

函数语句格式

#ifdef GL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;  //  支持高精度,限定浮点型为高精度

#else
precision mediump float;  //  不支持高精度,限定浮点型为中精度
#endif
#endif

还不错内置函数进行类型调换,如:

![](https://upload-images.jianshu.io/upload_images/3779867-870270bebbb99ae1.png)

if语句格式

(4卡塔尔 矩阵左乘矢量

GLSL的主干类型

(b卡塔尔国向矩阵布局函数中盛传两个或八个矢量,根据列主序使用矢量里的因素值来协会矩阵。

能够只是用#version number来钦赐着色器使用的GLSL ES版本

  1. 全局变量和一些变量
    attribute、varying和uniform变量都一定要申明为全局变量

也能够在概念结构体的同不经常间注明该协会体类型类型的变量,如:

(4)uniform变量
能够用在终端着色器和片元着色器中,且必得是全局变量
uniform变量只读,能够是除了数组或布局体之外的人身自由等级次序。
后生可畏旦在尖峰着色器和片元着色器中宣示了同名的uniform变量,那么它就能够被二种着色器分享。
uniform变量包含了相符(非逐顶点/逐片元的,各顶点或各片元公用卡塔 尔(英语:State of Qatar)的数据,JS应该向其传递此类数据。
举例说,调换矩阵就不是逐定点的,而是具有终端共用的,所以它在着色器中是uniform变量。

彩世界网址 18

mat4 m4 = mat4(1.0);    // 1.0  0.0  0.0  0.0
                        // 0.0  1.0  0.0  0.0
                        // 0.0  0.0  1.0  0.0
                        // 0.0  0.0  0.0  1.0
float floatArray[4];    // 声明含有4个浮点数元素的数组
vec4 vec4Array[2];    //  声明含有两个vec4对象的数组

(d卡塔 尔(阿拉伯语:قطر‎向矩阵构造函数中传来单个数值,那样将生成三个对角线元宵节素都以该数值,别的因素为0.0的矩阵

彩世界网址 19

分量名

(1卡塔尔国 矢量运算

如:

struct light {    //  定义结构体light
  vec4 color;    // 光的颜色
  vec4 position;    // 广元位置
} 
light 11, 12;    // 声明了light类型的变量11和12
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

着色器中取样器类型变量的极小数量

GLSL ES保留字

  1. 取样器(纹理)
    必需经过取样器(sampler卡塔尔类型变量访谈纹理。
    有三种为主项指标取样器类型:sampler2DsamplerCube
    取样器变量只可以是uniform变量,恐怕供给拜会纹理的函数,如texture2D()函数的参数,如:

在意:循环变量i只好在起头化表明中定义,条件表达式可以为空,假设如此做,空的基准表明式重返true

float f3 = float(8);
const int a = 3232

for语句格式

(3卡塔 尔(英语:State of Qatar)矩阵布局函数
(a卡塔尔想矩阵构造函数中传播矩阵的每叁个要素的数值来布局矩阵,注意传入值的各类必须是列主序的

主干类型的运算符

for语句的别的限定:
(a卡塔 尔(英语:State of Qatar)只同意有三个循环变量,循环变量只可以是intfloat类型。
(b卡塔 尔(阿拉伯语:قطر‎循环表明式必需是以下的情势:i ,i--,i =常量表明式或i-=常量表明式
【WebGL】《WebGL编制程序指南》读书笔记——第6章【彩世界网址】。(c卡塔尔国条件表明式必须是循环变量与整型常量的比较
(d卡塔 尔(英语:State of Qatar)在循环体内,循环变量不可被赋值
这么些节制的留存是为着使编译器就能够对for循环进行内联合展览开

(3)continue、break和discard语句
(a卡塔 尔(阿拉伯语:قطر‎continue终止包蕴该语句的最内层循环和实行循环表明式(依次增加/递减循环变量卡塔尔国,然后实践下二遍巡回
(b卡塔 尔(阿拉伯语:قطر‎break中止包括该语句的最内层循环,并不在继续奉行循环。

struct light {    //  定义结构体和定义变量同时进行
  vec4 color;    // 光的颜色
  vec4 position;    // 广元位置
} 11;    // 该结构体类型的变量11
  1. 数组
    (1)
    ELSL ES 只帮忙大器晚成维数组,并且数组对象不援助pop()和push()等操作,创制数组时也无需运用new运算符。
    宣称数组,只需求在变量名后加上中括号和数经理度,如:

示例:

在乎,若是调用函数时传出的参数类型与性命函数时钦点的参数类型不等同,就能出错。
如:

  1. WebGL并不援助GLSL ES 1.00的具有性格。实际上,它支持的是1.00本子的一个子集,个中只囊括WebGL要求的那一个核心特性。

  2. GLEL ES编制程序语言是在OpenGL着色器语言(GLSL卡塔 尔(阿拉伯语:قطر‎的根底上,删除和简化意气风发部分后形成的,减少了硬件消耗,减少了品质花费。

  3. 基础:
    (1)程序式大大小小写敏感
    (2卡塔尔每一个说话都应有以贰个丹麦语分号结束

  4. 试行顺序
    从main函数发轫进行。
    着色器程序有且唯有二个main()函数,何况该函数不能选取其他参数。
    main函数前的void关键字表示那些函数不回来任何值。

  5. 注释
    单行注释: // int kp = 496;
    多行注释: /* haha */

  6. 数量值类型(数值和布尔值卡塔尔
    GLSL协理二种多少值类型
    (1卡塔尔数值类型:整数(未有小数点卡塔尔国和浮点数(有小数点卡塔尔
    (2卡塔尔国布尔值类型:true 和 false
    不支持字符串类型

  7. 变量
    规则:
    (1卡塔 尔(阿拉伯语:قطر‎只囊括a-z,A-Z,0-9和下划线_
    (2卡塔尔国变量名的首字母无法是数字
    (3卡塔尔国不能够是根本字和保留字,不过变量名的少年老成有些可以是它们
    (4)不能以gl_webgl_,或_webgl_初叶,这几个前缀已经被OpenGL ES保留了

彩世界网址 20

注意:
(1卡塔尔在一些WebGL意况中,片元着色器大概不扶植highp精度
(2卡塔尔数值范围和精度实际上也是与系统意况相关,能够利用gl.getShaderPrecisionFormet()来检查

  1. 结构体
    (1卡塔尔布局体:用户自定义的种类,使用主要字 struct,将已存在的品类聚合到一齐,就足以定义为构造体。如:
  1. 函数
    (1)

彩世界网址 21

将(同一个凑合的卡塔 尔(英语:State of Qatar)五个轻重名联合置于点运算符后,就足以从矢量中何况抽收取三个轻重。这一个进程乘坐混合(swizzling卡塔 尔(英语:State of Qatar)
如: v2 = v3.xz
那个时候的四个轻重必须归于同三个聚众,比如说,你不能够使用v3.was

if (distance < 0.5) {
  gl_fragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
  gl_fragColor = vec4(0.0, 1.0, 0.0, 1.0);
}

瞩目,你不可能利用未经const修饰的变量作为索引值,因为它不是叁个常量索引值(除非它是循环索引卡塔尔国。

// continue case
for (int i = 0; i < 10; i  ) {
  if (i == 8) {
    continue;    // 跳过循环体余下的部分,继续下次循环
  }
  // 当i==8时,不会执行到这里
}

// break case
for (int i = 0; i < 10; i  ) {
  if (i == 8) {
    break;    // 跳出for循环
  }
  // 当i>=8时,不会执行这里
}
// 当i==8时,执行这里

[2] 逻辑异或(^^)运算的意思是:独有当左右五个表达式中有且唯有三个为true时,运算结果才是true,不然为false。

说明:

彩世界网址 22

  1. 赋值和类型调换
    = 用于赋值,赋值时要保管左侧变量的项目和右侧的值类型大器晚成致

彩世界网址 23

彩世界网址 24

数组的长短必需是大于0的整型常量表明式,定义如下:
(a卡塔 尔(英语:State of Qatar)整型字面量(如0或1卡塔 尔(阿拉伯语:قطر‎
(b卡塔尔用const限制字修饰的全局变量或部分变量,不蕴涵函数参数
(c卡塔尔国由前述两条中的项构成的表达式

如:

int index1 = 0
vec4 v4c = m4[index2]    // 错误:index不是常量索引

(2)const变量
const变量写在项目此前,证明的还要必须对它进行最早化,注明之后就不可能再去改动它们的值了。
如:

(3)Attributr变量
只可以冒出在终极着色器中,只可以被声称为全局变量,被用来表示逐极点的新闻。
极限着色器中可见容纳的attribute变量的最大数额与设施有关,你能够透过访谈内置的大局常量来收获最大数量的值。
可是无论是设备怎么样,协助WebGL的条件都支持至少8个attribute变量。

(3卡塔尔国访谈成员
在结构体变量名后跟点运算符(.卡塔 尔(英语:State of Qatar),然后再加上成员名,就足以访谈变量的积极分子。如:

varying vec2 v_TexCoord
varying vec4 v_Color

至于discard,它必须要在片元着色器中利用,表示废弃当前片元直接管理下一片元。

uniform mat4 u_ViewMatrix

彩世界网址 25

(b)[]运算符
矩阵中的成分从下标0开班规行矩步列主序读取。
限制:[]中只好冒出的索引值必得是常量索引值

唯有整型常量表明式和uniform变量能够被用作数组的索引值。
数组不可能在注脚时被叁遍性地开端化,而必得显式地对各类成分实行起首化。如:

类型转变内置函数

#version 指令必需在着色器顶端,在它以前只可以有注释和空白。

彩世界网址 26

彩世界网址 27

vec4 color = 11.color;
vec3 position = 11.position;
  1. 运算符

mediump是二个精度约束字

彩世界网址 28

本文由时时app平台注册网站发布于web前端,转载请注明出处:【WebGL】《WebGL编制程序指南》读书笔记——第

关键词: