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…...
游戏数据分析对于运营游戏平台的重要性
游戏数据分析对于运营游戏平台具有至关重要的意义，它可以提供深入的见解，帮助了解玩家行为、偏好和互动，从而优化游戏体验，提高玩家参与度和留存率。 首先，通过游戏数据分析，运营者可以了解玩家在游戏中的表…...
通过WireShark与WinHex从pcap数据流中提取并修复损坏的JPG图片
1. 从pcap文件中筛选JPG数据流 当你拿到一个网络抓包文件（pcap格式），里面可能混杂着各种网络流量数据。要从中提取出图片文件，首先得学会用WireShark这个神器来筛选目标数据。我处理过不少类似的案例，发现很多新手容易…...
对比实验：Lychee模型与传统算法在推荐系统中的表现
对比实验：Lychee模型与传统算法在推荐系统中的表现 1. 实验设计与方法 为了客观评估Lychee多模态重排序模型在推荐系统中的实际效果，我们设计了一套完整的对比实验方案。实验聚焦电商推荐场景，选取了家居、服饰、电子产品三个典型品类&…...
Paperless-ng多语言文档管理终极指南：如何实现国际化支持的完整解决方案
Paperless-ng多语言文档管理终极指南：如何实现国际化支持的完整解决方案 【免费下载链接】paperless-ng A supercharged version of paperless: scan, index and archive all your physical documents 项目地址: https://gitcode.com/gh_mirrors/pa/paperless-ng …...
Anthropic员工失误导致Claude Code源代码泄露
事件概述：npm源映射文件暴露专有代码Anthropic公司一名员工在npm公开注册账户发布的AI编程工具Claude Code版本中意外包含源映射（source map）文件，导致该工具的完整专有源代码暴露。AI专家指出，这种失误存在重大安全风…...
从零到一实战：基于快马AI生成企业级RESTful API服务器代码
最近在做一个图书管理系统的项目，需要搭建一个完整的RESTful API服务器。作为一个全栈开发者，我决定尝试用InsCode(快马)平台来快速生成服务器代码，没想到效果出奇地好。下面分享下我的实战经验。 项目需求分析 首先明确需要实现的功能&#…...
Ostrakon-VL终端惊艳效果：终端界面响应速度实测对比
Ostrakon-VL终端惊艳效果：终端界面响应速度实测对比 1. 像素特工终端效果展示 1.1 视觉设计亮点 Ostrakon-VL终端采用了独特的8-bit像素艺术风格，将传统零售场景中的图像识别任务转化为充满游戏感的"数据扫描任务"。这种设计不仅提升了用户…...
效率倍增：用快马平台自动化生成类qoderwork官网的高质量模板
在开发企业级工具类官网时，效率往往是团队最关注的核心指标之一。最近尝试用InsCode(快马)平台自动化生成类似qoderwork官网的模板，发现它能将传统需要数天的手动搭建过程压缩到几分钟内完成，这种效率提升对中小团队尤其有价值。以下是具体实…...
Redis可视化管理解决方案：AnotherRedisDesktopManager实战指南
Redis可视化管理解决方案：AnotherRedisDesktopManager实战指南 【免费下载链接】AnotherRedisDesktopManager 🚀🚀🚀A faster, better and more stable Redis desktop manager [GUI client], compatible with Linux, Windows, Mac…...
零代码！用Qwen-Image-2512-ComfyUI轻松制作中文电商配图与营销素材
零代码！用Qwen-Image-2512-ComfyUI轻松制作中文电商配图与营销素材 1. 为什么选择Qwen-Image-2512-ComfyUI 电商运营和内容创作者经常面临一个共同难题：如何快速制作高质量的中文营销素材。传统设计工具需要专业技能，而普通AI绘画工具又难以…...
Pixel Couplet Gen完整指南：从GitHub Fork到微信小程序上线的像素春联项目闭环
Pixel Couplet Gen完整指南：从GitHub Fork到微信小程序上线的像素春联项目闭环 1. 项目介绍与核心价值 Pixel Couplet Gen是一款融合AI技术与复古游戏美学的创新应用，它将传统春联创作带入了数字时代。这个项目最吸引人的特点是： 8-bit像素…...