webGlL变量的声明与使用

抢先观看:

变量的声明格式:<存储限定符><类型限定符><变量名>

        存储限定符:const, attribute, uniform, varying, buffer。

        类型限定符:void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, sampler1D, sampler2D, sampler3D, samplerCube, sampler2DShadow。

        变量名:由字母,数字和下划线组成,不能以数字开头,需见名知意。

                举个栗子:attribute vec4 a_Position

约定:attribute变量名以a_开头,uniform变量名以u_开头,varying变量名以v_开头。

        attribute: 传输的是那些与顶点相关的数据,如顶点坐标,法线,颜色等,局部变量,只能在顶点着色器中使用,在片元着色器中无法访问。

        uniform: 传输的是那些与顶点无关的数据或者是那些对于每个顶点都相同的值,如光照参数,变换矩阵等,全局变量,可以在顶点着色器和片元着色器中共享访问。

        varying: 传输的是那些由顶点着色器计算并传递给片元着色器的插值变量,用于从顶点着色器传递到片元着色器的插值数据。

页面内容:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="./lib/webgl-utils.js"></script>
  <script src="./lib/webgl-debug.js"></script>
  <script src="./lib/cuon-utils.js"></script>
  <script src="./js/helloPoints.js"></script>
</head>

<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>

脚本内容:


// helloPoints.js
// 如何在JavaScript 和着色器之间传递数据
/**
 * 变量:attribute, uniform, varying
 * attribute: 传输的是那些与顶点相关的数据,如顶点坐标,法线,颜色等
 * uniform: 传输的是那些与顶点无关的数据或者是那些对于每个顶点都相同的值,如光照参数,变换矩阵等
 * varying: 传输的是那些由顶点着色器计算并传递给片元着色器的插值变量
 */
// 存储限定符:const, attribute, uniform, varying, buffer’
// 类型限定符:void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, sampler1D, sampler2D, sampler3D, samplerCube, sampler2DShadow
// 变量名:由字母,数字和下划线组成,不能以数字开头,需见名知意
//attribute vec4 a_Position;
// 其中,attribute是存储限定符,vec4是类型限定符,a_Position是变量名
// 变量的声明格式:<存储限定符><类型限定符><变量名>
// 约定:attribute变量名以a_开头,uniform变量名以u_开头,varying变量名以v_开头
var vshader_source = `
// 声明attribute变量
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
  // 将attribute变量赋值给顶点着色器内建变量gl_Position
  gl_Position = a_Position;
  gl_PointSize = a_PointSize;
}
`
var fshader_source = `
void main(){
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
function main () {
  var canvas = document.getElementById('canvas')
  var gl = getWebGLContext(canvas)

  if (!gl) {
    console.log('获取webGl绘图上下文失败')
    return
  }
  if (!initShaders(gl, vshader_source, fshader_source)) {
    console.log('初始化着色器失败')
    return
  }
  /**
   * 获取attribute变量的存储位置
   * gl.getAttribLocation (program, name)
   * @param program 指定色含顶点着色器和片元着色器的着色器程序对象
   * @param name 指定想要获取其存储地址的attribute变量的名称
   * @returns 大于等于0 attribute变量的存储地址
   * @returns -1 获取失败 指定的attribute变量不存在,或者其命名具有gl或webgl 前缀
   * @err INVALID OPERATION 程序对象未能成功连接
   * @err INVALID VALUE name参数的长度大于attribute变量名的最大长度(默认)256字节
   * 
   */
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('获取attribute变量a_Position失败')
    return
  }
  // 将顶点位置传输给attribute变量
  //  a_Position属于vec4类型,gl.vertexAttrib3f()函数只能传输前三个分量(x,y,z),第四个分量默认为1.0
  /**
   * 将数据传输给location参数指定的attribute变量。
   * gl.vertexAttriblf()仅传输一个值,这个值将被填充到attribute变量的第1个分量中,第2、3个分量将相支设为0.0,第4个分量将被设为1.0。
   * 类似地,gl.vertexAttrib2f()将填充前两个分量,第3个分量为0.0,第4个分量为1.0。
   * gl.vertexAttrib4f()填充了所有四个分量。
   * gl.vertexAttriblf (location, v0)
   * gl.vertexAttrib2f(location,v0,v1)
   * gl.vertexAttrib3f(location, v0,v1,v2)
   * gl.vertexAttrib4f(location,v0,v1,v2,v3)
   * @param location 指定attribute变量的存储位置
   * @param v0,v1,v2,v3 指定传输给attribute变量的四个分量的值
   * @error 错误 INVALID VALUE location大于等于attribute变量的最大数目(默认为8)
   */
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); // 也可以使用gl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 1.0);

  /**
   * WebGL相关函数的命名规范
   * WebGL中的函数命名遵循OpenGLES2.0中的函数名,我们都知道后者是前者的基础规范。
   * OpenGL中的函数名由三个部分组成:
   * <基础函数名><参数个数><参数类型>,WebGL的函数命名使用同样的结构,
   * gl.vertexAttrib3f(location, v0, v1, v2)
   * 参数类型
   * gl.vertexAttrib基础函数名
   * 3参数个数
   * f 表示浮点数
   * i 表示整数
  */
  var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
  gl.vertexAttrib1f(a_PointSize, 10.0)
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.drawArrays(gl.POINTS, 0, 1)
}

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

免费送源码:Java+CSS+springboot Springboot高校医务室管理系统 计算机毕业设计原创定制

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…

CDN加速实战:使用七牛云CDN加速阿里云OSS资源访问

今天是双11搞活动,在阿里云1元注册了个域名,想着在学CDN,想使用CDN做个加速项目,但是阿里的要收费,上网查了下七牛云的不收费,想着将七牛云的CDN结合阿里的DNS做个访问加速,刚好看到了阿里的一个文章,照着改了改,实践成功了。 阿里文章:使用CDN加速OSS资源访问_对象…

SpringMVC执行流程(视图阶段JSP、前后端分离阶段)、面试题

目录 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 3.前后端分离的项目SpringMVC执行流程 4. 面试题 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 流程图&#xff1a; 更加生动的描述&#xff1a; DisPatcherServlet…

笔记本电脑买i7还是i9?i7和i9处理器区别详细介绍

i7和i9处理器都是英特尔&#xff08;Intel&#xff09;公司生产的高性能处理器&#xff0c;但它们有一些显著的区别。为了帮助你做出明智的选择&#xff0c;下面我们详细介绍一下i7和i9处理器的区别&#xff0c;以及如何根据你的需求来选择合适的处理器。 一、i7处理器的特点…

51c大模型~合集12

我自己的原文哦~ https://blog.51cto.com/whaosoft/11564858 #ProCo 无限contrastive pairs的长尾对比学习 , 个人主页&#xff1a;https://andy-du20.github.io 本文介绍清华大学的一篇关于长尾视觉识别的论文: Probabilistic Contrastive Learning for Long-Tailed Visua…

【数据结构篇】探索堆的算法的巧妙

须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1f;别忘了点…

智能家居10G雷达感应开关模块,飞睿智能uA级别低功耗、超高灵敏度,瞬间响应快

在当今科技飞速发展的时代&#xff0c;智能家居已经逐渐成为人们生活中不可或缺的一部分。从智能灯光控制到智能家电的联动&#xff0c;每一个细节都在为我们的生活带来便利和舒适。而在众多智能家居产品中&#xff0c;10G 雷达感应开关模块以其独特的优势&#xff0c;正逐渐成…

如何使用VBA识别Excel中的“单元格中的图片”(2/2)

Excel 365升级了新功能&#xff0c;支持两种不同的插入图片方式&#xff1a; 放置在单元格中&#xff08;Place in cell&#xff09;&#xff0c;新功能&#xff0c;此操作插入的图片下文中简称为单元格中的图片。放置在单元格上&#xff08;Place over cell&#xff09;&…

Nature|用于无线监测颅内信号的植入式柔性超声波传感器(柔性传感/健康监测/植入式电子/水凝胶)

华中科技大学臧剑锋(Jianfeng Zang)、华中科技大学同济医学院附属协和医院姜晓兵(Xiaobing Jiang)和新加坡南洋理工大学陈晓东(Xiaodong Chen)团队,在《Nature》上发布了一篇题为“Injectable ultrasonic sensor for wireless monitoring of intracranial signals”的论…

FlaskFastAPIgunicornunicorn并发调用

Flask VS. FastAPI Flask和FastAPI是Python中两种流行的Web框架&#xff0c;它们各自具有不同的特点和适用场景。以下是它们之间的一些主要区别&#xff1a; 1. 框架类型 Flask&#xff1a;Flask是一个轻量级的微框架&#xff0c;适合构建小型到中型的Web应用。它灵活且易于扩展…

像`npm i`作为`npm install`的简写一样,使用`pdm i`作为`pdm install`的简写

只需安装插件pdm-plugin-i即可&#xff1a; pdm plugin add pdm-plugin-i 然后就可以愉快地pdm i了&#xff0c;例如&#xff1a; git clone https://github.com/waketzheng/fast-dev-cli cd fast-dev-cli python -m pip install --user pipx pipx install pdm pdm plugin a…

C#笔记——委托(2)

Unity定义好的委托 在Unity里使用委托时&#xff0c;除了上章讲的自定我委托&#xff0c;还可以使用Unity定义好的委托 Action 无参无返回值委托 Func<T> 泛型委托 返回指定类型 Action<T1, T2> 可以传多个参数的有参委托 无返回值 Func<T1, T2> 可…

【玉米叶部病害识别】Python+深度学习+人工智能+图像识别+CNN卷积神经网络算法+TensorFlow

一、介绍 玉米病害识别系统&#xff0c;本系统使用Python作为主要开发语言&#xff0c;通过收集了8种常见的玉米叶部病害图片数据集&#xff08;‘矮花叶病’, ‘健康’, ‘灰斑病一般’, ‘灰斑病严重’, ‘锈病一般’, ‘锈病严重’, ‘叶斑病一般’, ‘叶斑病严重’&#x…

供应商图纸外发:如何做到既安全又高效?

供应商跟合作伙伴、客户之间会涉及到图纸外发的场景&#xff0c;这是一个涉及数据安全、效率及合规性的重要环节。供应商图纸发送流程一般如下&#xff1a; 1.申请与审批 采购人员根据需要提出发放图纸的申请并提交审批&#xff1b; 采购部负责人审批发放申请&#xff0c;确…

【深度学习】时间序列预测、分类、异常检测、概率预测项目实战案例

说明&#xff1a;本专栏内容来自于个人学习笔记、以及相关项目的实践与总结。写作目的是为了让读者体会深度学习的独特魅力与无限潜力&#xff0c;以及在各行各业之中的应用与实践。因作者时间精力有限&#xff0c;难免有疏漏之处&#xff0c;期待与读者共同进步。 前言 在当今…

JZ2440开发板——LCD

以下内容源于韦东山嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 之前在博文中学习过LCD&#xff08;SoC是S5PV210&#xff09;&#xff0c;作为对比&#xff0c;本文学习S3C2440这款SoC的LCD方面的内容。主要涉及以下三个内容&#xff1a; 一、LCD的硬件原理 1.…

2024 Rust现代实用教程:Ownership与结构体、枚举

文章目录 一、Rust的内存管理模型1.GC&#xff08;Stop the world&#xff09;2.C/C内存错误大全3.Rust的内存管理模型 二、String与&str1.String与&str如何选择2.Example 三、枚举与匹配模式1.常见的枚举类型&#xff1a;Option和Result2.匹配模式 四、结构体、方法、…

数据结构C语言描述1(图文结合)--顺序表讲解,实现,表达式求值应用,考研可看

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;用C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…

Oracle视频基础1.3.7练习

1.3.7 看oracle是否启动构造一个pfile:boobooke.ora看spfilewilson内容修改alert log file里拷贝的参数内容&#xff0c;创建一个pfile boobooke.ora用新创建的pfile启动数据库&#xff0c;并创建新的spfile:spfilebbk.ora启动数据库&#xff0c;监听&#xff0c;看新的进程解…

数据转换 | Matlab基于SP符号递归图(Symbolic recurrence plots)一维数据转二维图像方法

目录 基本介绍程序设计参考资料获取方式 基本介绍 Matlab基于SP符号递归图&#xff08;Symbolic recurrence plots&#xff09;一维数据转二维图像方法 符号递归图(Symbolic recurrence plots)是一种一维时间序列转图像的技术&#xff0c;可用于平稳和非平稳数据集;对噪声具有…