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

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

news 2026/4/11 12:15:19

在 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

前端状态管理：别让你的应用状态一团糟

前端状态管理&#xff1a;别让你的应用状态一团糟 什么是前端状态管理&#xff1f; 前端状态管理是指管理前端应用中数据状态的方法和工具。别以为状态管理只是简单的变量存储&#xff0c;复杂的应用状态管理不当会让你的代码变成一团糟。 为什么需要状态管理&#xff1f; 统一…...

编程新知 2026/4/11 12:14:03

left join详解

left join详解LEFT JOIN 详解一、基本语法二、执行逻辑与结果特点三、示例说明四、与其他 JOIN 的对比五、ON 条件与 WHERE 条件的区别&#xff08;重要&#xff01;&#xff09;六、多表 LEFT JOIN七、性能考虑八、常见应用场景九、与其他数据库的差异十、小结1.不考虑where条…...

编程新知 2026/4/11 11:35:07

告别DHT11！用STM32 HAL库驱动更高精度的AHT10温湿度传感器，附完整工程源码

从DHT11到AHT10&#xff1a;STM32 HAL库高精度温湿度测量实战指南 在智能家居和工业监测领域&#xff0c;温湿度数据的准确性直接影响着系统决策的质量。许多开发者最初接触的DHT11传感器虽然价格低廉&#xff0c;但其5%的湿度误差和2℃的温度偏差常常成为项目瓶颈。当你的智能…...

编程新知 2026/4/11 11:20:50

C语言笔记6：变量生命周期、指针与数组指针全解析

#本篇博客基于C语言学习这两天核心笔记整理&#xff0c;聚焦变量生命周期与存储类型、指针基础与用法、数组与指针深度结合三大模块&#xff0c;从基础概念到代码实战&#xff0c;帮你彻底吃透C语言核心难点。一、变量生命周期与存储类型 1. 核心概念 生命周期&#xff1a;变量…...

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

Wand-Enhancer：彻底解锁WeMod专业功能的终极解决方案

Wand-Enhancer&#xff1a;彻底解锁WeMod专业功能的终极解决方案 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer Wand-Enhancer是一款专为WeMod游戏辅助…...

编程新知 2026/4/11 9:42:24

ESP32-CAM与WebSocket：构建低延迟远程监控系统的实战指南

1. 为什么选择WebSocket而不是HTTP轮询&#xff1f; 刚开始接触ESP32-CAM远程监控项目时&#xff0c;我和大多数开发者一样&#xff0c;首先想到的是用HTTP轮询方案。毕竟HTTP协议大家都熟悉&#xff0c;实现起来也简单。但实际测试后发现&#xff0c;这种方式在实时视频传输场…...

编程新知 2026/4/11 9:29:48

YOLOv8头部改进全攻略：从SEAM到MultiSEAM的代码实现与效果对比

YOLOv8头部改进全攻略&#xff1a;从SEAM到MultiSEAM的代码实现与效果对比 在目标检测领域&#xff0c;YOLO系列模型因其卓越的实时性能而广受欢迎。YOLOv8作为最新一代的代表&#xff0c;其头部结构的设计直接影响着检测精度与速度。本文将深入探讨两种创新性头部改进方案——…...

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

Qwen3-ASR-0.6B镜像评测：轻量级语音识别模型，实测效果惊艳

Qwen3-ASR-0.6B镜像评测&#xff1a;轻量级语音识别模型&#xff0c;实测效果惊艳 1. 开箱即用的语音识别体验 第一次打开Qwen3-ASR-0.6B的Web界面时&#xff0c;我有点惊讶于它的简洁。整个界面只有三个核心区域&#xff1a;文件上传按钮、语言选择下拉框和识别结果展示区。…...

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

Debian 12 安装 Podman 5.7.1 最新版完整指南（含国内镜像加速配置）

Debian 12 容器化实践&#xff1a;Podman 5.7.1 高效部署与镜像加速全攻略 容器技术正在重塑现代应用交付的范式。作为Docker的替代方案&#xff0c;Podman以其无守护进程架构和原生rootless支持&#xff0c;正在成为开发者工具箱中的新宠。本文将带您深入探索在Debian 12上部…...

编程新知 2026/4/11 5:15:40

第二十七章 灾备与演练：生产级数据库的增量备份、异地容灾与快速恢复预案

第二十七章 灾备与演练：生产级数据库的增量备份、异地容灾与快速恢复预案 在煤化工这样的大型连续性生产企业中，数据库不仅仅是存储代码和日志的地方，它是整个工厂的数字心脏。一次看似短暂的数据库宕机，在极客眼中可能只是 systemctl restart 的几秒钟，但在厂长眼中，那…...

编程新知 2026/4/11 5:01:43