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…...
游戏数据分析对于运营游戏平台的重要性
游戏数据分析对于运营游戏平台具有至关重要的意义，它可以提供深入的见解，帮助了解玩家行为、偏好和互动，从而优化游戏体验，提高玩家参与度和留存率。 首先，通过游戏数据分析，运营者可以了解玩家在游戏中的表…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...