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

webGL编程指南 第三章 平移三角形 TranslatedTriangle.js

news 2026/1/17 0:23:09

我会持续更新关于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的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 接着 上一节 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加&#xff0c;同时传递个给相关变量 <!DOCTY…...

编程日记 2023/10/23 19:19:02

推荐一款支持异步批量下载图片的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 安装后直接点击 会根据…...

编程日记 2023/10/23 19:18:01

vue 动态数字效果 vue-animate-number

安装 vue-animate-number 插件 npm install vue-animate-number &#xff08;注&#xff1a;是npm、cnpm还是yarn根据具体项目要求&#xff09; 在 main.js 中引入 import Vue from vue import VueAnimateNumber from vue-animate-number Vue.use(VueAnimateNumber)动态使用…...

编程日记 2023/10/23 19:16:58

10月22日，每日信息差

今天是2023年10月22日&#xff0c;以下是为您准备的13条信息差 第一、库迪咖啡计划到2025年底全球门店数量达2万家&#xff0c;库迪咖啡开业一周年全球门店数量达到6061家&#xff0c;位居全球第四 第二、超高速纯硅调制器取得创纪录突破&#xff0c;国际上首次把纯硅调制器带…...

编程日记 2023/10/23 19:14:54

Android系统之SurfaceFlinger

参考资料&#xff1a; Android 显示系统&#xff1a;SurfaceFlinger详解 Android 渲染机制——SurfaceFlinger 一篇文章看明白 Android 图形系统 Surface 与 SurfaceFlinger 之间的关系 Android卡顿原理分析和SurfaceFlinger&#xff0c;Surface概念简述 Android Graphics…...

编程日记 2023/10/23 19:13:53

jQuery实现输入框提示并点击回显功能呢

html代码: <input type"text" id"affOrganization" name"affOrganization" class"form-control" placeholder"Search..." style"width: 300px" > <div class"search_suggest" id"gov_se…...

编程日记 2023/10/23 19:12:52

终端常用操作

终端操作 取消 可以用ctrl c&#xff0c;不要一个一个删除&#xff0c;会取消掉开新的一行回溯上一次的命令&#xff0c;ctrl r&#xff0c;然后键入关键词&#xff0c;直接回车运行就行 chmod x 文件名 给某个文件运行需要的权限。...

编程日记 2023/10/23 19:11:51

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;//这个地方要修改为整个参数表的最大行数&#xff0c;而不是起始…...

编程日记 2023/10/23 19:09:49

分拣设备运动仿真

这一次我们来分享一下如何在Solidworks 中做出传送台的分拣动作并通过分拣动作生成过程动画&#xff0c;以便于我们可以用于产品展示又或者验证运行程序无误的情况下结构是否会影响输送效率。 首先创建一个新的运动算例 将窗口切换至Motion分析 在设置之前我们先理清设置传送带…...

编程日记 2023/10/23 19:08:48

Python【列表的反转与排序】

目录 要求&#xff1a;列表的反转 列表的排序 列表的反转&#xff1a; 方案一&#xff1a;使用reverse()方法&#xff1a;它会直接修改原始列表&#xff0c;进行反转。 方案二&#xff1a;还是使用reversed()函数&#xff1a;该函数返回一个反转后的迭代器对象&#xff0c…...

编程日记 2023/10/23 19:07:47

2 用TensorFlow构建一个简单的神经网络

上一篇&#xff1a;1 如何入门TensorFlow-CSDN博客 1、环境搭建 后续介绍的相关代码都是在pycharm运行&#xff0c;pycharm安装略。 打开pycharm&#xff0c;创建一个新的项目用于tensorflow编码练习&#xff0c;在Terminal输入命令&#xff1a; # 依赖最新版本的pip pip i…...

编程日记 2023/10/23 19:04:44

快手视频批量下载.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…...

编程日记 2023/10/23 19:03:43

如何用工业树莓派和MQTT平台打通OT和IT？

一、应用设备 OT端设备&#xff1a;步进电机&#xff0c;MODBUS TCP远程I/O模块&#xff0c;PLC设备 边缘侧设备&#xff1a;宏集工业树莓派&#xff1b; IT端设备&#xff1a;PC、安卓手机&#xff1b; IT端软件&#xff1a;宏集HiveMQ MQTT通信平台 二、原理 宏集工业树…...

编程日记 2023/10/23 19:02:42

大模型背景下软件工程的机遇与挑战

点击链接了解详情 本文作者&#xff1a;汪晟杰 导语:AISE&#xff08;AI Software Engineering&#xff09;有人说是软件工程 3.0&#xff0c;即基于大模型&#xff08;LLM - Large Language Model&#xff09;时代下的软件工程。那么究竟什么是 AISE&#xff0c;他的发展历程对…...

编程日记 2023/10/23 19:01:41

flink中使用GenericWriteAheadSink的优缺点

背景 GenericWriteAheadSink是flink中提供的实现几乎精确一次输出的数据汇抽象类&#xff0c;本文就来看一下使用GenericWriteAheadSink的优缺点 GenericWriteAheadSink的优缺点 先看一下GenericWriteAheadSink的原理图 优点&#xff1a; 几乎可以精确一次的输出&#xf…...

编程日记 2023/10/23 19:00:39

第五章Maven依赖的特性-进阶篇

文章目录 第一节 重新认识MavenMaven 的完整功能项目管理功能的具体体现 POM 的四个层次超级 POM父 POM有效 POM概念查看有效 POM 小结 属性的声明与引用help 插件的各个目标使用 help:evaluate 查看属性值通过 Maven 访问系统属性Java 系统属性一览使用 Maven 访问系统属性 访…...

编程日记 2023/10/23 18:59:38

【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小的值&#xff0c;并…...

编程日记 2023/10/23 18:56:34

记低版本okhttp超时会导致死锁

一、问题起源 在处理一次生产环境cpu拉满问题时&#xff0c;把日志拉下来看发现很多http请求调用出错&#xff0c;项目使用的是okhttp 3.8.1版本。 二、问题描述 问题出在okhttp3.Dispatcher.finished(Dispatcher.java:201)代码如下&#xff1a; void finished(AsyncCall c…...

编程日记 2023/10/23 18:54:29

idea必装的插件 Spring Boot Helper 插件（创建 Spring Boot 项目）

Spring Spring让Java程序更加快速,简单和安全.Spring对于速度、简单性和⽣产⼒的关注使其成为 世界上最流⾏的Java框架。Spring官⽅提供了很多开源的项⽬,覆盖范围从Web开发到⼤数据,Spring发展到了今天,已经形成了⾃ ⼰的⽣态圈.我们在开发时,也倾向于使⽤Spring官⽅提供的技术…...

编程日记 2023/10/23 18:53:28

Scrum(敏捷开发)的前端定位

1. Scrum(敏捷开发)的开发流程 Scrum将整个开发过程分为多次迭代（称为Sprint，冲刺），一般为期2～4周，最常见的为2周。Scrum并非以一段时间集中完成一个过程，而是将所有过程中必须的每一部分集中在这段时间内完成。需求、设计、编码、测试、上线都必须在一个迭代中完成，每…...

编程日记 2023/10/23 18:52:27

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/1/15 5:00:50

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/15 4:58:46

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/1/15 5:31:03

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/15 6:09:54

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2026/1/15 5:04:39