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

webGlL变量的声明与使用

news 2026/1/15 10:27:45

抢先观看：

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

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

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2026/1/14 17:11:04

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...

编程新知 2026/1/15 3:58:15

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置项目背景高速网络拓扑网络情况分析通信线路收费网络路由收费汇聚交换机相应配置收费汇聚track配置项目背景在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...

编程新知 2026/1/15 5:01:49

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南：计算机基础与源码原理深度解析第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...

编程新知 2025/12/9 14:22:07

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

MySQL 部分重点知识篇

一、数据库对象 1. 主键定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。作用 ：确保数据的完整性，便于数据的查询和管理。示例 ：在学生信息表中，学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...

编程新知 2026/1/14 20:47:32

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接：【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2026/1/15 5:23:29

抢先观看：

页面内容：

脚本内容：

效果：

相关文章：