CODEWITHSUNDEEP
three.js
Danny_Woodford
Danny_Woodford

Reputation: 31

Converting THREE.js Geometry into BufferGeometry?

I'm relatively new to THREE.js and I got this code but I'd like to reconstruct this Geometry into BufferGeometry to get the efficiency benefits. I saw this (var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );) as a possible solution but I could not implement it I'm sure it's simple I just lack the experience with THREE.js to recognize this.

for (let i = 0; i < rainCount; i++) {
rainDrop = new THREE.Vector3(
    Math.random() * 120 - 60,
    Math.random() * 180 - 80,
    Math.random() * 130 - 60,
)

    rainDrop.velocity = {}
    rainDrop.velocity = 0
bufferGeometry.vertices.push(rainDrop)
}

rainMaterial = new THREE.PointsMaterial({
    color: '#ffffff',
    size: .3,
    transparent: true,
    map: THREE.ImageUtils.loadTexture(
        'images/snow_mask_2.png'),
    blending: THREE.AdditiveBlending,
})

rain = new THREE.Points(bufferGeometry, rainMaterial)
rain.rotation.x = -1.5707963267948963
rain.rotation.y = -3.22
scene.add(rain)

function rainVariation() {
    bufferGeometry.vertices.forEach(p => {
        p.velocity -= 0.1 + Math.random() * 0.1;
        p.y += p.velocity;

        if (p.y < -60) {
            p.y = 60;
            p.velocity = 0;
    }
});


    bufferGeometry.verticesNeedUpdate = true;
    rain.rotation.y += 0.008

}

Upvotes: 3

Views: 1586

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Try it with this ported code as a basis. I suggest that you manage the velocity per raindrop in a separate array (since these data are not necessary in the shader).

let camera, scene, renderer, rain;

const vertex = new THREE.Vector3();

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 100;

    scene = new THREE.Scene();

    const geometry = new THREE.BufferGeometry();
    const vertices = [];

    for (let i = 0; i < 1000; i++) {
        vertices.push( 
		    Math.random() * 120 - 60,
		    Math.random() * 180 - 80,
		    Math.random() * 130 - 60
        );
    }
		
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

    const material = new THREE.PointsMaterial( { color: '#ffffff' } );

    rain = new THREE.Points( geometry, material );
    scene.add(rain);

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function rainVariation() {

    var positionAttribute = rain.geometry.getAttribute( 'position' );
	
    for ( var i = 0; i < positionAttribute.count; i ++ ) {
	
        vertex.fromBufferAttribute( positionAttribute, i );
		
        vertex.y -= 1;
		
        if (vertex.y < - 60) {
            vertex.y = 90;
        }
		
        positionAttribute.setXYZ( i, vertex.x, vertex.y, vertex.z );
	
    }

    positionAttribute.needsUpdate = true;

}

function animate() {

    requestAnimationFrame( animate );

    rainVariation();

    renderer.render( scene, camera );

}
body {
	  margin: 0;
}
canvas {
	display: block;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>

Upvotes: 3

Related Questions