在JavaScript程序通过attribute变量向顶点着色器传值 - CSDN博客

gl.vertexAttrib3f() 方法是一系列同族函数中的一个，该系列函数的任务就是从JavaScript程序中向顶点着色器中的attribute变量传值 WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值 点燃火柴 于 2021-03-0200:29:28 发布 318 收藏 分类专栏： WebGL基础 文章标签： WebGL 3d可视化 三维web 三维世界 顶点着色器 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qw8704149/article/details/114273744 版权 WebGL基础 专栏收录该内容 45篇文章 21订阅 订阅专栏 在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1着色器中的attribute变量2.2gl.getAttribLocation()方法2.3gl.vertexAttrib3f()方法2.4gl.vertexAttrib3f()的同族函数2.5attribute变量使用流程介绍 3.demo代码 1.demo效果 如上图，这个demo和上一个效果一样，但是实现时却不同，这一次在JavaScript程序中通过gl.getAttribLocation()方法获取着色器中的变量a_Position的地址，然后通过gl.vertexAttrib3f()方法向着色器变量a_Position传值，最后将图形呈现在页面中。

2.相关知识点 2.1着色器中的attribute变量 attribute变量是一种GLSLES变量，被用来从外部向顶点着色器传输数据。

接下来介绍一下attribute变量的声明，该变量的声明有一定的格式要求：友情提示： attribute变量必须声明成全局变量所有的attribute变量最好以a_前缀开始，这样从变量的名字就可以区分出类型 2.2gl.getAttribLocation()方法 我们在着色器程序中声明的attribute变量都会有一个自己的存储地址，通过这个地址我们可以在外部程序中给它赋值，gl.getAttribLocation()方法就是帮我们获取这个地址的利器 函数功能：获取有name指定的着色器中attribute变量的存储地址 -------------------------------------------------------------------------- 调用示例：gl.getAttribLocation(program,name) -------------------------------------------------------------------------- 参数 program 指定包含顶点着色器和片元着色器的着色器程序对象 name 指定想要获取其存储地址的attribute变量名称 -------------------------------------------------------------------------- 返回值 >=0 attribute变量的存储地址 -1 指定的变量名不存在，或命名具有gl_或webgl_前缀 -------------------------------------------------------------------------- 错误 INVALID_OPERATION 程序对象未能连接成功 INVALID_VALUE name参数的长度大于最大长度，默认256字节 示例代码 //获取着色器attribute变量a_Position的存储地址 vara_Position=gl.getAttribLocation(gl.program,'a_Position'); 2.3gl.vertexAttrib3f()方法 gl.getAttribLocation()方法帮我们获取到了着色器变量的地址，这时就需要请出gl.vertexAttrib3f()方法了，通过这个方法我们就可以在JavaScript程序中把想要赋的值赋给着色器中的attribute变量 函数功能：将数据v0,v1,v2传给由location参数指定的着色器的attribute变量 ------------------------------------------------------------------------------ 调用示例：gl.vertexAttrib3f(location,v0,v1,v2) ------------------------------------------------------------------------------ 参数 location 指定将要修改的attribute变量的存储地址 v0 指定填充attribute变量第一个分量的值 v1 指定填充attribute变量第二个分量的值 v2 指定填充attribute变量第三个分量的值 ------------------------------------------------------------------------------ 返回值 无 ------------------------------------------------------------------------------ 错误 INVALID_OPERATION 没有当前的program对象 INVALID_VALUE location大于等于attribute变量的最大数据，默认为8 示例代码 //向着色器attribute变量a_Position传值 gl.vertexAttrib3f(a_Position,0.0,0.0,0.0) 2.4gl.vertexAttrib3f()的同族函数 gl.vertexAttrib3f()方法是一系列同族函数中的一个，该系列函数的任务就是从JavaScript程序中向顶点着色器中的attribute变量传值 函数功能：将数据[1~4个分量]传给由location参数指定的着色器的attribute变量 ------------------------------------------------------------------------------ gl.vertexAttrib1f(location,v0) gl.vertexAttrib2f(location,v0,v1) gl.vertexAttrib3f(location,v0,v1,v2) gl.vertexAttrib4f(location,v0,v1,v2,v3) ------------------------------------------------------------------------------ 参数 location 指定将要修改的attribute变量的存储地址 v0,v1,v2,v3 指定传输给attribute变量的四个分量的值 ------------------------------------------------------------------------------ 返回值 无 ------------------------------------------------------------------------------ 错误 INVALID_VALUE location大于等于attribute变量的最大数据，默认为8 你同样可以使用这些方法的矢量版本，它们的名字以"v"作为结尾。

并接受类型化数组作为参数，函数名中数字表示数组中元素的个数 varposition=newFloat32Array([1.0,2.0,3.0,1.0]); gl.vertexAttrib4fv(position); 2.5attribute变量使用流程介绍 attribute变量的使用大致流程为： 在着色器中声明attribute变量在JavaScript程序中获取attribute变量的存储地址通过attribute变量的存储地址向着色器中的attribute变量传值 为了帮大家更直观的理解，我画了一张图，如有不足，请多多指正 3.demo代码

点燃火柴 关注 关注 1 点赞 踩 1 评论 0 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 评论 1 您还未登录，请先 登录 后发表或查看评论 相关推荐 JSAttribute属性操作详解 01-19 Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes：获取一个属性作为对象 getAttribute：获取某一个属性的值 setAttribute：建立一个属性，并同时给属性捆绑一个值 createAttribute：仅建立一个属性 removeAttribute：删除一个属性 getAttributeNode：获取一个节点作为对象 setAttributeNode：建立一个节点 removeAttributeNode：删除一个节点 attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在 WebGL编程指南二:将顶点的信息从JavaScript程序中传给顶点着色器 Zmikoo学习之路 07-11 153 目标： WebGL程序可以将顶点的位置坐标从JavaScript传到着色器中 基本概念 将顶点的位置信息从JavaScript程序中传给顶点着色器有两种方式： 使用attribute变量传输与顶点相关的数据。

只有顶点着色器能使用它，必须声明成全局变量。

使用uniform变量传输那些对于所有顶点都相同（或与顶点无关）的数据 关键词attribute和uniform被称为存储限定... WebGL学习——存储限定符（三） pgLi 05-15 350 介绍：定义存储的变量是什么类型，常用的有attribute、uniform 1、attribute 传输与顶点相关的数据。

定义方式： attributevec4a_Position /** *顶点着色器 *gl_Position常量代表是位置vec4一个函数返回一个vec4类型的数据 *g1_PointSize常量代表是尺寸float类型 *@typ... webgl入门(3)-坐标系与鼠标交互 weixin_33997389的博客 12-25 736 前言 这是webgl入门的第2节，内容包含weblg的坐标系和动态设置图形样式。

1.webgl坐标系统 由于webgl处理的是三维图形，所以它使用三维坐标系统。

具有x轴、y轴、z轴。

当你面对屏幕的时候，X轴是水平的（正方形向右），Y轴是垂直的（正方向向上（原文中有错）），而Z轴垂直于屏幕（正方向向外） 这套坐标系又叫右手坐标系。

如图所示，webgl的坐标系(原点在画布中间)跟canvas的... 关于JavaScript中attribute和property的区别 最新发布 ysds20211402的博客 05-16 14 转自：微点阅读https://www.weidianyuedu.com property和attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。

property是DOM中的属性，是JavaScript里的对象； attribute是HTML标签上的特性，它的值只能够是字符串； attribute和property介绍 简单理解，Attribute就是dom节点自带的属性，例如ht.. 02-js与着色器间的数据传输 qq_22188085的博客 05-29 39 前言 课堂目标 使用js向着色器传递数据 获取鼠标在canvas中的webgl坐标系位置 知识点 attribute变量 gl.vertextAttribute3f()的同族函数 鼠标在canvas中的css位置转webgl坐标位 uniform变量 gl.uniform4f()的同族函数 第一章用js控制一个点的位置 1-attribute变量的概念。

回顾一下我们上一篇中点的定位： gl_Position=vec4(0,0,0,1); 这是一种将数据写死了的硬编码，缺 WebGL-通过js程序向attribute和uniform变量赋值 ithanmang 04-25 1611 有两种方式可以通过js程序向着色器传递数据 通过attribute变量–传输的是于顶点相关的数据； 通过uniform变量–传输的是对所有顶点都相同或者于顶点无关的数据； 通过上一个程序，在webgl中绘制了一个顶点，但是顶点的位置不能通过js程序来控制，下面通过js给顶点着色器传递数据来控制顶点的位置。

1、在顶点着色器中生命attribute变量 //顶点着色器 //声... gl.vertexAtteib3fP42讲数据传给location参数指定的attribute变量 weixin_30577801的博客 12-07 54 参数　　location　　指定将要修改的attribute变量存储位置 　　　　v0　　指定填充attribute变量第一个分量的值 　　　　v1　　指定填充attribute变量第二个分量的值 　　　　v2　　指定填充attribute变量第三个分量的值 var　VSHADER_SOURCE= 　　'attributevec4a_Position;\n'+ 　　'void... GLES3.0中文API-glGetVertexAttrib MSK1111的博客 02-11 153 名称 glGetVertexAttrib—返回通用顶点属性参数 C规范 voidglGetVertexAttribfv( GLuintindex, GLenumpname, GLfloat*params); voidglGetVertexAttribiv( GLuintindex, GLenumpname, GLint*params); voidglGetVertexAtt... 07WebGL使用attribute变量 现在学习也不晚 04-27 2213 我们将位置信息从javascript程序中传给顶点着色器。

有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。

思路：1.在顶点着色器中，声明attribute变量。

2.将attribute变量赋值给gl_Position变量。

3.向attribute变量传输数据。

示例：案... OpenGL实现三维物体着色和旋转 04-21 OpenGL实现三维物体着色和旋转，对于做三维景象很有参考价值，实现了物体的动态控制！ WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值 点燃火柴的博客 03-05 557 在JavaScript程序通过uniform变量向片元着色器传值1.demo效果2.相关知识点2.1着色器中的attribute变量2.2gl.getAttribLocation()方法2.3gl.vertexAttrib3f()方法2.4gl.vertexAttrib3f()的同族函数2.5attribute变量使用流程介绍3.demo代码 1.demo效果 如上图，这个demo和上一个效果一样，但是实现时却不同，这一次在JavaScript程序中通过gl.getAttribLocatio WebGL着色器变量(attribute、uniform和varying) u014291990的博客 11-17 2088 WebGL着色器语言三种变量(attribute、uniform和varying) 着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如intnum;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。

attribute和uniform关键字的目的主要是为了javascript... 【笔记】《WebGL编程指南》学习-第2章WebGL入门(4-画一个点-版本2）) 努力的V崽兽 09-22 325 这一节，我们要将顶点的位置坐标从JS传到着色器程序中，然后再对应位置上将点绘制出来。

虽然结果一样，但用到的方法是可扩展的。

WebGL编程（1）-学习总结之WebGL常用方法 凌风子夜 08-22 393 WebGL简介： WebGL，是一项使用canvas在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术，WebGL的技术规范继承自免费和开源的OpenGL标准，而后者在计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。

例子： 该浏览器不支持canvas！<... apple nogodoss x01 varpoints="[" for ... attributefloata_pointsize gl_position="a_Position;//设置点的尺寸" webgpu vertexbuffer csdn axure9 vue-color shader find webgl-shader vue vue-three.js three.js webgl javascript dl.dx: qq_28365623: weixin_40863168:>