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

在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. 效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54985.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用shell实现高精度时间日志记录与时间跳变检测

文章目录 0. 概述1. 使用说明1.1. 参数说明1.2. 运行脚本 2. 脚本详细解析2.1. 参数初始化2.2. 参数解析与验证2.3 主循环条件2.4 时间跳变检测与处理2.5. 日志轮转机制2.6. 睡眠时间计算 0. 概述 之前写过单线程版本的高精度时间日志记录小程序&#xff1a;C编程&#xff1a;…

【LeetCode 算法笔记】164. 破解闯关密码

目录 问题描述冒泡排序 问题描述 问题来源 闯关游戏需要破解一组密码&#xff0c;闯关组给出的有关密码的线索是&#xff1a; 一个拥有密码所有元素的非负整数数组 password密码是 password 中所有元素拼接后得到的最小的一个数 请编写一个程序返回这个密码。 示例 1: 输入…

【linux】信号(下)

8. 阻塞信号 (一)信号其他相关常见概念 实际执行信号的处理动作称为信号递达(Delivery)信号从产生到递达之间的状态,称为信号未决(Pending)进程可以选择阻塞 (Block )某个信号被阻塞的信号产生时将保持在未决状态,直到进程解除对此信号的阻塞,才执行递达的动作(即被阻塞的信…

Vue中使px自动转化为rem配置(h5适配问题)

以下方法为px自动转换rem&#xff0c;顾名思义&#xff0c;配置完成后&#xff0c;不用再关心rem换算等等&#xff0c;只需按照设计稿的px值写入即可&#xff0c;当你保存后PostCSS插件会自动将px转换成所配置的rem值&#xff0c;并且你在浏览控制台观测界面时你会发现你在代码…

如何在阿里云一键部署FlowiseAI

什么是FlowiseAI FlowiseAI 是一个开源的低代码开发工具&#xff0c;专为开发者构建定制的语言学习模型&#xff08;LLM&#xff09;应用而设计。 通过其拖放式界面&#xff0c;用户可以轻松创建和管理AI驱动的交互式应用&#xff0c;如聊天机器人和数据分析工具。 它基于Lang…

c++速成之从string类中获取那些知识

温馨提示&#xff1a;本篇文章依旧是c速成系列的文章&#xff0c;因为从这里开始&#xff0c;内容就已经开始复杂&#xff0c;但博主还是以是什么&#xff0c;怎么用的原则继续给大家讲解知识点&#xff0c;希望大家能够耐心看完&#xff0c;并给博主留个三连&#xff0c;博主先…

Redis-缓存过期淘汰策略

缓存淘汰策略 生产上redis内存设置为多少 设置为最大内存的 3/4 redis 会占用物理机多少内存 默认大小是 0&#xff0c;64 位系统下表示不限制内存大小&#xff0c;32位系统表示 3G 如何设置修改redis内存大小 config get maxmemory 查看修改方式 配置文件 单位是字节 2.…

机器学习【金融风险与风口评估及其应用】

机器学习【金融风险与风口评估及其应用】 一、机器学习在金融风险评估中的应用1.提升评估准确性2.实现自动化和智能化3.增强风险管理能力4.信用评估5.风险模型6.交易策略7.欺诈检测 二、机器学习在金融风口评估中的应用1.识别市场趋势2.评估创新潜力3.优化投资策略4. 自然语言处…

深入Postman- 自动化篇

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

校车购票微信小程序的设计与实现(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…

Web前端高级工程师培训:封装自己的库

封装自己的库 课前准备 工具 编辑器 VSCode浏览器 Chorme 前置知识 Js基本知识 课堂主题 一、定义函数返还JQ对象 二、ready方法和原生节点处理 三、选择器器封装 四、封装JQ的eq方法 五、封装JQ的click方法 六、jQ中的链式操作 七、封装JQ的css方法 八、cssHooks扩…

软考《信息系统运行管理员》- 4.1信息系统软件运维概述

4.1信息系统软件运维概述 文章目录 4.1信息系统软件运维概述信息系统软件运维的概念信息系统软件的可维护性及维护类型对软件可维护性的度量可以从以下几个方面进行&#xff1a;软件维护分类&#xff1a; 信息系统软件运维的体系1.**需求驱动**2.**运维流程**3.**运维过程**4.*…

Vue 的 v-show 和 v-if 区别?

一、区别 v-show 和 v-if 是 Vue.js 中两种常用的指令&#xff0c;都可以用于控制元素的显示和隐藏&#xff0c;但它们有本质上的区别: 1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真&#xff0c;元素都会被渲染到 DOM中&#xff0c;只是通过…

斯坦福 CS229 I 机器学习 I 构建大型语言模型 (LLMs)

1. Pretraining -> GPT3 1.1. Task & loss 1.1.1. 训练 LLMs 时的关键点 对于 LLMs 的训练来说&#xff0c;Architecture&#xff08;架构&#xff09;、Training algorithm/loss&#xff08;训练算法/损失函数&#xff09;、Data&#xff08;数据&#xff09;、Evalu…

如何减少 Webpack 的打包体积

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Webpack,Threejs等还在整理中&#xff0c;在线地址前端面试题&#xff0c;源码地址大家多多支持才有动力给大家分享更多好的面试题。 减少 Webpack 的打包体积是优化 Web 应用性能的重要步骤&#xff0c;尤其是在生产环…

两种方式创建Vue项目

文章目录 引言利用Vue命令创建Vue项目准备工作安装Vue CLI创建Vue项目方法一&#xff1a;使用vue init命令方法二&#xff1a;使用vue create命令启动Vue项目 利用Vite工具创建Vue项目概述利用Vite创建项目启动项目 结语 引言 大家好&#xff0c;今天我将向大家展示如何使用不…

鸿蒙富文本显示

1.使用 RichText 组件&#xff08;ArkTS&#xff09; 背景知识&#xff1a;在 ArkTS&#xff08;一种鸿蒙应用开发语言&#xff09;中&#xff0c;RichText组件提供了更强大的富文本显示功能。它允许设置不同的文本样式&#xff0c;包括字体、颜色、字号等多种属性。 Rich Te…

uniapp 如何引用icon 字体

平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用&#xff0c;但有些情况可能不允许这么做&#xff0c;例如小程序与平常web开发中引入字体图标的方式不一样&#xff0c;必须先转为base64再引入&#xff0c;以下介绍iconfont字体转base64并引入使用…

【layui】多文件上传组件实现

插件预览效果&#xff1a; 需要引入layui的脚本文件layui.js和样式文件layui.css html代码&#xff1a; <div class"layui-input-block"><div class"layui-upload-list"><table class"layui-table"><colgroup><col…

easyexcel多sheet导出(唯一能用)

1&#xff0c;response流header, contentType等设置跟单sheet一样 2&#xff0c;上代码 Data public class SheetModel<T> { private String sheetName; private Class<T> clazz; private List<T> data; } ExcelWriter writer EasyExcel.write(resp.ge…