Zastosuj orientację 2D do cząstek - three.js

Question

Po raz pierwszy używam three.js i robię bardzo prostą animację cząstek, w której mapuję 4 różne tekstury. Do tej pory wszystko działa zgodnie z oczekiwaniami, z tym wyjątkiem, że nie mogę wymyślić, jak obracać cząstki, aby były renderowane z losową orientacją (do góry nogami, na boki itp.). Każda pomoc byłaby doceniona!

Można zobaczyć moje postępy dotychczas tutaj: http://development.shapes.divshot.io/particles.html

i tutaj jest odpowiedni kod:

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

      for (i = 0; i < parameters.length; i ++) { 

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

      } 

Korzystanie Three.js R71

Answer 1

AFAIK three.js PointCloud/PointCloudMaterial cząstek system używa gl.POINTS, aby narysować punkty. Co oznacza, że ​​ma kilka ograniczeń.

1. Nie można obracać punktów.

   Możesz obrócić współrzędne UV w module cieniującym fragmentu, jeśli piszesz niestandardowy moduł cieniujący, ale to nie pomoże, jeśli obraz wypełni punkt, ponieważ obracanie kwadratowej tekstury wewnątrz kwadratu spowoduje przycięcie narożników podczas obracania.

2. Nie można uzyskać punktów większych niż maksymalna strona punktu GPU/Sterownika, na którym się znajdujesz.

   WebGL wymaga maksymalnego rozmiaru = 1,0, co oznacza, że ​​istnieją GPU/sterowniki, które obsługują tylko 1 piksel dużych punktów.

   Sprawdzanie webglstats.com wygląda na to, że liczba procesorów graficznych/sterowników obsługujących tylko 1 piksel dużych punktów jest mniejsza. Wciąż jest około 5% maszyn, które obsługują tylko punkty 63 pikseli i mniejsze, co powinno stanowić problem tylko w przypadku przelotu przez pole punktowe.

3. Możesz mieć tylko punkty kwadratowe.

   Nie możesz mieć punktu prostokątnego, jeśli chcesz mieć coś długiego i cienkiego jak np. Iskra.

Jednym z rozwiązań jest stworzenie własnego układu cząstek, który wykorzystuje quady i może obracać ich wierzchołki, a także skalować je w wielu kierunkach. This example działa wyłącznie na GPU. Niestety nie jest oparty na pliku three.js.