webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：git
接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量
<!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);} // 旋转角度let rotateX = 0.0;let rotateY = 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');// 创建buffer对象let buffer = gl.createBuffer();// 绑定buffer对象gl.bindBuffer(gl.ARRAY_BUFFER, buffer)// 向buffer中写入数据gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)// 设置attribute变量a_Position的值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)// 启用attribute变量a_Positiongl.enableVertexAttribArray(a_Position);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);const render = function () {// 计算角度let cos = Math.cos(Math.PI*rotateX/180.0);let sin = Math.sin(Math.PI*rotateX/180.0);// 计算旋转矩阵let mate4=new Float32Array([cos,sin,0.0,0.0,-sin,cos,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,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');rotateX -= 1; rotateY=0render()}//判断如果用户按下了空格键(keycode=32)， if (keyNum == 68) {console.log('D');rotateX +=1; rotateY=0render()}//判断如果用户按下了空格键(keycode=32)， if (keyNum == 83) {console.log('S');rotateY -= 1; rotateX=0render()}//判断如果用户按下了空格键(keycode=32)， if (keyNum == 87) {console.log('W');rotateY += 1; rotateX=0render();}}function setNumer (){let text = document.getElementById('num');text.innerText = `rotateX:${ rotateX}`} </script>
</body></html>相关文章：
webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 ：git 接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相…...
【常用的Git命令】
Git是一个版本控制系统，它拥有众多的命令。以下是一些常用的Git命令： 配置相关命令: git config --global user.name "Your Name"：设置用户姓名git config --global user.email "youremailexample.com"：设置用…...
cnn 直线检测笔记
目录 mlsd直线检测： ULSD-ISPRS曲线检测 划线标注工具： 可视化标注代码： mlsd直线检测： mlsd_pytorch...
【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me!
【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me! strings language_fundamentals Instructions Write a function that returns the string "something" joined with a space " " and the given argument a. Examples giveMeSomething(“is bett…...
【Redis】数据结构之dict
目录 dict的基本结构dict的相关操作函数底层通用的之查找插入key-value对应该放入ht表的哪个槽rehash过程 dict的基本结构 typedef struct dict {dictType *type;void *privdata;dictht ht[2];long rehashidx; /* rehashing not in progress if rehashidx -1 */unsigned long…...
curl命令服务器上执行http请求
1. 现在本地使用postman生成curl命令 注意: 将ip改成127.0.0.1,端口是实际服务运行的端口 curl --location --request POST http://127.0.0.1:63040/content/course/list?pageNo1&pageSize2 \ --header Content-Type: application/json \ --data-raw {"courseName&q…...
图论03-【无权无向】-图的深度优先遍历-路径问题/检测环/二分图
文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 路径问题的优化-提前结束递归4.1 思路4.2 主要代码 5. 检测环5.1 思路5.2 主要代码 5. 二分图5.1 思路5.2 主要代码5.2.1 遍历每个联通分量5.2.2 递归判断相邻两点的颜色是否一致…...
算法题java
一、四向链表，输入n生成一个多维4向链表 Datastatic class ListNode<T>{private T val;ListNode<T> up,down,left,right;public ListNode(T val){this.val val;}}public static void main(String[] args){ListNode<Integer> node getResult(8);…...
MySQL数据的基础语法
MySQL 是一种强大的关系型数据库管理系统（RDBMS），它使用 SQL（Structured Query Language）来管理和操作数据。以下是 MySQL 数据库的基础 SQL 语法，包括创建数据库、创建表、插入、查询、更新和删除数据等基…...
阿里面试（持续更新）
一面： 1 HashMap 实现原理，ConcurrentHashMap 实现原理 HashMap和ConcurrentHashMap都是存储键值对的数据结构，不同的是HashMap是线程不安全的，ConcurrentHashMap是线程安全的，HashMap在高并发情况下会出现数据不一致…...
龙芯3A3000源码编译安装deepin-ide
安装环境 系统为统信专业版1050 CPU为龙芯3A3000 安装步骤 1.安装所有依赖库 sudo apt-get install git debhelper cmake qt5-qmake qtbase5-dev qttools5-dev qttools5-dev-tools lxqt-build-tools libssl-dev llvm llvm-dev libclang-dev libutf8proc-dev libmicrohttpd-d…...
学成在线第二天-查询课程、查询课程分类、新增课程接口实现以及跨域的处理思路和全局异常处理的使用以及面试题
目录 一、接口的实现 二、跨域的处理思路 三、全局异常处理 四、面试题 五、总结 一、接口的实现 1. 查询课程接口 思路： 典型的分页查询 按需查询 模糊查询的查询 controller： ApiOperation(value "课程列表", notes "课程…...
【OpenCV概念】 11— 对象检测
一、说明 这都是关于物体识别的。物体识别是指通过计算机视觉技术，自动识别图像或视频中的物体及其属性和特征，是人工智能领域的一个分支。物体识别可应用于多个领域，包括工业自动化、智能家居、医疗、安防等。请随时阅读这篇文章：…...
TensorRT学习笔记--常用卷积、激活、池化和FC层算子API
目录 1--Tensor算子API 1-1--卷积算子 1-2--激活算子 1-3--池化算子 1-4--FC层算子 2--代码实例 3--编译运行 1--Tensor算子API TensorRT提供了卷积层、激活函数和池化层三种最常用算子的API： // 创建一个空的网络 nvinfer1::INetworkDefinition* network …...
【Edabit 算法 ★☆☆☆☆☆】 Less Than 100?
【Edabit 算法 ★☆☆☆☆☆】 Less Than 100? language_fundamentals math validation Instructions Given two numbers, return true if the sum of both numbers is less than 100. Otherwise return false. Examples lessThan100(22, 15) // true // 22 15 37lessTha…...
C++中的智能指针：更安全、更便利的内存管理
在C++编程中，动态内存管理一直是一个重要且具有挑战性的任务。传统的C++中，程序员需要手动分配和释放内存，这往往会导致内存泄漏和悬挂指针等严重问题。为了解决这些问题，C++11引入了智能指针（Smart Pointers）这一概念，它们是一种高级的内存管理工具，可以自动管理内存的…...
google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理
1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 k8s dashboard ui安装完毕后，通过google浏览器登录返现https网页，发现非官方的https网页无法打开 网址：https://192.168.10.236:31001 2.原…...
MIPS指令集摘要
目录 MIPS指令R I J三种格式 MIPS五种寻址方式 立即数寻址 寄存器寻址 基址寻址 PC相对寻址 伪直接寻址 WinMIPS64汇编指令 助记 从内存中加载数据 lb lbu lh lhu lw lwu ld l.d lui 存储数据到内存 sb sh sw sd s.d 算术运算 daddi daddui dadd…...
数据可视化素材分享 | 数十图表、无数模板
很多人在后台求分享报表、源代码，其实何必这么麻烦，在奥威BI数据可视化平台上点击即可获得大量的可视化素材，如数十种可视化图表，适用于不同分析场景；又如大量不同主题的BI数据可视化报表模板，套用后替换数…...
Hadoop3教程（三十二）：（生产调优篇）NameNode故障恢复与集群的安全模式
文章目录 （159）NameNode故障处理（160）集群安全模式&磁盘修复集群安全模式磁盘修复等待安全模式 参考文献 （159）NameNode故障处理 如果NameNode进程挂了并且存储的数据也丢失了，如何恢复Nam…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...