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

（十四）WebGL纹理坐标初识

news 2026/2/11 4:42:47

纹理坐标是 WebGL 中将 2D 图像（纹理）应用到 3D 物体表面的重要概念。在 WebGL 中，纹理坐标通常使用一个二维坐标系，称为 uv 坐标，它们决定了纹理图像如何映射到几何体上。理解纹理坐标的核心就是明白它们如何将二维纹理贴图应用到三维物体的表面。

文章目录

      • 纹理坐标的基本概念
      • 纹理坐标的作用
      • 代码示例：立方体纹理映射
        • 1. HTML 文件
        • 2. JavaScript 部分：WebGL 纹理坐标示例
      • 3. 代码解析
      • 4. 纹理坐标的作用

纹理坐标的基本概念

纹理坐标（u, v）是一个标准的二维坐标系统，用于描述纹理图像中每个像素（即纹理元素，Texel）的位置。u 和 v 是纹理的归一化坐标，即它们的值通常位于 [0, 1] 区间：

  • u坐标：控制纹理图像的水平位置，u = 0 是纹理的最左侧，u = 1 是纹理的最右侧。
  • v坐标：控制纹理图像的垂直位置，v = 0 是纹理的底部，v = 1 是纹理的顶部。

例如，在纹理坐标 (u=0.5, v=0.5) 处表示纹理图像的中心。
在这里插入图片描述

纹理坐标的作用

在 WebGL 中，每个顶点都有一个对应的纹理坐标。顶点着色器负责将这些坐标传递到片元着色器，片元着色器利用纹理坐标来从纹理图像中获取相应的像素颜色，从而将图像“映射”到几何体表面。

代码示例：立方体纹理映射

下面是一个带有纹理坐标的立方体的简单例子，展示了如何将纹理图像映射到立方体的每个面。

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 纹理坐标示例</title>
</head>
<body><canvas id="webgl-canvas" width="500" height="500"></canvas><script src="main.js"></script>
</body>
</html>
2. JavaScript 部分：WebGL 纹理坐标示例
// 获取 WebGL 上下文
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');// 立方体顶点坐标 (x, y, z)
const vertices = new Float32Array([-0.5, -0.5, -0.5, // 前面0.5, -0.5, -0.5,0.5,  0.5, -0.5,-0.5,  0.5, -0.5,-0.5, -0.5,  0.5, // 后面0.5, -0.5,  0.5,0.5,  0.5,  0.5,-0.5,  0.5,  0.5,
]);// 立方体的纹理坐标 (u, v)
// 每个顶点的纹理坐标。注意 u/v 范围是 [0, 1]
const texCoords = new Float32Array([0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 前面0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 后面0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 左面0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 右面0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 上面0.0, 0.0,  1.0, 0.0,  1.0, 1.0,  0.0, 1.0,  // 下面
]);// 立方体的索引，用于绘制每个面
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);
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);
};
image.src = 'your-texture-image.jpg';  // 这里使用你自己的纹理图片路径// 清除画布并绘制
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);

3. 代码解析

  • 纹理坐标（texCoords）：每个顶点都有对应的纹理坐标，texCoords

数组定义了每个面四个顶点的纹理坐标。在这个例子中，(u, v) 范围是 [0, 1]，代表纹理图像的左下角 (0, 0) 到右上角 (1, 1)。

  • 着色器：

    • 顶点着色器：将顶点位置和纹理坐标传递到片元着色器。
    • 片元着色器：根据纹理坐标，从纹理图像中采样颜色。

  • 纹理加载：在 image.onload 中加载图片，并将其绑定为 WebGL 的纹理。在加载完成后，WebGL 会自动生成多级渐远纹理（mipmap），提高纹理渲染的效率和质量。

  • 绘制：使用 gl.drawElements 绘制立方体的每个面。每个面由两个三角形组成，纹理坐标确保了纹理图像正确地映射到每个面。

4. 纹理坐标的作用

纹理坐标使得 WebGL 能够将一个 2D 图像（纹理）正确地映射到 3D 对象的表面。当你需要将图片或其他 2D 图像添加到你的 3D 模型时，理解和使用纹理坐标是非常重要的。纹理坐标的映射关系决定了纹理如何在模型表面分布，例如，是否是平铺、是否有旋转、是否有缩放等。

相关文章：

（十四）WebGL纹理坐标初识

纹理坐标是 WebGL 中将 2D 图像&#xff08;纹理&#xff09;应用到 3D 物体表面的重要概念。在 WebGL 中&#xff0c;纹理坐标通常使用一个二维坐标系&#xff0c;称为 uv 坐标&#xff0c;它们决定了纹理图像如何映射到几何体上。理解纹理坐标的核心就是明白它们如何将二维纹…...

编程日记 2025/1/20 15:14:09

【机器学习】制造业转型：机器学习如何推动工业 4.0 的深度发展

我的个人主页 我的领域&#xff1a;人工智能篇&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;&#x1f44d;点赞 收藏❤ 引言 在当今科技飞速发展的时代&#xff0c;制造业正经历着前所未有的变革&#xff0c;工业4.0的浪潮席卷而来。工业4.0旨在通过将…...

编程日记 2025/1/20 15:13:08

Nginx安装配置Mac使用Nginx访问前端打包项目

目录 Linux安装环境变量配置 WinMac安装基本配置 Mac使用Nginx访问前端项目常用命令 Linux 官网&#xff1a;https://nginx.org/ 中文官网&#xff1a;https://nginx.p2hp.com/ 安装 http://nginx.org/en/download.html 1). 安装依赖包 由于nginx是基于c语言开发的&#x…...

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

国自然面上项目｜基于组合机器学习算法的病理性近视眼底多模态影像资料自动化定量分析研究｜基金申请·25-01-18

小罗碎碎念 今天和大家分享一个面上项目&#xff0c;资助年限为2020&#xff5e;2023&#xff0c;直接费用为55万。 病理性近视致盲问题严峻&#xff0c;机制和诊疗策略尚待探索。本项目基于前期积累的大量影像资料和算法开发工作&#xff0c;计划构建标准影像数据库&#xff0…...

编程日记 2025/1/20 15:06:00

03_UI自适应

因为Canvas大小是始终和屏幕一致的 所以设置Canvas的屏幕大小 通常设置为1920 * 1080 又因为屏幕的图像及按钮如果想适配各种显示屏需要锁定长或者宽&#xff0c; 之后利用钉子将其他图像利用创建空节点定在左右或者上下两侧 比如unity编辑器通常是锁定宽的&#xff0c;那我…...

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

Python在DevOps中的应用：自动化CI/CD管道的实现

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门&#xff01; 解锁Python编程的无限可能&#xff1a;《奇妙的Python》带你漫游代码世界 在现代软件开发中&#xff0c;DevOps理念的引入极大地提升了开发与运维的协作效率&#xff0c;而持续集成&#xff08…...

编程日记 2025/1/20 15:02:57

API接口技术推动电商数据处理的自动化

在当今数字化浪潮中&#xff0c;电商行业正以前所未有的速度发展。API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;接口技术在这一过程中扮演着至关重要的角色。API接口作为连接不同系统和服务的关键桥梁&#xff0c;通过其自动化处…...

编程日记 2025/1/20 15:01:56

Nginx反向代理架构介绍

Nginx反向代理架构是一种强大的服务器架构模式&#xff0c;它位于用户和原始服务器之间&#xff0c;接收用户的请求并将其转发到一个或多个后端服务器&#xff0c;然后将从后端服务器获取的响应返回给用户&#xff0c;就好像这些内容都是由代理服务器本身直接提供的一样。以下是…...

编程日记 2025/1/20 14:58:53

.Net Core微服务入门系列（一）——项目搭建

系列文章目录 1、.Net Core微服务入门系列&#xff08;一&#xff09;——项目搭建 2、.Net Core微服务入门全纪录&#xff08;二&#xff09;——Consul-服务注册与发现&#xff08;上&#xff09; 3、.Net Core微服务入门全纪录&#xff08;三&#xff09;——Consul-服务注…...

编程日记 2025/1/20 14:55:47

WPF 实现可视化操作数据库的程序全解析

在软件开发中&#xff0c;实现对数据库的可视化操作能极大提升开发效率和用户体验。借助 WPF&#xff08;Windows Presentation Foundation&#xff09;强大的界面开发能力&#xff0c;我们可以打造出功能丰富、交互友好的数据库操作程序。本文将详细介绍如何使用 WPF 搭建一个…...

编程日记 2025/1/20 14:49:41

python mysql库的三个库mysqlclient mysql-connector-python pymysql如何选择，他们之间的区别

三者的区别 1. mysqlclient 特点&#xff1a; 是一个用于Python的MySQL数据库驱动程序&#xff0c;用于与MySQL数据库进行交互。 依赖于MySQL的本地库&#xff0c;因此在安装时需要确保系统上已安装了必要的依赖项&#xff0c;如libmysqlclient-dev等。 性能较好&#xff0c…...

编程日记 2025/1/20 14:46:36

如何将数据库字符集改为中文，让今后所有的数据库都支持中文

最后一行有我自己的my.ini文件 数据库输入中文数据时会变为乱码&#xff0c; 这个时候&#xff0c;我们为每个数据库设置字符集&#xff0c;太过于麻烦&#xff0c;为数据库单独设置重启后又会消失 Set character_set_database’utf8’; Set character_set_server’utf8’; …...

编程日记 2025/1/20 14:42:32

Low-Level 大一统：如何使用Diffusion Models完成视频超分、去雨、去雾、降噪等所有Low-Level 任务？

Diffusion Models专栏文章汇总：入门与实战 前言：视频在传输过程中常常因为各种因素（如恶劣天气、噪声、压缩和传感器分辨率限制）而出现质量下降，这会严重影响计算机视觉任务（如目标检测和视频监控）的性能。现有的视频修复方法虽然取得了一些进展，但通常只能针对特定的退…...

编程日记 2025/1/20 14:41:31

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成 1所有的材料都可以在EAMM: One-Shot Emotional Talking Face via Audio-Based Emotion-Aware Motion Model网站上找到。 摘要 尽管音频驱动的对话人脸生成技术已取得显著进展&#xff0c;但现有方法要么忽…...

编程日记 2025/1/20 14:38:28

Docker Compose的使用

文章首发于我的博客&#xff1a;https://blog.liuzijian.com/post/docker-compose.html 目录 Docker Compose是什么Docker Compose安装Docker Compose文件Docker Compose常用命令案例&#xff1a;部署WordPress博客系统 Docker Compose是什么 Docker Compose是Docker官方的开源…...

编程日记 2025/1/20 14:36:25

[STM32 HAL库]串口空闲中断+DMA接收不定长数据

一、空闲中断 STM32的串口具有空闲中断&#xff0c;什么叫做空闲呢&#xff1f;如何触发空闲中断呢&#xff1f; 空闲&#xff1a;串口发送的两个字符之间间隔非常短&#xff0c;所以在两个字符之间不叫空闲。空闲的定义是总线上在一个字节的时间内没有再接收到数据。触发条件…...

编程日记 2025/1/20 14:35:24

三、华为交换机 Hybrid

一、Hybrid功能 Hybrid口既可以连接普通终端的接入链路&#xff08;类似于Access接口&#xff09;&#xff0c;又可以连接交换机间的干道链路&#xff08;类似于Trunk接口&#xff09;。它允许多个VLAN的帧通过&#xff0c;并可以在出接口方向将某些VLAN帧的标签剥掉&#xff0…...

编程日记 2025/1/20 14:34:23

如何通过 Apache Airflow 将数据导入 Elasticsearch

作者&#xff1a;来自 Elastic Andre Luiz 了解如何通过 Apache Airflow 将数据导入 Elasticsearch。 Apache Airflow Apache Airflow 是一个旨在创建、安排&#xff08;schedule&#xff09;和监控工作流的平台。它用于编排 ETL&#xff08;Extract-Transform-Load&#xff0…...

编程日记 2025/1/20 14:25:13

Android Studio：Linux环境下安装与配置

更多内容&#xff1a;XiaoJ的知识星球 Android Studio&#xff1a;Linux环境下安装与配置 1.安装JDK2.安装Android Studio2.1 获取安装包2.2 安装&#xff08;1&#xff09;配置环境变量&#xff1a;&#xff08;2&#xff09;运行安装&#xff1a;&#xff08;3&#xff09;配…...

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

token是用来鉴权的，那session是用来干什么的？

在Web应用和API设计中&#xff0c;鉴权与会话管理是两个核心概念&#xff0c;它们对于确保用户身份的安全性和维护用户会话状态至关重要。Token和Session是两种常用的鉴权与会话管理机制&#xff0c;它们各自具有独特的工作原理和适用场景。下面是对Token和Session的详细解析及…...

编程日记 2025/1/20 14:16:59

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/8 20:42:46

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/10 4:40:33

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/10 11:09:10

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2026/2/8 5:05:41

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

编程新知 2026/2/10 4:44:20