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

webGlL变量的声明与使用

news 2025/8/29 18:33:57

抢先观看：

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

        存储限定符：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变量的声明与使用

抢先观看&#xff1a; 变量的声明格式&#xff1a;<存储限定符><类型限定符><变量名> 存储限定符&#xff1a;const, attribute, uniform, varying, buffer。 类型限定符&#xff1a;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

中间件安全（三）

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

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

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

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

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

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

MyBatis的SQL执行过程 在前面一系列的文档中&#xff0c;我已经分析了 MyBatis 的基础支持层以及整个的初始化过程&#xff0c;此时 MyBatis 已经处于就绪状态了&#xff0c;等待使用者发号施令了 那么接下来我们来看看它执行SQL的整个过程&#xff0c;该过程比较复杂&#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个小妙招，视频转文字轻松解决！

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

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

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

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

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

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

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

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

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

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

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

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

#1024程序员节&#xff5c;征文# 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&#xff08;VB&#xff09;中&#xff0c;创建和使用自定义控件是一个高级功能&#xff0c;它允许开发者根据特定需求创建具有独特行为和外观的控件。以下是在VB中创建和使用自定义控件的一般步骤&#xff1a; 一、创建自定义控件 打开VB开发环境&#xff1a; …...

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

Java继承的super关键字

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

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

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

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

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

查找算法简记

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

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

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

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

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

String.format() 用法详解

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

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

es 常用命令(已亲测)

说明&#xff1a; elastic:1235 账号:密码 _isShare &#xff1a; 字段 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 的延迟队列&#xff0c;通过延迟队列可以实现生产者生产的消息不是立即被消费者消费。那么这篇文章我们将来学习 RabbitMQ 的事务。 事务 RabbitMQ 是基于 AMQP 协议实现的&#xff0c;…...

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

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

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

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

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/8/22 3:26:22

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/8/19 6:29:21

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/8/19 20:28:20

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/8/27 15:45:32

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/8/1 4:58:46

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2025/8/25 9:31:21

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/8/23 1:07:32

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25