如何使用three.js渲染具有不透明度分布的试管？

Question

我想渲染具有不透明度分布的管，因为外管的半透明性大于内管的半透明性。我该如何使用three.js制作这种电子管？

我尝试将多个半径不同的半透明管组合在一起。它可以工作，但是渲染时间太长。 我做了以下事情：

var tubeSpline = new THREE.CatmullRomCurve3(points);
var tubeNum = 32;

var tubeGeometry;
var geometries = [];
for (let i = 0; i < tubeNum; i++) {
    const geometryTmp = new THREE.TubeBufferGeometry(
                                        tubeSpline,
                                        5 * data.length,
                                        (1 / tubeNum) * (i + 1),
                                        32,
                                        false);
    geometries.push(geometryTmp);
}
tubeGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);
var tubeShaderMaterial = new THREE.ShaderMaterial({
    vertexShader: document.getElementById('vertexShaderSimple').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    uniforms: {
        points: {value: positions},
        radiuses: {value: radiuses},
        colors: {value: colors},
        size: {value: data.length},
        texture: {value: texture},
        lightPosition: {value: new THREE.Vector3(-20, 40, 60)},
        viewVector: { value: camera.position }
    },
    side: THREE.DoubleSide,
    transparent: true,
    clipping: true,
    clippingPlanes: [clippingPlane]
});
tubeMesh = new THREE.Mesh(tubeGeometry, tubeShaderMaterial);
scene.add(tubeMesh);

通过以上代码，我可以实现外观模糊的电子管，但是速度太慢。 是否有任何想法可以更快地渲染具有不透明度分布的试管？