WebGL着色器变量(attribute、uniform和varying)
WebGL着色器语言三种变量(attribute、uniform和varying)
着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。
attribute和uniform关键字的目的主要是为了javascript语言可以通过相关的WebGL API把一些数据传递给着色器，如果一个着色器中一个变量，着色器代码中变量不通过attribute或uniform声明标识，该变量是不能从javascript代码中获得相应的数据。
| 关键字(变量类型) | 数据传递 | 声明变量 |
|---|---|---|
| attribute | javascript——>顶点着色器 | 声明顶点数据变量 |
| uniform | javascript——>顶点、片元着色器 | 声明非顶点数据变量 |
| varying | 顶点着色器——>片元着色器 | 声明需要插值计算的顶点变量 |
attribute类型变量
attribute关键字通常用来声明与顶点数据相关的变量，比如顶点位置坐标数据、顶点颜色数据、顶点法向量数据…
顶点着色器中通过attribute关键字声明的顶点变量，javascript代码可以通过相关的WebGL API把顶点的数据传递给着色器中相应的顶点变量。
因为javascript没必要给片元着色器传递顶点数据，所以规定attribute关键字只能在顶点着色器中声明变量使用。只要注意attribute关键字声明顶点变量代码位于主函数main之外就可以。
// attribute声明顶点位置变量
attribute vec4 position;
// attribute声明顶点颜色变量
attribute vec4 a_color;
// attribute声明顶点法向量
attribute vec4 normal;
// 与顶点相关的浮点数
attribute float scale;
同一个顶点着色器通常需要处理是一批顶点数据，一个顶点可能会有多种数据，比如顶点位置、颜色、法向量，还有其它自定义的，比如attribute float scale;，声明了一个scale变量。
// attribute声明顶点位置变量
attribute vec4 position;
// 与顶点相关的浮点数
attribute float scale;
void main() {// 每个顶点的x坐标乘以该顶点对应的一个系数scalegl_Position = vec4(position.x*scale,position.y,position.z,1.0);
}
uniform类型变量
uniform关键字出现的目的就是为了javascript可以通过相关的WebGL API给着色器变量传递数据，比如传递一个光源的位置数据、一个光源的方向数据、一个光源的颜色数据、一个用于顶点变换的模型矩阵、一个用于顶点变换的视图矩阵…
不过要注意如果是顶点相关的变量，比如顶点位置、顶点颜色等顶点数据相关变量不能使用关键字uniform去声明，主要是顶点的数据往往不是一个，通常有很多个顶点，而且这些顶点都要逐顶点执行main函数中的程序，所以为了声明顶点数据相关的变量，着色器语言规定了一个新的关键字attribute。
javascript可以给顶点着色器的变量传递数据，也可以给片元着色器的变量传递数据，也就是说uniform关键字既可以在顶点着色器中使用，也可以在片元着色器中使用。只要注意uniform关键字声明变量需要在主函数main之前声明。
varying类型变量
attribute vec4 a_color;在顶点着色器中声明了一个顶点颜色变量，如果想在片元着色器中获得顶点颜色插值计算以后的数据，需要同时在顶点着色器和片元着色器中执行varying vec4 v_color;，也就是在顶点、片元两个着色器代码中都需要通过关键字varying声明一个新变量v_color,最后再顶点着色器中执行v_color = a_color;即可
顶点着色器
attribute vec4 a_color;// attribute声明顶点颜色变量
varying vec4 v_color;//varying声明顶点颜色插值后变量
void main() {//顶点颜色插值计算v_color = a_color;
}
片元着色器
// 接收顶点着色器中v_color数据
varying vec4 v_color;
void main() {// 插值后颜色数据赋值给对应的片元gl_FragColor = v_color;
}
varying类型变量主要是为了完成顶点着色器和片元着色器之间的数据传递和插值计算。比如在一个WebGL程序中通过三个顶点绘制一个彩色三角形，三个顶点的位置坐标定义了一个三角形区域，这个三角形区域经过片元着色器处理后会得到由一个个片元或者说像素组成的三角形区域，在片元化的过程中，顶点的颜色数据也会进行插值计算，插值计算之前每个顶点对应一个颜色，插值计算之后，每个片元对应一个颜色值，通过varying关键字就可以在片元着色器中获得插值后的颜色数据，然后赋值给片元。
<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">//attribute声明vec4类型变量aposattribute vec4 apos;// attribute声明顶点颜色变量attribute vec4 a_color;//varying声明顶点颜色插值后变量varying vec4 v_color;void main() {// 顶点坐标apos赋值给内置变量gl_Positiongl_Position = apos;//顶点颜色插值计算v_color = a_color;}</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">// 所有float类型数据的精度是lowpprecision lowp float;// 接收顶点着色器中v_color数据varying vec4 v_color;void main() {// 插值后颜色数据赋值给对应的片元gl_FragColor = v_color;}</script>
WebGL着色器变量(attribute、uniform和varying)相关推荐
- WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord
WebGL着色器内置变量 WebGL中文教程网 本文是WebGL教程(电子书)的2.7节内容 着色器语言在GPU的着色器单元执行,javascript语言.C语言在CPU上执行,任何一种语言的语法规则 ...
- webgl 着色器_“着色器”是什么意思？ 如何使用HTML5和WebGL创建它们
webgl 着色器 本文是Microsoft的Web开发技术系列的一部分. 感谢您支持使SitePoint成为可能的合作伙伴. 您可能已经注意到,去年我们第一次谈论了babylon.js ,最近我们发 ...
- webgl 着色器_如何在WebAssembly中使用WebGL着色器
webgl 着色器 by Dan Ruta 通过Dan Ruta 在WebAssembly中使用WebGL着色器 (Using WebGL shaders in WebAssembly) WebAss ...
- opengl之高级GLSL（1）-顶点着色器变量与片段着色器变量
官方教程位置 openglCN GLSL的内建变量: 我们已经学会使用顶点属性.uniform和采样器来完成这一任务了.然而,除此之外,GLSL还定义了另外几个以gl_为前缀的变量,它们能提供给我们更 ...
- webgl 着色器_如何使用AI，AR和WebGL着色器来帮助视障人士
webgl 着色器 by Dan Ruta 通过Dan Ruta 如何使用AI,AR和WebGL着色器来帮助视障人士 (How you can use AI, AR, and WebGL shader ...
- webgl着色器初学习-顶点着色器和片元着色器
文章目录 webgl工作步骤 顶点着色器 片元着色器 案例 webgl工作步骤 每一个像素点都将执行这两个着色器 我理解为这两个着色器,顶点着色器决定渲染位置 ,片元着色器决定颜色 顶点着色器 编写一 ...
- Three.js着色器基础【含源码】
着色器(Shader)是在 GPU 上运行的程序.它们被称为着色器的原因是,最初它们只处理3D对象的着色,但后来扩展到了3D对象之外.它们需要与传统编程不同的思维方式,因为程序是针对每个顶点或像素并行 ...
- WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果 2.相关知识点 2.1 片元着色器中的uniform变量 2.2 gl.getUniformLocation()方法 ...
- WebGL编程指南03-在javaScript程序通过uniform变量向片元着色器传值
1.demo效果 如上图,这个demo实现在黑色区域内点用鼠标点击,会在不同的区域画出不同颜色的小方块,第一象限的画红色方块,第三象限画绿色方块,第二.四象限画蓝色方块. 2 片元着色器的unifor ...
- 顶点着色器到片元着色器的过程，varying变量
varying 变量: 从顶点着色器向片元着色器中传入数据. varying 变量只能是float(以及相关的vec2,vec3,vec4,mat2,mat3,mat4). 前面我们了解到顶点着色器是 ...
最新文章
- 实操指南：用谷歌AutoML构建图像分类模型
- css自动限制图片大小
- HDOJ 5373 The shortest problem 【数论】
- html5抬头,HTML !DOCTYPE 标签
- Java多线程之龟兔赛跑和抢票
- PHP+Mysql查询上一篇和下一篇文章实例
- 一年前3-1对应阿里P7，贬值得有点快，但说对标好像差点意思...
- JavaScript从初级往高级走系列————Virtual Dom
- java代码执行linux命令_怎么用java代码运行linux命令
- I9 9900K线程_收藏党抓紧了！英特尔停产i9-9900K特色包装，只因运输太浪费
- C#绘制条码CODE39和CODE39全码模式
- php改时间戳,如何实现转换php时间戳
- 那天，我无意间瞟了眼程序员的桌面……
- 计算机网络-什么是网络协议？
- 网站ssl证书错误是为什么？要怎么解决ssl证书错误
- WeChat微信商户号JSAPI支付 支付授权目录无法添加：添加完成后不刷新再添加一遍
- php 输入出生年月日计算年纪,PHP实现根据出生年月日计算年龄的功能（代码示例）...
- sql中向下取整怎么取_SQL中的取整函数FLOOR、ROUND、CEIL、TRUNC、SIGN
- NameError: name 'XX' is not defined
- Lecture 12: Iterated Expectations； Sum of a Random Number of Random Variables