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

WebGl学习使用attribute变量绘制一个水平移动的点

news 2026/3/30 22:46:27

在WebGL编程中，attribute变量是一种特殊类型的变量，用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等，它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明，并且对于每个顶点来说都是独立的。

一、创建和使用attribute变量流程

  1. 在顶点着色器中声明attribute变量：attribute vec4 aPosition;

        // 顶点着色器源码const vertexShaderSource = `// attribute使用位置,只传递顶点着色器,不能在片元着色器中使用attribute vec4 aPosition;void main() {gl_Position = aPosition; gl_PointSize = 30.0;}`

  2. 获取attribute变量的存储地址：gl.getAttribLocation(program, 'aPosition');

    const program = initShader(gl, vertexShaderSource, fragmentShaderSource)// 获取attribute变量，必须在initShader之后使用，因为会用到program这个程序对象
// gl.getAttribLocation(program, name)； 
// 1.program:程序对象 
// 2.name:指定想要获取存储地址的attribute变量的名称
// 返回变量的存储地址const aPosition = gl.getAttribLocation(program, 'aPosition');

  3. 设置顶点属性的值：gl.vertexAttrib4f(location, v1, v2, v3,v4)  

    // gl.vertexAttrib4f(location, v1, v2, v3,v4)  
// v1, v2, v3,v4 分别代表 X, y, Z, W
// location:变量
// v1:第一个分量的值
// v2:第二个分量的值
// v3:第三个分量的值
// v4:第四个分量的值gl.vertexAttrib4f(aPosition, 0.5, 0.5, 0.0, 1.0)
// gl.vertexAttrib3f(aPosition, 0.5, 0.5, 0.0)
// gl.vertexAttrib2f(aPosition, 0.5, 0.5)
// gl.vertexAttrib1f(aPosition, 0.5)

  4. 绘制一个水平移动的点

    // 绘制一个水平移动的点
let x = 0;
setInterval(() => {x += 0.1if (x > 1.0) {x = 0;}// 设置顶点的值gl.vertexAttrib1f(aPosition, x)// 绘制点gl.drawArrays(gl.POINTS, 0, 1);
}, 200)

二、完整代码 

 1. html页面代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* {margin: 0;padding: 0;}</style><title>webgl三维坐标系</title>
</head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script src="./js/index.js"></script><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 顶点着色器源码const vertexShaderSource = `// attribute使用位置,只传递顶点着色器,不能在片元着色器中使用attribute vec4 aPosition;void main() {gl_Position = aPosition; gl_PointSize = 30.0;}`// 片源着色器源码const fragmentShaderSource = `void main() {gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a}`// 设置着色器封装后，直接使用const program = initShader(gl, vertexShaderSource, fragmentShaderSource)const aPosition = gl.getAttribLocation(program, 'aPosition');// 绘制一个水平移动的点let x = 0;setInterval(() => {x += 0.1if (x > 1.0) {x = 0;}gl.vertexAttrib1f(aPosition, x)// 绘制点gl.drawArrays(gl.POINTS, 0, 1);}, 200)</script>
</body></html>

2. index.js文件中的initShader方法代码如下：

function initShader() {const vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器对象const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器对象gl.shaderSource(vertexShader, vertexShaderSource);// 设置顶点着色器源代码gl.shaderSource(fragmentShader, fragmentShaderSource);// 设置片段着色器源代码gl.compileShader(vertexShader);// 编译顶点着色器gl.compileShader(fragmentShader);// 编译片段着色器// 创建一个程序对象const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);return program;
}

3. 效果如下：

相关文章：

WebGl学习使用attribute变量绘制一个水平移动的点

在WebGL编程中&#xff0c;attribute变量是一种特殊类型的变量&#xff0c;用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等&#xff0c;它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明&#xff0c;并且对于每个顶点来说都…...

编程日记 2024/10/13 10:38:23

机器学习四大框架详解及实战应用：PyTorch、TensorFlow、Keras、Scikit-learn

目录 框架概述PyTorch&#xff1a;灵活性与研究首选TensorFlow&#xff1a;谷歌加持的强大生态系统Keras&#xff1a;简洁明了的高层 APIScikit-learn&#xff1a;传统机器学习的必备工具实战案例 图像分类实战自然语言处理实战回归问题实战 各框架的对比总结选择合适的框架 1…...

编程日记 2024/10/13 10:35:20

linux源码安装slurm以及mung和openssl

一、源码安装munge 1、编译安装munge &#xff08;1&#xff09;下载munge地址&#xff1a;https://github.com/dun/munge/releases &#xff08;2&#xff09;解压编译安装&#xff1a; 1 2 3 4 5 6 7 8 创建/data目录 复制文件munge-0.5.15.tar.xz 到/data目录下 tar -Jx…...

编程日记 2024/10/13 10:34:19

分享蓝牙耳机A2DP音频卡顿原因及解决思路

背景 最近一直在更新博客&#xff0c;我觉得写博客有三个好处&#xff0c;一是很多东西时间久了就会忘&#xff0c;记下来方便自己以后回忆和总结&#xff0c;二是记下来可以加深自己对知识的理解&#xff0c;三是可以知识分享&#xff0c;方便他人。 言归正传&#xff0c;今天…...

编程日记 2024/10/13 10:31:16

Mac 下编译 libaom 源码教程

AV1 AV1是一种开放、免版税的视频编码格式&#xff0c;由开放媒体联盟&#xff08;AOMedia&#xff09;开发&#xff0c;旨在提供高压缩效率和优秀的视频质量。AV1支持多种分辨率&#xff0c;包括SD、HD、4K和8K&#xff0c;并适用于视频点播&#xff08;VOD&#xff09;、直播…...

编程日记 2024/10/13 10:30:14

【成品设计】基于Arduino平台的物联网智能灯

《基于Arduino平台的物联网智能灯》 整体功能&#xff1a; 这个任务中要求实现一个物联网智能灯。实际测试环境中要求设备能够自己创建一个热点&#xff0c;连接这个热点后能自动弹出控制界面&#xff08;强制门户&#xff09;。 功能点 基础功能 (60分) 要求作品至少有2个灯…...

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

安装和配置k8s可视化UI界面dashboard-1.20.6

安装和配置k8s可视化UI界面dashboard-1.20.6 1.环境规划2.初始化服务器1&#xff09;配置主机名2&#xff09;设置IP为静态IP3&#xff09;关闭selinux4&#xff09;配置主机hosts文件5&#xff09;配置服务器之间免密登录6&#xff09;关闭交换分区swap&#xff0c;提升性能7&…...

编程日记 2024/10/13 10:26:06

VLAN:虚拟局域网

VLAN:虚拟局域网 交换机和路由器协同工作后&#xff0c;将原先的一个广播域&#xff0c;逻辑上&#xff0c;切分为多个广播域。 第一步:创建VLAN [SW1]dispaly vlan 查询vlan VID&#xff08;VLAN ID&#xff09;:用来区分和标定不同的vlan 由12位二进制构成 范围: 0-4…...

编程日记 2024/10/13 10:25:04

利用可解释性技术增强制造质量预测模型

概述 论文地址&#xff1a;https://arxiv.org/abs/2403.18731 本研究提出了一种利用可解释性技术提高机器学习&#xff08;ML&#xff09;模型性能的方法。该方法已用于铣削质量预测&#xff0c;这一过程首先训练 ML 模型&#xff0c;然后使用可解释性技术识别不需要的特征并去…...

编程日记 2024/10/13 10:23:02

FlexMatch: Boosting Semi-Supervised Learning with Curriculum Pseudo Labeling

FlexMatch: Boosting Semi-Supervised Learning with Curriculum Pseudo Labeling 摘要：引言：背景3 flexMatch3.1 Curriculum Pseudo Labeling3.2 阈值预热3.3非线性映射函数实验4.1 主要结果4.2 ImageNet上的结果4.3收敛速度加速4.4 消融研究5 相关工作摘要： 最近提出的Fi…...

编程日记 2024/10/13 10:22:01

Spring Cloud 3.x 集成eureka快速入门Demo

1.什么是eureka&#xff1f; Eureka 由 Netflix 开发&#xff0c;是一种基于REST&#xff08;Representational State Transfer&#xff09;的服务&#xff0c;用于定位服务&#xff08;服务注册与发现&#xff09;&#xff0c;以实现中间层服务的负载均衡和故障转移&#xff…...

编程日记 2024/10/13 10:21:00

线性代数 矩阵

一、矩阵基础 1、定义 一组数按照矩形排列而成的数表&#xff1b;形似行列式&#xff0c;区别点是 矩阵行列式符号()或[]| |形状方阵或非方阵方阵本质数表数属性A|A|是A诸多属性中的一种维度m *n (m 与n可以相等也可以不相等)n*n 同型矩阵 若A、B两个矩阵都是mn 矩阵&#x…...

编程日记 2024/10/13 10:15:52

【C语言】使用结构体实现位段

文章目录 一、什么是位段二、位段的内存分配1.位段内存分配规则练习1练习2 三、位段的跨平台问题四、位段的应用五、位段使用的注意事项 一、什么是位段 在上一节中我们讲解了结构体&#xff0c;而位段的声明和结构是类似的&#xff0c;它们有两个不同之处&#xff0c;如下&…...

编程日记 2024/10/13 10:13:50

univer实现excel协同

快速入门 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><script src&q…...

编程日记 2024/10/13 10:12:49

JavaScript进阶笔记--深入对象-内置构造函数及案例

深入对象 创建对象三种方式 利用对象字面量new Object&#xff08;{…}&#xff09;利用构造函数 // 1. 字面量创建对象const obj1 {name: pig,age: 18};console.log(obj1); // {name: "pig", age: 18}// 2. 构造函数创建对象function Pig(name, age) {this.name…...

编程日记 2024/10/13 10:09:46

网络爬虫自动化Selenium模拟用户操作

自动化测试和网络爬虫在现代软件开发中占据着重要的位置。它们通过自动化用户操作，减少了人工重复操作的时间成本。Selenium作为一个功能强大且应用广泛的自动化工具，不仅能在不同的浏览器中运行自动化测试，还能进行跨平台测试，并允许与多种编程语言集成。本教程将介绍如何…...

编程日记 2024/10/13 10:05:42

尚硅谷rabbitmq 2024 流式队列2024指定偏移量 第55节答疑

rabbitmq的stream&#xff1a; 4、对比 autoTrackingstrategy方式:始终监听Stream中的新消息(狗狗看家&#xff0c;忠于职守)指定偏移量方式:针对指定偏移量的消息消费之后就停止(狗狗叼飞盘&#xff0c;回来就完) 这两种分别怎么写&#xff1f;java 在 RabbitMQ 中&#xff0c…...

编程日记 2024/10/13 10:02:39

NSSCTF-WEB-pklovecloud

目录 前言 正文 思路 尝试 结尾 前言 许久未见,甚是想念. 今天来解一道有意思的序列化题 正文 思路 <?php include flag.php; class pkshow {function echo_name(){return "Pk very safe^.^";} }class acp {protected $cinder;public $neutron;public $…...

编程日记 2024/10/13 10:01:38

深入Postman- 自动化篇

前言 在前两篇博文《Postman使用 - 基础篇》《玩转Postman：进阶篇》中，我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能，给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上，Postman 也能进行良好的支…...

编程日记 2024/10/13 9:59:34

react-JSX

JSX理念 jsx在编译的时候会被babel编译为react.createELement方法 在使用jsx的文件中&#xff0c;需要引入react。import React from "react" jsx会被编译为React.createElement,所有jsx的运行结果都是react element React Component 在react中&#xff0c;常使用…...

编程日记 2024/10/13 9:58:33

Legacy-iOS-Kit系统降级全指南：让老旧iOS设备重获新生

Legacy-iOS-Kit系统降级全指南&#xff1a;让老旧iOS设备重获新生 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 一、问…...

编程新知 2026/3/30 22:46:02

【项目实战】ESP8266 WiFi模块从零接入物联网 - 硬件连接、固件烧录与云端通信

1. ESP8266 WiFi模块入门指南 第一次拿到ESP8266这个小玩意儿时&#xff0c;我完全没想到它能在物联网领域掀起这么大风浪。这个比硬币大不了多少的模块&#xff0c;内置了完整的WiFi功能&#xff0c;价格还不到一杯奶茶钱。记得去年帮学弟调试毕业设计时&#xff0c;我们用ESP…...

编程新知 2026/3/30 21:59:33

从权重计分到算杀引擎：五子棋AI核心算法实战解析

1. 五子棋AI的算法演进&#xff1a;从基础评分到算杀引擎 五子棋作为一款经典策略游戏&#xff0c;其AI算法的核心在于如何评估棋盘局势并做出最优决策。早期AI主要依赖简单的评分机制&#xff0c;比如给不同的棋形&#xff08;活二、活三、冲四等&#xff09;赋予固定分值&…...

编程新知 2026/3/30 21:10:56

TresJS实战指南：Vue 3D场景开发从入门到精通

1. TresJS基础入门&#xff1a;从零搭建3D场景 第一次接触TresJS时&#xff0c;我完全被它的简洁性震惊了。作为一个基于Three.js的Vue组件库&#xff0c;它让3D开发变得像写普通Vue组件一样自然。先来看个最简单的例子&#xff1a; <template><TresCanvas><Tre…...

编程新知 2026/3/30 20:30:37

OpenClaw节日应用：GLM-4.7-Flash驱动春节祝福邮件批量定制与发送

OpenClaw节日应用&#xff1a;GLM-4.7-Flash驱动春节祝福邮件批量定制与发送 1. 为什么需要自动化节日邮件&#xff1f; 每年春节前&#xff0c;我都会陷入同样的困境——需要给200多位合作伙伴发送祝福邮件。手动操作意味着&#xff1a;反复复制粘贴内容、检查收件人姓名、调…...

编程新知 2026/3/30 19:56:22

使用Python运行VirtualLab Fusion光学仿真

摘要 VirtualLab Fusion允许Python外部访问其建模技术、求解器和结果。这个用例介绍了一种使用路径变量和Visual Studio代码将Python连接到VirtualLab Fusion的简单方法。在本示例中&#xff0c;我们将演示如何使用Python脚本运行光学仿真&#xff0c;以向用户简要概述这种跨…...

编程新知 2026/3/30 19:01:01

Qwen3-ForcedAligner-0.6B低延迟实时处理能力展示

Qwen3-ForcedAligner-0.6B低延迟实时处理能力展示 如果你正在寻找一个能快速、精准地为语音和文字“打上时间标签”的工具&#xff0c;那么Qwen3-ForcedAligner-0.6B绝对值得你花几分钟了解一下。想象一下&#xff0c;一段长达5分钟的演讲音频&#xff0c;你需要精确知道每个词…...

编程新知 2026/3/30 18:00:33

Splitting.js终极指南：深度解析网页文本动画的魔法引擎

Splitting.js终极指南&#xff1a;深度解析网页文本动画的魔法引擎 【免费下载链接】Splitting JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables! 项目地址: https://gitcode.com/gh_mirrors/sp/Splitt…...

编程新知 2026/3/30 17:07:56

SD 协议

1、SD 协议科普 SD 协议的全称是 Secure Digital (SD) Interface Protocol&#xff0c;它是由 SD 协会&#xff08;SDA&#xff0c;Secure Digital Association&#xff09; 制定的一套标准。 eMMC、SD、SDIO 的关系&#xff1a; SD 卡的协议最初是基于 MMC&#xff08;MultiM…...

编程新知 2026/3/30 16:55:45

5个超实用技巧：用Awesome Adb实现手机调试效率倍增

5个超实用技巧&#xff1a;用Awesome Adb实现手机调试效率倍增 【免费下载链接】awesome-adb ADB Usage Complete / ADB 用法大全 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-adb 副标题&#xff1a;告别繁琐操作&#xff0c;让Android设备管理效率提升10倍 …...

编程新知 2026/3/30 16:35:23