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

（十五）WebGL中gl.texImage2D函数使用详解

news 2025/9/20 7:29:45

在 WebGL 中，gl.texImage2D 是一个非常关键的函数，用于将图像数据上传到 WebGL 上下文中并作为纹理对象的一部分。它允许你将图像、视频、画布等作为纹理源。理解如何使用 gl.texImage2D 是在 WebGL 中处理纹理的核心之一。

文章目录

      • `gl.texImage2D` 的基本概念
      • 具体场景和代码示例
        • 示例：使用 `gl.texImage2D` 加载和使用纹理
        • 1. HTML 文件
        • 2. JavaScript 部分：加载纹理并应用
      • 3. 代码解析
      • 4. 总结

gl.texImage2D 的基本概念

gl.texImage2D 函数的作用是将图像或像素数据上传到 WebGL 中作为纹理。纹理是 2D 图像，通常用于给 3D 模型的表面贴图，以实现更真实的渲染效果。

其语法如下：

gl.texImage2D(target, level, internalFormat, format, type, image);
  • target：纹理目标，通常使用 gl.TEXTURE_2D。
  • level：纹理的细节层级，通常设置为 0（基础纹理层），大于0的值会使用到纹理的多级渐远纹理（mipmap）功能。
  • internalFormat：纹理的内部格式，指定 WebGL 如何存储纹理数据，常见的值有 gl.RGB、gl.RGBA、gl.LUMINANCE 等。
  • format：纹理数据的格式，定义从图像源中提取的数据类型。通常使用 gl.RGB 或 gl.RGBA，这与图像的颜色深度相关。
  • type：指定数据类型，通常使用 gl.UNSIGNED_BYTE（8 位无符号整数）或其他格式，如 gl.FLOAT。
  • image：图像数据源，可以是一个 <img> 元素、<canvas> 元素、<video> 元素，或者是一个 ImageData 对象。

具体场景和代码示例

示例：使用 gl.texImage2D 加载和使用纹理

在这个例子中，我们将一个图片加载为纹理，并将其应用到一个立方体的表面上。这里会展示如何使用 gl.texImage2D 来将图片数据上传为纹理。

1. HTML 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGL - texImage2D 示例</title>
</head>
<body><canvas id="webgl-canvas" width="500" height="500"></canvas><script src="main.js"></script>
</body>
</html>
2. JavaScript 部分：加载纹理并应用
// 获取 WebGL 上下文
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');// 立方体的顶点数据
const vertices = new Float32Array([-0.5, -0.5, -0.5, // Front face0.5, -0.5, -0.5,0.5,  0.5, -0.5,-0.5,  0.5, -0.5,-0.5, -0.5,  0.5, // Back face0.5, -0.5,  0.5,0.5,  0.5,  0.5,-0.5,  0.5,  0.5,
]);// 立方体的纹理坐标数据 (u, v)
const texCoords = new Float32Array([0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Front face0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Back face0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Left face0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Right face0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Top face0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // Bottom face
]);// 立方体的索引
const indices = new Uint16Array([0, 1, 2, 0, 2, 3,4, 5, 6, 4, 6, 7,0, 1, 5, 0, 5, 4,1, 2, 6, 1, 6, 5,2, 3, 7, 2, 7, 6,3, 0, 4, 3, 4, 7
]);// 创建缓冲区并绑定顶点数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 创建纹理坐标缓冲区并绑定
const texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);// 创建索引缓冲区并绑定
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);// 编写着色器程序
const vertexShaderSource = `attribute vec4 a_position;attribute vec2 a_texCoord;varying vec2 v_texCoord;void main() {gl_Position = a_position;v_texCoord = a_texCoord;}
`;const fragmentShaderSource = `precision mediump float;varying vec2 v_texCoord;uniform sampler2D u_texture;void main() {gl_FragColor = texture2D(u_texture, v_texCoord);}
`;// 编译着色器并链接程序
function compileShader(type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('Shader compilation failed', gl.getShaderInfoLog(shader));}return shader;
}const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {console.error('Program linking failed', gl.getProgramInfoLog(shaderProgram));
}gl.useProgram(shaderProgram);// 获取属性和统一变量的位置
const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');
const texCoordLocation = gl.getAttribLocation(shaderProgram, 'a_texCoord');
const textureLocation = gl.getUniformLocation(shaderProgram, 'u_texture');// 绑定顶点数据
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);// 绑定纹理坐标数据
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texCoordLocation);// 创建纹理对象并绑定
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);// 使用 texImage2D 上传图片
const image = new Image();
image.onload = () => {// 图片加载完成后将图像上传为纹理gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);gl.generateMipmap(gl.TEXTURE_2D);  // 生成mipmap纹理// 绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.enable(gl.DEPTH_TEST);gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
};
image.src = 'your-texture-image.jpg';  // 这里替换为你的纹理图像路径

3. 代码解析

  • gl.createTexture：创建一个纹理对象。

  • gl.bindTexture(gl.TEXTURE_2D, texture)：将创建的纹理对象绑定为当前活动的纹理。

  • gl.texImage2D：将图片上传为纹理，image.onload 确保在图片加载完成后才会上传到 WebGL 中。这里将图片的像素数据传给 WebGL。

    • 第一个参数 gl.TEXTURE_2D：指定纹理目标为 2D 纹理。
    • 第二个参数 0：纹理的细节层级，通常设置为 0 表示基础纹理。
    • 第三个参数 gl.RGB：纹理的内部格式（存储格式）。
    • 第四个参数 gl.RGB：纹理的像素格式（图像格式）。
    • 第五个参数 gl.UNSIGNED_BYTE：指定数据类型，这里是 8 位无符号整数。
    • 第六个参数 image：图片元素，作为纹理数据源。

  • gl.generateMipmap：生成多级渐远纹理，提升纹理渲染性能并防止远离摄像机时纹理过于模糊。

  • 纹理渲染：在片元着色器中，texture2D 函数根据纹理坐标从上传的纹理中采样像素并进行渲染。

4. 总结

gl.texImage2D 是 WebGL 中上传纹理的核心方法，它将图像数据或像素数据上传为纹理对象，允许在渲染时将纹理映射到几何体表面。理解如何使用 gl.texImage2D 并正确处理纹理数据，是开发 WebGL 应用的基础之一。

相关文章：

（十五）WebGL中gl.texImage2D函数使用详解

在 WebGL 中&#xff0c;gl.texImage2D 是一个非常关键的函数&#xff0c;用于将图像数据上传到 WebGL 上下文中并作为纹理对象的一部分。它允许你将图像、视频、画布等作为纹理源。理解如何使用 gl.texImage2D 是在 WebGL 中处理纹理的核心之一。 文章目录 gl.texImage2D 的基…...

编程日记 2025/1/20 18:26:14

CSS 颜色

所有浏览器都支持的颜色名 所有现代浏览器均支持以下 140 种颜色名称&#xff08;单击颜色名称或十六进制值&#xff0c;可查看将以该颜色为背景颜色以及不同的文本颜色&#xff09;&#xff1a; 颜色名十六进制颜色值颜色AliceBlue#F0F8FFAntiqueWhite#FAEBD7Aqua#00FFFFAqu…...

编程日记 2025/1/20 18:22:10

C#，入门教程(03)——Visual Studio 2022编写彩色Hello World与动画效果

C#&#xff0c;入门教程(01)—— Visual Studio 2022 免费安装的详细图文与动画教程https://blog.csdn.net/beijinghorn/article/details/123350910 C#&#xff0c;入门教程(02)—— Visual Studio 2022开发环境搭建图文教程https://blog.csdn.net/beijinghorn/article/detail…...

编程日记 2025/1/20 18:15:03

杀死安装 CentOS-7-x86_64-DVD-1908

使用 VMware 安装 CentOS-7-x86_64-DVD-1908 CentOS是 reahat 的 免费版本&#xff0c;有了ubutun &#xff0c;为什么还要使用 CentOS呢&#xff1f; 在linux 服务器实际开发中&#xff0c;大家都用的CentOS&#xff0c;因为两个原因&#xff0c;一个是免费&#xff0c;第二是…...

编程日记 2025/1/20 18:10:59

55.【5】BUUCTF WEB NCTF2019 sqli

进入靶场 输入admin 123 过滤的这么严格&#xff1f;&#xff1f;&#xff1f; 过滤很严格&#xff0c;此时要么爆破&#xff0c;要么扫描 直接扫描&#xff0c;得到robots.txt 访问后又得到hint.txt 继续访问 图片内容如下 $black_list "/limit|by|substr|mid|,|admi…...

编程日记 2025/1/20 18:07:54

LeetCode 题目 2545. 根据第 K 场考试的分数排序

在本篇文章中&#xff0c;我们将探讨如何根据第 K 场考试的分数对学生进行排序。这个问题是 LeetCode 上的一个中等难度问题&#xff0c;涉及到排序算法和自定义比较函数的使用。 问题描述 解题思路 理解问题 首先&#xff0c;我们需要理解问题的核心&#xff1a;根据第 K 场…...

编程日记 2025/1/20 18:06:53

算法随笔_12:最短无序子数组

上一篇: 算法随笔_11: 字符串的排列-CSDN博客 题目描述如下: 给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。请你找出符合题意的最短子数组&#xff0c;并输出它的长度。…...

编程日记 2025/1/20 18:05:52

计算机毕业设计PySpark+Hadoop+Hive机票预测 飞机票航班数据分析可视化大屏 航班预测系统 机票爬虫 飞机票推荐系统 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/1/20 18:02:49

Linux-C/C++--初探linux应用编程概念

对于大多数首次接触 Linux 应用编程的读者来说&#xff0c;可能对应用编程&#xff08;也可称为系统编程&#xff09;这个概念并不 太了解&#xff0c;所以在正式学习 Linux 应用编程之前&#xff0c;笔者有必要向大家介绍这些简单基本的概念&#xff0c;从整体上认识 到应用编…...

编程日记 2025/1/20 18:01:49

用sklearn运行分类模型，选择AUC最高的模型保存模型权重并绘制AUCROC曲线（以逻辑回归、随机森林、梯度提升、MLP为例）

诸神缄默不语-个人CSDN博文目录 文章目录 1. 导入包2. 初始化分类模型3. 训练、测试模型&#xff0c;绘图&#xff0c;保存指标 1. 导入包 from sklearn.linear_model import LogisticRegression from sklearn.ensemble import RandomForestClassifier, GradientBoostingClass…...

编程日记 2025/1/20 18:00:47

动手学大数据-3社区开源实践

目录 数据库概览&#xff1a; MaxComput&#xff1a; HAWQ&#xff1a; Hologres&#xff1a; TiDB&#xff1a; Spark&#xff1a; ClickHouse&#xff1a; Apache Calcite 概览 Calcite RBO HepPlanner 优化规则&#xff08;Rule&#xff09; 内置有100优化规则 …...

编程日记 2025/1/20 17:56:31

使用Pydantic驾驭大模型

本文介绍Pydantic 库&#xff0c;首先介绍其概念及优势&#xff0c;然后通过基本示例展示如何进行数据验证。后面通过多个示例解释如何在LangChain中通过Pydantic进行数据验证&#xff0c;保证与大模型进行交互过程中数据准确性&#xff0c;并显示清晰的数验证错误信息。 Pydan…...

编程日记 2025/1/20 17:50:19

【HarmonyOS之旅】基于ArkTS开发(二) -＞ UI开发之常见布局

目录 1 -> 自适应布局 1.1 -> 线性布局 1.1.1 -> 线性布局的排列 1.1.2 -> 自适应拉伸 1.1.3 -> 自适应缩放 1.1.4 -> 定位能力 1.1.5 -> 自适应延伸 1.2 -> 层叠布局 1.2.1 -> 对齐方式 1.2.2 -> Z序控制 1.3 -> 弹性布局 1.3.1…...

编程日记 2025/1/20 17:45:13

【论文投稿】Python 网络爬虫：探秘网页数据抓取的奇妙世界

目录 前言 一、Python—— 网络爬虫的绝佳拍档 二、网络爬虫基础&#xff1a;揭开神秘面纱 &#xff08;一&#xff09;工作原理&#xff1a;步步为营的数据狩猎 &#xff08;二&#xff09;分类&#xff1a;各显神通的爬虫家族 三、Python 网络爬虫核心库深度剖析 &…...

编程日记 2025/1/20 17:41:09

队列的基本用法

以下是关于 C 语言中队列的详细知识&#xff0c;包括队列的生成、相关函数使用以及其他重要概念&#xff1a; 一、队列的概念 队列是一种线性数据结构&#xff0c;它遵循先进先出&#xff08;First In First Out&#xff0c;FIFO&#xff09;的原则&#xff0c;就像日常生活中…...

编程日记 2025/1/20 17:40:08

网络安全VS数据安全

关于网络安全和数据安全&#xff0c;我们常听到如下两种不同声音&#xff1a; 观点一&#xff1a;网络安全是数据安全的基础&#xff0c;把当年做网络安全的那一套用数据安全再做一遍。 观点二&#xff1a;数据安全如今普遍以为是网络安全的延伸&#xff0c;实际情况是忽略数据…...

编程日记 2025/1/20 17:36:02

Linux（NFS服务）

赛题拓扑&#xff1a; 题目&#xff1a; NFS&#xff1a; 共享/webdata/目录。用于存储AppSrv主机的WEB数据。仅允许AppSrv主机访问该共享。 [rootstoragesrv ~]# yum install nfs-utils -y [rootstoragesrv ~]# mkdir /webdata [rootstoragesrv ~]# chmod -R ow /webdata …...

编程日记 2025/1/20 17:35:00

python编程-OpenCV（图像读写-图像处理-图像滤波-角点检测-边缘检测）边缘检测

OpenCV中边缘检测四种常用算子&#xff1a; &#xff08;1&#xff09;Sobel算子 Sobel算子是一种基于梯度的边缘检测算法。它通过对图像进行卷积操作来计算图像的梯度&#xff0c;并将梯度的大小作为边缘的强度。它使用两个3x3的卷积核&#xff0c;分别用于计…...

编程日记 2025/1/20 17:32:58

SSM课设-学生管理系统

【课设者】SSM课设-学生管理系统 技术栈: 后端: SpringSpringMVCMybatisMySQLJSP 前端: HtmlCssJavaScriptEasyUIAjax 功能: 学生端: 登陆 学生信息管理 个人信息管理 老师端: 多了教师信息管理 管理员端: 多了班级信息管理 多了年级信息管理 多了系统用户管理...

编程日记 2025/1/20 17:24:49

【Pytorch实用教程】TCN（Temporal Convolutional Network，时序卷积网络）简介

文章目录 TCN的基本特点TCN的优点TCN的应用场景典型的TCN架构总结TCN（Temporal Convolutional Network，时序卷积网络）是一种用于处理序列数据的深度学习模型，尤其适用于时间序列预测、语音识别、自然语言处理等任务。它利用卷积神经网络（CNN）来处理时序数据，相比于传统的…...

编程日记 2025/1/20 17:22:47

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/9/20 0:09:22

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/20 1:42:10

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/7/8 20:58:51

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/9/18 12:55:58

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/8/3 22:02:59

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/8/22 19:54:36

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/9/9 10:10:16