Aframe: Camera movement not working with environment preset and particle system

Created on 11 Feb 2020 · 5Comments · Source: aframevr/aframe

Description:

A-Frame Version: >=1.0.0
Platform / Device: Firefox
Reproducible Code Snippet or URL:

<!DOCTYPE` html>
<html lang="en">
  <head>
    <title>Hello environment!</title>
    <meta charset="utf-8">
    <meta name="description" content="Simple • A-Frame" />
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
  </head>  
  <body>
    <a-scene id="scene" environment="preset: forest">
        <a-entity particle-system="preset: rain"></a-entity>
    </a-scene>
  </body>
</html>

I currently have the problem, that the environment presets of the https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js package and the particke system of the https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js are not working with the camera controls of aframe >=1.0.0 When using aframe 0.9.0 at least the camera movement is working, although the browser inspector throws an errors ->

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Must have a compiled vertex shader attached.
THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:364: 'mvPosition' : undeclared identifier
ERROR: 0:364: 'z' : field selection requires structure or vector on left hand side1: precision highp float;
2: precision highp int;
3: #define HIGH_PRECISION
4: #define SHADER_NAME ShaderMaterial
5: #define HAS_PERSPECTIVE true
6: #define COLORIZE true
7: #define VALUE_OVER_LIFETIME_LENGTH 4
8: #define SHOULD_ROTATE_PARTICLES true
9: #define VERTEX_TEXTURES
10: #define GAMMA_FACTOR 2
11: #define MAX_BONES 0
12: #define USE_FOG
13: #define BONE_TEXTURE
14: uniform mat4 modelMatrix;
15: uniform mat4 modelViewMatrix;
16: uniform mat4 projectionMatrix;
17: uniform mat4 viewMatrix;
18: uniform mat3 normalMatrix;
19: uniform vec3 cameraPosition;
20: uniform bool isOrthographic;
21: #ifdef USE_INSTANCING
22: attribute mat4 instanceMatrix;
23: #endif
24: attribute vec3 position;
25: attribute vec3 normal;
26: attribute vec2 uv;
27: #ifdef USE_TANGENT
28: attribute vec4 tangent;
29: #endif
30: …
three.js:18243:12

TypeError: e.fogColor.value is null three.js:25942:3

core:a-node:error Failure loading node: TypeError: "this.environmentData.lightPosition is undefined"
Aframe 10
browser.js:111:32

Best regards :)

Source

FireDragonGameStudio

Most helpful comment

I was able to get environment component and particle system working in this scene together with A-Frame 1.0.4:
https://glitch.com/~codevember-05-sword

It uses a modified version of Particle Component:
https://github.com/roskelld/aframe-particle-system-component

Per @Firepal's point, this includes a commit that adds fog color / shader:
https://github.com/roskelld/aframe-particle-system-component/commit/2b8ce2730dcbb465b342d0c4832feabbdcaa539f

So this ticket may instead belong here:
https://github.com/IdeaSpaceVR/aframe-particle-system-component/issues

kfarr on 24 Feb 2020

🎉2

All 5 comments

Quick glance tells me the environment component is not giving three.js a fog color and a shader (presumably from the environment component) malfunctioning.

It's not that the camera controls don't work, it's that the scene renders ONCE and refuses to render any further because of those problems.

Firepal on 21 Feb 2020

Okay, this is definitely related to both libraries interfering globally.
It doesn't matter what environment preset you pick, if the particle-system is present, the scene refuses to render. I can't tell why this happens.

Firepal on 22 Feb 2020

😕1

I was able to get environment component and particle system working in this scene together with A-Frame 1.0.4:
https://glitch.com/~codevember-05-sword

It uses a modified version of Particle Component:
https://github.com/roskelld/aframe-particle-system-component

Per @Firepal's point, this includes a commit that adds fog color / shader:
https://github.com/roskelld/aframe-particle-system-component/commit/2b8ce2730dcbb465b342d0c4832feabbdcaa539f

So this ticket may instead belong here:
https://github.com/IdeaSpaceVR/aframe-particle-system-component/issues

kfarr on 24 Feb 2020

🎉2

To prove it's the particle component that is the culprit, it may be worth testing if your scene malfunctions when using fog (not the environment component) and particle component together. Then you can definitely file the ticket under the original particle component and suggest them to incorporate the changes from this commit.

kfarr on 24 Feb 2020

Yeah. It’s an issue of the shader used by the particle components and newer versions of THREE

@kfarr thanks for pointing out to the fix. I’m closing this and I recommend opening an issue on the component repo.