WebGL系列教程八(GLSL着色器基础语法)

目录

  • 1 前言
  • 2 基本原则
  • 3 基本数据类型
  • 4 顶点着色器和片元着色器
    • 4.1 声明
    • 4.2 初始化项目
    • 4.3 赋值
  • 5 结构体
    • 5.1 声明
    • 5.2 赋值
  • 6 函数
    • 6.1 基本结构
    • 6.2 自定义函数
    • 6.3 常用内置函数
  • 7 精度
  • 8 其他
  • 9 总结

1 前言

  通过前七讲,我们已经见过了WebGL中的部分基础语法,这一讲我们来完善一下WebGL中的语法。GLSLOpenGL Shading Language的首字母缩写,表示的含义就是着色器语言。而我们在第一讲中就已经说过,WebGL中使用的是GLSLES版本,ESEmbedded Systems,意为嵌入式系统。因为最初GLSL ES是给嵌入式设备准备的,轻量级的三维图形渲染语言。为了方便,下文统称为GLSL

2 基本原则

  1.GLSL是大小写敏感的。
  2.GLSL每个语句结束时必须在结尾加上分号。
  3.变量名由a-z、A-Z、0-9和下划线组成。
  4.变量名不能gl_、webgl_、_webgl_开头。
  5.变量名不能和关键字冲突,即不能叫做attribute、uniform等。
  6.GLSL是强类型语言,声明时不能以var开头,必须以对应的类型开头。

3 基本数据类型

int i = 8;//整型
float m = 8.0;//浮点型
bool b = false;//布尔型
vec2 v2 = vec2(1.0,2.0);//浮点型二维向量
vec3 v2 = vec3(1.0,2.0,3.0);//浮点型三维向量
vec4 v = vec4(1.0,2.0,3.0,4.0);//浮点型四维向量
//访问时用xyzw、stpq、rgba、【0123】都可以访问
//v.x 和 v.s 以及 v.r , v[0] 表达的是同一个分量。
//v.y 和 v.t 以及 v.g , v[1] 表达的是同一个分量。
//v.z 和 v.p 以及 v.b , v[2] 表达的是同一个分量。
//v.w 和 v.q 以及 v.a , v[3] 表达的是同一个分量。
vec4(v.rgb, 1)vec4(v.r, v.g, v.b, 1)//等价
vec4(1)vec4(1, 1, 1, 1)//等价
vec4 s = sin(v);和vec4 s = vec4(sin(v.x), sin(v.y), sin(v.z), sin(v.w));//等价
ivec2 iv2 = ivec2(1,2);//整型二维向量
ivec3 iv3 = ivec3(1,2,3);//整型三维向量
ivec4 iv4 = ivec4(1,2,3,4);//整型四维向量
bvec2 bv2 = bvec2(false,true);//布尔型二维向量
bvec3 bv3 = bvec3(false,true,false);//布尔型三维向量
bvec4 bv4 = bvec4(false,true,false,true);//布尔型四维向量
mat2 = mat2(1.0,1.0                         //【1.0,2.02.0,2.0);//2*2的矩阵,列主序,即相当于  1.0,2.0】,mat3,mat4同理
mat3 = mat3(1.0,1.0,1.02.0,2.0,2.0,3.0,3.0,3.0);//3*3的矩阵
mat4 = mat4(1.0,1.0,1.0,1.0,2.0,2.0,2.0,2.0,3.0,3.0,3.0,3.0,4.0,4.0,4.0,4.0);/4*4的矩阵

4 顶点着色器和片元着色器

4.1 声明

//顶点着色器
<script id="vertex-shader" type="x-shader/x-vertex">//声明属性attribute vec4 a_Position;attribute vec4 a_Color;//声明全局变量,一旦赋值,就不可更改了uniform mat4 uRotateMatrix;//声明要传递到片元着色的变量varying vec4 v_Color;void main(){gl_Position =  uRotateMatrix * a_Position;v_Color = a_Color;v_TexCoord = a_TexCoord;}
</script>
//片元着色器
<script id="fragment-shader" type="x-shader/x-fragment">precision highp float;//声明要接收的量varying vec4 v_Color;void main(){gl_FragColor = v_Color;}
</script>

4.2 初始化项目

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
//创建着色器对象
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//获取着色器对象的源
let vertexSource = document.getElementById("vertex-shader").innerText;
let fragmentSource = document.getElementById("fragment-shader").innerText;
//绑定着色器的源
gl.shaderSource(vertexShader,vertexSource);
gl.shaderSource(fragmentShader,fragmentSource);
//编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
console.log(gl.getShaderInfoLog(vertexShader));
//创建并关联项目
let program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

4.3 赋值

//获取attribute变量
let a_Position = gl.getAttribLocation(program,'a_Position');
//赋值,有多种赋值方法,使用缓冲区见之前博文
gl.vertexAttrib1f (a_Position, v);                 // float
gl.vertexAttrib1fv(a_Position, [v]);               // float 或 float array
gl.vertexAttrib2f (a_Position,  v0, v1);            // vec2
gl.vertexAttrib2fv(a_Position,  [v0, v1]);          // vec2 或 vec2 array
gl.vertexAttrib3f (a_Position,  v0, v1, v2);        // vec3
gl.vertexAttrib3fv(a_Position,  [v0, v1, v2]);      // vec3 或 vec3 array
gl.vertexAttrib4f (a_Position,  v0, v1, v2, v4);    // vec4
gl.vertexAttrib4fv(a_Position,  [v0, v1, v2, v4]);  // vec4 或 vec4 array
//获取attribute变量
let uRotateMatrix= gl.getUniformLocation(program,'uRotateMatrix');
//赋值,有多种赋值方法
gl.uniform1f (uRotateMatrix, v);                 // float
gl.uniform1fv(uRotateMatrix, [v]);               // float 或 float array
gl.uniform2f (uRotateMatrix,  v0, v1);            // vec2
gl.uniform2fv(uRotateMatrix,  [v0, v1]);          // vec2 或 vec2 array
gl.uniform3f (uRotateMatrix,  v0, v1, v2);        // vec3
gl.uniform3fv(uRotateMatrix,  [v0, v1, v2]);      // vec3 或 vec3 array
gl.uniform4f (uRotateMatrix,  v0, v1, v2, v4);    // vec4
gl.uniform4fv(uRotateMatrix,  [v0, v1, v2, v4]);  // vec4 或 vec4 array
//赋值矩阵
gl.uniformMatrix2fv(mat2UniformLoc, false, [  4x element array ])  // mat2 或 mat2 array
gl.uniformMatrix3fv(mat3UniformLoc, false, [  9x element array ])  // mat3 或 mat3 array
gl.uniformMatrix4fv(mat4UniformLoc, false, [ 16x element array ])  // mat4 或 mat4 array
//赋值整型变量
gl.uniform1i (intUniformLoc,   v);                 // int
gl.uniform1iv(intUniformLoc, [v]);                 // int 或 int array
gl.uniform2i (ivec2UniformLoc, v0, v1);            // ivec2
gl.uniform2iv(ivec2UniformLoc, [v0, v1]);          // ivec2 或 ivec2 array
gl.uniform3i (ivec3UniformLoc, v0, v1, v2);        // ivec3
gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]);      // ivec3 or ivec3 array
gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4);    // ivec4
gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]);  // ivec4 或 ivec4 array
//赋值纹理
gl.uniform1i (sampler2DUniformLoc,   v);           // sampler2D (textures)
gl.uniform1iv(sampler2DUniformLoc, [v]);           // sampler2D 或 sampler2D array
//赋值立方体纹理 
gl.uniform1i (samplerCubeUniformLoc,   v);         // samplerCube (textures)
gl.uniform1iv(samplerCubeUniformLoc, [v]);         // samplerCube 或 samplerCube array

5 结构体

5.1 声明

struct Material {vec3 ambient;vec3 diffuse;vec3 specular;float shininess;
};struct Light {vec3 position;vec3 color;float intensity;
};struct Scene {Material material;Light light;
};
uniform Scene uScene;void main() {vec3 ambient = uScene.material.ambient * uScene.light.color;
}

5.2 赋值

// 设置 Material
gl.uniform3f(gl.getUniformLocation(program, 'uScene.material.ambient'), 1.0, 0.5, 0.31);
gl.uniform3f(gl.getUniformLocation(program, 'uScene.material.diffuse'), 1.0, 0.5, 0.31);
gl.uniform3f(gl.getUniformLocation(program, 'uScene.material.specular'), 0.5, 0.5, 0.5);
gl.uniform1f(gl.getUniformLocation(program, 'uScene.material.shininess'), 32.0);// 设置 Light
gl.uniform3f(gl.getUniformLocation(program, 'uScene.light.position'), 10.0, 10.0, 10.0);
gl.uniform3f(gl.getUniformLocation(program, 'uScene.light.color'), 1.0, 1.0, 1.0);
gl.uniform1f(gl.getUniformLocation(program, 'uScene.light.intensity'), 1.0);

6 函数

6.1 基本结构

返回类型 函数名(参数列表) {// 函数体return 返回值; // 如果返回类型不是 void
}
例如:add 是函数名,接受两个 float 类型的参数 a 和 b,并返回它们的和。
float add(float a, float b) {return a + b;
}

6.2 自定义函数

// 自定义函数:计算镜面反射
vec3 calculateSpecular(vec3 normal, vec3 viewDir, vec3 lightDir, float shininess) {vec3 reflectDir = reflect(-lightDir, normal);float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);return spec * vec3(1.0); // 假设镜面反射颜色为白色
}void main() {vec3 normal = normalize(vNormal);vec3 lightDir = normalize(uLightPos - vFragPos);vec3 viewDir = normalize(uViewPos - vFragPos);// 使用自定义函数计算镜面反射vec3 specular = calculateSpecular(normal, viewDir, lightDir, 32.0);fragColor = vec4(specular, 1.0);
}

6.3 常用内置函数

sin(x):返回 x 的正弦值,x 为弧度。
cos(x):返回 x 的余弦值。
tan(x):返回 x 的正切值。
asin(x):返回 x 的反正弦值,结果为弧度。
acos(x):返回 x 的反余弦值。
atan(x):返回 x 的反正切值。
atan(y, x):返回从 (x, y) 到原点的角度,结果为弧度
exp(x):返回 e^x。
log(x):返回 ln(x),即自然对数。
log2(x):返回以 2 为底的对数。
pow(x, y):返回 x 的 y 次幂。
sqrt(x):返回 x 的平方根。
inversesqrt(x):返回 1 / sqrt(x)abs(x):返回 x 的绝对值。
sign(x):返回 x 的符号,-1.0(负数),0.0(零),1.0(正数)。
floor(x):返回不大于 x 的最大整数。
ceil(x):返回不小于 x 的最小整数。
round(x):返回四舍五入后的整数。
mod(x, y):返回 x 除以 y 的余数。
min(x, y):返回 x 和 y 中较小的值。
max(x, y):返回 x 和 y 中较大的值。
clamp(x, minVal, maxVal):将 x 限制在 minVal 和 maxVal 之间。
mix(x, y, a):线性插值,返回 (1 - a) * x + a * y。
step(edge, x):阶跃函数,如果 x < edge 返回 0.0,否则返回 1.0smoothstep(edge0, edge1, x):平滑的阶跃函数,x 在 edge0 和 edge1 之间时进行平滑过渡。
dot(x, y):计算向量 x 和 y 的点积。
cross(x, y):计算向量 x 和 y 的叉积(仅适用于 vec3)。
normalize(x):将向量 x 归一化。
length(x):返回向量 x 的长度。
distance(x, y):返回向量 x 和 y 之间的距离。
reflect(I, N):计算入射向量 I 关于法线 N 的反射向量。
refract(I, N, eta):计算入射向量 I 关于法线 N 的折射向量,eta 为折射率比。
transpose(x):返回矩阵 x 的转置。
inverse(x):返回矩阵 x 的逆矩阵。
matrixCompMult(x, y):按元素相乘两个矩阵 x 和 y。
faceforward(N, I, Nref):根据视角调整法线方向,确保法线朝向观察者。
texture(sampler, coord):根据纹理坐标 coord 从 sampler 采样纹理。
textureLod(sampler, coord, lod):带有指定层次细节级别的纹理采样。
textureProj(sampler, coord):投影纹理采样。
textureGrad(sampler, coord, dPdx, dPdy):带有梯度信息的纹理采样。
min(x, y):返回 x 和 y 中较小的值。
max(x, y):返回 x 和 y 中较大的值。
clamp(x, minVal, maxVal):将 x 限制在 minVal 和 maxVal 之间。
step(edge, x):阶跃函数。
smoothstep(edge0, edge1, x):平滑的阶跃函数。

7 精度

在这里插入图片描述

8 其他

  其他的如if判断,for循环等于C语言、JavaScript一样,这里不再赘述。

9 总结

  本篇中我们介绍了GLSL的基础语法,略显枯燥乏味,但对我们能够是否熟练掌握WebGL有很大的帮助,希望读者仔细体会,回见~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/424558.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack5-手撸RemoveConsolePlugin插件

写在前面 其实呢&#xff0c;这个东西也就那样&#xff0c;主要是我们得清楚webpack构建过程中的生命周期钩子&#xff0c; 就拿这个插件来说&#xff0c;我们想要把输出的js文件里面的内容中的console语句去掉&#xff0c;那么我们就需要找到webpack处理完文件时的钩子&#…

海外VS国内:网安上市公司人均创收对比

二级市场分析章节中分析了中国网络网络安全上市公司人均创收63.2万、人均毛利37.6万&#xff0c;人均创利-1.6万。 有网友问了&#xff1a;海外网络安全公司的人均情况如何&#xff1f;那么让我们一起看看吧。 我们统计了在海外上市的28家主要网络安全公司的2023年的人均情况&…

2020ICPC上海 D - Walker M - Gitignore

D: 首先显然要二分,判断当前二分的mid时间下是否能满足走满0~n 枚举所有情况,这里按照左,右起点p1,p2分别讨论 p1向左 p2向左(以下向左和向右都代表向左或者向右到墙,而不代表初速度方向)&#xff0c;只需要计算p1或者p2反弹之后还能走距离n就是合法 p1向左 p2向右&#xff…

PHP智慧家政同城服务家政系统小程序源码

智慧家政&#xff0c;同城服务新篇章 —— 探索家政系统的无限可能 开篇&#xff1a;走进智慧家政时代 在这个快节奏的生活中&#xff0c;每一分每一秒都显得尤为珍贵。当忙碌成为常态&#xff0c;如何让家成为真正的避风港&#xff1f;答案或许就藏在“智慧家政同城服务家政…

155K Star,Python 入门到进阶最佳学习资源

Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub 指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 导语 如果你正在寻找一个全面、系统、深入的 Python 学习项目&#…

合资油车断崖式崩盘,买车的千万慎重了

文 | AUTO芯球 作者 | 雷慢 合资车&#xff0c;燃油车全体大逃亡的时候来了&#xff0c; 你敢信吗&#xff0c;8月份&#xff0c;国内新能源汽车零售渗透率达到54%&#xff0c; 我给大家讲个冷笑话&#xff0c; 几个月前还有车企老总说什么&#xff0c; “只要传统车企一发…

pyflink 安装和测试

FPY Warning! 安装 apache-Flink # pip install apache-Flink -i https://pypi.tuna.tsinghua.edu.cn/simple/ Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple/ Collecting apache-FlinkDownloading https://pypi.tuna.tsinghua.edu.cn/packages/7f/a3/ad502…

软件测试学习笔记丨Docker 安装、管理、搭建服务

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/32192 容器&#xff08;Docker&#xff09;技术的价值 保证环境一致性&#xff0c;只要使用相同镜像部署就可以保证一致性。轻量级虚拟化访问&#xff0c;运行更快&#xff0c;资源更小。同时…

微信小程序使用 ==== 粘性布局

目录 Chrome杀了个回马枪 position:sticky简介 你可能不知道的position:sticky 深入理解粘性定位的计算规则 粘性定位其他特征 代码实现 微信小程序在scroll-view中使用sticky Chrome杀了个回马枪 position:sticky早有耳闻也有所了解&#xff0c;后来&#xff0c;Chro…

长业务事务的离线并发问题

事务指代一组操作同时成功或同时失败&#xff0c;事务可分为两类&#xff1a; 系统事务&#xff1a;即关系数据库事务&#xff0c;一次数据库连接中由start transaction或begin开启&#xff0c;commit表示提交&#xff0c;rollback表示回滚&#xff1b;业务事务&#xff1a;完…

力扣题解2848

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;简单&#xff09;&#xff1a; 与车相交的点 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i&#xff0c;nums[i] [starti, endi] &…

html+css+js网页设计 旅游 厦门旅游网10个页面

htmlcssjs网页设计 旅游 厦门旅游网10个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&am…

SpringBoot权限认证-Sa-Token的使用与详解

本文详细介绍了Sa-Token在Java项目中的使用方法&#xff0c;包括Sa-Token的基本概念、与其他权限框架的比较、基本语法和高级用法&#xff0c;并通过实例讲解了如何在项目中集成和使用Sa-Token。作为一款轻量级Java权限认证框架&#xff0c;Sa-Token在简化权限管理、提高开发效…

『功能项目』切换职业技能面板【49】

我们打开上一篇48切换职业面板的项目&#xff0c; 本章要做的事情是制作第二职业法师技能面板、第三职业面板并且完成切换 双击打开Canvas进入预制体空间 复制三个技能栏面板 重命名 设置第一技能栏 设置第二职业技能栏 设置第三职业技能栏 修改脚本&#xff1a;ChangeProfess…

FreeRTOS—任务通知

一&#xff0c;概念介绍 队列、信号量、事件组等IPC技术都需要创建一个中间对象进程之间通过这些中间对象进行通讯或同步。创建对象就需要分配内存&#xff0c;占用一定内存。 二&#xff0c;任务通知的特点&#xff1a; 一个任务或ISR向另外一个指定的任务发送通知&#xff0c…

PhpStudy下载安装使用学习

一、官网下载 官网地址&#xff1a;Windows版phpstudy下载 - 小皮面板(phpstudy)https://old.xp.cn/download.html 【首页】选择Windows版&#xff0c;进行下载 下载完成是一个压缩包的形式&#xff0c;解压得到一个.exe的执行文件&#xff0c;点击执行安装程序&#xff08;注…

Spring Boot环境下的学生读书笔记共享

第4章 系统设计 4.1系统结构设计 读书笔记共享平台的设计主要是为了满足用户的实际需求。 因此&#xff0c;它需要通过Internet实现&#xff0c;因此它必须具备硬件和软件基础。该平台最终可以通过科学技术和各种方式达到支持智能化的信息管理的目的。因此&#xff0c;它必须具…

数据结构——(java版)Map与Set

文章目录 二叉搜索树&#xff08;1&#xff09; 二叉搜索树的概念&#xff1a;&#xff08;2&#xff09;二叉搜索树的意义&#xff1a;&#xff08;3&#xff09;二叉搜索树的实现&#xff1a;实现的方法与属性实现二叉搜索树的查询&#xff1a;实现二叉搜索树的插入&#xff…

【Kubernetes笔记】为什么DNS解析会超时?

【Kubernetes笔记】为什么DNS解析会超时&#xff1f; 目录 1 问题背景2 产生后续的问题3 DNS 负缓存工作原理&#xff1a;4 如何解决和缓解 DNS 负缓存 4.1 减小负缓存 TTL4.2 重试机制4.3 减少 Pod 的频繁重启或调度4.4 使用 Headless Service4.5 手动刷新 DNS 缓存 5 总结 …

【Unity】 HTFramework框架(五十六)MarkdownText:支持运行时解析并显示Markdown文本

更新日期&#xff1a;2024年9月15日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 MarkdownText支持的Markdown语法标题强调文本表格嵌入图像超链接 使用MarkdownText设置项运行时属性解析使用ID模式嵌入图像 MarkdownText MarkdownText…