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. 黑名单中的随机数 前言 常数时间删除-查找数组中的任意元素，且随机访问概率一致 如果…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...
DBLP数据库是什么？
DBLP（Digital Bibliography & Library Project）Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高，数据库文献更新速度很快，很好地反映了国际计算机科学学术研…...
Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践
前言：本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中，跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南，你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案，并结合内网…...
2.2.2 ASPICE的需求分析
ASPICE的需求分析是汽车软件开发过程中至关重要的一环，它涉及到对需求进行详细分析、验证和确认，以确保软件产品能够满足客户和用户的需求。在ASPICE中，需求分析的关键步骤包括： 需求细化：将从需求收集阶段获得的高层需…...
Linux操作系统共享Windows操作系统的文件
目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项，设置文件夹共享为总是启用，点击添加，可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download（这是我共享的文件夹）&…...
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
报错 找到package.json文件 找到这个修改成 "lint": "eslint --fix --ext .js,.vue src" 为elsint有配置结尾换行符，最后运行：npm run lint --fix...