当前位置：首页 > news >正文

webGlL变量的声明与使用

news 2026/3/26 20:09:07

抢先观看：

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

        存储限定符：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_Positiongl_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)
}

效果：

webGlL变量的声明与使用

抢先观看： 变量的声明格式：<存储限定符><类型限定符><变量名> 存储限定符：const, attribute, uniform, varying, buffer。类型限定符：void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, s…...

编程日记 2024/10/31 2:33:19

qt的c++环境配置和c++基础【正点原子】嵌入式Qt5 C++开发视频

QT c 环境配置和c基础 c环境配置和工程创建 1.配置步骤 2.新建qt 工程目录和工程 3.重启qt后打开最近的qt项目 c基础-类和对象 1.什么是类和对象 A.类的定义 B.类的结构表示 C.类的访问权限 D.对象的定义 E.类和对象的关系 2.类…...

编程日记 2024/10/31 2:32:17

中间件安全（三）

本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。前言: 本文主要讲解apache命令执行漏洞（cve_2021_41773）。靶场链接：Vulfocus 漏洞威胁分析平台一，漏洞简介。 cve_2021_41773漏洞…...

编程日记 2024/10/31 2:29:13

唱戏机上的内存卡怎么加密？教你两个方法

唱戏机是中老年人群休闲时光的好伴侣。然而，很多唱戏机商家都会面临一个困扰：如何保护唱戏机上内存卡中的音频，避免他人随意复制呢？今天这篇文章看完，问题将迎刃而解~ 数据隐藏将内存卡插到电脑上，对卡里…...

编程日记 2024/10/31 2:28:11

MyBatis 源码分析 - SQL执行过程（三）之 ResultSetHandler

MyBatis的SQL执行过程在前面一系列的文档中，我已经分析了 MyBatis 的基础支持层以及整个的初始化过程，此时 MyBatis 已经处于就绪状态了，等待使用者发号施令了那么接下来我们来看看它执行SQL的整个过程，该过程比较复杂&#xff…...

编程日记 2024/10/31 2:27:09

webpack解决使用window.open方法打开history路由页面提示404的问题

问题: 一般情况下应该使用history.push(/ssh)打开history路由页面但项目中使用window.open(/ssh),然后使用new WebSocket进行通信开发环境下启动项目后,/ssh页面打开却显示cannot get /ssh,控制台提示404 排查问题: 在React开发环境中使用 window.open 打开路由页面时&a…...

编程日记 2024/10/31 2:25:06

怎么把视频的声音转化为文字免费？7个小妙招，视频转文字轻松解决！

您是否也曾在做会议记录时，希望能免费把视频的声音转化为文字呢？在如今我们的办公生活中，用视频记录会议、记录的生活似乎已经成为了我们一项必备技能，但也并非所有人都能轻松获取视频中的信息。尤其是有着听力障碍的人群&#xf…...

编程日记 2024/10/31 2:24:05

【无标题】2024年第五届 MathorCup 数学应用挑战赛——大数据竞赛赛题

2024年第五届 MathorCup 数学应用挑战赛——大数据竞赛赛题已发布~，本届初赛时间为：2024年10月25日18:00至2024年11月1日20:00。本次赛题分为A，B两道，所有参赛队从赛道 A、B 中任选一题作答。在报名系统内选择自己队伍的赛道时&am…...

编程日记 2024/10/31 2:23:04

新能源行业必会基础知识---电力现货问答---第9问---什么是输电权？什么是输电权市场？

新能源行业必会基础知识-----电力现货问答-----主目录-----持续更新https://blog.csdn.net/grd_java/article/details/142909208 虽然这本书已经出来有几年了，现货市场已经产生了一定变化，但是原理还是相通的。还是推荐大家买来这本书进行阅读观看&#…...

编程日记 2024/10/31 2:19:59

视频文案素材获取渠道分享

做视频时为文案发愁？别担心！今天为大家推荐几个实用的视频文案素材网站，让你灵感爆棚，轻松创作文案。蛙学网首先要推荐的是蛙学网。作为专业短视频素材库，不仅有修牛蹄、解压视频等热门素材，还为短视频创…...

编程日记 2024/10/31 2:18:57

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

#1024程序员节｜征文# public/index.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>redux</title></head><body><div id"root"></div></body> </html&…...

编程日记 2024/10/31 2:17:56

VB中如何创建和使用自定义控件

在Visual Basic（VB）中，创建和使用自定义控件是一个高级功能，它允许开发者根据特定需求创建具有独特行为和外观的控件。以下是在VB中创建和使用自定义控件的一般步骤： 一、创建自定义控件打开VB开发环境： …...

编程日记 2024/10/31 2:16:55

Java继承的super关键字

在Java中，super关键字用于调用父类的构造方法、访问父类的成员变量和成员方法。调用父类的构造方法： 在子类的构造方法中，可以使用super关键字来调用父类的构造方法。这可以帮助子类初始化从父类继承的属性。调用父类的构造方法要使用以下语…...

编程日记 2024/10/31 2:14:54

3D点云与2D图像的相互转换：2D图像对应像素的坐标转为3D空间的对应坐标

2d ----> 3d 对应像素到空间坐标的转换参考：深度相机，通过2d检测得到目标坐标系的3d检测框_深度图到相机坐标-CSDN博客...

编程日记 2024/10/31 2:13:53

查找算法简记

一、简单查找（顺序查找） 最基本的查找，相当于遍历，从头到尾一个一个找。二、二分查找 1、简述二分查找的输入是一个有序的元素列表。如果要查找的元素包含在列表中，二分查找返回其位置； 否则返回null。…...

编程日记 2024/10/31 2:10:47

算法竞赛（Python）-状态间的奇妙转移（动态规划）

文章目录一、初探动态规划1 拼图游戏（从搜索到动态规划）2 物流仓库——状态的转移二、状态的巧妙定义1 不同的状态和转移2 流浪猫的家——状态压缩与状态剪枝三转移方式的神奇优化1 运输计划——在转移中剪枝2 会议安排——在决策中剪枝三、经典的动…...

编程日记 2024/10/31 2:09:46

String.format() 用法详解

**String.format()详解示例：**import java.util.Date; /** String.format() 格式化 / public class format { /* 字符串占位符类型%s 字符串类型%c 字符类型%b 布尔类型%d 整数类型（十进制）%x 整数类型（十六进制）%o …...

编程日记 2024/10/31 2:08:45

es 常用命令(已亲测)

说明： elastic:1235 账号:密码 _isShare ： 字段 1、根据一个参数查询es curl -XGET -u elastic:1235 http://10.223.73.3:9200/catalog/_search \ -H Content-Type: application/json \ -d {"query":{"match":{"_isShar…...

编程日记 2024/10/31 2:06:43

RabbitMQ 高级特性——事务

文章目录前言事务配置事务管理器加上Transactional注解前言前面我们学习了 RabbitMQ 的延迟队列，通过延迟队列可以实现生产者生产的消息不是立即被消费者消费。那么这篇文章我们将来学习 RabbitMQ 的事务。事务 RabbitMQ 是基于 AMQP 协议实现的，…...

编程日记 2024/10/31 2:05:41

HCIP-HarmonyOS Application Developer V1.0 笔记（二）

类Web开发范式自定义组件基本用法自定义组件通过element引入到宿主页面。 Props自定义属性自定义属性支持类型 String，Number，Boolean，Array，Object。命名规范： 命名时禁止以on、、on:、grab:等保留关键字为开头…...

编程日记 2024/10/31 2:03:39

Qwen3.5-4B-Claude-Opus应用场景：企业内训材料自动提炼+考试题生成实践

Qwen3.5-4B-Claude-Opus应用场景：企业内训材料自动提炼考试题生成实践 1. 企业培训面临的挑战现代企业培训部门常常面临两大痛点：一是海量培训材料的整理提炼工作耗时费力，二是培训效果评估缺乏科学高效的考核手段。传统人工处理方式存在以…...

编程新知 2026/3/26 19:43:31

告别手动Dockerfile！io.fabric8插件如何用Maven配置自动生成镜像（附Spring Boot实战）

告别手动Dockerfile！io.fabric8插件如何用Maven配置自动生成镜像（附Spring Boot实战） 在Java生态中，容器化部署已成为现代应用交付的标准方式。传统做法要求开发者同时维护Dockerfile和构建脚本，这种割裂的配置方式不仅…...

编程新知 2026/3/26 18:30:37

从希腊字母到优化问题：用Overleaf搞定LaTeX数学公式的20个高阶技巧

从希腊字母到优化问题：用Overleaf搞定LaTeX数学公式的20个高阶技巧数学公式排版是LaTeX最强大的功能之一，但对于需要处理复杂数学内容的研究者和工程师来说，仅掌握基础语法远远不够。本文将分享20个经过实战验证的高阶技巧，帮助你…...

编程新知 2026/3/26 16:59:19

巨有科技智慧市集系统，数字化工具降本增效！

从城市商圈到景区古镇，从乡村田园到文创园区，各类市集遍地开花，但管理难题始终是制约行业发展的最大瓶颈。人工登记杂乱、对账结算繁琐、现场管控滞后、数据完全空白，一场中型市集就要耗费大量人力物力，大型市集更是纠…...

编程新知 2026/3/26 16:55:18

MATLAB App Designer实战：如何用按钮优雅终止死循环（附完整代码）

MATLAB App Designer实战：用按钮优雅控制循环的5个关键技巧在MATLAB App Designer开发中，循环控制是每个开发者都会遇到的经典问题。想象一下这样的场景：你精心设计的界面正在运行一个数据处理循环，突然发现参数设置有误&#xf…...

编程新知 2026/3/26 16:45:15

ESP32-C3开发环境搭建(VSCode+ESP-IDF)与串口占用疑难排查实战

1. ESP32-C3开发环境搭建全攻略第一次接触ESP32-C3开发板时，我和大多数开发者一样，被环境搭建这个"入门杀"折腾得够呛。特别是使用合宙经典款开发板时，USB转串口芯片带来的各种"惊喜"让人措手不及。这里分享一套经过实战…...

编程新知 2026/3/26 16:12:54

蛋白质设计实战：基于RFdiffusion的Motif Scaffolding功能位点定制化设计

1. 认识RFdiffusion与Motif Scaffolding 第一次接触蛋白质设计时，我被这个领域的复杂性震撼到了。20种氨基酸就像乐高积木，但它们的组合方式比宇宙中的星辰还要多。而RFdiffusion就像是一把神奇的钥匙，帮我打开了蛋白质设计的大门。 RFdiffus…...

编程新知 2026/3/26 15:58:51

async-http-client原生镜像大小优化：GraalVM裁剪终极指南 [特殊字符]

async-http-client原生镜像大小优化：GraalVM裁剪终极指南 🚀 【免费下载链接】async-http-client Asynchronous Http and WebSocket Client library for Java 项目地址: https://gitcode.com/gh_mirrors/as/async-http-client 在当今云原生和微服…...

编程新知 2026/3/26 15:07:57

共享文件是谁删除的？谁删了那个文件？一次“误删事件”背后的思考

上周，公司设计部的一位主管在准备客户提案时，突然发现关键素材文件夹不见了。那里面是整个团队近两周的工作成果——图片、方案、视频文件应有尽有。大家在共享目录里翻来覆去找了半天，最后只得到一个模糊的解释：“可能是谁误删了…...

编程新知 2026/3/26 15:01:56

终极指南：如何解决Cobalt Instagram下载失败问题 - 完整排查方案

终极指南：如何解决Cobalt Instagram下载失败问题 - 完整排查方案 Cobalt是一款强大的开源媒体下载工具，专为保存Instagram、YouTube、Twitter等平台的视频和图片而设计。然而，许多用户在使用Cobalt下载Instagram内容时经常遇到各种失败问题&…...

编程新知 2026/3/26 14:53:53

抢先观看：

页面内容：

脚本内容：

效果：

相关文章：