webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html
我会持续更新关于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的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 ：git 本篇文章将把旋转和平位移结合起来，因为矩阵的不存在交换法则 文章中设计的矩阵地址在这里…...
使用canvas实现时间轴上滑块的各种常用操作（仅供参考）
一、简介 使用canvas，模拟绘制时间轴区域，有时间刻度标尺，时间轴区域上会有多行，每行都有一个滑块。 1、时间刻度标尺可以拖动，会自动对齐整数点秒数，最小步数为0.1秒。 2、滑块可以自由拖动，…...
Netty优化-扩展自定义协议中的序列化算法
Netty优化-扩展自定义协议中的序列化算法 一. 优化与源码1. 优化1.1 扩展自定义协议中的序列化算法 一. 优化与源码 1. 优化 1.1 扩展自定义协议中的序列化算法 序列化，反序列化主要用在消息正文的转换上 序列化时，需要将 Java 对象变为要传输的数据…...
【Java网络编程】二
本文主要介绍了传输层的UDP协议和TCP协议，以及在Java中如何通过Socket套接字实现网络编程（内附UDP和TCP版本的回显服务器代码） 一.网络通信 网络编程，就是写一个应用程序，让这个程序可以使用网络通信，这里就…...
通过IP地址可以做什么
通过IP地址可以做很多事情，因为它是互联网通信的基础之一。本文将探讨IP地址的定义、用途以及一些可能的应用。 IP地址的用途 1. 设备标识：IP地址用于标识互联网上的每个设备，这包括计算机、服务器、路由器、智能手机等。它类似于我们日常生…...
前端 CSS 经典：clip、clip-path
1. clip 1.1 clip: auto | inherit | rect auto：默认，不裁剪 inherit：继承父级 clip 属性 rect：规则四边形裁剪 1.2 clip: rect(top, right, bottom, left) 注意： 1.裁剪只对 fixed 和 absolute 的元素有效。 2.top&…...
android 如何判断已配对的蓝牙是否打开了互联网访问开关
最近遇到一个需求，要判断已配对的蓝牙是否打开了互联网访问的开关。 经查看源码，得出以下方法。 1. 首先要判断蓝牙是否打开 2. 已打开的蓝牙是否已配对 3. 验证是否真正打开 /*** 是否打开蓝牙互联网访问*/SuppressLint("MissingPermission&quo…...
在Linux上实现ECAT主站
在Linux上实现ECAT主站 引言介绍EtherCATSOEM 使用下载ECAT主站编译 引言 EtherCAT由一个主站设备和多个从站设备组成。主站设备使用标准的以太网控制器，具有良好的兼容性，任何具有网络接口卡的计算机和具有以太网控制的嵌入式设备都可以作为EtherCAT的…...
Spring Cloud之服务熔断与降级（Hystrix）
目录 Hystrix 概念 作用 服务降级 简介 使用场景 接口降级 服务端服务降级 1.添加依赖 2.定义接口 3.实现接口 4.Controller类使用 5.启动类添加注释 6.浏览器访问 客户端服务降级 1.添加依赖 2.application.yml 中添加配置 3.定义接口 4.Controller类使用 …...
HashMap 哈希碰撞、负载因子、插入方式、扩容倍数
HashMap 怎么解决的哈希碰撞问题？ 主要采用了链地址法。具体来说： 每个哈希桶不仅存储一个键-值对，而是存储一个链表或树结构。这样，具有相同哈希值的键-值对可以被存储在同一个哈希桶中，并通过链表或树结构来解决碰…...
【Unity3D】Unity与Android交互
1 Unity 发布 apk 1.1 安装 Android Build Support 在 Unity Hub 中打开添加模块窗口，操作如下。 选择 Android Build Support 安装，如下（笔者这里已安装过）。 创建一个 Unity 项目，依次点击【File→Build Settings→…...
信号去噪算法
引言 在实际世界中，我们所获得的信号通常都包含了各种干扰和噪音。这些噪音可能来自电子设备、环境条件或传感器本身，它们会损害信号的质量，降低信息提取的准确性。因此，信号去噪和降噪技术在科学、工程和医学领域中扮演着至关重…...
GPT带我学-设计模式-10观察者模式
1 请你介绍一下观察者模式 观察者模式（Observer Pattern）是一种设计模式，它定义了对象之间的一对多依赖关系，当一个对象（被观察者）的状态发生改变时，所有依赖于它的对象（观察者&…...
JDK - 常用的设计模式
单例模式 ： Runtime 类：Java 运行时环境是单例的，可以通过 Runtime.getRuntime() 方法获得实例。Calendar 类：Calendar.getInstance() 方法返回的是一个单例的 Calendar 实例。数据源连接池：连接池的管理通常采用单例模…...
华为OD机考算法题：寻找最大价值的矿堆
题目部分 题目寻找最大价值的矿堆难度难题目说明给你一个由 0（空地）、1（银矿）、2（金矿）组成的的地图，矿堆只能由上下左右相邻的金矿或银矿连接形成。超出地图范围可以认为是空地。 假设银矿价值…...
wf-docker集群搭建（未完结）
系列文章目录 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、redis集群二、mysql集群三、nacos集群1. 环境要求2. 拉取镜像2.1. 拉取镜像方式配置集群2.2. 自定义nacos镜像配置集群 3 自定义…...
uni-app 在 APP 端的版本强制更新与热更新
整包更新与热更新的区别 ① 整包更新是指下载完整 apk 文件进行覆盖安装 ② 热更新是指把 app 有改动的地方打包进 wgt 文件，只更新 wgt 文件中的内容，不进行整包安装，在用户视角也叫做省流量更新 版本号规则约束 建议严格遵循 Semantic …...
实在智能受邀参加第14届珠中江数字化应用大会，AI赋能智能制造，共话“湾区经验”
制造业是实体经济的主体，是技术创新的主战场，是供给侧结构性改革的重要领域。抢占新一轮产业竞争制高点，制造业的数字化转型已成为行业升级的必由之路。 10月21日，第14届“珠中江”（珠海、中山、江门）数字…...
Qt 窗口的尺寸
默认尺寸 对于一个Qt的窗口（继承于QWidget），获取其窗体尺寸的方法size()； 以一个Qt创建Qt Widgets Application项目的默认生成代码为基础，做如下测试 MainWindow::MainWindow(QWidget *parent): QMainWindow(parent…...
游戏数据分析对于运营游戏平台的重要性
游戏数据分析对于运营游戏平台具有至关重要的意义，它可以提供深入的见解，帮助了解玩家行为、偏好和互动，从而优化游戏体验，提高玩家参与度和留存率。 首先，通过游戏数据分析，运营者可以了解玩家在游戏中的表…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...