webGL编程指南 第三章 平移三角形 TranslatedTriangle.js
我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
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><canvas id='canvas'></canvas><script>let canvas = document.getElementById('canvas');let gl = canvas.getContext('webgl');let vertexShaderSource = `attribute vec2 a_Position;uniform vec2 u_Translation;void main(){gl_Position = vec4(u_Translation+a_Position,0.0,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 translationX = 0.0;// y移动的增加量let translationY = 0.0;// 绘制三角形的顶点let positonArray = new Float32Array([1.0, 0.0, -1.0, 0.0, 0.0, -1.0])// 获取顶点着色器中的a_Position变量let a_Position = gl.getAttribLocation(program, 'a_Position');//获取顶点着色器中的u_Translation变量let u_Translation = gl.getUniformLocation(program, 'u_Translation');//创建缓冲区对象let buffer = gl.createBuffer();//将缓冲区对象绑定到目标gl.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);// 启用顶点位置的顶点着色器变量gl.enableVertexAttribArray(a_Position);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);const render = function () {// 设置xy的移动增加的量gl.uniform2f(u_Translation, translationX, translationY)// 清除颜色缓冲区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制三角形gl.drawArrays(gl.TRIANGLES, 0, 3)}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();}}</script>
</body></html>相关文章：
webGL编程指南 第三章 平移三角形 TranslatedTriangle.js
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 接着 上一节 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量 <!DOCTY…...
推荐一款支持异步批量下载图片的chrome插件——图片助手(ImageAssistant) 批量图片下载器
https://chrome.google.com/webstore/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko/related?hlzh-CNhttps://chrome.google.com/webstore/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko/related?hlzh-CN 安装后直接点击 会根据…...
vue 动态数字效果 vue-animate-number
安装 vue-animate-number 插件 npm install vue-animate-number （注：是npm、cnpm还是yarn根据具体项目要求） 在 main.js 中引入 import Vue from vue import VueAnimateNumber from vue-animate-number Vue.use(VueAnimateNumber)动态使用…...
10月22日，每日信息差
今天是2023年10月22日，以下是为您准备的13条信息差 第一、库迪咖啡计划到2025年底全球门店数量达2万家，库迪咖啡开业一周年全球门店数量达到6061家，位居全球第四 第二、超高速纯硅调制器取得创纪录突破，国际上首次把纯硅调制器带…...
Android系统之SurfaceFlinger
参考资料： Android 显示系统：SurfaceFlinger详解 Android 渲染机制——SurfaceFlinger 一篇文章看明白 Android 图形系统 Surface 与 SurfaceFlinger 之间的关系 Android卡顿原理分析和SurfaceFlinger，Surface概念简述 Android Graphics…...
jQuery实现输入框提示并点击回显功能呢
html代码: <input type"text" id"affOrganization" name"affOrganization" class"form-control" placeholder"Search..." style"width: 300px" > <div class"search_suggest" id"gov_se…...
终端常用操作
终端操作 取消 可以用ctrl c，不要一个一个删除，会取消掉开新的一行回溯上一次的命令，ctrl r，然后键入关键词，直接回车运行就行 chmod x 文件名 给某个文件运行需要的权限。...
JWFD开源工作流矩阵引擎测试版本BUG20231022修正代码
public void ParamFileOutputValue(String paramfile) {String s "";String sp "";String ssp "";List<String> list new ArrayList<String>();int p 0;int k 0;//这个地方要修改为整个参数表的最大行数，而不是起始…...
分拣设备运动仿真
这一次我们来分享一下如何在Solidworks 中做出传送台的分拣动作并通过分拣动作生成过程动画，以便于我们可以用于产品展示又或者验证运行程序无误的情况下结构是否会影响输送效率。 首先创建一个新的运动算例 将窗口切换至Motion分析 在设置之前我们先理清设置传送带…...
Python【列表的反转与排序】
目录 要求：列表的反转 列表的排序 列表的反转： 方案一：使用reverse()方法：它会直接修改原始列表，进行反转。 方案二：还是使用reversed()函数：该函数返回一个反转后的迭代器对象，…...
2 用TensorFlow构建一个简单的神经网络
上一篇：1 如何入门TensorFlow-CSDN博客 1、环境搭建 后续介绍的相关代码都是在pycharm运行，pycharm安装略。 打开pycharm，创建一个新的项目用于tensorflow编码练习，在Terminal输入命令： # 依赖最新版本的pip pip i…...
快手视频批量下载.py（10月可以用）
完整代码如下： # _*_ coding:utf-8 _*_# _*_ coding:utf-8 _*_import json import requests import time import randomheaders = """Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6 Con…...
如何用工业树莓派和MQTT平台打通OT和IT？
一、应用设备 OT端设备：步进电机，MODBUS TCP远程I/O模块，PLC设备 边缘侧设备：宏集工业树莓派； IT端设备：PC、安卓手机； IT端软件：宏集HiveMQ MQTT通信平台 二、原理 宏集工业树…...
大模型背景下软件工程的机遇与挑战
点击链接了解详情 本文作者：汪晟杰 导语:AISE（AI Software Engineering）有人说是软件工程 3.0，即基于大模型（LLM - Large Language Model）时代下的软件工程。那么究竟什么是 AISE，他的发展历程对…...
flink中使用GenericWriteAheadSink的优缺点
背景 GenericWriteAheadSink是flink中提供的实现几乎精确一次输出的数据汇抽象类，本文就来看一下使用GenericWriteAheadSink的优缺点 GenericWriteAheadSink的优缺点 先看一下GenericWriteAheadSink的原理图 优点： 几乎可以精确一次的输出…...
第五章Maven依赖的特性-进阶篇
文章目录 第一节 重新认识MavenMaven 的完整功能项目管理功能的具体体现 POM 的四个层次超级 POM父 POM有效 POM概念查看有效 POM 小结 属性的声明与引用help 插件的各个目标使用 help:evaluate 查看属性值通过 Maven 访问系统属性Java 系统属性一览使用 Maven 访问系统属性 访…...
【Javascript】数组练习（在排好序的数组⾥，按照⼤⼩顺序插⼊数据）
var array[1,4,5,7,9,17]; console.log(array);比如要插入一个数16 var array[1,4,5,7,9,17];var num16; var indexnull; var i; for(i0;i<array.length;i){if(array[i]<num){indexi;} } console.log(index);首先通过循环找出最后一个比自定义的num小的值，并…...
记低版本okhttp超时会导致死锁
一、问题起源 在处理一次生产环境cpu拉满问题时，把日志拉下来看发现很多http请求调用出错，项目使用的是okhttp 3.8.1版本。 二、问题描述 问题出在okhttp3.Dispatcher.finished(Dispatcher.java:201)代码如下： void finished(AsyncCall c…...
idea必装的插件 Spring Boot Helper 插件（创建 Spring Boot 项目）
Spring Spring让Java程序更加快速,简单和安全.Spring对于速度、简单性和⽣产⼒的关注使其成为 世界上最流⾏的Java框架。Spring官⽅提供了很多开源的项⽬,覆盖范围从Web开发到⼤数据,Spring发展到了今天,已经形成了⾃ ⼰的⽣态圈.我们在开发时,也倾向于使⽤Spring官⽅提供的技术…...
Scrum(敏捷开发)的前端定位
1. Scrum(敏捷开发)的开发流程 Scrum将整个开发过程分为多次迭代（称为Sprint，冲刺），一般为期2～4周，最常见的为2周。Scrum并非以一段时间集中完成一个过程，而是将所有过程中必须的每一部分集中在这段时间内完成。需求、设计、编码、测试、上线都必须在一个迭代中完成，每…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术，它们扮演着完全不同的角色： Redis: 内存数据库/数据结构存储 本质： 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能： 提供丰…...