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

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

news 2026/4/2 18:21:05

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

STM32开发环境搭建：Keil5 MDK安装与驱动配置全指南

1. Keil5 MDK安装前的准备工作 第一次接触STM32开发的朋友&#xff0c;往往会在环境搭建这一步卡住。我刚开始玩STM32的时候&#xff0c;光是安装Keil就折腾了大半天。现在回想起来&#xff0c;其实只要提前做好这几项准备&#xff0c;整个过程会顺利很多。 首先说说硬件准备。…...

编程新知 2026/4/2 18:20:26

从华为实践学IPD：手把手教你写高通过率的Charter文档

华为IPD方法论实战&#xff1a;打造高价值Charter文档的7个关键步骤 在科技企业的研发管理领域&#xff0c;一份优秀的Charter文档往往决定着数千万甚至上亿研发投入的成败。华为IPD&#xff08;集成产品开发&#xff09;体系中的Charter开发流程&#xff0c;被全球众多科技企业…...

编程新知 2026/4/2 18:14:21

开源音乐解锁工具：浏览器端全平台音频解密解决方案

开源音乐解锁工具&#xff1a;浏览器端全平台音频解密解决方案 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://…...

编程新知 2026/4/2 17:09:04

快速原型设计：基于快马平台构建vmware安装交互演示应用

今天想和大家分享一个特别实用的开发经验&#xff1a;如何用InsCode(快马)平台快速制作VMware虚拟机安装的交互式演示工具。这个项目特别适合技术文档编写者或IT培训师&#xff0c;能让你用最短时间把枯燥的安装教程变成生动可操作的原型。 为什么需要交互式演示&#xff1f; 传…...

编程新知 2026/4/2 17:07:01

阅读APP书源完全指南：3种快速导入方法与问题解决方案

阅读APP书源完全指南&#xff1a;3种快速导入方法与问题解决方案 【免费下载链接】Yuedu &#x1f4da;「阅读」自用书源分享 项目地址: https://gitcode.com/gh_mirrors/yu/Yuedu 「阅读」APP书源开源项目为小说爱好者提供了一个强大的解决方案&#xff0c;让您能够在一…...

编程新知 2026/4/2 15:57:27

SMT波浪焊接工艺精准控制品质核心

SMT波浪焊接过程中&#xff0c;设备是基础&#xff0c;而工艺参数的精准控制则是决定焊接质量的核心。很多电子制造企业都会遇到这样的问题&#xff1a;同样的设备、同样的原材料&#xff0c;不同批次的产品焊接质量却参差不齐&#xff0c;有的焊点牢固、外观规整&#xff0c;有…...

编程新知 2026/4/2 15:10:43

用Python+Neo4j构建A股知识图谱：从同花顺网页到Cypher查询的完整实战

用PythonNeo4j构建A股知识图谱&#xff1a;从数据采集到智能分析的完整技术方案 金融数据分析领域正在经历一场由知识图谱技术驱动的变革。本文将分享一个完整的A股知识图谱构建方案&#xff0c;涵盖从同花顺网页数据采集到Neo4j图数据库应用的完整技术链路。不同于简单的工具使…...

编程新知 2026/4/2 15:02:31

Polars 2.0清洗稳定性生死线：当lazy.eval()遭遇OOM崩溃，这3个编译期优化参数必须重置！

第一章&#xff1a;Polars 2.0清洗稳定性生死线&#xff1a;当lazy.eval()遭遇OOM崩溃&#xff0c;这3个编译期优化参数必须重置&#xff01;在 Polars 2.0 中&#xff0c;lazy.eval() 的执行模型已深度耦合 Rust 编译期查询优化器&#xff08;QO&#xff09;&#xff0c;但默认…...

编程新知 2026/4/2 14:28:01

泉盛UV-K5/K6固件自定义：解锁专业对讲机功能的终极指南

泉盛UV-K5/K6固件自定义&#xff1a;解锁专业对讲机功能的终极指南 【免费下载链接】uv-k5-firmware-custom 全功能泉盛UV-K5/K6固件 Quansheng UV-K5/K6 Firmware 项目地址: https://gitcode.com/gh_mirrors/uvk5f/uv-k5-firmware-custom 你是否曾想过&#xff0c;一台…...

编程新知 2026/4/2 11:51:13

CyberChef：数据处理的万能工具箱

CyberChef&#xff1a;数据处理的万能工具箱 【免费下载链接】CyberChef The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis 项目地址: https://gitcode.com/GitHub_Trending/cy/CyberChef 数据处理的困境与破局之道 你…...

编程新知 2026/4/2 11:08:26