使随机顶点/三角形隐藏在 bufferGeometry 中

Question

我的问题是关于在 bufferGeometry 中使一些顶点/三角形不可见。我从another question复制了这个着色器：

<script type="x-shader/x-vertex" id="vertexshader">
    attribute float visible;
    varying float vVisible;
    attribute vec3 color;
    varying vec3 vColor;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    vColor = color;
    vVisible = visible;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
varying float vVisible;
varying vec3 vColor;

void main() {
    if (vVisible > 0.0) {
      gl_FragColor = vec4(vColor, 1.0);
     }else
        discard;
}
</script>

这就是我定义缓冲区几何的方式：

 var geometry = new THREE.BufferGeometry();
 var sides = 4;
 var heightSegments = 1;
 var height = 20;
var radius = 10;
var indices= [];
var vertices;
function vertexes(){
    for (var j=0; j <=height; j = j + (height/heightSegments)) {
        for (var i=0;i<=sides;i++) {


 vertex.push([radius*Math.cos(2*Math.PI*i/sides),j,radius*Math.sin(2*Math.PI*i/sides)]);

        }
    }
    for ( var j = 0; j<sides; j++ ) {
        for (var i = 0 ; i <sides*heightSegments; i+=sides) {

            indices.push(i + j);
            indices.push(i + j + 1);
            indices.push(i + sides + j + 1);
            indices.push(i + j + 1);
            indices.push(i + sides + j + 1 + 1);
            indices.push(i + sides + j + 1);
        }
    }

 } // three components per vertex

function updatePositions() {
    for ( var k=0; k<(sides+1)*(heightSegments+1) ; k++ )
    {
        vertices[ k*3 + 0 ] = vertex[k][0];
        vertices[ k*3 + 1 ] = vertex[k][1];
        vertices[ k*3 + 2 ] = vertex[k][2];
        line_visible[k] = 1;
        line_colors[ k*3 + 0 ] = color.r;
        line_colors[ k*3 + 1 ] = color.g;
        line_colors[ k*3 + 2 ] = color.b;
    }

}
vertexes();
vertices = new Float32Array( vertex.length*3 );
line_visible = new Float32Array(vertex.length);
var color = new THREE.Color(0xffff00);
var line_colors = new Float32Array(vertex.length*3);
updatePositions();

geometry.setIndex( indices );
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute('color', new THREE.BufferAttribute(line_colors, 3));
geometry.addAttribute('visible', new THREE.BufferAttribute(line_visible, 1));
var shader_material = new THREE.ShaderMaterial({
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent
});

var mesh = new THREE.Mesh( geometry, shader_material );
scene.add(mesh);

所以当我用这行代码隐藏一些顶点或三角形时：

geometry.attributes.visible.array[0]=0;

我在上面那行代码之后也加了这行代码：

geometry.attributes.visible.needsUpdate = true;

什么都没有改变！只是补充一点，我随机想让它们隐藏起来，所以我认为setDrawRange 不会起作用！

Answer 1

更改visible 属性后，请务必设置needsUpdate 标志：

geometry.attributes.visible.array[0]=0;
geometry.attributes.visible.needsUpdate = true;

这告诉 THREE.js 属性的值已经改变，需要重新推送到 GPU。当 GPU 具有新值时，您的着色器应该会按预期工作。