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…...
游戏数据分析对于运营游戏平台的重要性
游戏数据分析对于运营游戏平台具有至关重要的意义，它可以提供深入的见解，帮助了解玩家行为、偏好和互动，从而优化游戏体验，提高玩家参与度和留存率。 首先，通过游戏数据分析，运营者可以了解玩家在游戏中的表…...
Harnessclaw：轻量级自动化工作流编排工具，告别脚本泥潭
1. 项目概述：一个被低估的自动化利器如果你经常在GitHub上寻找一些能解决实际问题的工具，可能会发现一个现象：很多名字看起来平平无奇、甚至有点“怪”的项目，往往藏着巨大的潜力。harnessclaw/harnessclaw就是这样一个典型的例子…...
基于RT-Thread与N32G457的工业UART网关设计与实现
1. 项目概述与核心价值最近在做一个工业数据采集的项目，现场有十几台不同品牌、不同协议的串口设备，PLC、仪表、传感器什么都有，它们的数据都需要汇总到一台中心服务器上。最头疼的是，这些设备分布在车间各处，拉线成本…...
基于CircuitPython与NeoTrellis的DIY可编程声音板：从硬件搭建到软件编程全解析
1. 项目概述：打造你的专属可编程声音板如果你对嵌入式开发感兴趣，想亲手制作一个既炫酷又实用的交互设备，那么这个基于CircuitPython和NeoTrellis的DIY可编程声音板项目，绝对是一个不容错过的实践机会。简单来说，这是一…...
Windows终极优化神器：WinUtil - 一键解决系统安装、优化、修复的完整指南
Windows终极优化神器：WinUtil - 一键解决系统安装、优化、修复的完整指南 【免费下载链接】winutil Chris Titus Techs Windows Utility - Install Programs, Tweaks, Fixes, and Updates 项目地址: https://gitcode.com/GitHub_Trending/wi/winutil 你是否厌…...
分布式系统与微服务架构：从核心原理到Java开发实战
1. 分布式系统平台：从背景到实战应用的深度剖析在软件开发领域，尤其是企业级应用和互联网服务的构建中，“分布式”早已不是一个新鲜词汇，而是工程师们日常打交道的核心范式。我们常听到J2EE、.NET、微服务这些名词，它们…...
WRF-CHEM模拟翻车？可能是你的namelist.chem没设对（附MEIC数据实战配置清单）
WRF-CHEM模拟异常排查指南：MEIC数据与namelist.chem的深度适配 当WRF-CHEM模拟结果出现异常时，很多用户会第一时间怀疑MEIC数据处理环节的问题，但实际上，namelist.chem参数与MEIC特性的匹配度才是更隐蔽的关键因素。本文将带您深入…...
在线水印怎么去除？2026年最新在线水印去除方法与工具推荐
图片、视频上的水印是版权保护的常见方式，但在内容创作、素材整理或个人使用时，有时需要移除这些标记。在线水印去除工具因为无需下载安装、跨平台兼容而成为不少人的选择。本文汇总了2026年实用的在线水印去除方法和工具推荐，帮你快速找到适…...
设计程序统计城市社区医疗站点接诊数据，优化医疗点位分布，方便居民就近看病，解决就医难问题。
一、实际应用场景描述某城市卫健委希望优化社区卫生服务中心布局，但面临以下现实情况：- 各社区接诊量差异巨大- 部分点位长期排队，部分点位资源闲置- 居民跨区就医成本高- 缺乏基于数据的点位调整依据👉 技术目标：用 P…...
3个常见视频下载难题，猫抓扩展如何帮你一键解决？浏览器资源嗅探实战指南
3个常见视频下载难题，猫抓扩展如何帮你一键解决？浏览器资源嗅探实战指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你…...
期权量化交易基础库：模块化设计与回测实战指南
1. 项目概述：一个为期权交易者打造的“地基” 如果你在量化交易或者期权策略开发领域摸爬滚打过一段时间，大概率会和我有同样的感受：每次想测试一个新想法，都得从零开始搭建数据接口、计算希腊字母、管理仓位、回测框架……这些重…...