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

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

news 2026/4/12 13:20:10

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

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

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)动态使用…...

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

10月22日，每日信息差

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

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

Android系统之SurfaceFlinger

参考资料： Android 显示系统：SurfaceFlinger详解 Android 渲染机制——SurfaceFlinger 一篇文章看明白 Android 图形系统 Surface 与 SurfaceFlinger 之间的关系 Android卡顿原理分析和SurfaceFlinger，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，不要一个一个删除，会取消掉开新的一行回溯上一次的命令，ctrl r，然后键入关键词，直接回车运行就行 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;//这个地方要修改为整个参数表的最大行数，而不是起始…...

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

分拣设备运动仿真

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

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

Python【列表的反转与排序】

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

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

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

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

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

完整代码如下： # _*_ 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端设备：步进电机，MODBUS TCP远程I/O模块，PLC设备边缘侧设备：宏集工业树莓派； IT端设备：PC、安卓手机； IT端软件：宏集HiveMQ MQTT通信平台二、原理宏集工业树…...

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

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

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

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

flink中使用GenericWriteAheadSink的优缺点

背景 GenericWriteAheadSink是flink中提供的实现几乎精确一次输出的数据汇抽象类，本文就来看一下使用GenericWriteAheadSink的优缺点 GenericWriteAheadSink的优缺点先看一下GenericWriteAheadSink的原理图优点： 几乎可以精确一次的输出&#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小的值，并…...

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

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

一、问题起源在处理一次生产环境cpu拉满问题时，把日志拉下来看发现很多http请求调用出错，项目使用的是okhttp 3.8.1版本。二、问题描述问题出在okhttp3.Dispatcher.finished(Dispatcher.java:201)代码如下： 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

Qwen3-TTS-12Hz-1.7B-Base效果展示：德语严谨播报vs意大利热情解说对比

Qwen3-TTS-12Hz-1.7B-Base效果展示：德语严谨播报vs意大利热情解说对比语音合成技术的新突破：多语言语音合成模型Qwen3-TTS-12Hz-1.7B-Base在语音表现力方面达到了新的高度，特别是在不同语言风格的表现上展现出惊人的多样性。 1. 模型核心能力…...

编程新知 2026/4/12 12:41:34

智能解放双手：MAA如何让明日方舟日常任务自动化

智能解放双手：MAA如何让明日方舟日常任务自动化【免费下载链接】MaaAssistantArknights 《明日方舟》小助手，全日常一键长草！| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://gitcode.c…...

编程新知 2026/4/12 11:31:31

SharpKeys：Windows键盘重映射终极指南，轻松打造个性化输入体验

SharpKeys：Windows键盘重映射终极指南，轻松打造个性化输入体验【免费下载链接】sharpkeys SharpKeys is a utility that manages a Registry key that allows Windows to remap one key to any other key. 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/12 8:57:52