faire des vertex/traingles aléatoires cachés dans bufferGeometry

Question

ma question est de rendre certains sommets/triangles invisibles dans bufferGeometry. J'ai copié ce shader de 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> 

puis voici comment I défini la géométrie de la mémoire tampon:

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

quand je fais des sommets ou des triangles cachés par cette ligne de code:

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

J'ai également ajouté cette ligne de code après la ligne de code ci-dessus:

geometry.attributes.visible.needsUpdate = true; 

rien n'a changé! juste pour ajouter que je veux au hasard les rendre cachés, donc je ne pense pas que setDrawRange fonctionnera!

Answer 1

Après avoir modifié votre attribut visible, assurez-vous de mettre le drapeau needsUpdate:

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

Cela indique Three.js que les valeurs de l'attribut ont changé et ont besoin de nouveau poussé vers le GPU. Lorsque le GPU a les nouvelles valeurs, votre shader devrait fonctionner comme prévu.