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

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

news 2026/5/17 22:29:52

在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

用Logisim搞定Educoder交通灯实训：从数码管驱动到状态机集成的保姆级避坑指南

用Logisim征服Educoder交通灯实训&#xff1a;从零搭建到联调的全链路实战手册 第一次打开Educoder平台的交通灯实训项目时&#xff0c;我盯着那些闪烁的数码管和错综复杂的线路图&#xff0c;感觉像在破解某种外星密码。三小时后&#xff0c;当我的第一个状态机模块终于通过测…...

编程新知 2026/5/17 10:42:03

3倍效率提升：Gofile批量下载工具实战指南

3倍效率提升&#xff1a;Gofile批量下载工具实战指南 【免费下载链接】gofile-downloader Download files from https://gofile.io 项目地址: https://gitcode.com/gh_mirrors/go/gofile-downloader 您是否曾为Gofile平台的文件下载效率低下而烦恼&#xff1f;当面对大文…...

编程新知 2026/5/17 8:41:31

GitClaw：基于Go的轻量级Git钩子服务器与集中式权限管理方案

1. 项目概述与核心价值如果你是一名开发者&#xff0c;尤其是经常在团队协作中处理Git仓库的工程师&#xff0c;那么你一定对“权限管理”这四个字又爱又恨。爱的是它能保障代码安全&#xff0c;恨的是它配置起来繁琐&#xff0c;尤其是在处理跨项目、跨团队的复杂权限矩阵时。…...

编程新知 2026/5/17 7:11:58

从零构建Go Web框架：解析the0极简框架的设计原理与实现

1. 项目概述&#xff1a;一个极简主义Web框架的诞生在Web开发的世界里&#xff0c;我们常常面临一个选择&#xff1a;是拥抱功能齐全但略显臃肿的“巨无霸”框架&#xff0c;还是追求极致轻量与灵活的自定义方案&#xff1f;对于许多追求性能、热爱掌控感&#xff0c;或是需要构…...

编程新知 2026/5/17 6:27:39

天学网口碑好不好？2026年最新用户实测反馈给你答案

作为深耕教育数字化落地领域5年的从业者&#xff0c;最近后台收到不少公立校电教组老师、学生家长的提问&#xff1a;主打AI英语教学的天学网口碑到底怎么样&#xff1f;刚好我们团队刚做完2026年第一季度的英语教育数字化工具落地效果调研&#xff0c;结合一手实测数据给大家客…...

编程新知 2026/5/17 5:46:28

认识Python数据包套接字

如你所知&#xff0c;数据包格式套接字&#xff08;Datagram Sockets&#xff09;也叫“无连接的套接字”&#xff0c;在代码中使用 SOCK_DGRAM 表示。可以将 SOCK_DGRAM 比喻成高速移动的摩托车快递&#xff0c;它有以下特征&#xff1a;强调快速传输而非传输顺序&#xff1b;…...

编程新知 2026/5/17 5:23:25

OCT-X算法：早期胃癌AI检测的技术突破与应用

1. OCT-X算法&#xff1a;早期胃癌AI检测的技术突破在医疗影像分析领域&#xff0c;胃癌早期检测一直面临着巨大挑战。传统内窥镜检查依赖医生经验判断&#xff0c;存在主观性强、漏诊率高等问题。我们团队开发的OCT-X&#xff08;One Class Twin Cross Learning&#xff09;算…...

编程新知 2026/5/17 4:53:45

知乎API完全指南：用Python轻松获取知乎数据的5个核心技巧

知乎API完全指南&#xff1a;用Python轻松获取知乎数据的5个核心技巧 【免费下载链接】zhihu-api Zhihu API for Humans 项目地址: https://gitcode.com/gh_mirrors/zh/zhihu-api 在当今数据驱动的时代&#xff0c;知乎数据采集和Python API开发已成为获取高质量中文知识…...

编程新知 2026/5/17 4:22:38

PyTorch实战：手把手教你实现DCNv2可变形卷积（附完整代码与避坑指南）

PyTorch实战&#xff1a;手把手教你实现DCNv2可变形卷积&#xff08;附完整代码与避坑指南&#xff09; 当你在处理计算机视觉任务时&#xff0c;是否遇到过这样的困扰&#xff1a;传统卷积神经网络对物体几何变换的适应性有限&#xff0c;导致模型在复杂场景下的表现不尽如人意…...

编程新知 2026/5/17 1:31:06

ElevenLabs菲律宾语语音突然变卡顿？紧急排查清单：DNS劫持、Token过期、区域节点错配（含curl诊断脚本）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs菲律宾语语音突然变卡顿&#xff1f;紧急排查清单&#xff1a;DNS劫持、Token过期、区域节点错配&#xff08;含curl诊断脚本&#xff09; 当ElevenLabs API在调用菲律宾语&#xff08;fil-P…...

编程新知 2026/5/17 1:24:25