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

webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix

news 2026/2/9 1:35:15

我会持续更新关于wegl的编程指南中的代码。

当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

git代码地址 ：git

接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h3>可以按下按键ADSW</h3><p>旋转的角度：<span id="num"></span></p><canvas id='canvas'></canvas><script>let canvas = document.getElementById('canvas');let gl = canvas.getContext('webgl');let vertexShaderSource = `attribute vec4 a_Position;uniform mat4 u_mat4; void main(){gl_Position=u_mat4*a_Position;}`let fragmentShaderSouce = `precision mediump float;void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`// 创建顶点着色器let vertexShader = gl.createShader(gl.VERTEX_SHADER);// 设置着色器源代码gl.shaderSource(vertexShader, vertexShaderSource);// 编译着色器gl.compileShader(vertexShader);// 创建片元着色器let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 设置着色器源代码gl.shaderSource(fragmentShader, fragmentShaderSouce);// 编译着色器gl.compileShader(fragmentShader)//创建渲染程序let program = gl.createProgram();// 附着顶点着色器和片元着色器到渲染程序gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);//使用当前渲染程序gl.useProgram(program)// 检测着色器链接是否正确if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {throw gl.getProgramInfoLog(program);} // 旋转角度let rotateX = 0.0;let rotateY = 0;// 三角形的顶点let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])// 获取顶点着色器中变量a_Position的存储位置let a_Position = gl.getAttribLocation(program, 'a_Position');// 激活顶点着色器中变量u_mat4的存储位置let u_mat4 = gl.getUniformLocation(program, 'u_mat4');// 创建buffer对象let buffer = gl.createBuffer();// 绑定buffer对象gl.bindBuffer(gl.ARRAY_BUFFER, buffer)// 向buffer中写入数据gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)// 设置attribute变量a_Position的值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)// 启用attribute变量a_Positiongl.enableVertexAttribArray(a_Position);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);const render = function () {// 计算角度let cos = Math.cos(Math.PI*rotateX/180.0);let sin = Math.sin(Math.PI*rotateX/180.0);// 计算旋转矩阵let mate4=new Float32Array([cos,sin,0.0,0.0,-sin,cos,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,])// 设置旋转矩阵gl.uniformMatrix4fv(u_mat4, false, mate4)// 清除画布gl.clear(gl.COLOR_BUFFER_BIT);// 绘制图形gl.drawArrays(gl.TRIANGLES, 0, 3)// 更新角度setNumer()}render()document.onkeydown = function (e) {    //对整个页面监听  var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  //判断如果用户按下了回车键（keycody=13）  if (keyNum == 65) {console.log('A');rotateX -= 1; rotateY=0render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 68) {console.log('D');rotateX +=1; rotateY=0render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 83) {console.log('S');rotateY -= 1; rotateX=0render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 87) {console.log('W');rotateY += 1; rotateX=0render();}}function setNumer (){let text = document.getElementById('num');text.innerText = `rotateX:${ rotateX}`} </script>
</body></html>

相关文章：

webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 &#xff1a;git 接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加&#xff0c;同时传递个给相…...

编程日记 2023/10/22 7:26:35

【常用的Git命令】

Git是一个版本控制系统&#xff0c;它拥有众多的命令。以下是一些常用的Git命令&#xff1a; 配置相关命令: git config --global user.name "Your Name"&#xff1a;设置用户姓名git config --global user.email "youremailexample.com"&#xff1a;设置用…...

编程日记 2023/10/22 7:25:34

cnn 直线检测笔记

目录 mlsd直线检测： ULSD-ISPRS曲线检测 划线标注工具： 可视化标注代码： mlsd直线检测： mlsd_pytorch...

编程日记 2023/10/22 7:23:32

【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me!

【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me! strings language_fundamentals Instructions Write a function that returns the string "something" joined with a space " " and the given argument a. Examples giveMeSomething(“is bett…...

编程日记 2023/10/22 7:22:31

【Redis】数据结构之dict

目录 dict的基本结构dict的相关操作函数底层通用的之查找插入key-value对应该放入ht表的哪个槽rehash过程 dict的基本结构 typedef struct dict {dictType *type;void *privdata;dictht ht[2];long rehashidx; /* rehashing not in progress if rehashidx -1 */unsigned long…...

编程日记 2023/10/22 7:21:30

curl命令服务器上执行http请求

1. 现在本地使用postman生成curl命令 注意: 将ip改成127.0.0.1,端口是实际服务运行的端口 curl --location --request POST http://127.0.0.1:63040/content/course/list?pageNo1&pageSize2 \ --header Content-Type: application/json \ --data-raw {"courseName&q…...

编程日记 2023/10/22 7:20:29

图论03-【无权无向】-图的深度优先遍历-路径问题/检测环/二分图

文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 路径问题的优化-提前结束递归4.1 思路4.2 主要代码 5. 检测环5.1 思路5.2 主要代码 5. 二分图5.1 思路5.2 主要代码5.2.1 遍历每个联通分量5.2.2 递归判断相邻两点的颜色是否一致…...

编程日记 2023/10/22 7:19:28

算法题java

一、四向链表&#xff0c;输入n生成一个多维4向链表 Datastatic class ListNode<T>{private T val;ListNode<T> up,down,left,right;public ListNode(T val){this.val val;}}public static void main(String[] args){ListNode<Integer> node getResult(8);…...

编程日记 2023/10/22 7:18:27

MySQL数据的基础语法

MySQL 是一种强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它使用 SQL&#xff08;Structured Query Language&#xff09;来管理和操作数据。以下是 MySQL 数据库的基础 SQL 语法&#xff0c;包括创建数据库、创建表、插入、查询、更新和删除数据等基…...

编程日记 2023/10/22 7:17:26

阿里面试（持续更新）

一面&#xff1a; 1 HashMap 实现原理&#xff0c;ConcurrentHashMap 实现原理 HashMap和ConcurrentHashMap都是存储键值对的数据结构&#xff0c;不同的是HashMap是线程不安全的&#xff0c;ConcurrentHashMap是线程安全的&#xff0c;HashMap在高并发情况下会出现数据不一致…...

编程日记 2023/10/22 7:16:25

龙芯3A3000源码编译安装deepin-ide

安装环境 系统为统信专业版1050 CPU为龙芯3A3000 安装步骤 1.安装所有依赖库 sudo apt-get install git debhelper cmake qt5-qmake qtbase5-dev qttools5-dev qttools5-dev-tools lxqt-build-tools libssl-dev llvm llvm-dev libclang-dev libutf8proc-dev libmicrohttpd-d…...

编程日记 2023/10/22 7:13:23

学成在线第二天-查询课程、查询课程分类、新增课程接口实现以及跨域的处理思路和全局异常处理的使用以及面试题

目录 一、接口的实现 二、跨域的处理思路 三、全局异常处理 四、面试题 五、总结 一、接口的实现 1. 查询课程接口 思路&#xff1a; 典型的分页查询 按需查询 模糊查询的查询 controller&#xff1a; ApiOperation(value "课程列表", notes "课程…...

编程日记 2023/10/22 7:12:22

【OpenCV概念】 11— 对象检测

一、说明 这都是关于物体识别的。物体识别是指通过计算机视觉技术&#xff0c;自动识别图像或视频中的物体及其属性和特征&#xff0c;是人工智能领域的一个分支。物体识别可应用于多个领域&#xff0c;包括工业自动化、智能家居、医疗、安防等。请随时阅读这篇文章&#xff1a…...

编程日记 2023/10/22 7:11:21

TensorRT学习笔记--常用卷积、激活、池化和FC层算子API

目录 1--Tensor算子API 1-1--卷积算子 1-2--激活算子 1-3--池化算子 1-4--FC层算子 2--代码实例 3--编译运行 1--Tensor算子API TensorRT提供了卷积层、激活函数和池化层三种最常用算子的API&#xff1a; // 创建一个空的网络 nvinfer1::INetworkDefinition* network …...

编程日记 2023/10/22 7:10:19

【Edabit 算法 ★☆☆☆☆☆】 Less Than 100?

【Edabit 算法 ★☆☆☆☆☆】 Less Than 100? language_fundamentals math validation Instructions Given two numbers, return true if the sum of both numbers is less than 100. Otherwise return false. Examples lessThan100(22, 15) // true // 22 15 37lessTha…...

编程日记 2023/10/22 7:09:18

C++中的智能指针：更安全、更便利的内存管理

在C++编程中，动态内存管理一直是一个重要且具有挑战性的任务。传统的C++中，程序员需要手动分配和释放内存，这往往会导致内存泄漏和悬挂指针等严重问题。为了解决这些问题，C++11引入了智能指针（Smart Pointers）这一概念，它们是一种高级的内存管理工具，可以自动管理内存的…...

编程日记 2023/10/22 7:08:18

google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理

1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 k8s dashboard ui安装完毕后&#xff0c;通过google浏览器登录返现https网页&#xff0c;发现非官方的https网页无法打开 网址&#xff1a;https://192.168.10.236:31001 2.原…...

编程日记 2023/10/22 7:07:15

MIPS指令集摘要

目录 MIPS指令R I J三种格式 MIPS五种寻址方式 立即数寻址 寄存器寻址 基址寻址 PC相对寻址 伪直接寻址 WinMIPS64汇编指令 助记 从内存中加载数据 lb lbu lh lhu lw lwu ld l.d lui 存储数据到内存 sb sh sw sd s.d 算术运算 daddi daddui dadd…...

编程日记 2023/10/22 7:06:14

数据可视化素材分享 | 数十图表、无数模板

很多人在后台求分享报表、源代码&#xff0c;其实何必这么麻烦&#xff0c;在奥威BI数据可视化平台上点击即可获得大量的可视化素材&#xff0c;如数十种可视化图表&#xff0c;适用于不同分析场景&#xff1b;又如大量不同主题的BI数据可视化报表模板&#xff0c;套用后替换数…...

编程日记 2023/10/22 7:05:13

Hadoop3教程（三十二）：（生产调优篇）NameNode故障恢复与集群的安全模式

文章目录 &#xff08;159&#xff09;NameNode故障处理&#xff08;160&#xff09;集群安全模式&磁盘修复集群安全模式磁盘修复等待安全模式 参考文献 &#xff08;159&#xff09;NameNode故障处理 如果NameNode进程挂了并且存储的数据也丢失了&#xff0c;如何恢复Nam…...

编程日记 2023/10/22 7:04:11

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/1/25 16:39:17

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17