3.3 高级纹理技术

文档摘要

3.3 高级纹理技术引言 3.3 高级纹理技术在 WebGL 中，除了基础的 2D 纹理，还存在许多高级纹理技术，它们能够显著提升渲染效果和性能。本节将详细介绍以下几个关键领域： 3.3.1 纹理优化技术：关注如何提升纹理的加载和渲染效率，包括纹理压缩、Mipmapping 和各项异性过滤等。 3.3.2 特殊纹理类型：探索除了 2D 纹理之外的纹理类型，如立方体纹理、3D 纹理和纹理数组，以及它们的应用场景。 3.3.3 动态纹理技术：介绍如何动态生成和更新纹理，实现诸如实时渲染到纹理、程序纹理等高级效果。 3.3.1 纹理优化技术纹理是 WebGL 应用中资源消耗的大户，尤其是在高分辨率和复杂场景下。

3.3 高级纹理技术

引言

3.3 高级纹理技术

在 WebGL 中，除了基础的 2D 纹理，还存在许多高级纹理技术，它们能够显著提升渲染效果和性能。本节将详细介绍以下几个关键领域：

3.3.1 纹理优化技术：关注如何提升纹理的加载和渲染效率，包括纹理压缩、Mipmapping 和各项异性过滤等。
3.3.2 特殊纹理类型：探索除了 2D 纹理之外的纹理类型，如立方体纹理、3D 纹理和纹理数组，以及它们的应用场景。
3.3.3 动态纹理技术：介绍如何动态生成和更新纹理，实现诸如实时渲染到纹理、程序纹理等高级效果。

3.3.1 纹理优化技术

纹理是 WebGL 应用中资源消耗的大户，尤其是在高分辨率和复杂场景下。优化纹理的使用至关重要，不仅可以提升加载速度，还能减少 GPU 的内存占用和渲染压力。以下是几种关键的纹理优化技术：

3.3.1.1 纹理压缩

纹理压缩是一种减少纹理数据大小的技术，可以在不显著降低视觉质量的前提下，大幅提升纹理加载速度和减少内存占用。WebGL 支持多种纹理压缩格式，常见的有：

ASTC (Adaptive Scalable Texture Compression)：一种高质量、高压缩比的纹理压缩格式，广泛应用于移动和桌面平台。WebGL 扩展 WEBGL_compressed_texture_astc 提供了对 ASTC 纹理的支持。
ETC (Ericsson Texture Compression)：另一种常见的纹理压缩格式，包括 ETC1 和 ETC2。WebGL 扩展 WEBGL_compressed_texture_etc 和 WEBGL_compressed_texture_etc1 分别提供了对 ETC2 和 ETC1 的支持。
S3TC (S3 Texture Compression) / DXT (DirectX Texture Compression)：一种历史悠久的纹理压缩格式，在 PC 平台上应用广泛。WebGL 扩展 WEBGL_compressed_texture_s3tc 提供了对 S3TC/DXT 纹理的支持。
PVRTC (PowerVR Texture Compression)：一种主要用于 PowerVR GPU 的纹理压缩格式，常用于 iOS 设备。WebGL 扩展 WEBGL_compressed_texture_pvrtc 提供了对 PVRTC 纹理的支持。

代码实践：加载和使用 ASTC 压缩纹理

以下代码示例演示了如何加载和使用 ASTC 压缩纹理。首先，你需要确保浏览器和设备支持 WEBGL_compressed_texture_astc 扩展。


const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl2', { antialias: false }); // WebGL2 需要显式关闭抗锯齿以确保压缩纹理正常工作
if (!gl) {
    console.error("WebGL2 context not supported.");
}
const extASTC = gl.getExtension('WEBGL_compressed_texture_astc');
if (!extASTC) {
    console.warn("WEBGL_compressed_texture_astc extension not supported.");
    // 如果不支持，则回退到加载普通纹理
    // ... 加载普通纹理的代码 ...
    return;
}
function loadASTCTexture(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => response.arrayBuffer())
            .then(buffer => {
                // 解析 ASTC 纹理数据 (假设你已经有 ASTC 解析库，例如 astc-decoder)
                const astcData = parseASTC(buffer); // 假设存在 parseASTC 函数
                const texture = gl.createTexture();
                gl.bindTexture(gl.TEXTURE_2D, texture);
                gl.compressedTexImage2D(
                    gl.TEXTURE_2D,
                    0,
                    extASTC.COMPRESSED_RGBA_ASTC_4x4_KHR, // ASTC 4x4 压缩格式，根据实际情况选择
                    astcData.width,
                    astcData.height,
                    0,
                    new Uint8Array(astcData.data) // 假设 astcData.data 是 Uint8Array
                );
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); // 建议使用 Mipmapping
                gl.generateMipmap(gl.TEXTURE_2D); // 生成 Mipmap
                gl.bindTexture(gl.TEXTURE_2D, null);
                resolve(texture);
            })
            .catch(error => {
                console.error("Failed to load ASTC texture:", error);
                reject(error);
            });
    });
}
// 假设 parseASTC 函数和纹理加载、渲染管线已实现
// ... 调用 loadASTCTexture 加载 ASTC 纹理，并在渲染中使用 ...
// 示例：
loadASTCTexture('path/to/compressed_texture.astc')
    .then(texture => {
        // ... 使用纹理进行渲染 ...
        console.log("ASTC texture loaded successfully:", texture);
    })
    .catch(error => {
        // ... 处理加载错误 ...
    });

内容详解：

扩展检查: 首先检查 WEBGL_compressed_texture_astc 扩展是否可用，如果不支持，则需要回退到加载普通纹理或者提示用户设备不支持。
ASTC 文件加载: 使用 fetch API 加载 ASTC 纹理文件，通常 ASTC 纹理文件是二进制格式。
ASTC 数据解析: parseASTC(buffer) 函数负责解析 ASTC 纹理数据。你需要根据你使用的 ASTC 解析库来实现这个函数。常见的 ASTC 解析库有 astc-decoder 等。解析后的数据应该包含纹理的宽度、高度和像素数据。
创建和绑定纹理: 创建 WebGL 纹理对象并绑定到 gl.TEXTURE_2D 目标。
加载压缩纹理数据: gl.compressedTexImage2D 函数是关键，它用于加载压缩纹理数据。
- target: 纹理目标，这里是 gl.TEXTURE_2D。
- level: Mipmap 级别，通常为 0。
- internalformat: 压缩纹理的内部格式，需要使用 extASTC 扩展提供的常量，例如 extASTC.COMPRESSED_RGBA_ASTC_4x4_KHR。选择合适的格式取决于你的纹理压缩设置。
- width, height: 纹理的宽度和高度，从解析后的 ASTC 数据中获取。
- border: 必须为 0。
- data: 纹理像素数据，通常是 Uint8Array 类型，从解析后的 ASTC 数据中获取。
Mipmapping: 建议为压缩纹理生成 Mipmap，以提升渲染质量和性能。使用 gl.generateMipmap(gl.TEXTURE_2D) 生成 Mipmap。
纹理参数设置: 设置纹理的 TEXTURE_MIN_FILTER 参数，通常使用 gl.LINEAR_MIPMAP_LINEAR 或 gl.LINEAR_MIPMAP_NEAREST，以启用 Mipmapping 的过滤效果。
解绑纹理: 完成纹理加载后，解绑纹理对象。

选择合适的压缩格式:

选择合适的纹理压缩格式需要考虑以下因素：

平台兼容性: 不同的压缩格式在不同平台上的支持程度不同。ASTC 兼容性最好，其次是 ETC2，S3TC/DXT 在 PC 平台支持良好，PVRTC 主要用于 iOS 设备。
压缩质量和比率: 不同的压缩格式和参数设置，压缩质量和比率会有差异。ASTC 在高质量和高压缩比之间提供了较好的平衡。
解码性能: 不同的压缩格式解码性能也会有差异，需要根据目标平台和性能要求进行选择。

3.3.1.2 Mipmapping (多级渐远纹理)

Mipmapping 是一种用于优化纹理渲染的技术，它预先生成一系列纹理图像，每个图像都是原始纹理的缩小版本，称为 Mipmap 层级。在渲染过程中，WebGL 会根据物体与摄像机的距离，自动选择合适的 Mipmap 层级进行纹理采样。

Graph TD 图示 Mipmapping 原理:

内容详解：

原理: 当物体距离摄像机较远时，如果仍然使用高分辨率的原始纹理进行采样，会导致纹理细节过于密集，产生锯齿和摩尔纹等问题，同时也会浪费 GPU 的采样性能。Mipmapping 通过预先生成一系列低分辨率的纹理，使得在物体距离较远时，可以使用低分辨率的 Mipmap 层级进行采样，从而避免上述问题。
优势:
- 提升渲染质量: 减少远处纹理的锯齿和摩尔纹，提升视觉效果。
- 提升渲染性能: 减少纹理采样操作，降低 GPU 负载。
- 减少纹理闪烁: 在动画中，Mipmapping 可以减少远处纹理的闪烁现象。
生成 Mipmap: WebGL 提供了 gl.generateMipmap(target) 函数，可以自动为当前绑定的纹理生成 Mipmap。通常在加载纹理数据后调用此函数。
纹理过滤参数: 要启用 Mipmapping，需要设置纹理的 TEXTURE_MIN_FILTER 参数。常用的 Mipmapping 过滤模式有：
- gl.LINEAR_MIPMAP_LINEAR: 三线性过滤，质量最高，性能稍慢。
- gl.LINEAR_MIPMAP_NEAREST: 双线性 Mipmap 过滤，质量中等，性能中等。
- gl.NEAREST_MIPMAP_LINEAR: 最近邻 Mipmap 过滤，质量较低，性能较快。
- gl.NEAREST_MIPMAP_NEAREST: 最近邻 Mipmap 最近邻过滤，质量最低，性能最快。
- gl.LINEAR: 不使用 Mipmapping，双线性过滤。
- gl.NEAREST: 不使用 Mipmapping，最近邻过滤。

代码实践：启用 Mipmapping


// ... (加载纹理数据的代码，例如使用 loadImageTexture 函数) ...
function loadImageTexture(gl, url) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    const level = 0;
    const internalFormat = gl.RGBA;
    const srcFormat = gl.RGBA;
    const srcType = gl.UNSIGNED_BYTE;
    const pixel = new Uint8Array([0, 0, 255, 255]);  // 蓝色像素作为占位符
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, 1, 1, 0, srcFormat, srcType, pixel);
    const image = new Image();
    image.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);
        // 启用 Mipmapping 并设置过滤模式
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
        gl.generateMipmap(gl.TEXTURE_2D); // 生成 Mipmap
        gl.bindTexture(gl.TEXTURE_2D, null);
    };
    image.src = url;
    return texture;
}
// ... (在渲染中使用纹理) ...

内容详解：

在 loadImageTexture 函数中，关键步骤是：

设置 TEXTURE_MIN_FILTER: 在 image.onload 回调函数中，设置 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); 启用三线性 Mipmapping 过滤。你可以根据需要选择其他 Mipmapping 过滤模式。
调用 gl.generateMipmap: 在设置 TEXTURE_MIN_FILTER 后，调用 gl.generateMipmap(gl.TEXTURE_2D); 生成 Mipmap。WebGL 会自动根据原始纹理生成一系列缩小版本的纹理。

3.3.1.3 各项异性过滤 (Anisotropic Filtering)

各项异性过滤是一种提升纹理在倾斜角度渲染质量的技术。当观察角度与纹理表面接近平行时，传统的双线性或三线性过滤可能会导致纹理模糊和失真。各项异性过滤通过在倾斜方向上进行更精细的纹理采样，有效解决这个问题。

内容详解：

原理: 当纹理表面倾斜于视角时，纹理的像素在屏幕上的投影会变成非正方形的形状（各项异性）。传统的纹理过滤方法在处理这种非正方形像素时，容易造成模糊。各项异性过滤根据像素的形状，在长轴方向上进行更多次的纹理采样，从而更准确地还原纹理细节。
优势:
- 提升倾斜角度纹理质量: 显著提升纹理在倾斜角度下的清晰度和细节。
- 减少倾斜角度纹理模糊: 有效减少倾斜角度下的纹理模糊现象。
- 增强场景深度感: 更清晰的远处纹理可以增强场景的深度感和真实感。
WebGL 扩展: 各项异性过滤通常通过 WebGL 扩展 EXT_texture_filter_anisotropic 来支持。
各项异性级别: 各项异性过滤的质量可以通过各项异性级别 (Anisotropy Level) 来控制。级别越高，质量越好，性能消耗也越高。常见的级别有 2x, 4x, 8x, 16x 等。

代码实践：启用各项异性过滤


const extAnisotropic = gl.getExtension('EXT_texture_filter_anisotropic');
if (!extAnisotropic) {
    console.warn("EXT_texture_filter_anisotropic extension not supported.");
    // 如果不支持，则不启用各项异性过滤
    return;
}
function loadImageTexture(gl, url) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    // ... (加载纹理数据，与 Mipmapping 示例相同) ...
    if (extAnisotropic) {
        // 启用各项异性过滤并设置级别 (例如 4x)
        const maxAnisotropy = gl.getParameter(extAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT); // 获取设备支持的最大级别
        const anisotropyLevel = Math.min(4, maxAnisotropy); // 选择一个合适的级别，不超过设备最大值
        gl.texParameterf(gl.TEXTURE_2D, extAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, anisotropyLevel);
    }
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.bindTexture(gl.TEXTURE_2D, null);
    return texture;
}
// ... (在渲染中使用纹理) ...

内容详解：

扩展检查: 首先检查 EXT_texture_filter_anisotropic 扩展是否可用。
获取最大各项异性级别: 使用 gl.getParameter(extAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT) 获取设备支持的最大各项异性级别。
设置各项异性级别: 使用 gl.texParameterf(gl.TEXTURE_2D, extAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, anisotropyLevel); 设置纹理的各项异性级别。选择合适的级别需要在质量和性能之间进行权衡。通常 4x 或 8x 已经能带来明显的质量提升。
启用 Mipmapping: 各项异性过滤通常与 Mipmapping 结合使用，以获得最佳的纹理过滤效果。

3.3.2 特殊纹理类型

除了常见的 2D 纹理，WebGL 还支持多种特殊纹理类型，它们可以用于实现更复杂和高级的渲染效果。

3.3.2.1 立方体纹理 (Cube Map Texture)

立方体纹理由六个 2D 纹理组成，分别对应一个立方体的六个面 (+X, -X, +Y, -Y, +Z, -Z)。立方体纹理常用于环境映射 (Environment Mapping)，模拟物体表面的反射和折射效果。

Graph TD 图示立方体纹理:

内容详解：

应用场景:
- 环境映射 (Environment Mapping): 模拟物体表面的反射和折射效果，例如镜面反射、玻璃折射等。
- 天空盒 (Skybox): 渲染天空背景，营造场景的氛围。
创建立方体纹理: 使用 gl.createTexture() 创建纹理对象，然后绑定到 gl.TEXTURE_CUBE_MAP 目标。
加载立方体纹理面: 使用 gl.texImage2D(target, level, internalformat, width, height, border, format, type, pixels) 函数加载每个面的纹理数据。target 参数需要指定立方体面的目标，例如 gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_X, gl.TEXTURE_CUBE_MAP_POSITIVE_Y 等。
纹理坐标: 在 Shader 中，使用三维纹理坐标 (方向向量) 对立方体纹理进行采样。WebGL 会根据采样方向自动选择合适的立方体面进行纹理查找。

代码实践：加载和使用立方体纹理


function loadCubeMapTexture(gl, urls) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
    const faceTargets = [
        gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
        gl.TEXTURE_CUBE_MAP_POSITIVE_Y, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
        gl.TEXTURE_CUBE_MAP_POSITIVE_Z, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
    ];
    for (let i = 0; i < 6; i++) {
        const faceTarget = faceTargets[i];
        const url = urls[i];
        const level = 0;
        const internalFormat = gl.RGBA;
        const srcFormat = gl.RGBA;
        const srcType = gl.UNSIGNED_BYTE;
        const pixel = new Uint8Array([0, 0, 255, 255]); // 蓝色占位符
        gl.texImage2D(faceTarget, level, internalFormat, 1, 1, 0, srcFormat, srcType, pixel); // 占位符
        const image = new Image();
        image.onload = function() {
            gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
            gl.texImage2D(faceTarget, level, internalFormat, srcFormat, srcType, image);
            if (i === 5) { // 所有面都加载完成后
                gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
                gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
                gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // 防止立方体边缘缝隙
                gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
                gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
            }
        };
        image.src = url;
    }
    return texture;
}
// 示例：加载立方体纹理
const cubeMapUrls = [
    'path/to/cube_map_px.jpg', // +X
    'path/to/cube_map_nx.jpg', // -X
    'path/to/cube_map_py.jpg', // +Y
    'path/to/cube_map_ny.jpg', // -Y
    'path/to/cube_map_pz.jpg', // +Z
    'path/to/cube_map_nz.jpg'  // -Z
];
const cubeTexture = loadCubeMapTexture(gl, cubeMapUrls);
// Shader 代码示例 (顶点着色器)
// ...
// Shader 代码示例 (片元着色器)
// ...
uniform samplerCube u_cubeMap;
varying vec3 v_reflectionDir; // 反射方向向量
void main() {
    vec4 reflectedColor = textureCube(u_cubeMap, v_reflectionDir);
    gl_FragColor = reflectedColor;
}

内容详解：

创建立方体纹理: 使用 gl.createTexture() 创建纹理对象，并绑定到 gl.TEXTURE_CUBE_MAP 目标。
加载六个面纹理: 循环加载六个面的纹理图像。faceTargets 数组定义了六个面的目标常量。
gl.texImage2D 参数: 在 gl.texImage2D 函数中，target 参数使用 faceTarget 变量，指定当前加载的是哪个面。
Mipmapping 和纹理参数: 在所有面加载完成后，生成 Mipmap 并设置纹理参数 TEXTURE_MIN_FILTER, TEXTURE_WRAP_S, TEXTURE_WRAP_T。gl.CLAMP_TO_EDGE 可以防止立方体边缘出现缝隙。
Shader 采样: 在片元着色器中，使用 samplerCube 类型的 uniform 变量 u_cubeMap 声明立方体纹理采样器。使用 textureCube(u_cubeMap, v_reflectionDir) 函数对立方体纹理进行采样，v_reflectionDir 是反射方向向量，通常在顶点着色器中计算并传递到片元着色器。

3.3.2.2 3D 纹理 (3D Texture)

3D 纹理，也称为体积纹理，是一种三维数据纹理，可以存储三维体数据，例如医学 CT 扫描数据、流体模拟数据等。

内容详解：

应用场景:
- 体积渲染 (Volume Rendering): 可视化三维体数据，例如医学成像、科学可视化等。
- 程序化纹理生成: 生成三维程序化纹理，例如三维噪声、云雾效果等。
创建 3D 纹理: 使用 gl.createTexture() 创建纹理对象，然后绑定到 gl.TEXTURE_3D 目标 (WebGL2 特性)。
加载 3D 纹理数据: 使用 gl.texImage3D(target, level, internalformat, width, height, depth, border, format, type, pixels) 函数加载 3D 纹理数据。相比 2D 纹理，gl.texImage3D 多了一个 depth 参数，用于指定纹理的深度。
纹理坐标: 在 Shader 中，使用三维纹理坐标对 3D 纹理进行采样。

代码实践：创建和使用 3D 纹理 (WebGL2)


const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
    console.error("WebGL2 context not supported.");
    return;
}
function create3DTexture(gl, width, height, depth, data) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_3D, texture);
    const level = 0;
    const internalFormat = gl.RGBA8; // WebGL2 需要指定具体格式
    const format = gl.RGBA;
    const type = gl.UNSIGNED_BYTE;
    gl.texImage3D(gl.TEXTURE_3D, level, internalFormat, width, height, depth, 0, format, type, data);
    gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // WebGL2 需要设置 WRAP_R
    gl.bindTexture(gl.TEXTURE_3D, null);
    return texture;
}
// 示例：创建一个简单的 3D 纹理 (假设 data 是 Uint8Array 类型的三维像素数据)
const textureWidth = 32;
const textureHeight = 32;
const textureDepth = 32;
const textureData = generate3DTextureData(textureWidth, textureHeight, textureDepth); // 假设存在 generate3DTextureData 函数
const volumeTexture = create3DTexture(gl, textureWidth, textureHeight, textureDepth, textureData);
// Shader 代码示例 (片元着色器)
// ...
uniform sampler3D u_volumeTexture;
varying vec3 v_texCoord; // 三维纹理坐标
void main() {
    vec4 volumeColor = texture(u_volumeTexture, v_texCoord); // 使用 texture 函数采样 3D 纹理
    gl_FragColor = volumeColor;
}

内容详解：

WebGL2 Context: 3D 纹理是 WebGL2 的特性，需要使用 WebGL2 Context。
gl.texImage3D 函数: 使用 gl.texImage3D 函数加载 3D 纹理数据。depth 参数指定纹理的深度。
纹理参数: WebGL2 中，需要设置 TEXTURE_WRAP_R 参数，对应 3D 纹理的第三个维度 (深度方向) 的纹理环绕模式。
Shader 采样: 在片元着色器中，使用 sampler3D 类型的 uniform 变量 u_volumeTexture 声明 3D 纹理采样器。使用 texture(u_volumeTexture, v_texCoord) 函数对 3D 纹理进行采样，v_texCoord 是三维纹理坐标。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/222-webgl-3d%E5%9B%BE%E5%BD%A2%E7%BC%96%E7%A8%8B%E5%AE%9E%E6%88%98%E6%95%99%E7%A8%8B

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流