making random vertices/triangles hidden in bufferGeometry

Question

my question is regarding making some vertices/triangles invisible in bufferGeometry. I have copied this shader from 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>

and then this is how I defined the buffer geometry:

 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);

so when I make some vertices or triangles hidden by this line of code:

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

I also added this line of code after the line of code above:

geometry.attributes.visible.needsUpdate = true;

nothing changed! just to add that I randomly want to make them hidden, so I don't think setDrawRange will work!

TheJim01 TheJim01 · Accepted Answer · 2017-04-12T19:49:51

After you change your visible attribute, be sure to set the needsUpdate flag:

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

This tells THREE.js that the values of the attribute have changed and need re-pushed to the GPU. When the GPU has the new values, your shader should work as expected.

making random vertices/triangles hidden in bufferGeometry

1 Answers