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

webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html

news 2026/2/9 21:39:38

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

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

git代码地址 ：git

本篇文章将把旋转和平位移结合起来，因为矩阵的不存在交换法则

文章中设计的矩阵地址在这里​​​​​​

<!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><script src="../tool/cuon-matrix.js"></script>
</head><body><h1>先平移再旋转</h1><h3>可以按下按键ADSW</h3><P id="rotate"></P><P id="translate"></P><canvas id='canvas'></canvas><script>let canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;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 mate4 = new Matrix4()//旋转的角度let rotateX = 0.0;//位移的y轴的变量let translateY = 0.0;//创建三角形let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])//获取变量a_Positionlet a_Position = gl.getAttribLocation(program, 'a_Position');//获取变量u_mat4let u_mat4 = gl.getUniformLocation(program, 'u_mat4');// 创建传冲区let buffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, buffer);//目标传冲去赋值gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);//将a_Position变量与目标传冲区进行绑定gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);//开启a_Position变量gl.enableVertexAttribArray(a_Position);// Clear 颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);const render = function () {//对矩阵及逆行位移mate4.setTranslate(0,translateY,0);//对矩阵进行旋转mate4.rotate(rotateX,0,0,1);//矩阵赋值gl.uniformMatrix4fv(u_mat4, false, mate4.elements);//清空gl.clear(gl.COLOR_BUFFER_BIT);//绘制gl.drawArrays(gl.TRIANGLES, 0, 3)setNum()}render()document.onkeydown = function (e) {    //对整个页面监听  var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  //判断如果用户按下了回车键（keycody=13）  if (keyNum == 65) {console.log('A');rotateX -= 1;  render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 68) {console.log('D');rotateX +=1;  render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 83) {console.log('S'); translateY-=0.1render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 87) {console.log('W'); translateY+=0.1render();}}function setNum(){let rotate = document.getElementById("rotate");let translate = document.getElementById("translate");rotate.innerText =  `旋转的角度：${rotateX}`translate.innerText = `平移的距离：${translateY}`}</script>
</body></html>

相关文章：

webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 &#xff1a;git 本篇文章将把旋转和平位移结合起来&#xff0c;因为矩阵的不存在交换法则 文章中设计的矩阵地址在这里​…...

编程日记 2023/10/25 18:18:44

使用canvas实现时间轴上滑块的各种常用操作（仅供参考）

一、简介 使用canvas&#xff0c;模拟绘制时间轴区域&#xff0c;有时间刻度标尺&#xff0c;时间轴区域上会有多行&#xff0c;每行都有一个滑块。 1、时间刻度标尺可以拖动&#xff0c;会自动对齐整数点秒数&#xff0c;最小步数为0.1秒。 2、滑块可以自由拖动&#xff0c…...

编程日记 2023/10/25 18:17:44

Netty优化-扩展自定义协议中的序列化算法

Netty优化-扩展自定义协议中的序列化算法 一. 优化与源码1. 优化1.1 扩展自定义协议中的序列化算法 一. 优化与源码 1. 优化 1.1 扩展自定义协议中的序列化算法 序列化&#xff0c;反序列化主要用在消息正文的转换上 序列化时&#xff0c;需要将 Java 对象变为要传输的数据…...

编程日记 2023/10/25 18:16:42

【Java网络编程】二

本文主要介绍了传输层的UDP协议和TCP协议&#xff0c;以及在Java中如何通过Socket套接字实现网络编程&#xff08;内附UDP和TCP版本的回显服务器代码&#xff09; 一.网络通信 网络编程&#xff0c;就是写一个应用程序&#xff0c;让这个程序可以使用网络通信&#xff0c;这里就…...

编程日记 2023/10/25 18:15:42

通过IP地址可以做什么

通过IP地址可以做很多事情&#xff0c;因为它是互联网通信的基础之一。本文将探讨IP地址的定义、用途以及一些可能的应用。 IP地址的用途 1. 设备标识&#xff1a;IP地址用于标识互联网上的每个设备&#xff0c;这包括计算机、服务器、路由器、智能手机等。它类似于我们日常生…...

编程日记 2023/10/25 18:14:41

前端 CSS 经典：clip、clip-path

1. clip 1.1 clip: auto | inherit | rect auto&#xff1a;默认&#xff0c;不裁剪 inherit&#xff1a;继承父级 clip 属性 rect&#xff1a;规则四边形裁剪 1.2 clip: rect(top, right, bottom, left) 注意&#xff1a; 1.裁剪只对 fixed 和 absolute 的元素有效。 2.top&…...

编程日记 2023/10/25 18:13:40

android 如何判断已配对的蓝牙是否打开了互联网访问开关

最近遇到一个需求&#xff0c;要判断已配对的蓝牙是否打开了互联网访问的开关。 经查看源码&#xff0c;得出以下方法。 1. 首先要判断蓝牙是否打开 2. 已打开的蓝牙是否已配对 3. 验证是否真正打开 /*** 是否打开蓝牙互联网访问*/SuppressLint("MissingPermission&quo…...

编程日记 2023/10/25 18:12:39

在Linux上实现ECAT主站

在Linux上实现ECAT主站 引言介绍EtherCATSOEM 使用下载ECAT主站编译 引言 EtherCAT由一个主站设备和多个从站设备组成。主站设备使用标准的以太网控制器&#xff0c;具有良好的兼容性&#xff0c;任何具有网络接口卡的计算机和具有以太网控制的嵌入式设备都可以作为EtherCAT的…...

编程日记 2023/10/25 18:11:38

Spring Cloud之服务熔断与降级（Hystrix）

目录 Hystrix 概念 作用 服务降级 简介 使用场景 接口降级 服务端服务降级 1.添加依赖 2.定义接口 3.实现接口 4.Controller类使用 5.启动类添加注释 6.浏览器访问 客户端服务降级 1.添加依赖 2.application.yml 中添加配置 3.定义接口 4.Controller类使用 …...

编程日记 2023/10/25 18:10:36

HashMap 哈希碰撞、负载因子、插入方式、扩容倍数

HashMap 怎么解决的哈希碰撞问题&#xff1f; 主要采用了链地址法。具体来说&#xff1a; 每个哈希桶不仅存储一个键-值对&#xff0c;而是存储一个链表或树结构。这样&#xff0c;具有相同哈希值的键-值对可以被存储在同一个哈希桶中&#xff0c;并通过链表或树结构来解决碰…...

编程日记 2023/10/25 18:09:35

【Unity3D】Unity与Android交互

1 Unity 发布 apk 1.1 安装 Android Build Support 在 Unity Hub 中打开添加模块窗口&#xff0c;操作如下。 选择 Android Build Support 安装&#xff0c;如下&#xff08;笔者这里已安装过&#xff09;。 创建一个 Unity 项目&#xff0c;依次点击【File→Build Settings→…...

编程日记 2023/10/25 18:08:34

信号去噪算法

引言 在实际世界中&#xff0c;我们所获得的信号通常都包含了各种干扰和噪音。这些噪音可能来自电子设备、环境条件或传感器本身&#xff0c;它们会损害信号的质量&#xff0c;降低信息提取的准确性。因此&#xff0c;信号去噪和降噪技术在科学、工程和医学领域中扮演着至关重…...

编程日记 2023/10/25 18:07:33

GPT带我学-设计模式-10观察者模式

1 请你介绍一下观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种设计模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象&#xff08;被观察者&#xff09;的状态发生改变时&#xff0c;所有依赖于它的对象&#xff08;观察者&…...

编程日记 2023/10/25 18:06:32

JDK - 常用的设计模式

单例模式 &#xff1a; Runtime 类&#xff1a;Java 运行时环境是单例的&#xff0c;可以通过 Runtime.getRuntime() 方法获得实例。Calendar 类&#xff1a;Calendar.getInstance() 方法返回的是一个单例的 Calendar 实例。数据源连接池&#xff1a;连接池的管理通常采用单例模…...

编程日记 2023/10/25 18:03:29

华为OD机考算法题：寻找最大价值的矿堆

题目部分 题目寻找最大价值的矿堆难度难题目说明给你一个由 0&#xff08;空地&#xff09;、1&#xff08;银矿&#xff09;、2&#xff08;金矿&#xff09;组成的的地图&#xff0c;矿堆只能由上下左右相邻的金矿或银矿连接形成。超出地图范围可以认为是空地。 假设银矿价值…...

编程日记 2023/10/25 18:02:27

wf-docker集群搭建（未完结）

系列文章目录 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、redis集群二、mysql集群三、nacos集群1. 环境要求2. 拉取镜像2.1. 拉取镜像方式配置集群2.2. 自定义nacos镜像配置集群 3 自定义…...

编程日记 2023/10/25 18:01:27

uni-app 在 APP 端的版本强制更新与热更新

整包更新与热更新的区别 ① 整包更新是指下载完整 apk 文件进行覆盖安装 ② 热更新是指把 app 有改动的地方打包进 wgt 文件&#xff0c;只更新 wgt 文件中的内容&#xff0c;不进行整包安装&#xff0c;在用户视角也叫做省流量更新 版本号规则约束 建议严格遵循 Semantic …...

编程日记 2023/10/25 18:00:26

实在智能受邀参加第14届珠中江数字化应用大会，AI赋能智能制造，共话“湾区经验”

制造业是实体经济的主体&#xff0c;是技术创新的主战场&#xff0c;是供给侧结构性改革的重要领域。抢占新一轮产业竞争制高点&#xff0c;制造业的数字化转型已成为行业升级的必由之路。 10月21日&#xff0c;第14届“珠中江”&#xff08;珠海、中山、江门&#xff09;数字…...

编程日记 2023/10/25 17:59:25

Qt 窗口的尺寸

默认尺寸 对于一个Qt的窗口&#xff08;继承于QWidget&#xff09;&#xff0c;获取其窗体尺寸的方法size()&#xff1b; 以一个Qt创建Qt Widgets Application项目的默认生成代码为基础&#xff0c;做如下测试 MainWindow::MainWindow(QWidget *parent): QMainWindow(parent…...

编程日记 2023/10/25 17:58:24

游戏数据分析对于运营游戏平台的重要性

游戏数据分析对于运营游戏平台具有至关重要的意义&#xff0c;它可以提供深入的见解&#xff0c;帮助了解玩家行为、偏好和互动&#xff0c;从而优化游戏体验&#xff0c;提高玩家参与度和留存率。 首先&#xff0c;通过游戏数据分析&#xff0c;运营者可以了解玩家在游戏中的表…...

编程日记 2023/10/25 17:57:23

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37