如何轻松掌握WebGL纹理坐标计算

2024-02-07 09:48:27

引言

纹理坐标计算是WebGL中必不可少的技术，它定义了纹理如何应用于模型表面。它涉及将模型的2D空间与纹理图像的2D空间相关联，这对于创建逼真的图形至关重要。在本文中，我们将探讨纹理坐标计算的基本原理，并通过实际示例和代码片断，帮助您逐步掌握这一技术。

屏幕空间纹理坐标

屏幕空间纹理坐标表示纹理在屏幕上占据的区域。计算屏幕空间纹理坐标包括确定纹理在模型表面上的位置，以及将该位置转换为屏幕上的像素坐标。

公式：

u = (position.x - modelMin.x) / (modelMax.x - modelMin.x);
v = (position.y - modelMin.y) / (modelMax.y - modelMin.y);

其中：

position 是模型表面上纹理位置
modelMin 和 modelMax 是模型边界的最小和最大值

例子：

考虑一个从(-1, -1)到(1, 1)范围的正方形模型，纹理大小为1024x1024像素。假设纹理在模型上从(0.25, 0.25)到(0.75, 0.75)的范围内放置。

// 模型边界
const modelMin = new THREE.Vector2(-1, -1);
const modelMax = new THREE.Vector2(1, 1);

// 纹理位置
const position = new THREE.Vector2(0.5, 0.5);

// 计算屏幕空间纹理坐标
const u = (position.x - modelMin.x) / (modelMax.x - modelMin.x);
const v = (position.y - modelMin.y) / (modelMax.y - modelMin.y);

// 输出u和v的值
console.log(`u: ${u}, v: ${v}`);

这将输出 u: 0.5 和 v: 0.5，表示纹理在屏幕上从纹理图像的左上角开始，占据正方形模型的一半大小。

像素单位纹理坐标

像素单位纹理坐标将纹理空间与屏幕空间联系起来，它指定了纹理图像中特定像素与屏幕像素之间的对应关系。

公式：

u = (screenPosition.x - viewportMin.x) / (viewportMax.x - viewportMin.x);
v = 1.0 - (screenPosition.y - viewportMin.y) / (viewportMax.y - viewportMin.y);

其中：

screenPosition 是纹理在屏幕上的像素位置
viewportMin 和 viewportMax 是视口的最小和最大像素坐标

例子：

考虑一个视口大小为800x600像素的场景。纹理大小为1024x1024像素，在屏幕上占据100x100像素的区域。纹理图像中像素(512, 512)在屏幕上显示在(250, 250)处。

// 视口边界
const viewportMin = new THREE.Vector2(0, 0);
const viewportMax = new THREE.Vector2(800, 600);

// 屏幕上的纹理位置
const screenPosition = new THREE.Vector2(250, 250);

// 计算像素单位纹理坐标
const u = (screenPosition.x - viewportMin.x) / (viewportMax.x - viewportMin.x);
const v = 1.0 - (screenPosition.y - viewportMin.y) / (viewportMax.y - viewportMin.y);

// 输出u和v的值
console.log(`u: ${u}, v: ${v}`);