javascript - Apply 2D orientation to particles - three.js -


first time using three.js , i'm doing simple particle animation in i'm mapping 4 different textures. far working desired except can't figure out how rotate particles they're rendered random orientation (upside down, sideways, etc.) appreciated!

you can see progress far here: http://development.shapes.divshot.io/particles.html

and here relevant code:

            sprite1 = three.imageutils.loadtexture( "sprite1.png" );             sprite2 = three.imageutils.loadtexture( "sprite2.png" );             sprite3 = three.imageutils.loadtexture( "sprite3.png" );             sprite4 = three.imageutils.loadtexture( "sprite4.png" );              parameters = [ sprite1, sprite2, sprite3, sprite4];              ( = 0; < parameters.length; ++ ) {                  sprite = parameters[i];                  materials[i] = new three.pointcloudmaterial( { size: 45, map: sprite, depthtest: false, transparent : true} );                   particles = new three.pointcloud( geometry, materials[i] );                  particles.rotation.x = math.random() * 60;                 particles.rotation.y = math.random() * 60;                 particles.rotation.z = math.random() * 60;                  scene.add( particles );              } 

using three.js r71

afaik three.js pointcloud/pointcloudmaterial particle system uses gl.points draw points. means has several limitations.

  1. you can't rotate points.

    you can rotate uv coordinates in fragment shader if write custom shader won't if image fills point because rotating square texture inside square clip corners rotates.

  2. you can't make points larger max point side of gpu/driver you're on.

    webgl requires max size = 1.0 means there gpus/drivers support 1 pixel large points.

    checking webglstats.com looks number of gpus/drivers support 1 pixel large points has gotten smaller. there's still 5% of machines support points 63 pixels , smaller should issue if you're flying through point field.

  3. you can have square points.

    you can't have rectangular point if wanted long , thin spark example.

one solution make own particle system uses quads , can rotate vertices scale them in multiple directions. this example runs entirely on gpu. unfortunately not three.js based.


Comments