将数据存储为纹理，以便在实例化几何体的顶点着色器中使用(三个JS / GLSL)

// 创建一个纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 假设我们有一个包含实例数据的数组
const instanceData = new Float32Array([
    // x, y, z, w (变换矩阵的平移部分)
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    // ...更多实例数据
]);

// 将数据上传到纹理
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 4, instanceData.length / 4, 0, gl.RGBA, gl.FLOAT, instanceData);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

attribute vec4 a_position;
attribute vec4 a_instanceData;

uniform sampler2D u_instanceTexture;

void main() {
    // 从纹理中读取实例数据
    vec4 instanceData = texture2D(u_instanceTexture, vec2(gl_InstanceID % 4, gl_InstanceID / 4));

    // 使用实例数据进行变换
    mat4 transform = mat4(
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        instanceData.x, instanceData.y, instanceData.z, instanceData.w
    );

    gl_Position = transform * a_position;
}