Autodesk Forge Viewer烟雾粒子效果实现问题求助

我已在Autodesk Forge Viewer中尝试实现烟雾粒子效果多日，期望达到类似飘散烟雾的粒子效果。由于Forge Viewer基于Three.js r71版本，现有粒子引擎示例均不兼容，因此我自行编写粒子引擎，但遇到了无法解决的问题。

最初我在独立的Three.js r71环境中测试，已实现类似的粒子效果，运行正常，但移植到Forge Viewer中时出现异常。

我已在Forge Viewer中测试过带自定义着色器的点云，效果良好，可自定义每个点的颜色、大小、位置等属性。但当我尝试在fragmentShader中使用texture2D添加图像纹理时，浏览器弹出警告，Viewer中无任何显示。

浏览器警告信息 #

WebGL: INVALID_OPERATION: getUniformLocation: program not linked
WebGL: INVALID_OPERATION: getAttribLocation: program not linked
WebGL: INVALID_OPERATION: useProgram: program not valid

顶点着色器代码 #

attribute float customSize;

void main() {
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    gl_Position = projectionMatrix * mvPosition;
    gl_PointSize = customSize;
}

片元着色器代码 #

uniform sampler2D texture;

void main() {
    vec4 color = texture2D(texture,gl_PointCoord);  //注释此行后一切正常
    gl_FragColor = color;
}

创建点的函数代码 #

createPoints() {
    const width = 100;
    const height = 100;
    const pointCount = width * height;

    const positions = new Float32Array(pointCount * 3);
    //const colors = new Float32Array(pointCount * 4);
    const sizes = new Float32Array(pointCount);

    const geometry = new THREE.BufferGeometry();

    const material = new THREE.ShaderMaterial({
        uniforms: {
            texture: { type: "t", value: this.particleTexture }
        },
        vertexShader: this.vertexShader,
        fragmentShader: this.fragmentShader,
        transparent: true,
        depthTest: true,
        blending: THREE.NormalBlending
    });
    material.supportsMrtNormals = true; 


    let i = 0;
    for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
            const u = x / width, v = y / height;

            positions[i * 3] = u * 20;
            positions[i * 3 + 1] = v * 20;
            positions[i * 3 + 2] = Math.sin(u * 20) + Math.cos(v * 20);

            sizes[i] = 1 + THREE.Math.randFloat(1, 5);

            colors[i * 4] = THREE.Math.random();
            colors[i * 4 + 1] = THREE.Math.random();
            colors[i * 4 + 2] = THREE.Math.random();
            colors[i * 4 + 3] = 1;

            i++;
        }
    }
    //const colorsAttribute = new THREE.BufferAttribute(colors, 4);
    //colorsAttribute.normalized = true;

    geometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));
    geometry.addAttribute("customSize", new THREE.BufferAttribute(sizes, 1));
    //geometry.addAttribute("customColor", colorsAttribute);

    geometry.computeBoundingBox();
    geometry.isPoints = true;


    points = new THREE.PointCloud(geometry, material);

    viewer.impl.createOverlayScene('pointclouds');
    viewer.impl.addOverlay('pointclouds', points);
}

纹理加载方式 #

this.particleTexture 通过以下代码加载：

THREE.ImageUtils.loadTexture("../img/smokeparticle.png")

顶点着色器、片元着色器和createPoints函数在独立Three.js环境与Forge Viewer环境中完全一致，但仅在独立环境中正常工作。我已查阅大量教程与博客，未找到适配的解决方案，恳请各位提供帮助，或告知在Forge Viewer中实现烟雾效果的更佳方式！

（若有信息遗漏，请告知，我会补充！）

内容的提问来源于stack exchange，提问作者TomTomTom