ランダムな頂点/トラッピングをbufferGeometryに隠している

Question

私の質問は、bufferGeometryでいくつかの頂点/三角形を見えなくすることに関するものです。

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

をして、これは私が、バッファジオメトリ定義された方法である：私はanother questionからこのシェーダをコピーした私は、このコード行によって隠されていくつかの頂点や三角形を作るときに

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; 

Iはまた、上記のコードの行の後にコードの行を追加しました

何も変更されていません！私は無作為にそれらを隠したいと思っているので、私はsetDrawRangeはうまくいかないと付け加えてください！あなたはvisible属性を変更した後

Answer 1

、needsUpdateフラグを設定してください：

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

これは、属性の値が変更されているとGPUに再プッシュする必要があることTHREE.js伝えます。 GPUに新しい値が設定されている場合、シェーダは期待通りに動作するはずです。