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

webGL编程指南 第五章 MultiTexture.html

news 2026/4/11 7:08:35

我会持续更新关于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的编程指南中的代码。 当前的代码不会使用书中的缩写&#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 &#xff1a;空 上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合 <!DOCTYPE html> <htm…...

编程日记 2023/11/12 20:53:06

mysql8安装和驱动jar包下载

方式一&#xff1a;基于docker安装 下拉镜像 docker pull mysql:8.0.21 启动镜像 docker run -p 3307:3306 --name mysql -e MYSQL_ROOT_PASSWORDhadoop -d mysql:8.0.21 启动成功后&#xff0c;进入容器内部拷贝配置文件&#xff0c;到宿主主机 docker cp mysql:/etc/mysql…...

编程日记 2023/11/12 20:52:05

（SpringBoot）第五章：SpringBoot创建和使用

文章目录 一&#xff1a;Spring和SpringBoot&#xff08;1&#xff09;Spring已解决和未解决的问题&#xff08;2&#xff09;SpringBoot 二&#xff1a;Spring项目的创建&#xff08;1&#xff09;IDEA创建&#xff08;2&#xff09;网页端创建 三&#xff1a;项目目录介绍及运…...

编程日记 2023/11/12 20:50:03

Linux重定向

文章目录 1. 文件描述符分配规则2. 重定向接口dup2自定义shell重定向(补充) 3. 标准输出和标准错误4. 如何理解一切接文件 本章代码gitee地址&#xff1a;文件重定向 1. 文件描述符分配规则 文件描述符的分配规则是从0下标开始&#xff0c;寻址最小的没有使用的数组位置&#…...

编程日记 2023/11/12 20:45:59

Python之文件与文件夹操作及 pytest 测试习题

目录 1、文本文件读写基础。编写程序&#xff0c;在 当前目录下创建一个文本文件 test.txt&#xff0c;并向其中写入字符串 hello world。2、编写一个程序 demo.py&#xff0c;要求运行该程序后&#xff0c;生成 demo_new.py 文件&#xff0c;其中内容与demo.py 一样&#xff0…...

编程日记 2023/11/12 20:43:57

物联网：实现数据驱动决策，推动经济发展

开发物联网系统的意义主要体现在以下几个方面&#xff1a; 连接一切&#xff1a;物联网的目标是连接一切&#xff0c;将生活中的各种物理对象互联起来。通过物联网开发&#xff0c;我们可以实现各类设备的智能化&#xff0c;包括家居设备、交通工具、工业设备等。这将为人们提…...

编程日记 2023/11/12 20:42:56

Leetcode 2929. Distribute Candies Among Children II

Leetcode 2929. Distribute Candies Among Children II 1. 解题思路2. 代码实现 题目链接&#xff1a;2929. Distribute Candies Among Children II 1. 解题思路 这一题很惭愧&#xff0c;没能自力搞定&#xff0c;最后是看了大佬的思路之后才做出来的&#xff0c;唉…… 这…...

编程日记 2023/11/12 20:41:55

【面经】ES中分片是什么？副本是什么？

ES分片 分片是将一个索引切分为多个底层物理的Lucene索引&#xff0c;这些被切分出来的每个部分称为一个分片。 每个分片都是一个全功能且独立的索引&#xff0c;可由集群中的任何主机存储。 在创建索引时&#xff0c;用户可以指定其分片的数量。 默认情况下&#xff0c;每个索…...

编程日记 2023/11/12 20:40:55

【算法练习Day46】判断子序列不同的子序列

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 判断子序列不同的子序列总结…...

编程日记 2023/11/12 20:39:54

Java设计模式之访问者模式

目录 定义 结构 案例 优点 缺点 使用场景 扩展 分派 案例实现须知 动态分派 静态分派 双分派 定义 封装一些作用于某种数据结构中的各元素的操作&#xff0c;它可以在不改变这个数据结构的前提下定义作用于这些元素的新的操作。 结构 访问者模式包含以下主要角色…...

编程日记 2023/11/12 20:38:53

PySide/PYQT如何用Qt Designer和代码来设置文字属性，如何设置文字颜色？

文章目录 📖 介绍 📖🏡 环境 🏡📒 实现方法 📒📝 Qt Designer设置📝 代码📖 介绍 📖 本人介绍如何使用Qt Designer/代码来设置字体属性（包含字体颜色） 🏡 环境 🏡 本文使用Pyside6来进行演示📒 实现方法 📒 📝 Qt Designer设置 首先打开Qt De…...

编程日记 2023/11/12 20:37:50

ubuntu 设置最大带宽

背景 近日做实验&#xff0c;需要限制一些机子的带宽以达到模拟的效果。在网上搜索了一阵子&#xff0c;结合自己实操的经验&#xff0c;潦草写下这篇文章&#xff0c;供自己与有需要的人参考。 环境&#xff1a; Ubuntu 22.04.1 LTS 安装 wondershaper 和 speedtest-cli w…...

编程日记 2023/11/12 20:36:49

如何在 Python 中执行 MySQL 结果限制和分页查询

Python MySQL 限制结果 限制结果数量 示例 1: 获取您自己的 Python 服务器 选择 “customers” 表中的前 5 条记录&#xff1a; import mysql.connectormydb mysql.connector.connect(host"localhost",user"您的用户名",password"您的密码"…...

编程日记 2023/11/12 20:35:48

Django配置文件，request，链接mysql方法，Orm简介

三板斧问题(views.py) HttpResponse # 返回的是字符串render # 渲染一个HTML静态文件&#xff0c;模板文件redirect # 重定向的 在视图文件中得视图函数必须要接收一个形参request&#xff0c;并且&#xff0c;视图函数也要有返回值&#xff…...

编程日记 2023/11/12 20:34:47

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比如&#xff1a;https://dl.google.com/linux/chro…...

编程日记 2023/11/12 20:33:46

Http状态码502常见原因及排错思路（实战）

Http状态码502常见原因及排错思路 502表示Bad Gateway。当Nginx返回502错误时&#xff0c;通常表示Nginx作为代理服务器无法从上游服务器&#xff08;如&#xff1a;我们的后端服务器地址&#xff09;获取有效的响应。导致这种情况的原因有很多&#xff1a; 后端服务器故障ngin…...

编程日记 2023/11/12 20:32:45

国际阿里云：无法ping通ECS实例公网IP的排查方法！！！

无法ping通ECS实例的原因较多&#xff0c;您可以参考本文进行排查。 问题现象 本地客户端无法ping通目标ECS实例公网IP&#xff0c;例如&#xff1a; 本地客户端为Linux系统&#xff0c;ping目标ECS实例公网IP时无响应&#xff0c;如下所示&#xff1a; 本地客户端为Windo…...

编程日记 2023/11/12 20:31:44

Nginx缓存基础

1 nginx缓存的流程 客户端需要访问服务器的数据时&#xff0c;如果都直接向服务器发送请求&#xff0c;服务器接收过多的请求&#xff0c;压力会比较大&#xff0c;也比较耗时&#xff1b;而如果在nginx缓存一定的数据&#xff0c;使客户端向基于nginx的代理服务器发送请求&…...

编程日记 2023/11/12 20:30:43

【数据结构】Lambda

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; Lambda表达式 1. 背景1.1 语法1.2 函…...

编程日记 2023/11/12 20:29:42

力扣labuladong——一刷day28

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣380. O(1) 时间插入、删除和获取随机元素二、力扣710. 黑名单中的随机数 前言 常数时间删除-查找数组中的任意元素&#xff0c;且随机访问概率一致 如果…...

编程日记 2023/11/12 20:28:40

SmallThinker-3B-Preview多轮对话效果实测：技术方案讨论与迭代

SmallThinker-3B-Preview多轮对话效果实测&#xff1a;一次关于高并发秒杀系统的技术方案迭代 最近在测试一些轻量级的对话模型&#xff0c;想看看它们在处理复杂技术问题时的实际表现。我手头正好有一个叫SmallThinker-3B-Preview的模型&#xff0c;虽然参数规模不大&#xf…...

编程新知 2026/4/11 6:57:29

保姆级教程：GPT-SoVITS一键部署，5秒语音克隆你的专属AI助手

保姆级教程&#xff1a;GPT-SoVITS一键部署&#xff0c;5秒语音克隆你的专属AI助手 1. 引言&#xff1a;为什么选择GPT-SoVITS 想象一下&#xff0c;你只需要录制5秒钟的语音&#xff0c;就能让AI用你的声音朗读任何文字——这就是GPT-SoVITS带来的神奇体验。作为当前最先进的…...

编程新知 2026/4/11 5:47:57

Phi-4-mini-reasoning代码审查助手：集成到IDE的智能提示插件

Phi-4-mini-reasoning代码审查助手&#xff1a;集成到IDE的智能提示插件 1. 智能代码审查的新时代 想象一下&#xff0c;当你正在IntelliJ IDEA中编写代码时&#xff0c;右侧边栏突然弹出一条提示&#xff1a;"这段循环可以改用Stream API简化&#xff0c;点击查看示例&…...

编程新知 2026/4/11 5:33:45

不止于安装：用Autopsy分析磁盘镜像(.E01)的完整入门流程与模块选择指南

不止于安装&#xff1a;用Autopsy分析磁盘镜像(.E01)的完整入门流程与模块选择指南 当你第一次打开Autopsy&#xff0c;面对满屏的专业术语和复杂选项时&#xff0c;那种手足无措的感觉我深有体会。三年前&#xff0c;我接手第一个数据泄露调查案时&#xff0c;就曾盯着那个空白…...

编程新知 2026/4/11 5:11:39

数据增强技术对比：Mosaic、Mixup、Cutout与CutMix的核心优势与应用场景

1. 数据增强技术入门指南 当你第一次训练计算机视觉模型时&#xff0c;可能会遇到一个常见问题&#xff1a;为什么模型在训练集上表现很好&#xff0c;但在真实场景中却频频出错&#xff1f;这往往是因为训练数据不够多样化。数据增强技术就是解决这个问题的利器&#xff0c;它…...

编程新知 2026/4/11 1:26:21

思科ITN 7.00 PTSA综合实验通关指南：多版本识别与满分配置解析

1. 思科ITN 7.00 PTSA实验版本差异全解析 第一次接触思科ITN 7.00 PTSA实验的同学&#xff0c;往往会被随机分配的不同实验版本搞得晕头转向。我当年备考时就遇到过这种情况——明明照着同学的满分答案配置&#xff0c;最后却连基础网络连通都做不到。后来才发现&#xff0c;原…...

编程新知 2026/4/11 1:18:13

微波管参数全解析：什么是噪声系数？

摘要&#xff1a;上一篇我们聊了决定卫星生死的核心参数「效率」&#xff0c;今天来讲决定雷达、卫星性能下限的关键指标 ——噪声系数。为什么地面雷达能看清几百公里外一架几米长的飞机&#xff1f;为什么卫星能接收到地面几瓦发射机传来的微弱信号&#xff1f;答案从来不是 …...

编程新知 2026/4/11 0:00:33

Fancy Components最佳实践：性能优化和组件组合技巧终极指南

Fancy Components最佳实践&#xff1a;性能优化和组件组合技巧终极指南 【免费下载链接】fancy 项目地址: https://gitcode.com/gh_mirrors/fan/fancy Fancy Components是一个不断增长的React动画组件库&#xff0c;专注于为网站添加精美、有趣的微交互效果。作为开源项…...

编程新知 2026/4/10 23:11:48

【2026奇点技术白皮书首发】：全球仅23家通过AI原生研发成熟度三级认证企业的共性实践

第一章&#xff1a;AI原生软件研发&#xff1a;2026奇点智能技术大会核心议题 2026奇点智能技术大会(https://ml-summit.org) AI原生软件研发已超越传统“AI赋能”范式&#xff0c;进入以大模型为运行时、以提示与推理链为基本构件、以LLM-as-OS为架构基底的新纪元。2026奇点智…...

编程新知 2026/4/10 23:07:42

如何突破访问限制？三大开源工具让你轻松畅享付费内容

如何突破访问限制&#xff1f;三大开源工具让你轻松畅享付费内容 你是否曾遇到这样的情况&#xff1a;找到了一篇急需的专业文章&#xff0c;却被付费墙挡在门外&#xff1f;内容解锁工具就像一把万能钥匙&#xff0c;能够帮助你突破这些访问限制。本文将介绍三款主流的内容解锁…...

编程新知 2026/4/10 22:38:58