webGL编程指南 第五章 MultiTexture.html
我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：空
上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"><title>Document</title><style>#canvas {width: 100vw;height: 100vw;border: 1px solid greenyellow;}</style>
</head><body>!!!!!需要指出的是要选择当前文件夹下的sky.jpg!!!!!!<!-- <input type="file" accept="image/*" onchange="loadFile(event)"> --><input type="file" onchange="loadFile(event)"><canvas id="canvas"></canvas><script>let imgSrc = 'https://p2.music.126.net/UrFqYFILx5wBDx-dsIz15A==/109951163025047288.jpg?param=256y256';let jpgImgSrc = 'https://p1.music.126.net/LOTxqRjFm03VJEOHJbUqMw==/109951165944804127.jpg?param=256y256';// let jpgImgSrc = 'https://img-blog.csdnimg.cn/361654c6611d49bebab085509bd6a244.jpeg';// let gifImagSrc = 'https://img-blog.csdnimg.cn/04f072cdb3934051a505a54a4d6f46ed.gif';let vexterSource = `precision mediump float;attribute vec4 a_Position;attribute vec2 a_TexCoord;varying vec2 v_TexCoord;void main(){gl_Position = a_Position;//顶点坐标v_TexCoord = a_TexCoord;//纹理坐标系下的坐标}`let fragmentSource = `precision mediump float;uniform sampler2D u_Sampler0;//纹理uniform sampler2D u_Sampler1;//纹理varying vec2 v_TexCoord;//纹理坐标系下的坐标void main(){vec4 color0 = texture2D(u_Sampler0,v_TexCoord);vec4 color1 = texture2D(u_Sampler1,v_TexCoord);gl_FragColor = color0 * color1; }` let canvas = document.getElementById('canvas');let gl = canvas.getContext('webgl');//创建顶点着色器let vertextShader = gl.createShader(gl.VERTEX_SHADER);//给顶点着色器赋值gl.shaderSource(vertextShader, vexterSource);//编译顶点着色器gl.compileShader(vertextShader);//创建片元着色器let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//给片元着色器赋值gl.shaderSource(fragmentShader, fragmentSource)//编译片元着色器gl.compileShader(fragmentShader)//检测着色器创建是否正确if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {alert(gl.getShaderInfoLog(fragmentShader));}//创建程序let program = gl.createProgram();//给程序赋值gl.attachShader(program, vertextShader);gl.attachShader(program, fragmentShader);//连接程序gl.linkProgram(program);//使用此着色器gl.useProgram(program);//变量的处理//获取顶点着色器中的变量a_Positionlet a_Position = gl.getAttribLocation(program, 'a_Position');//获取顶点着色器中的变量a_TexCoordlet a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');//获取片元着色器中的变量u_Samplerlet u_Sampler0 = gl.getUniformLocation(program, 'u_Sampler0');//获取片元着色器中的变量u_Samplerlet u_Sampler1 = gl.getUniformLocation(program, 'u_Sampler1');//顶点坐标与纹理坐标let vertexTexCoords = new Float32Array([-0.5, 0.5, 0.0, 1.0,-0.5, -0.5, 0.0, 0.0,0.5, 0.5, 1.0, 1.0,0.5, -0.5, 1.0, 0.0,])let f32Seize = vertexTexCoords.BYTES_PER_ELEMENT;//给定点设置坐标 几何图形与纹理的坐标let vertexBuffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_Position赋值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, f32Seize * 4, 0);//使用此变量gl.enableVertexAttribArray(a_Position);//纹理坐标let texCoordBuffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_TexCoord赋值gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f32Seize * 4, f32Seize * 2);//使用此变量gl.enableVertexAttribArray(a_TexCoord);gl.clearColor(0, 0, 0, 1.0);//获取图片的素材 getImage(imgSrc, u_Sampler1, gl.TEXTURE0, 0);getImage(jpgImgSrc, u_Sampler1, gl.TEXTURE1, 1);function getImage(imgYrl, u_Sampler, TEXTURE, num) {// 文件里的文本会在这里被打印出来 let img = new Image();img.src = imgYrl;img.crossOrigin = ""img.onload = () => {let texture = gl.createTexture();showImage(texture, img, u_Sampler, TEXTURE, num)document.body.appendChild(img)}}function showImage(texture, img, u_Sampler, TEXTURE, texUnit) {console.log(texture, img, u_Sampler, TEXTURE, texUnit)document.body.appendChild(img)gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//开始0号纹理通道gl.activeTexture(TEXTURE); //想目标绑定纹理对象gl.bindTexture(gl.TEXTURE_2D, texture);//配置纹理的参数gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);//设置着色器参数gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);//设置纹理数据gl.uniform1i(u_Sampler, texUnit)gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)}</script>
</body></html>相关文章：
webGL编程指南 第五章 MultiTexture.html
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 ：空 上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合 <!DOCTYPE html> <htm…...
mysql8安装和驱动jar包下载
方式一：基于docker安装 下拉镜像 docker pull mysql:8.0.21 启动镜像 docker run -p 3307:3306 --name mysql -e MYSQL_ROOT_PASSWORDhadoop -d mysql:8.0.21 启动成功后，进入容器内部拷贝配置文件，到宿主主机 docker cp mysql:/etc/mysql…...
（SpringBoot）第五章：SpringBoot创建和使用
文章目录 一：Spring和SpringBoot（1）Spring已解决和未解决的问题（2）SpringBoot 二：Spring项目的创建（1）IDEA创建（2）网页端创建 三：项目目录介绍及运…...
Linux重定向
文章目录 1. 文件描述符分配规则2. 重定向接口dup2自定义shell重定向(补充) 3. 标准输出和标准错误4. 如何理解一切接文件 本章代码gitee地址：文件重定向 1. 文件描述符分配规则 文件描述符的分配规则是从0下标开始，寻址最小的没有使用的数组位置&#…...
Python之文件与文件夹操作及 pytest 测试习题
目录 1、文本文件读写基础。编写程序，在 当前目录下创建一个文本文件 test.txt，并向其中写入字符串 hello world。2、编写一个程序 demo.py，要求运行该程序后，生成 demo_new.py 文件，其中内容与demo.py 一样࿰…...
物联网：实现数据驱动决策，推动经济发展
开发物联网系统的意义主要体现在以下几个方面： 连接一切：物联网的目标是连接一切，将生活中的各种物理对象互联起来。通过物联网开发，我们可以实现各类设备的智能化，包括家居设备、交通工具、工业设备等。这将为人们提…...
Leetcode 2929. Distribute Candies Among Children II
Leetcode 2929. Distribute Candies Among Children II 1. 解题思路2. 代码实现 题目链接：2929. Distribute Candies Among Children II 1. 解题思路 这一题很惭愧，没能自力搞定，最后是看了大佬的思路之后才做出来的，唉…… 这…...
【面经】ES中分片是什么？副本是什么？
ES分片 分片是将一个索引切分为多个底层物理的Lucene索引，这些被切分出来的每个部分称为一个分片。 每个分片都是一个全功能且独立的索引，可由集群中的任何主机存储。 在创建索引时，用户可以指定其分片的数量。 默认情况下，每个索…...
【算法练习Day46】判断子序列不同的子序列
📝个人主页：Sherry的成长之路 🏠学习社区：Sherry的成长之路（个人社区） 📖专栏链接：练题 🎯长路漫漫浩浩，万事皆有期待 文章目录 判断子序列不同的子序列总结…...
Java设计模式之访问者模式
目录 定义 结构 案例 优点 缺点 使用场景 扩展 分派 案例实现须知 动态分派 静态分派 双分派 定义 封装一些作用于某种数据结构中的各元素的操作，它可以在不改变这个数据结构的前提下定义作用于这些元素的新的操作。 结构 访问者模式包含以下主要角色…...
PySide/PYQT如何用Qt Designer和代码来设置文字属性，如何设置文字颜色？
文章目录 📖 介绍 📖🏡 环境 🏡📒 实现方法 📒📝 Qt Designer设置📝 代码📖 介绍 📖 本人介绍如何使用Qt Designer/代码来设置字体属性（包含字体颜色） 🏡 环境 🏡 本文使用Pyside6来进行演示📒 实现方法 📒 📝 Qt Designer设置 首先打开Qt De…...
ubuntu 设置最大带宽
背景 近日做实验，需要限制一些机子的带宽以达到模拟的效果。在网上搜索了一阵子，结合自己实操的经验，潦草写下这篇文章，供自己与有需要的人参考。 环境： Ubuntu 22.04.1 LTS 安装 wondershaper 和 speedtest-cli w…...
如何在 Python 中执行 MySQL 结果限制和分页查询
Python MySQL 限制结果 限制结果数量 示例 1: 获取您自己的 Python 服务器 选择 “customers” 表中的前 5 条记录： import mysql.connectormydb mysql.connector.connect(host"localhost",user"您的用户名",password"您的密码"…...
Django配置文件，request，链接mysql方法，Orm简介
三板斧问题(views.py) HttpResponse # 返回的是字符串render # 渲染一个HTML静态文件，模板文件redirect # 重定向的 在视图文件中得视图函数必须要接收一个形参request，并且，视图函数也要有返回值ÿ…...
ubuntu下载各个版本chrome方法
Ubuntu/debian 在这里面找版本 https://unix.stackexchange.com/a/612981然后添充进去 http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_[HERE_THE_FULL_VERSION]_amd64.deb比如：https://dl.google.com/linux/chro…...
Http状态码502常见原因及排错思路（实战）
Http状态码502常见原因及排错思路 502表示Bad Gateway。当Nginx返回502错误时，通常表示Nginx作为代理服务器无法从上游服务器（如：我们的后端服务器地址）获取有效的响应。导致这种情况的原因有很多： 后端服务器故障ngin…...
国际阿里云：无法ping通ECS实例公网IP的排查方法！！！
无法ping通ECS实例的原因较多，您可以参考本文进行排查。 问题现象 本地客户端无法ping通目标ECS实例公网IP，例如： 本地客户端为Linux系统，ping目标ECS实例公网IP时无响应，如下所示： 本地客户端为Windo…...
Nginx缓存基础
1 nginx缓存的流程 客户端需要访问服务器的数据时，如果都直接向服务器发送请求，服务器接收过多的请求，压力会比较大，也比较耗时；而如果在nginx缓存一定的数据，使客户端向基于nginx的代理服务器发送请求&…...
【数据结构】Lambda
⭐ 作者：小胡_不糊涂 🌱 作者主页：小胡_不糊涂的个人主页 📀 收录专栏：浅谈数据结构 💖 持续更文，关注博主少走弯路，谢谢大家支持 💖 Lambda表达式 1. 背景1.1 语法1.2 函…...
力扣labuladong——一刷day28
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、力扣380. O(1) 时间插入、删除和获取随机元素二、力扣710. 黑名单中的随机数 前言 常数时间删除-查找数组中的任意元素，且随机访问概率一致 如果…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ） 缓存工作原理分析 在了解了本地缓存和远程缓存之后，我们来探究缓存是如何工作的。以计算文件的哈希串为例，若后续运行任务时文件哈希串未变，系统会直接使用对应的输出和制品文件。 2 …...