2

I'm trying to create a clouds fly through similar to this, only with more maneuverability: http://mrdoob.com/lab/javascript/webgl/clouds/

I had no problem creating that using sprites, but I want to improve the performance so I'm trying to use particles with THREE.PointCloud.

The problem is that when I fly toward the particles, instead of "colliding" in the camera there's some weird effect when the particle hangs in front of the camera and then slides to the side, I made an example here: http://jsfiddle.net/6avpd6me/36/ All the particles are moving toward the camera in a straight line, but non of them actually colliding in it, changing the size doesn't help.

Anybody knows what's causing this and maybe how can I fix that?

Thanks

JSFiddle code:

    var geometry, renderer, scene, camera, cloud, uniforms, attributes;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 600;

    var particleMaterial = new THREE.PointCloudMaterial({
            color:0xffffff,
            size: 100,        
            transparent:true,
            opacity:0.5,
            sizeAttenuation:false
        });
    particleMaterial.depthTest = true;
    particleMaterial.depthWrite = false;    

    // point cloud geometry
    geometry = new THREE.PlaneGeometry( 10, 10, 5, 5);

    for( var i = 0; i < geometry.vertices.length; i++)
    {
        geometry.vertices[i].velocity = new THREE.Vector3(0, 0, random(50, 300) / 100);
    }    

    cloud = new THREE.PointCloud(geometry, particleMaterial);

    scene.add( cloud );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    for( var i = 0; i < geometry.vertices.length; i++ )
    {
        geometry.vertices[i].add(geometry.vertices[i].velocity);
        if (geometry.vertices[i].z > 650) geometry.vertices[i].z = 0;
    }

    geometry.verticesNeedUpdate = true;

    renderer.render( scene, camera );

}

function random(min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
WestLangley
  • 102,557
  • 10
  • 276
  • 276
eyal_123
  • 86
  • 6
  • I assume when the particles collide you want them to bounce back or something. However from what I can see in your code, you haven't actually implemented any logic to detect collisions and handle them. I don't believe that the library has native collision handling. – Zara Kay Apr 22 '15 at 22:36
  • No, the code is only an example to show the sliding, look at the JSfiddle link I added, I used the word "collide" but I just mean that the particles doesn't look like moving toward the camera, but moving next to it, that's what I want to solve. – eyal_123 Apr 22 '15 at 22:38
  • in the jsfiddle link, the white squares are moving off in different directions - is that what you mean by sliding to the side? Do you want them to continue to grow in size as they approach the camera? (visually speaking, not mathematically) – Mike Weber Apr 22 '15 at 22:42
  • Yes, that's exactly what I want, mathematically though, they all move in a straight line toward the camera, If i'll use sprites instead of PointCloud, the visual representation will look normal(the squares will grow in size and eventually fill the screen until they will go behind the camera). But when using particles I get that weird effect. – eyal_123 Apr 22 '15 at 22:46
  • Is this geometry.vertices[i].add(geometry.vertices[i].velocity); adding to more than just z ? Or maybe I'm not completely understanding this line of code. – Mike Weber Apr 22 '15 at 22:52
  • Is `sizeAttenuation: true` what you want? – WestLangley Apr 22 '15 at 22:56
  • Mike: only the Z is changed, you can change it to geometry.vertices[i].z += 1; and it will look the same. – eyal_123 Apr 22 '15 at 22:59
  • WestLangley: It doesn't matter to me at this point, changing sizeAttenuation to false doesn't change the problematic behavior as far as I checked. – eyal_123 Apr 22 '15 at 23:00
  • The particles initial positions are not on the z-axis, so they will "miss" the camera, which is on the z-axis. – WestLangley Apr 22 '15 at 23:13
  • I updated the fiddle: http://jsfiddle.net/6avpd6me/39/ I set all of the particles starting position to 0,0,0 the camera is in 0,0,600 as you can see now it "looks like" there is no movement at all, but if you look at the console (ctrl+shift+J in chrome) I print one of the particles Z value which proves it is indeed moving. – eyal_123 Apr 22 '15 at 23:21
  • I'm thinking you should move the camera and not all the verts. If you want to simulate moving through clouds. – Mike Weber Apr 22 '15 at 23:28
  • Everythingthing works as you have coded it. I see no problems. http://jsfiddle.net/6avpd6me/40/ – WestLangley Apr 22 '15 at 23:30
  • WestLangley: Actually it doesn't, I see you changed sizeAttenuation to true, but the rectangle doesn't fill the entire view port although it travels behind the camera to z=650 when the camera is at z=600, at least in my case the square's size gets bigger until it reaches 1/3 of the view port and then stops, From this behavior, I can assume a particle point have a maximum size that it can be rendered with...? – eyal_123 Apr 22 '15 at 23:42
  • Mike: This is only a script I wrote to show the problematic behavior of particles, In my "clouds" code I move the camera, but that code is way too long and complex to be added here. – eyal_123 Apr 22 '15 at 23:44
  • "the rectangle doesn't fill the entire view port" It does for me. Make sure you understand the purpose of the near clipping plane. Set the near plane to 100 or 0.1. Also vary the `size` of the particle. – WestLangley Apr 23 '15 at 00:19
  • I understand the purpose, that's not the reason, after some research I found out that there is indeed a maximum size for a particle point, it is varies between different graphics cards, that's why I see it stop growing at 1/3 of the view port, and you see it fill it entirely. I guess the answer to my initial question is that the problem is the particle's maximum size, and I can't see how I solve it without writing a new shader, Thanks WestLangley and Mike for your efforts, First time i'm posting in stackoverflow, how do I give a positive reputation? – eyal_123 Apr 23 '15 at 00:29
  • In this case, I would suggest you answer your own question -- in any way you feel it would be helpful to others. – WestLangley Apr 23 '15 at 01:06

0 Answers0