search

IdeaSpaceVR / aframe-particle-system-component

Particle systems for A-Frame.
https://ideaspacevr.github.io/aframe-particle-system-component/
MIT License
231 stars 68 forks source link

Particle system not working with aframe 1.3 #66

Open Oceanestars opened 2 years ago

Oceanestars commented 2 years ago

Hi, This is my first time using this so I'm super sorry if this was mentioned somewhere. I tried using the particle system to create rain and I tested independently from my project. One with version 1.0 and one with 1.3. It worked with 1.0 but doesn't work with 1.3. Is there something additional I need to do? Thanks!

Aframe Version 1.0

<!DOCTYPE html> 
  <html>
    <head>
      <meta charset="utf-8">
      <title>A-Frame Particle System Component Example</title>
      <meta name="description" content="Hello, World!">
      <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
      <script src="aframe.min.js"></script>
      <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
      <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
      <script src="https://unpkg.com/aframe-outline@%5E1.1.0/build/aframe-outline.min.js"></script>
      <script src="https://unpkg.com/aframe-extras.animation-mixer@3.4.0/dist/aframe-extras.animation-mixer.js"></script>
    </head>

    <body>
      <a-scene>

      <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>

      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 -4" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 -4" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#000000"></a-sky>

      </a-scene>
    </body>
  </html>

Aframe Version 1.3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Particle System Component Example</title>
    <meta name="description" content="Hello, World!">
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"> 
     </script>
    <script src="https://unpkg.com/aframe-outline@%5E1.1.0/build/aframe-outline.min.js"></script>
    <script src="https://unpkg.com/aframe-extras.animation-mixer@3.4.0/dist/aframe-extras.animation-mixer.js"></script>
  </head>

  <body>
    <a-scene>
      <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 -4" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 -4" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#000000"></a-sky>
    </a-scene>
  </body>
</html>
lijualivenow commented 2 years ago

I am facing the same issue, the particle is not working in Aframe versions 1.1.0, 1.2.0, and 1.3.0. But it is working for 1.0.0 or lower

robin-price commented 2 years ago

I have the same problem, I think its down to Aframe moving to webgl 2?

https://discourse.threejs.org/t/webgl2-breaking-custom-shader/16603/4

diarmidmackenzie commented 2 years ago

With A-Frame 1.3.0, I hit errors with the version served by unpkg, but everything worked fine with the version taken from the dist folder of this repo.

https://github.com/IdeaSpaceVR/aframe-particle-system-component/blob/master/dist/aframe-particle-system-component.min.js

dirkk0 commented 2 years ago

@diarmidmackenzie thanks! I was trying it out only with rain which didn't work so I nearly gave up on this.

Turn out you have to add size for some reason, so <a-entity position="0 3 -5" particle-system="preset: rain; particleCount: 10000; size: 0.1;"></a-entity> works while <a-entity position="0 3 -5" particle-system="preset: rain;"></a-entity> throws errors.

Shellcial commented 2 years ago

@diarmidmackenzie Same method with you. In short, I copy and paste the latest js inside and it works in A-frame 1.3.0

In my case, I use A-frame 1.3.0 and 8th Wall. From the UNPKG link, https://unpkg.com/browse/aframe-particle-system-component@1.1.3/dist/ the latest version is 1.1.3, it will have the below warning and error | THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead. | THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute(). | THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false Program Info Log: Vertex shader is not compiled. VERTEX ERROR: ...(and a very long error list)

You can see from its latest update in github (4 months ago), the Three.js attribute has been updated. I tried to copy this js and paste in Githubissues.

  • Githubissues is a development platform for aggregating issues.