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

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

news 2025/6/20 14:49:03

在 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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/6/19 11:25:56

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/6/17 22:15:59

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/6/17 12:08:59

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/15 6:14:34

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/15 10:56:13

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/6/18 7:52:11

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/6/15 13:02:49

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/6/15 12:44:07

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/15 14:45:38

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50