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

webGL进阶（一）多重纹理效果

news 2026/2/8 15:25:42

效果：

代码：

<!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>绘制多重纹理（漂浮的云）</title><script src="glMatrix-0.9.6.min.js"></script><script>let vertexstring = `attribute vec4 a_position;uniform   mat4    proj;attribute vec2 outUV;varying vec2 inUV;void main(void){gl_Position =  a_position;inUV = outUV;}`;let fragmentstring = `precision mediump float;uniform sampler2D texture;uniform sampler2D texture1;uniform float anim;varying vec2 inUV;void main(void){vec4 color1 =texture2D(texture,inUV);vec4 color2 =texture2D(texture1, vec2(inUV.x + anim, inUV.y));gl_FragColor = color1;}`;var projMat4 = mat4.create();var webgl;var uniformTexture = 0;var uniformTexture1 = 0;var uniformAnim = 0;var count = 0;var texture0;var texture1;function webglStart() {init();tick();}function tick() {requestAnimFrame(tick)draw();};function init() {initWebgl();initShader();initBuffer();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let arr = [-0.5, -0.5, 0, 1,      0, 0,-0.5, 0.5, 0, 1,       0, 1,0.5, 0.5, 0, 1,         1, 1,0.5, -0.5, 0, 1,        1, 0,]let index = [0, 1, 2,2, 0, 3];let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 6 * 4, 0);let uniformProj = webgl.getUniformLocation(webgl.program, "proj");webgl.uniformMatrix4fv(uniformProj, false, projMat4);attribOutUV = webgl.getAttribLocation(webgl.program, "outUV");webgl.enableVertexAttribArray(attribOutUV);webgl.vertexAttribPointer(attribOutUV, 2, webgl.FLOAT, false, 6 * 4, 4 * 4);let indexarr = new Uint8Array(index)let indexBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indexarr, webgl.STATIC_DRAW);uniformTexture = webgl.getUniformLocation(webgl.program, "texture");uniformTexture1 = webgl.getUniformLocation(webgl.program, "texture1");texture1 = initTexture("fog.png");texture0 = initTexture("山水图像纹理映射.png");}function handleLoadedTexture(texture) {webgl.bindTexture(webgl.TEXTURE_2D, texture);webgl.pixelStorei(webgl.UNPACK_FLIP_Y_WEBGL,666);webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGBA, webgl.RGBA, webgl.UNSIGNED_BYTE, texture.image);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.LINEAR);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.LINEAR);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);}function initTexture(imageFile, num) {let textureHandle = webgl.createTexture();textureHandle.image = new Image();textureHandle.image.src = imageFile;textureHandle.image.onload = function () {handleLoadedTexture(textureHandle, num)}return textureHandle;}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);//纹理变动uniformAnim = webgl.getUniformLocation(webgl.program, "anim");count = count + 0.01;webgl.uniform1f(uniformAnim, count);webgl.activeTexture(webgl.TEXTURE0);webgl.bindTexture(webgl.TEXTURE_2D, texture0);webgl.uniform1i(uniformTexture, 0);webgl.activeTexture(webgl.TEXTURE1);webgl.bindTexture(webgl.TEXTURE_2D, texture1);webgl.uniform1i(uniformTexture1, 1);webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_BYTE, 0);}window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback, element) {window.setTimeout(callback, 1000 / 60);};})();</script>
</head><body onload="webglStart()"><canvas id='myCanvas' width="1024" height='1000'></canvas>
</body></html>

复盘：

相关文章：

webGL进阶（一）多重纹理效果

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…...

编程日记 2024/10/9 23:55:39

flink-jdbc-driver

Flink JDBC 驱动程序是一个 Java 库&#xff0c;使客户端能够通过 SQL 网关将 Flink SQL 发送到 Flink 集群。 首先启动&#xff1a;1.flink集群&#xff0c;随意任何集群。 2.启动flink-sql-gateway&#xff1a; sql-gateway.sh start -Dsql-gateway.endpoint.rest.addresslo…...

编程日记 2024/10/9 23:52:35

快速的配置Prettier，让代码更整洁

快速的配置Prettier&#xff0c;让代码更整洁 一个人一个代码风格&#xff0c;先抛开语法的使用不谈&#xff0c;加不加空格、加不加分号也是萝卜白菜各有所爱&#xff0c;那怎么统一我们的代码格式呢 prettier 就是为我们解决这个问题的 1. 如何制定我们的代码风格 我们可以在…...

编程日记 2024/10/9 23:51:34

JavaEE: HTTPS的魅力与优势揭秘

文章目录 HTTPSHTTPS 是什么HTTPS 基本工作过程Fiddle 等抓包工具,为啥能解析 HTTPS 的数据? HTTPS HTTPS 是什么 HTTPS 是一个应用层协议,是在 HTTP 协议的基础上引入了一个加密层. 几个核心概念: 明文: 要传输的原始数据.密文: 把明文进行加密之后得到一个让别人不能理解…...

编程日记 2024/10/9 23:50:33

软件设计师——系统基础开发

&#x1f4d4;个人主页&#x1f4da;&#xff1a;秋邱-CSDN博客☀️专属专栏✨&#xff1a;软考——软件设计师&#x1f3c5;往期回顾&#x1f3c6;&#xff1a;软件设计师——信息安全&#x1f31f;其他专栏&#x1f31f;&#xff1a;C语言_秋邱 ​ 一、软件工程概述 1.1、考…...

编程日记 2024/10/9 23:49:32

架构设计笔记-7-系统架构设计基础知识

目录 知识要点 单选 案例分析 1.质量属性 / 管道过滤器 / 数据仓库风格 2.面向对象风格 / 控制环路风格 3.软件架构风格 / 架构风格选择 4.体系结构方案对比 5.面向对象风格 / 基于规则风格 6.解释器风格 / 管道过滤器风格 7.面向对象风格 / 解释器风格 8.软件架构复…...

编程日记 2024/10/9 23:48:30

跨平台应用程序本地化过程的特点

跨平台应用程序本地化不仅仅是将单词从一种语言翻译成另一种语言。这是关于调整应用程序&#xff0c;使其无缝融入全球用户的不同文化和语言环境&#xff0c;无论他们使用的是哪种设备或平台。这个过程对于跨平台应用程序来说尤其复杂&#xff0c;它们需要在多个操作系统和设备…...

编程日记 2024/10/9 23:46:29

C++面试速通宝典——9

170. 简述数组和指针的区别&#xff1f; ‌‌‌‌　　答&#xff1a;数组要么在静态存储区被创建&#xff08;如全局数组&#xff09;&#xff0c;要么在栈上被创建。指针可以随时指向任意类型的内存块。 1. 修改内容上的区别 char a[] “hello”; a[0] ‘X’; char * p …...

编程日记 2024/10/9 23:43:27

阿里巴巴商品详情API返回值：电商行业发展的新动力

阿里巴巴的商品详情API在电商行业中扮演着至关重要的角色&#xff0c;它不仅为商家和消费者提供了丰富的产品信息&#xff0c;还推动了电商行业的进一步发展和创新。通过API接口&#xff0c;开发者可以获取商品的详细信息&#xff0c;如标题、价格、库存、评价等&#xff0c;进…...

编程日记 2024/10/9 23:39:23

php的urlencode和rawurlencode区别

urlencode和rawurlencode都是用于对URL进行编码的函数&#xff0c;但它们在处理方式和应用场景上存在明显的区别。以下是关于这两个函数的详细比较&#xff1a; 一、定义与标准 urlencode&#xff1a;基于rawurlencode标准&#xff0c;但有略微的不同&#xff0c;它定义在rfc…...

编程日记 2024/10/9 23:37:20

LeetCode讲解篇之322. 零钱兑换

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们可以使用动态规划解决这道题&#xff0c;我们首先定义一个数组&#xff0c;数组中第i个元素表示组成金额 i 的最少硬币个数 我们遍历数组的1 ~ amount号位置&#xff0c;对coins进行遍历&#xff0c;查找选…...

编程日记 2024/10/9 23:34:16

猴子吃桃-C语言

1.问题&#xff1a; 猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个。 第二天早上又将剩下的桃子吃掉一半&#xff0c;又多吃一个。以后每天早上都吃了前一天剩下的一半零一个。 到第N天早上想再吃时&#xff0c;见只剩下一个…...

编程日记 2024/10/9 23:31:14

【C++】单例模式「详尽版」

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 什么是单例模式如何实现单例模式饿汉模式和懒汉模式饿汉模式懒汉模式饿汉模式和懒汉模式的优缺点1.饿汉模式的优缺点2.懒汉模式的优缺点 什么是单例模式 C单例模式是一种非常重要的设计模式&#xf…...

编程日记 2024/10/9 23:30:12

MongoDB集群模式详解及应用实战

目录 本节课内容&#xff1a; 集群搭建 1.创建3个目录&#xff1a; 2.编辑配置文件 ​编辑 3.启动&#xff1a; 4.看看&#xff1a; 5.另外&#xff0c;两个如上1&#xff0c;2&#xff0c;3步骤操作 &#xff0c;但是日志目录&#xff0c;端口什么的需要改一下即可。 …...

编程日记 2024/10/9 23:29:11

接着上一篇ｓｔｐ 实验继续

理论看上一篇&#xff0c;我们直接实验 首先找出&#xff52;&#xff4f;&#xff4f;&#xff54;　桥 很明显　&#xff53;&#xff57;&#xff11;　为&#xff52;&#xff4f;&#xff4f;&#xff54;　桥&#xff0c;所谓&#xff53;&#xff57;&#xff11;　　&a…...

编程日记 2024/10/9 23:28:11

怎么将手机备忘录传送至电脑

在数字化时代&#xff0c;手机备忘录已成为我们生活中不可或缺的一部分。无论是记录购物清单、工作事项&#xff0c;还是灵感闪现的瞬间&#xff0c;手机备忘录都能随时记录下这些宝贵的信息&#xff0c;帮助我们防止遗忘。然而&#xff0c;有时候我们需要将这些备忘录内容转移…...

编程日记 2024/10/9 23:27:09

解决触摸屏屏幕乱动的问题：E: 无法定位软件包 libinput

在 Ubuntu 中&#xff0c;你可能已经有 libinput 库&#xff0c;它通常默认包含在系统中。如果你想使用 libinput 来管理输入设备&#xff08;例如触摸屏或触摸板&#xff09;&#xff0c;通常不需要安装额外的软件包&#xff0c;而是直接使用系统自带的工具。 不过&#xff0…...

编程日记 2024/10/9 23:26:09

RISC-V笔记——基础

1. 前言 RISC-V旨在支持广泛的定制和专业化。RISC-V的ISA是由一个基本整型ISA和其它对基本ISA的可选扩展组成。每个整型ISA可以使用一个或多个可选的ISA扩展进行扩展。 基本整型ISA精选了最小的一组指令&#xff0c;这些指令足以为编译器、汇编器、链接器和操作系统提供足够的…...

编程日记 2024/10/9 23:24:06

「Kafka」Kafka消息可靠性和重复消费问题（五）

在 Kafka 中&#xff0c;实现消息的可靠性和避免重复消费是保证数据一致性和系统稳定性的关键。Kafka 提供了多种机制来实现这两个目标。 1. Kafka 消息可靠性 Kafka 的可靠性主要体现在消息的投递和存储上&#xff0c;以确保消息不会丢失。具体来说&#xff0c;有以下几个措…...

编程日记 2024/10/9 23:22:03

现代身份和访问管理 IAM 如何降低风险

您的公司是否仍在使用 1998 年时的身份管理系统&#xff1f;仅凭用户名和密码就能登录本地网络并访问几乎所有资源吗&#xff1f; 虽然大多数企业已经转向现代身份和访问管理(IAM) 平台&#xff0c;但成千上万的企业和其他组织仍然依赖过时的用户名/密码系统。 如果你看一下传…...

编程日记 2024/10/9 23:21:02

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/6 3:59:37

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/5 8:19:14

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45