实例化场景中顶点着色器访问纹理数据的原理疑问

架构老林

2026-7-13

基于文字纹理Alpha值的实例化粒子着色器疑问解答

背景说明

我正在学习基于文字纹理Alpha值创建实例化粒子的教程，此前只在片元着色器里配合UV使用sampler2D和texture2D，这是第一次看到在顶点着色器中使用纹理。教程里通过JS为每个粒子生成0-1范围内的随机texCoord值，代码如下：

const num = 20000;
let texCoord = new Float32Array(num * 2);

for (let i = 0; i < num; i++) {
    // 生成-0.5到0.5的随机值
    let x = (Math.random() * 2 - 1) * 0.5;
    let y = (Math.random() * 2 - 1) * 0.5;

    // 设置顶点着色器中纹理采样的坐标点（转换为0-1范围）
    texCoord.set([
        x + 0.5, 
        y + 0.5
    ], i * 2);
}

我有两个概念性疑问需要理解：

如何通过为每个粒子保存随机xy值的texCoord变量，为带透明通道的PNG图像创建新坐标系？这些texCoord点没有背景平面作为0-1裁剪坐标的参考，且顶点着色器针对每个顶点运行，texCoord应该映射到微小的实例化平面而非背景，对吗？
它是如何让“TEXT”图像在顶点着色器中占据整个屏幕的虚拟背景平面（以此提取alpha值）？是否是我忽略了sampler2D的某些特性？

我原本以为需要创建一个占据整个场景的非实例化平面并应用纹理，之后才能提取其alpha值，查阅资料后仍无法理解，希望得到通俗易懂的解释。

疑问解答

问题1：`texCoord`如何关联PNG的坐标系？

你搞反了逻辑：不是用texCoord给PNG创建坐标系，而是PNG本身就自带一套0-1的纹理坐标系——不管有没有实体平面，GPU处理纹理的默认规则就是：纹理左上角对应坐标(0,0)，右下角对应(1,1)，这个范围是纹理资源本身的属性，和任何实体模型无关。

这里的texCoord是给每个实例粒子分配一个“采样探针的位置”：每个粒子对应纹理上的一个随机坐标点，顶点着色器用这个坐标去读取纹理对应位置的Alpha值。这些texCoord和实例化平面自身的UV完全没关系——你可以把每个粒子想象成一个 tiny 的探测器，texCoord就是它在纹理坐标系上的落点，用来探测这个位置是否是文字区域。

问题2：为何无需实体背景平面就能提取全屏TEXT的Alpha值？

这是sampler2D的核心特性：纹理是GPU中独立存储的图像资源，采样它只需要坐标，不需要依附任何实体平面。

你之前的误区是把“显示纹理”和“读取纹理像素数据”绑定了——显示纹理需要平面+UV映射来把纹理贴上去，但读取纹理的像素值（比如Alpha）完全不需要实体载体。GPU可以直接根据你传入的0-1坐标，去纹理资源里找到对应位置的像素信息。

教程里的逻辑很简单：用20000个粒子作为“采样点”，随机覆盖整个纹理坐标系（0-1范围），每个粒子采样自己对应位置的Alpha值——如果该位置是TEXT的不透明区域（Alpha值高），就显示粒子；如果是透明区域，就隐藏粒子。最终这些粒子会组成TEXT的形状，看起来像TEXT占据了全屏背景，但实际上根本没有这个背景平面，只是无数粒子根据纹理采样结果显示/隐藏的视觉效果。

附：着色器代码

顶点着色器

// 引入属性
attribute vec3 offset;
attribute vec2 texCoord;
attribute vec2 a_lineHeight;

varying float v_alpha;
varying vec2 v_uv;

uniform sampler2D u_tex1;
uniform float u_lineHeight;
uniform float u_thickness;

void main() {
    vec3 pos = position;
    v_uv = uv;

    // 使用texCoord采样纹理，提取Alpha值（这里用r通道代替，因为文字纹理是灰度图）
    float tex1 = step( .8, texture2D(u_tex1, texCoord).r );
    v_alpha = tex1;

    float scale = mix(a_lineHeight.x, a_lineHeight.y * 5., u_lineHeight);
    pos.y *= scale;
    pos.x *= u_thickness;

    vec2 origin = texCoord * vec2(1., .5);
    float alpha = 1. - v_alpha;
    pos.xy += origin - vec2(0.5, 0.25) + alpha;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

片元着色器

precision highp float;

varying float v_alpha;
uniform float u_time;    

void main() {
    vec3 color = vec3(1., 1., 1.);
    gl_FragColor = vec4(color, v_alpha);
}

效果展示

整体粒子组成TEXT的效果：
整体粒子效果

实例化平面特写：

内容的提问来源于stack exchange，提问作者Mr.Coder

实例化场景中顶点着色器访问纹理数据的原理疑问

背景说明 #

疑问解答 #

问题1：texCoord如何关联PNG的坐标系？ #

问题2：为何无需实体背景平面就能提取全屏TEXT的Alpha值？ #

附：着色器代码 #

顶点着色器 #

片元着色器 #

效果展示 #