【WebGL编程指南】GLSL ES语法基础

【WebGL之巅】20-GLSL ES着色器语言语法详解

查看原文:【WebGL之巅】20-GLSL ES着色器语言语法详解
对应《WebGL编程指南》第六章 GLSL ES

总览

本章知识点:

1、数据、变量和变量类型

2、矢量、矩阵、结构体、数组、采样器(纹理)

3、运算、程序流、函数

4、attribute、uniform和varying变量

5、精度限定词

6、预处理和指令

回顾

基本着色器代码

//顶点着色器程序
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute vec2 a_TexCoord;\n' +
    'varying vec2 v_TexCoord;\n' +
    'void main() {\n' +
    '   gl_Position = a_Position;\n' +
    '   v_TexCoord = a_TexCoord;\n' +
    '}\n';

//片元着色器程序
var FSHADER_SOURCE =
    '#ifdef GL_ES\n' +
    'precision mediump float;\n' +
    '#endif\n' +
    'uniform sampler2D u_Sampler0;\n' +
    'uniform sampler2D u_Sampler1;\n' +
    'varying vec2 v_TexCoord;\n' +
    'void main(){\n'+
    '   vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n'+
    '   vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n'+
    '   gl_FragColor = color0 * color1;\n'+
    '}\n';

知识点

一、GLSL ES概述

GLSL ES编程语言是在OpenGL着色器语言(GLSL)基础上,删除和简化一部分功能后形成的。各位看到ES版本应该会想到GLSL ES应用在手机、游戏主机等设备上,这样可以降低硬件的功耗,同时也能减少性能开销

GLSL ES的语法与C语言类似。此外,着色器语言也开始被用来完成一些通用的任务,如图像处理和数据运算(所谓的GPGPU)。

二、基础语法

2.1 基础

GLSL ES对大小写是敏感的,例如:Niuniuniuniu这就对应的是两个不同的变量;

​ 每条语句都要有;结束

2.2 执行次序

​ 每个着色器程序都要有main()函数,就像C语言一样,每个着色器程序都从main开始执行,但是GLSL ES中的main()函数并不接收任何参数,并且必须是void类型;

void表示函数没有返回值,若有返回值,需明确返回值类型。

2.3 注释

​ 单行注释使用//,多行注释则是/* 注释 */

三、数据值类型(数值额布尔值)

3.1 GLSL ES支持两种数据值类型:

数值类型GLSL ES支持整数类型和浮点数,没有小数点的值被认定为整数类型,而有小数点的则被认为是浮点数;

布尔值类型truefalse,无需多言。

GLSL ES不支持字符串类型,虽然字符串对三维图形语言来说还是有一定意义的。

四、变量

4.1 变量名规则
  • 只能由a-zA-Z0-9以及_组成

  • 变量名的第一个字符不能为数字

  • 不能以gl_webgl__webgl开头,这些前缀已被OpenGL ES保留了

  • 不能是下表中所列出的关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWBLJjhK-1627734716808)(/images/glsles1.jpg)]

​ GLSL ES保留字:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFRCyHBU-1627734716813)(/images/glsles2.jpg)]

4.2 GLSL ES是强类型语言

​ 声明变量的方式:<类型> <变量名>,例:

vec4 a_Position

进行赋值操作时,等号左右两侧的数据类型必须一致。

五、基本类型

类型 描述
float 单精度浮点类型
int 整型数
bool 布尔值
// 声明变量
float fnumber = 1.1;	// 浮点数
int inumber = 1;	// 整型
bool blogic = true;	// 布尔型
5.1 赋值和类型转换
// 强制类型转换
int fresult = int(fnumber);	// 去掉小数部分,例如:3.14转换为3
bool bresult = int(blogic);	// true转为1,false转为0

int iresult = float(inumber);	// 整型转换为浮点数,例如:3转换为3.0
bresult = float(blogic);	// 布尔型转换为浮点数,true转为1.0,false转为0.0

iresult = bool(inumber);	// 整型转换为布尔型,0转为false,其余非0数转为true
fresult = bool(fnumber);	// 整型转换为布尔型,0.0转为false,其余非0.0数转为true
5.2 运算符
类别 GLSL ES数据类型
- * / + 加减乘除
++ – 自增、自减
= += -= *= /= 赋值、算术赋值
< > <= >= == != 比较
! 取反
&& || ^^ 逻辑与、或、异或
? : 三元运算符

逻辑与(&&):只有第一个表达式的计算值为true时才会计算第二个表达式(找错)。

逻辑或(||):只有第一个表达式的计算值为false时才会计算第二个表达式(找对)。

逻辑异或(^^):只有当左右两个表达式中有且仅有一个为true时,运算结果为true,否则为false。

六、矢量和矩阵

6.1 矢量和矩阵举例

矢量 $\begin{pmatrix}
8 & 3 & 0
\end{pmatrix}
$ 矩阵$
\begin{bmatrix}
8 & 3 & 0 \\
4 & 3 & 6 \\
3 & 2 & 6
\end{bmatrix}
$​

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebGL编程指南》是一本介绍如何使用WebGL进行图形编程指南,对于想要学习WebGL的开发人员来说,是一本非常有价值的资源。在这本书中,作者详细讲解了WebGL的基本概念、原理和使用方法,通过丰富的实例和代码,帮助读者逐步掌握WebGL的开发技巧。 CSDN是中国最大的IT社区和专业的技术社交网站,这本《WebGL编程指南》的PDF版本可以在CSDN上免费获取。通过在CSDN搜索《WebGL编程指南 PDF》关键词,可以找到这本书的电子版本下载链接。 WebGL是一种基于HTML5的图形库,通过在浏览器中使用JavaScript编程,可以实现各种复杂的图形效果和交互式内容展示。WebGL提供了底层的图形处理能力,可以与HTML、CSS和JavaScript等技术相结合,实现高性能的交互式图形程序。 《WebGL编程指南》从基础概念开始介绍,包括WebGL的工作原理、图形渲染管线、着色器编程等。随后,书中提供了大量的实例代码和案例,涵盖了3D图形的绘制、纹理映射、光照效果、阴影效果等常见的图形编程技术。读者可以通过跟随书中的实例逐步学习和掌握WebGL的开发技巧和方法。 总之,对于想要学习WebGL的开发人员来说,《WebGL编程指南》是一本非常有价值的参考书,通过这本书的学习,读者可以系统地了解WebGL的基本原理和开发方法,掌握WebGL编程的技巧,为web图形开发打下坚实的基础

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值