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

webGL编程指南 第五章 MultiTexture.html

news 2026/4/11 8:59: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

3步搞定专业歌词制作：LRC Maker终极指南

3步搞定专业歌词制作&#xff1a;LRC Maker终极指南 【免费下载链接】lrc-maker 歌词滚动姬&#xff5c;可能是你所能见到的最好用的歌词制作工具 项目地址: https://gitcode.com/gh_mirrors/lr/lrc-maker 还在为制作歌词时间轴而烦恼吗&#xff1f;想要让歌词与音乐完美…...

编程新知 2026/4/11 8:59:08

论文AI率标准2026年大变化：各高校各平台最新红线全整理

2026年各高校和检测平台的AI率红线确实有了新的变化&#xff0c;整体趋势是要求越来越严。把目前能收集到的信息整理在一起&#xff0c;供参考。 注意&#xff1a;各高校政策更新比较快&#xff0c;以下信息以2026年初的公开要求为准&#xff0c;具体以所在学校最新通知为准。…...

编程新知 2026/4/11 8:07:01

6款降AI工具2026年度横评：第一梯队到底谁在虚标达标率？

降AI工具的「达标率」数据&#xff0c;官网上一个比一个好看。99%、99.5%、「行业最高」……但这些数字的测试条件是什么&#xff1f;有没有虚标&#xff1f; 这篇自己测&#xff0c;用统一条件验证一下谁的达标率货真价实&#xff0c;谁在玩文字游戏。 先说结论&#xff1a;…...

编程新知 2026/4/11 8:07:00

【国家级生态监测项目实录】：R语言建模结果突变73%偏差？根源竟是R_ENV变量污染！

第一章&#xff1a;【国家级生态监测项目实录】&#xff1a;R语言建模结果突变73%偏差&#xff1f;根源竟是R_ENV变量污染&#xff01;在某国家级森林碳汇动态监测项目中&#xff0c;团队基于R 4.3.1构建的随机森林回归模型&#xff0c;在生产环境批量预测时突发异常——关键指…...

编程新知 2026/4/11 6:07:05

CCS工程报错找不到库？别慌，手把手教你用XGCONF和工程属性搞定RTSC/裸机配置

CCS工程报错找不到库&#xff1f;三步精准定位与RTSC/裸机配置全攻略 刚接触TI芯片开发的朋友们&#xff0c;一定遇到过这样的场景&#xff1a;官方例程跑得飞起&#xff0c;自己新建的工程却频频报出"library not found"的红色警告。这就像拿到一把新枪却发现子弹型…...

编程新知 2026/4/11 4:46:33

Americhem于Chinaplas 2026宣布在华新增投资，进一步拓展其全球医疗健康业务版图

全球领先的高分子材料解决方案提供商Americhem今日宣布&#xff0c;通过在中国苏州新建一座洁净复合材料生产设施&#xff0c;进一步强化其在医疗健康领域的能力&#xff1b;同时&#xff0c;公司还将在Chinaplas 2026展会上推出多项先进材料技术。该设施预计将于2026年下半年投…...

编程新知 2026/4/11 0:12:46

流程控制作业

1、从键盘输入三个同学的成绩&#xff0c;然后找出最高分。2、输入三个同学的成绩&#xff0c;然后由大到小排序。3、求出1000以内的所有完数&#xff0c;如6123除了它自身以外的因子之和等于它本身叫完数。...

编程新知 2026/4/10 23:52:27

【K8s】【笔记】----第七章：Kubernetes Service详解

【K8s】【笔记】----第一章&#xff1a;Kubernetes 介绍 【K8s】【笔记】----第二章&#xff1a;Kubernetes 集群环境搭建 【K8s】【笔记】----第三章&#xff1a;Kubernetes 资源管理 【K8s】【笔记】----第四章&#xff1a;Kubernetes 实战入门 【K8s】【笔记】----第五章&am…...

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

java经典场景题 (重要)

1.热点数据处理。 场景&#xff1a;流量明星发送微博信息&#xff0c;一分钟内涌入5000万人。 首先我们要对数据的流动进行充分的理解&#xff0c;用户点击微博&#xff0c;点开热点信息&#xff0c;点赞&#xff0c;评论&#xff0c;转发&#xff0c;客户端传入数据库&#…...

编程新知 2026/4/10 22:41:08

焊接机器人数据采集物联网解决方案

方案背景 在汽车制造领域&#xff0c;焊接机器人作为车身焊接、零部件焊接、汽车总装的自动化生产设备&#xff0c;发挥着至关重要的作用。它们能够精确、高效地完成各种焊接任务&#xff0c;确保焊接质量稳定可靠&#xff0c;焊接强度、焊缝外观等关键指标符合严格的标准要求。…...

编程新知 2026/4/10 22:00:33