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

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

news 2025/12/31 19:10:57

我会持续更新关于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

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/21 4:56:54

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/12/30 14:18:10

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/12/10 17:29:53

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/12/31 7:44:42

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/12/31 7:44:43

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/12/31 9:33:42

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/12/28 2:05:49

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/12/27 13:10:15

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/12/28 22:06:50

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/12/29 21:03:19