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

webGL编程指南 第三章 矩阵平移三角形.translatedTriangle_Matrix

news 文章来源：https://blog.csdn.net/huhudeni/article/details/133935151 2025/5/18 18:44:03

我会持续更新关于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>
</head><body><h3>可以按下按键ADSW</h3><p><span id="num"></span></p><canvas id='canvas'></canvas><script>let canvas = document.getElementById('canvas');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);}// x的坐标移动变量let translationX = 0.0;// y的坐标移动变量let translationY = 0.0;//三角形的坐标let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])// 获取顶点着色器中a_Position的存储位置let a_Position = gl.getAttribLocation(program, 'a_Position');//  获取顶点着色器中u_mat4的存储位置let u_mat4 = gl.getUniformLocation(program, 'u_mat4');// 创建bufferlet buffer = gl.createBuffer();// 绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, buffer);// 向buffer中写入数据gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);// 向a_Position中传递变量gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 开启a_Positiongl.enableVertexAttribArray(a_Position);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);const render = function () {// 设置位移的变量（主列）let mate4 = new Float32Array([1.0, 0.0, 0.0, 0.0,0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,translationX, translationY, 0.0, 1.0,])// 传递矩阵gl.uniformMatrix4fv(u_mat4, false, mate4)// 清空画布gl.clear(gl.COLOR_BUFFER_BIT);// 绘制图形gl.drawArrays(gl.TRIANGLES, 0, 3);setNumer()}render()document.onkeydown = function (e) {    //对整个页面监听  var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  //判断如果用户按下了回车键（keycody=13）  if (keyNum == 65) {console.log('A');translationX -= 0.1; render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 68) {console.log('D');translationX += 0.1; render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 83) {console.log('S');translationY -= 0.1; render()}//判断如果用户按下了空格键(keycode=32)，  if (keyNum == 87) {console.log('W');translationY += 0.1; render();}}function setNumer (){let text = document.getElementById('num');text.innerText = `translationX:${ translationX} translationY:${translationY}`}</script>
</body></html>

相关文章：

webGL编程指南 第三章 矩阵平移三角形.translatedTriangle_Matrix

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 &#xff1a;git 接着 上一节 中 我们使用矩阵进行旋转&#xff0c;这次我们使用矩阵实现位移 <!DOCTYPE html> <…...

编程日记 2023/10/20 5:08:41

修改echarts的tooltip样式 折线图如何配置阴影并实现渐变色和自适应

图片展示 一、引入echarts 这里不用多解释 vue里使用 import echarts from “echarts”; html页面引用js文件或用script标签引用 二、定义一个具有宽高的dom div <div id"echart-broken" style"width:400px;height: 200px;"></div>三、定义…...

编程日记 2023/10/20 5:07:39

[论文笔记] SurroundOcc: Multi-Camera 3D Occupancy Prediction for Autonomous Driving

Wei, Yi, et al. “Surroundocc: Multi-camera 3d occupancy prediction for autonomous driving.” Proceedings of the IEEE/CVF International Conference on Computer Vision. 2023. 重点记录 将占用网格应用到多个相机构成的3D空间中; 使用BEVFormer中的方法获取3D特征, …...

编程日记 2023/10/20 5:06:38

辅助驾驶功能开发-功能对标篇(16)-NOA 城市辅助系统-毫末智行

1.横向对标参数 厂商毫末智行车型魏牌摩卡DHT-PHEV上市时间发布：2022年8月30日 上市：2022年底前方案12V5R2L+1DMS摄像头前视摄像头*3【800W】侧视摄像头*4后视摄像头*1【800W】环视摄像头*4DMS摄像头*1雷达毫米波雷达*54D毫米波雷达/超声波雷达*12激光雷达*2【速腾聚创 M1，1…...

编程日记 2023/10/20 5:05:37

H3C的IRF堆叠互联关系说明

H3C IRF堆叠互联说明48口交换机连接方式IRF Port 两台设备第一台的51口 第二台的51口irf-port 1/2 port group interface ten-gigabitethernet 1/0/51 port group interface ten-gigabitethernet 1/0/52第一台的52口第二台的52口irf-port 2/1 port group interface ten-gigabi…...

编程日记 2023/10/20 5:04:37

货物摆放（蓝桥杯）

货物摆放 题目描述 小蓝有一个超大的仓库&#xff0c;可以摆放很多货物。 现在&#xff0c;小蓝有 n 箱货物要摆放在仓库&#xff0c;每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向&#xff0c;每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所有的…...

编程日记 2023/10/20 5:03:35

3782: 【C3】【穷举】弹珠游戏

目录 题目描述 输入 输出 样例输入 样例输出 题目描述 游戏的内容是&#xff1a;在一个 n*n 的矩阵里&#xff0c;有若干个敌人&#xff0c;你的弹珠可以摧毁敌人&#xff0c;但只能攻击你所在的行、列里的所有敌人&#xff0c;然后你就可以获得他们的分数之和&#xff0…...

编程日记 2023/10/20 5:00:32

leetcode 5

leetcode 5 题目是通过枚举字符串&#xff0c;然后判断是否子字符串满足回文。 引用传递和值传递相比&#xff0c;引用传递可以减少内存空间。提高代码运行效率。 https://www.cnblogs.com/yanlingyin/archive/2011/12/07/2278961.html...

编程日记 2023/10/20 4:59:31

centos中nacos设置开机自启动

以下实践亲测有效&#xff01; 1、在以下目录编辑新建nacos.service文件 vim /lib/systemd/system/nacos.service [Unit] Descriptionnacos Afternetwork.target [Service] Typeforking ExecStart/usr/local/nacos/bin/startup.sh -m standalone ExecReload/usr/local/nacos/b…...

编程日记 2023/10/20 4:58:30

双指针——移动零

一&#xff0c;题目要求&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0…...

编程日记 2023/10/20 4:57:29

WPF中在MVVM模式下实现导航功能

WPF中在MVVM模式下实现导航功能 一、利用TabControl 使用场景&#xff1a;项目小&#xff0c;不用考虑内存开销的问题。 实现方式1-手动指定ViewModel 分别定义3个UserControl作为View用于演示 <UserControl...><Grid><StackPanel Orientation"Vertic…...

编程日记 2023/10/20 4:55:26

SpringBoot面试题2：SpringBoot与SpringCloud 区别？SpringBoot和Spring、SpringMVC的区别

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：SpringBoot与SpringCloud 区别？ Spring Boot 和 Spring Cloud 是 Spring 生态系统中的两个关键组件，它们有以下区别： 定位：Spring Boot 用于简…...

编程日记 2023/10/20 4:54:25

Practical Deep Raw Image Denoisingon Mobile Devices

Abstract 近年来&#xff0c;基于深度学习的图像去噪方法得到了广泛的研究&#xff0c;并在许多公共基准数据集中盛行。然而&#xff0c;最先进的网络计算成本太高&#xff0c;无法直接应用于移动设备。在这项工作中&#xff0c;我们提出了一种轻量级、高效的基于神经网络的原…...

编程日记 2023/10/20 4:53:24

如何在Android项目中制作和使用三方包(jar文件)

文章目录 1 概念介绍2 制作方法2.1 制作步骤2.2 制作结果3 使用方法3.1 具体步骤3.2 示例代码4 内容总结在项目中为了跨部门协作需要把相关的内容打成包文件，基于这个需求，我们将介绍如何把 代码制作成三方包，这里的三方包是指jar文件。同时也会介绍如何在Android项目中使用…...

编程日记 2023/10/20 4:52:21

消息队列Beanstalkd介绍

摘要&#xff1a; Beanstalkd是一个高性能、轻量级的、分布式的、内存型的消息队列系统。最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟。其实Beanstalkd是典型的类Memcached设计&#xff0c;协议和使用方式都是同样的风格。其基本设计思…...

编程日记 2023/10/20 4:51:19

【C++】继承 ⑥ ( 继承中的构造函数和析构函数 | 类型兼容性原则 | 父类指针 指向 子类对象 | 使用 子类对象 为 父类对象 进行初始化 )

文章目录 一、public 公有继承 - 示例分析1、类型兼容性原则2、类型兼容性原则应用场景 二、类型兼容性原则 - 示例分析1、父类指针 指向 子类对象2、使用 子类对象 为 父类对象 进行初始化3、完整代码示例 一、public 公有继承 - 示例分析 1、类型兼容性原则 类型兼容性原则 :…...

编程日记 2023/10/20 4:50:18

15 | JPA 对 Web MVC 开发者做了哪些支持

我们使用 Spring Data JPA 的时候&#xff0c;一般都会用到 Spring MVC&#xff0c;Spring Data 对 Spring MVC 做了很好的支持&#xff0c;体现在以下几个方面&#xff1a; 支持在 Controller 层直接返回实体&#xff0c;而不使用其显式的调用方法&#xff1b;对 MVC 层支持标…...

编程日记 2023/10/20 4:48:16

链表的概念+MySingleList的实现

文章目录 链表一、 链表的概念1.概念2. 结构 二、MySingleList的实现1 .定义内部类2 .创建链表3. 遍历链表并打印4.查找单链表中是否包含关键字key5.得到链表的长度6.头插法7. 尾插法8.任意位置插入8.删除结点清空 链表 顺序存储&#xff1a;顺序表/ArrayList 优点&#xff1…...

编程日记 2023/10/20 4:46:14

小黑子—Maven基础

Maven基础 一 小黑子的Maven学习1. Mavn的介绍2. Maven基础概念2.1 仓库2.2 坐标2.3 仓库配置 3. 手动写一个maven项目3.1 Maven项目构建命令3.2 插件创建工程 4. IDEA下的maven项目5. 依赖管理5.1 依赖配置5.2 依赖传递5.3 可选依赖&#xff08;不透明&#xff09;5.4 排除依赖…...

编程日记 2023/10/20 4:45:13

【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO（Netty前置知识）

目录 前言前置知识一、计算机网络体系结构二、TCP/IP协议族2.1 简介*2.2 TCP/IP网络传输中的数据2.3 地址和端口号2.4 小总结 三、TCP/UDP特性3.1 TCP特性TCP 3次握手TCP 4次挥手TCP头部结构体 3.2 UDP特性 四、总结 课程内容一、网络通信编程基础知识1.1 什么是Socket1.2 长连…...

编程日记 2023/10/20 4:42:09

扬帆起航：许战海方法论日文版正式发布

近日&#xff0c;中国头部战略咨询机构‘许战海咨询’最新研究成果《中国汽车行业新能源转型战略》行业白皮书日文版&#xff0c;即将在日本发布。同时发布的日文版核心方法论白皮书还有《主品牌进化战略》、《第二招牌增长战略》、《链主品牌&#xff1a;制造业的竞争之王》等…...

编程日记 2023/10/20 4:41:08

Docker 安装zookeeper

一、安装单机版 1、拉取镜像 docker pull zookeeper2、创建挂载目录 mkdir -p /mydata/zookeeper/{conf,data,logs}3、新建配置文件 cd /mydata/zookeeper/conf vi zoo.cfgdataDir/data dataLogDir/logs tickTime2000 initLimit10 syncLimit5 clientPort21814、单机主机启…...

编程日记 2023/10/20 4:40:07

项目管理与SSM框架（二）| Spring

Spring简介 Spring是一个开源框架&#xff0c;为简化企业级开发而生。它以IOC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面&#xff09;为思想内核&#xff0c;提供了控制层 SpringMVC、数据层SpringData、服务层事务管理等众多技术&#xff0c;并可以整合众多…...

编程日记 2023/10/20 4:39:06

Ubuntu系统忘记Root用户密码-无法登录系统-更改Root密码-Ubuntu系统维护

一、背景 很多时候&#xff0c;我们总会设计复杂的密码&#xff0c;但是大多数时候&#xff0c;我们反而会先忘记我们的密码&#xff0c;导致密码不仅仅阻挡其他用户进入系统&#xff0c;同时也阻碍我们进入系统。 本文将介绍在忘记密码的情况下&#xff0c;如何进入系统并更改…...

编程日记 2023/10/20 4:38:05

webSocket 有哪些安全问题？

WebSocket在实现实时通信和双向数据传输方面非常有用&#xff0c;但也存在一些安全问题需要注意。以下是一些与WebSocket相关的安全问题&#xff1a; 1&#xff1a;跨站脚本攻击&#xff08;XSS&#xff09;&#xff1a; WebSocket在消息传递过程中可能传输恶意脚本&#xff…...

编程日记 2023/10/20 4:37:04

ArcGis打开影像显示全黑解决方法

我们加载图像&#xff0c;显示如下&#xff1a; 解决方法&#xff1a; 问题分析&#xff1a;Gamma值高于1影像亮化&#xff0c;低于1影像暗化。栅格影像导入进来呈现黑色&#xff0c;可能是因为影像的“Gamma校正”设置出现问题&#xff0c;影响了影像的拉伸度、亮度、对比度等…...

编程日记 2023/10/20 4:36:03

雷达基础导论及MATLAB仿真

文章目录 前言一、雷达基础导论二、Matlab 仿真1、SNR 相对检测距离的仿真①、Matlab 源码②、仿真1&#xff09;、不同 RCS&#xff0c;SNR 相对检测距离仿真2&#xff09;、不同雷达峰值功率&#xff0c;SNR 相对检测距离仿真 2、脉冲宽度相对所要求的 SNR 仿真①、Matlab 源…...

编程日记 2023/10/20 4:32:58

设计模式再探——适配器模式

目录 一、背景介绍二、思路&方案三、过程1.适配器模式简介2.适配器模式的类图3.适配器模式代码4.适配器模式&#xff0c;类适配器模式和对象的对比5.适配器模式终极奥秘 四、总结五、升华 一、背景介绍 最近公司在对业务模型做构建的时候&#xff0c;涉及到和三方系统的对…...

编程日记 2023/10/20 4:31:57

【无标题】光伏逆变器的IEC62109测试，逆变器IEC62109测试项目

光伏逆变器的IEC62109测试&#xff0c;逆变器IEC62109测试项目 逆变器又称电源调整器&#xff0c;根据逆变器在光伏发电系统中的用途可分为独立型电源用和并网用二种。根据波形调制方式又可分为方波逆变器、阶梯波逆变器、正弦波逆变器和组合式三相逆变器。对于用于并网系统的…...

编程日记 2023/10/20 4:30:56

Windows用VM虚拟机安装MacOS Ventura 13.6系统全流程教程（附资源）

安装成果&#xff1a; 所需容量&#xff1a;至少40GB的硬盘空间&#xff0c;推荐80GB以上。 所需资源 VMware虚拟机激活密钥&#xff1a;VMware Workstation Pro 17.0.2MacOS Ventura 13.6的ISO镜像MacOS的解锁工具卡顿优化工具&#xff1a;beamoff 有人反馈说需要能用的ISO镜…...

编程日记 2023/10/20 4:28:54