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

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

news 2025/6/9 17:57:12

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

02.管理数据库

管理数据库 1. 创建数据库 mysql> create database db1; Query OK, 1 row affected (0.01 sec)mysql> show databases; -------------------- | Database | -------------------- | db1 | | hellodb | | information_schema | | m…...

编程新知 2025/6/9 15:41:06

实时数据分析的技术架构：Lambda vs Kappa架构选择

文章目录 引言：实时数据分析架构的重要性Lambda架构深度解析Kappa架构技术特性架构对比分析维度性能与可扩展性评估技术栈选型指南实际应用场景分析成本效益对比模型混合架构与演进策略企业级决策框架最佳实践与案例研究技术趋势与未来展望引言：实时数据分析架构的重要性 在…...

编程新知 2025/6/9 15:01:29

数据结构与算法——二叉树高频题目（1）

前言&#xff1a; 简单记录一下自己学习算法的历程&#xff0c;主要根据左老师自己的视频课进行&#xff0c;由于大部分课程涉及题目较多&#xff0c;所以分文章进行记录。 本文将简单记录一下二叉树的层序遍历和 Z 形层次遍历。 参考视频&#xff1a; 算法讲解036【必备】…...

编程新知 2025/6/9 14:05:43

华为云Flexus+DeepSeek征文｜华为云一键部署知识库搜索增强版Dify平台，构建智能聊天助手实战指南

目录 前言 1 架构描述 2 资源栈创建流程详解 2.1 选择部署模板 2.2 参数配置内容 2.3 资源栈设置选项 2.4 配置确认与执行方式 3 部署过程与控制台反馈 3.1 实时资源监控 3.2 资源详情与访问路径 3.3 模板与事件管理 4 知识库构建流程 4.1 数据导入操作 4.2 文本…...

编程新知 2025/6/9 13:42:43

基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究

摘要&#xff1a;在数字化转型背景下&#xff0c;用户对首屏交互效率的诉求日益提升。本文以"定制开发开源AI智能名片S2B2C商城小程序"为技术载体&#xff0c;结合用户行为数据与认知心理学原理&#xff0c;提出首屏组件动态布局模型。通过分析搜索栏、扫码入口、个人…...

编程新知 2025/6/9 12:52:14

算法训练第十一天

150. 逆波兰表达式求值 代码&#xff1a; class Solution(object):def evalRPN(self, tokens):""":type tokens: List[str]:rtype: int"""stack []for i in tokens:if i:b int(stack.pop())a int(stack.pop())stack.append(ab)elif i-:b i…...

编程新知 2025/6/9 11:38:46

基于安卓的线上考试APP源码数据库文档

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存…...

编程新知 2025/6/9 9:53:25

split方法

在编程中&#xff0c;split 方法通常用于将字符串按照指定的分隔符拆分成多个部分&#xff0c;并返回一个包含拆分结果的列表&#xff08;或数组&#xff09;。不同编程语言中的 split 方法语法略有不同&#xff0c;但核心功能相似。以下是常见语言中的用法&#xff1a; ​1. P…...

编程新知 2025/6/9 7:06:04

【选配电脑】CPU核显工作机控制预算5000

【选配电脑】CPU核显工作机控制预算5000 1.背景2.配置及估价3.选配的说明 1.背景 不需要独立显卡&#xff0c;内存&#xff0c;硬盘尽量大&#xff1b; 预算控制到5000&#xff0c; 主板型号&#xff0c;电源功率支持后续添加独立显卡。 时间节点&#xff1a;2025.06.07 2.配…...

编程新知 2025/6/9 3:55:10

vsCode使用本地低版本node启动配置文件

npm run dev的配置文件 {"configurations": [{"type": "node-terminal","name": "项目运行: dev","request": "launch",//重点在这里 这行注释到时候删掉"command": "E:\\node-v14.21.…...

编程新知 2025/6/9 1:49:41