THREE.Point 中单个点的旋转答案

【问题标题】：Rotation of a single point in THREE.PointTHREE.Point 中单个点的旋转
【发布时间】：2015-12-02 14:28:35
【问题描述】：

我在 THREE.Points Three.js 中有一个点，我想单独旋转点的图像。我看到了一个解决方案here。

我已经尝试过了，但我的输出似乎很奇怪。 image of my result of rotating 0 degree to 45 degree

下面是我的顶点着色器

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

下面是我的片段着色器

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

请帮助我，我不确定我做错了什么。

【问题讨论】：

标签： three.js glsl webgl shader

【解决方案1】：

您的公式看起来不正确。

以下是我想出的，但我可能是错的。试试这个：

rX = cos(angle) * x + sin(angle) * y;
rY = -sin(angle) * x + cos(angle) * y;

基于使用 2x2 矩阵旋转 2D 向量。

用你的话说：

vec2 rotated = vec2(cos(vRot) * (gl_PointCoord.x-mid) + sin(vRot) * (gl_PointCoord.y-mid) + mid, 
                    -sin(vRot) * (gl_PointCoord.x-mid) + cos(vRot) * (gl_PointCoord.y-mid) + mid);

【讨论】：