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

webGL编程指南 第三章 旋转三角形

news 文章来源：https://blog.csdn.net/huhudeni/article/details/133915670 2025/2/12 8:12:06

我会持续更新关于wegl的编程指南中的代码。

当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

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 vec2 a_Position;uniform float u_CosB,u_SinB; void main(){gl_Position.x = a_Position.x * u_CosB - a_Position.y*u_SinB;gl_Position.y = a_Position.x * u_SinB + a_Position.y*u_CosB;gl_Position.z = 0.0;gl_Position.w = 1.0;}`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 rotateX = 0.0;//y轴的旋转角度let rotateY = 0;//三角的三个顶点的坐标位置let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);// 获取顶点着色器的变量let a_Position = gl.getAttribLocation(program, 'a_Position');// 获取旋转角度的变量let u_CosB = gl.getUniformLocation(program, 'u_CosB')let u_SinB = gl.getUniformLocation(program, 'u_SinB')// 创建缓冲区let buffer = gl.createBuffer();//将缓冲区对象绑定到目标gl.bindBuffer(gl.ARRAY_BUFFER, buffer);//向缓冲区写入数据gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)//将缓冲区对象绑定到目标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 () {//赋值x角度gl.uniform1f(u_CosB, Math.cos(Math.PI*rotateX/180.0));//赋值y角度gl.uniform1f(u_SinB, Math.sin(Math.PI*rotateX/180.0));// 清空画布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编程指南 第三章 旋转三角形

我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 接着 上一节 接着做平移的转化。本案例是三角形的旋转 <!DOCTYPE html> <html lang"en"><head…...

编程日记 2023/10/19 11:18:13

网络安全是什么？一文认识网络安全

一、网络安全 1.概念 网络安全从其本质上讲就是网络上的信息安全&#xff0c;指网络系统的硬件、软件及数据受到保护。不遭受破坏、更改、泄露&#xff0c;系统可靠正常地运行&#xff0c;网络服务不中断。 &#xff08;1&#xff09;基本特征 网络安全根据其本质的界定&#…...

编程日记 2023/10/19 11:17:12

LeetCode 2897. 对数组执行操作使平方和最大【贪心,位运算,哈希表】2301

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/10/19 11:16:12

linux加密安全和时间同步

sudo实现授权 添加 vim /etc/sudoers luo ALL(root) /usr/bin/mount /deb/cdrom /mnt/ test ALL(root:ALL) ALL 在所有主机上 提权为root用户&#xff0c; 可以执行所有命令 户"test"被授权以"root"用户身份在任意主机上执行任意命令 切换luo用户使用 su…...

编程日记 2023/10/19 11:15:11

在Go中处理异常

引言 程序遇到的错误大致分为两类:程序员预料到的错误和程序员没有预料到的错误。我们在前两篇关于[错误处理]的文章中介绍的error接口主要处理我们在编写Go程序时预期的错误。error接口甚至允许我们承认函数调用发生错误的罕见可能性&#xff0c;因此我们可以在这些情况下进行…...

编程日记 2023/10/19 11:14:10

rust 全局变量

文章目录 编译期初始化静态常量静态变量原子类型 运行期初始化lazy_staticBox::leak从函数中返回全局变量 标准库中的 OnceCell 编译期初始化 静态常量 const MAX_ID: usize usize::MAX / 2; fn main() {println!("用户ID允许的最大值是{}",MAX_ID); }关键字是co…...

编程日记 2023/10/19 11:13:09

使用Python的qrcode库生成二维码

使用Python的qrcode库生成二维码 此二维码直接跳转对应的网址。 1、首先安装qrcode包 pip install qrcode2、运行代码 import qrcode# 需要跳转的URL url "https://blog.csdn.net/weixin_45092662?typeblog" img qrcode.make(url) img.save("qrcode.png&…...

编程日记 2023/10/19 11:12:08

MSQL系列(四) Mysql实战-索引分析Explain命令详解

Mysql实战-索引分析Explain命令详解 前面我们讲解了索引的存储结构&#xff0c;我们知道了BTree的索引结构&#xff0c;也了解了索引最左侧匹配原则&#xff0c;到底最左侧匹配原则在我们的项目中有什么用&#xff1f;或者说有什么影响&#xff1f;今天我们来实战操作一下&…...

编程日记 2023/10/19 11:10:06

FPGA软件【紫光】

软件&#xff1a;编程软件。 注册账号需要用到企业邮箱 可以使用【企业微信】的邮箱 注册需要2~3天&#xff0c;会收到激活邮件 授权&#xff1a; 找到笔记本网卡的MAC&#xff0c; 软件授权选择ADS 提交申请后&#xff0c;需要2~3天等待邮件通知。 使用授权&#xff1a; 文…...

编程日记 2023/10/19 11:09:05

饲料化肥经营商城小程序的作用是什么

我国农牧业规模非常高&#xff0c;各种农作物和养殖物种类多&#xff0c;市场呈现大好趋势&#xff0c;随着近些年科学生产养殖逐渐深入到底层&#xff0c;专业的肥料及饲料是不少从业者需要的&#xff0c;无论城市还是农村都有不少经销店。 但在实际经营中&#xff0c;经营商…...

编程日记 2023/10/19 11:08:04

AI系统ChatGPT源码+详细搭建部署教程+支持GPT4.0+支持ai绘画（Midjourney)/支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…...

编程日记 2023/10/19 11:07:03

vue项目优雅降级，es6降为es5，适应低版本浏览器渲染

非vue项目 ECMAScript 6(ES6)的发展速度非常之快&#xff0c;但现代浏览器对ES6新特性支持度不高&#xff0c;所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。 Babel是一个广泛使用的转码器&#xff0c;babel可以将ES6代码完美地转换为ES5代码&#xff0c;所…...

编程日记 2023/10/19 11:06:02

运放供电设计

文章目录 运放供电设计如何产生负电压BUCK电路BOOST电路产生负电压FLYBUCK产生负电压 运放供电设计 注&#xff1a;使用0.1u跟10u并联 如何产生负电压 问题&#xff1a;电流小&#xff0c;使用并联方式改善&#xff0c;缺点价格贵&#xff0c;淘宝上买的都是假货ICL7662多是用…...

编程日记 2023/10/19 11:05:01

vue2-org-tree 树型结构的使用

vue2-org-tree 用于创建和显示组织结构树状图&#xff0c;帮助开发者轻松地可视化组织结构&#xff0c;例如公司的层级、部门之间的关系、团队成员等。其主要功能有&#xff1a;自定义节点、可折叠节点、支持拖放、搜索、导航等功能。 这里我们主要使用 vue2-org-tree 进行多次…...

编程日记 2023/10/19 11:04:00

【计算机网络】（面试问题）路由器与交换机的比较

路由器与交换机比较 内容主要参考总结自《计算机网络自顶向下第七版》P315 两者均为存储-转发设备: 路由器: 网络层设备 (检测网络层分组首部) 交换机: 链路层设备 (检测链路层帧的首部) 二者均使用转发表: 路由器: 利用路由算法(路由协议)计算(设置), 依据IP地址 交换机…...

编程日记 2023/10/19 11:02:59

基于下垂控制的孤岛双机并联逆变器环流抑制模型(Simulink仿真实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/19 11:00:57

第十九章 文件操作

程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放 通过文件可以将数据持久化 C中对文件操作需要包含头文件 < fstream > 文件类型分为两种&#xff1a; 文本文件 - 文件以文本的ASCII码形式存储在计算机中 二进制文件 - 文件以文本的二进制…...

编程日记 2023/10/19 10:59:55

防火墙管理工具增强网络防火墙防御

防火墙在网络安全中起着至关重要的作用。现代企业具有多个防火墙&#xff0c;如&#xff1a;电路级防火墙、应用级防火墙和高级下一代防火墙&#xff08;NGFW&#xff09;的复杂网络架构需要自动化防火墙管理和集中式防火墙监控工具来确保边界级别的安全。 网络防火墙安全和日…...

编程日记 2023/10/19 10:58:54

34 机器学习（二）：数据准备|knn

文章目录 数据准备数据下载数据切割转换器估计器 kNN正常的流程网格多折交叉训练原理讲解距离度量欧式距离(Euclidean Distance)曼哈顿距离(Manhattan Distance)切比雪夫距离 (Chebyshev Distance)还有一些自定义的距离 就请读者自行研究 再识K-近邻算法API选择n邻居的思辨总结…...

编程日记 2023/10/19 10:55:51

企业工厂车间台式电脑经常有静电导致开不开机，如何彻底解决？

环境： HP 480G7 Win10 专业版 问题描述： 企业工厂车间台式电脑经常有静电导致开不开机，如何彻底解决？ 开机电源指示灯闪，显示器黑屏没有画面开不了机，一般是把主机电源断了，把主机盖打开 把内存条拔了之后长按开机按键10秒以上然后插上内存条开机正常 相对与有些岗…...

编程日记 2023/10/19 10:54:49

【数之道 05】走进神经网络模型、机器学习的世界

神经网络 神经网络&#xff08;ANN&#xff09;神经网络基础激活函数 神经网络如何通过训练提高预测准确度逆向参数调整法 &#xff08;BackPropagation&#xff09;梯度下降法链式法则增加一层 b站视频连接 神经网络&#xff08;ANN&#xff09; 最简单的例子&#xff0c;视…...

编程日记 2023/10/19 10:53:48

C现代方法（第7章）笔记——基本类型

文章目录 第7章 基本类型7.1 整数类型7.1.1 C99中的整数类型7.1.2 整型常量7.1.3 C99中的整型常量7.1.4 整数溢出7.1.5 读/写整数 7.2 浮点类型7.2.1 浮点常量7.2.2 读/写浮点数 7.3 字符类型7.3.1 字符操作7.3.2 有符号字符和无符号字符7.3.3 算术类型7.3.4 转义序列7.3.5 字符…...

编程日记 2023/10/19 10:52:47

ON DUPLICATE KEY UPDATE 导致自增ID跳跃式增长

1. 语法 INSERT INTO table_name VALUES(null,param,..) ON DUPLICATE KEY UPDATE param_name VALUES(param_name);2. 介绍 ON DUPLICATE KEY UPDATE 会根据主键或唯一索引检索当前记录是否已经存在&#xff0c;存在更新&#xff0c;不存在插入&#xff1b; 优先级&#xff…...

编程日记 2023/10/19 10:51:46

python学习笔记5-堆

题目链接 heapify(q) 初始化一个列表q成为小根堆这道题取反使之成为大根堆heappop(q) 弹出堆顶heappush(q, e) 将e插入堆中 class Solution:def maxKelements(self, nums: List[int], k: int) -> int:q [-x for x in nums]heapify(q)ans 0for _ in range(k):x heappop(…...

编程日记 2023/10/19 10:50:45

【微服务 SpringCloud】实用篇 · Eureka注册中心

微服务&#xff08;3&#xff09; 文章目录 微服务&#xff08;3&#xff09;1. Eureka的结构和作用2. 搭建eureka-server2.1 创建eureka-server服务2.2 引入eureka依赖2.3 编写启动类2.4 编写配置文件2.5 启动服务 3. 服务注册1&#xff09;引入依赖2&#xff09;配置文件3&am…...

编程日记 2023/10/19 10:48:43

WebSocket学习笔记

一篇文章理解WebSocket原理 1.HTTP协议(半双工通信)&#xff1a; HTTP是客户端向服务器发起请求&#xff0c;服务器返回响应给客户端的一种模式。 特点&#xff1a; 1.只能是客户端向服务器发起请求&#xff0c;是单向的。 2.服务器不能主动发送数据给客户端。 半双工通信…...

编程日记 2023/10/19 10:47:42

centos 内核对应列表 内核升级 linux

近期服务器频繁出现问题&#xff0c;找运维同事排查&#xff0c;说是系统版本和内核版本和官方不一致&#xff0c;如下&#xff1a; Release 用的是7.8, kernal 用的是 5.9 我一查确实如此&#xff1a; 内核&#xff1a; Linux a1messrv1 5.9.8-1.el7.elrepo.x86_64 发行版 Cen…...

编程日记 2023/10/19 10:46:41

如何判断a类b类c类ip地址

在计算机网络中&#xff0c;IP地址用于标识和定位网络上的设备。IP地址根据其范围和结构划分为A类、B类和C类等不同类型。了解如何判断IP地址所属的类型对于理解网络结构和进行网络管理非常重要。虎观代理小二二将介绍如何判断IP地址的类别&#xff0c;以帮助读者更好地理解和应…...

编程日记 2023/10/19 10:44:39

SNAP对Sentinel-1预处理

SNAP对Sentinel-1预处理 一、导入数据 二、轨道校正 点击run开始处理 三、噪声去除 打开S-1 Thermal Noise Removal工具 如果选中了VH&#xff0c;就只会输出一个VH极化结果 四、辐射定标 Run 五、滤波处理 六、地形校正 这边的dem需要自己下载 dem下载地址 如果一格…...

编程日记 2023/10/19 10:43:38

GEE案例——指定区域纯净森林提取分析（红和近红外波段）阈值法提取森林面积

本教程主要是利用影像波段的近红外和红波段的指数作为森林区域的筛选，利用大津法进行指定区域的森林夏季的遥感影像的红波段和近红外波段。 简介： 提取森林范围是遥感影像处理中的一项常见任务。以下是可能用到的一些步骤： 1. 数据预处理：首先，需要进行数据预处理，包括…...

编程日记 2023/10/19 10:42:37

网站营销方式/今日十大热点新闻头条

写在前面 本文首发于公众号&#xff1a;符合预期的CoyPan 最近做了一个移动端活动页的需求&#xff0c;大概就是diy一个页面。用户可以对物料进行拖动、缩放、旋转&#xff0c;来达到diy的目的。用DOM来实现是不现实的&#xff0c;我采用了canvas来实现和用户的交互。开发过程中…...

编程日记 2025/2/12 5:54:59

网站的产品中心怎么做/西安网站建设排名

[rootqs-xezf-db2 ~]# su - oracle -bash: ulimit: open files: cannot modify limit: 不允许的操作 [oracleqs-xezf-db2 ~]$ linux对用户有默认的ulimit限制&#xff0c;/etc/sysconfig/limits.conf 文件可以配置用户的硬配置和软配置&#xff0c;硬配置是个上限。当超出上限…...

编程日记 2025/2/12 4:48:42

河北建设网官方网站/平台营销

结构化数据、半结构化数据和非结构化数据 结构化数据 结构化的数据是指可以使用关系型数据库表示和存储&#xff0c;表现为二维形式的数据。一般特点是&#xff1a;数据以行为单位&#xff0c;一行数据表示一个实体的信息&#xff0c;每一行数据的属性是相同的。举一个例子&am…...

编程日记 2025/2/12 3:20:24

用js做简单的网站页面/制作自己的网站

An ffmpeg and SDL Tutorial在ffmpeg-1.0.1上的更新Tutorial01http://cutebunny.blog.51cto.com/blog/301216/1121847本篇是整个系列的基础&#xff0c;详细介绍了ffmpeg的整个工作流程&#xff0c;以及重要的数据结构。Sample code实现了将视频中的前5帧图像提取出来另存为PPM…...

编程日记 2025/2/12 1:20:33

做网站的成本费用/网络营销推广公司简介

#ubuntu更新软件源 cd /etc/apt mv sources.list source.list.bak vim sources.list 添加如下内容&#xff1a; “”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”…...

编程日记 2025/2/12 1:19:32

ui一般用什么软件做/seo教程视频论坛

jQuery鼠标换轮滚动事件1、鼠标混轮滚动事件2、添加class属性3、实现屏幕滚动效果css代码部分html与javascript部分1、鼠标混轮滚动事件 代码如下所示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…...

编程日记 2025/2/12 0:28:21