webgl学习笔记4_初识着色器语言ES GLSL

简介: webgl学习笔记4_初识着色器语言ES GLSL

ES GLSL

  1. 着色器语言用于计算机图形编程,运行在GPU中,平时所说的大多数语言编写的程序都是运行在CPU中。
  2. 与OpenGL API相配合的是着色器语言GLSL,与OpenGL ES API、WebGL API相互配合的是着色器语言
  3. GLSL ES。OpenGL标准应用的是客户端 OpenGL ES应用的是移动端,WebGL标准应用的是浏览器平台。

WebGL(全写Web Graphics Library)

GLSL(全写OpenGL Shading Language)

着色器语言ES GLSL与C语言的共同点

1.声明一个变量需要定义变量的数据类型

2.关键字const声明一个常量

3.基本数据类型(int、float、bool)

4.数据类型转换(整型数int、浮点数float、布尔值bool三种不同的数据值可以相互转化,把一个类型转化为另一个类型通过相应的内置函数int()、float()、bool()实现)

着色器语言ES GLSL的特别之处

1.向量数据类型

关键字 数据类型
vec2 二维向量,具有xy两个分量,分量是浮点数
vec3 三维向量 ,具有xyz三个分量,分量是浮点数
vec4 四维向量 ,具有xyzw四个分量,分量是浮点数
ivec2 二维向量,分量是整型数
ivec3 三维向量 ,分量是整型数
ivec4 四维向量 ,分量是整型数
bvec2 二维向量,分量是布尔值bool
bvec3 三维向量 ,分量是布尔值bool
bvec4 四维向量 ,分量是布尔值bool

使用时候需要构造函数赋值

vec3 direction;
// 赋值
direction = vec3(1.0,0.0,0.0);

访问获取向量分量

向量vector 访问
第1个分量 vector.x
第2个分量 vector.y
第3个分量 vector.z
第4个分量 vector.w

2.矩阵数据类型

关键字 数据类型
mat2 2x2矩阵,4个元素
mat3 3x3矩阵,9个元素
mat4 4x4矩阵,16个元素
mat4 matrix4 = mat4(
1.1,2.1,3.1,4.1,
1.2,2.2,3.2,4.2,
1.3,2.3,3.3,4.3,
1.4,2.4,3.4,4.4
);
// 访问矩阵matrix4的第二列
vec4 v4 = matrix4[1];//返回值vec4(1.2,2.2,3.2,4.2)
// 访问矩阵matrix4的第三列第四行对应的元素
float f = matrix4[2][3];//返回4.3

3.着色器语言中的内置变量

内置变量 含义 值数据类型
gl_PointSize 点渲染模式,方形点区域渲染像素大小 float
gl_Position 顶点位置坐标 vec4
gl_FragColor 片元颜色值 vec4
gl_FragCoord 片元坐标,单位像素 vec2
gl_PointCoord 点渲染模式对应点像素坐标 vec2
//给内置变量gl_PointSize赋值像素大小,注意值是浮点数
  gl_PointSize=20.0;
  //顶点位置,位于坐标原点
  gl_Position = vec4(0.0,0.0,0.0,1.0);
  // 片元沿着x方向渐变
  gl_FragColor = vec4(gl_FragCoord.x/500.0*1.0,1.0,0.0,1.0);


目录
相关文章
ly~
|
2月前
|
数据可视化 BI API
除了 OpenGL,还有哪些常用的图形库可以在 C 语言中使用?
除了OpenGL,C语言中还有多个常用的图形库:SDL,适合初学者,用于2D游戏和多媒体应用;Allegro,高性能,支持2D/3D图形,广泛应用于游戏开发;Cairo,矢量图形库,支持高质量图形输出,适用于数据可视化;SFML,提供简单接口,用于2D/3D游戏及多媒体应用;GTK+,开源窗口工具包,用于创建图形用户界面。这些库各有特色,适用于不同的开发需求。
ly~
678 4
|
API C语言 图形学
threejs_ES GLSL知识
threejs_ES GLSL知识
94 0
|
前端开发 JavaScript 程序员
threejs_着色器语言
threejs的着色器语言
109 0
OpenGL学习笔记(二):OpenGL语法、渲染管线以及具体实现过程详解
OpenGL学习笔记(二):OpenGL语法、渲染管线以及具体实现过程详解
OpenGL学习笔记(二):OpenGL语法、渲染管线以及具体实现过程详解
|
小程序 编译器 C语言
OpenGL学习笔记(十):深入学习和理解着色器
OpenGL学习笔记(十):深入学习和理解着色器
OpenGL学习笔记(十):深入学习和理解着色器
|
存储 缓存 API
OpenGL ES 案例04:GLSL加载图片
OpenGL ES 案例04:GLSL加载图片
284 0
OpenGL ES 案例04:GLSL加载图片
|
索引
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
341 0
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
|
存储 缓存 异构计算
OpenGL ES 案例05:GLSL使用索引绘图
OpenGL ES 案例05:GLSL使用索引绘图
284 0
OpenGL ES 案例05:GLSL使用索引绘图
|
存储 缓存 API
三、OpenGL ES GLSL语言 & 自定义着色器常用API
OpenGL ES GLSL语言 & 自定义着色器常用API
327 0
三、OpenGL ES GLSL语言 & 自定义着色器常用API
|
编译器 异构计算
GLKit详解 (下) 与 OpenGL GLSL 初探 (3) (11)
GLKViewController关于更新方法的补充
154 0
GLKit详解 (下) 与 OpenGL GLSL 初探 (3) (11)