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

Closed
Hanrui opened this Issue May 10, 2012 · 11 comments

Comments

Projects
None yet
5 participants
@Hanrui

Hanrui commented May 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mrdoob

mrdoob May 15, 2012

Owner

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.

Owner

mrdoob commented May 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Hanrui

Hanrui May 16, 2012

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!

Hanrui commented May 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@zz85

zz85 May 20, 2012

Contributor

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

Contributor

zz85 commented May 20, 2012

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

@Hanrui

This comment has been minimized.

Show comment
Hide comment
@Hanrui

Hanrui May 21, 2012

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

Thanks!

Hanrui commented May 21, 2012

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

Thanks!

@zz85

This comment has been minimized.

Show comment
Hide comment
@zz85

zz85 May 21, 2012

Contributor

@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

Contributor

zz85 commented May 21, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Hanrui

Hanrui May 23, 2012

@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 commented May 23, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Hanrui

Hanrui May 24, 2012

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!

Hanrui commented May 24, 2012

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

This comment has been minimized.

Show comment
Hide comment
@zz85

zz85 May 24, 2012

Contributor

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

zz85 commented May 24, 2012

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;

@mrdoob mrdoob closed this May 24, 2012

@Hanrui

This comment has been minimized.

Show comment
Hide comment
@Hanrui

Hanrui May 25, 2012

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

Hanrui commented May 25, 2012

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

This comment has been minimized.

Show comment
Hide comment
@AmdEagle

AmdEagle Dec 1, 2015

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

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

AmdEagle commented Dec 1, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@WestLangley

WestLangley Dec 1, 2015

Collaborator

@balakrishnanv Please use stackoverflow for help.

Collaborator

WestLangley commented Dec 1, 2015

@balakrishnanv Please use stackoverflow for help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment