Is particle rotation supported in THREE.Particle and THREE.ParticleSystem?

[Hanrui]

Actually two questions here:

Is it still the situation that ParticleSystem is WebGLRenderer-only?

Is it possible to control each particle's velocity, gravity and texture rotation via ParticleSystem? (I know that's feasible via THREE.Sprite in WebGLRenderer. And in CanvasRenderer, texture rotation seems not supported.) -- If all the particles are using the same texture and only different in rotation around Z-axis.

Thank you!

[mrdoob]

Is it still the situation that ParticleSystem is WebGLRenderer-only?

Sadly, yes.

Is it possible to control each particle's velocity, gravity and texture rotation via ParticleSystem?

ParticleSystem uses geometry.vertices, so you just need to do the velocity and gravity calculation on your own, then modify the position of the particles and then do geometry.verticesNeedUpdate = true.

[Hanrui]

Thanks for the reply! For the 2nd question, how about the rotation? I mean if I want the all the particles in the ParticleSystem are sharing the same image but having different rotations (imaging the arrows that may point to up, down, left, right...), is that possible?

Thanks!

[zz85]

you could try passing rotation as attributes to the fragment shader where you draw a rotated texture in the shader

[Hanrui]

Hi @zz85,
Cuz all particles in this ParticleSystem share the same texture, how can I set the different rotations to them?

Thanks!

[zz85]

@Hanrui you can pass rotation to them as custom attributes. you can checkout those custom attribute examples. http://mrdoob.github.com/three.js/examples/webgl_custom_attributes_particles2.html

[Hanrui]

@zz85
I don't need change the color or size of the material, is that possible to use a ParticleBasicMaterial but not ShaderMaterial?
And, how to rotate the texture of each vertex to different directions? I know how to control the particle size and position via custom attributes, but still have no idea on how to rotate its texture picture.

Thanks!

[Hanrui]

I see there's a demo showing how to rotate the texture with Face4(http://www.html5rocks.com/en/tutorials/webgl/million_letters/), but it's rotating 4 vertex for a face which seems a little heavy for my needs. I just want rotating pictures on each vertex.
Just like the demo you pasted me above: http://mrdoob.github.com/three.js/examples/webgl_custom_attributes_particles2.html, is that possible to make each vertex texture on the sample rotate?

Thanks!

[zz85]

THREE.ParticleSystem uses point particles, so I don't think you can really rotate them in the vertex shader. You might probably need to pass rotation from the vertex shader to the fragment shader via varing variables. For that you probably need a ShaderMaterial instead of ParticleBasicMaterial.

Here's some pesudocode I can think of out of my head

--- vertex shader ---
attribute float rotation;
varing float vRotation;

vRotation = rotation;

--- fragment shader ---
varing vRotation;
uniform sampler2D tDiffuse; // your texture

vec2 rotated = vec2(cos(vRotation) * (gl_PointCoord.x - 0.5) + 0.5, sin(vRotation) * (gl_PointCoord.y - 0.5) + 0.5);
vec4 texture = texture2D( tDiffuse,  rotated);
gl_FragColor = vec4(color, 1.0) * texture;

[Hanrui]

OK, I finally solved this issue. Thanks @zz85 very much!
Pasting my vertex shader and fragment shader codes here if somebody else meets the same problem later:

  -- vertex shader --
    attribute float size;
    attribute float rotation;
    uniform vec3 ca;

    varying vec3 vColor;
    varying float vRotation;
    varying float vPointSize;

    void main() {
      vColor = ca;
      vRotation = rotation;

      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
      gl_Position = projectionMatrix * mvPosition;

      vPointSize = gl_PointSize;
    }

  -- fragment shader --
    uniform vec3 color;
    uniform sampler2D texture;

    varying vec3 vColor;
    varying float vRotation;
    varying float vPointSize;

    void main() {
      float mid = 0.5;
      vec2 rotated = vec2(cos(vRotation) * (gl_PointCoord.x - mid) + sin(vRotation) * (gl_PointCoord.y - mid) + mid,
                          cos(vRotation) * (gl_PointCoord.y - mid) - sin(vRotation) * (gl_PointCoord.x - mid) + mid);
      vec4 rotatedTexture = texture2D( texture,  rotated);
      gl_FragColor = vec4( color * vColor, 1.0 ) * rotatedTexture;
    }

[AmdEagle]

i have tried this shader for rotating a Point inside my THREE.Points but the output seems to look wierd.

//=========== My Vertex Shader ===============//

attribute vec3 color;
attribute float size;
attribute float rotation;

varying vec3 vColor;
varying float vRot;
void main()
{
    vColor = color;
    vRot = rotation;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );          
    gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

//===========| my fragment shader |=================//

uniform sampler2D texture;
varying vec3 vColor;
varying float vRot; 
void main()
{
    vec4 outColor   = texture2D( texture, gl_PointCoord );
    if( outColor.a < 0.5  )
    {
        discard;    
    }       
    float mid = 0.5;
    vec2 rotated = vec2(cos(vRot) * (gl_PointCoord.x - mid) + sin(vRot) * (gl_PointCoord.y - mid) + mid,    cos(vRot) * (gl_PointCoord.y - mid) - sin(vRot) * (gl_PointCoord.x - mid) + mid);
        vec4 rotatedTexture = texture2D( texture, rotated );                
    gl_FragColor    = outColor * vec4( 1.0, 0.0, 0.0 , 1.0 ) * rotatedTexture;
}

Please help me i am not sure what i am doing wrong

[WestLangley]

@balakrishnanv Please use stackoverflow for help.

[neilning-xc]

@Hanrui Cool! It works perfectly!