8th Wall AR camera + Fluid Renderer issues

Questions
1


Has anyone tried using fluid effects with AR using 8th Wall?
8th Wall uses FreeCamera but then adds its own behaviour that utilises the device camera like this:
camera.addBehavior(XR8.Babylonjs.xrCameraBehavior())

I can enableFluidRenderer() but as soon as I addParticleSystem to that renderer the 8th Wall camera goes blank. Does anyone have any ideas of what I could try to get them working together?

I’ve attached a video to demonstrate.

2

Standard particle system like this works with the 8th Wall camera

const particleSystem = new BABYLON.ParticleSystem('particles', 2000)
particleSystem.particleTexture = new BABYLON.Texture('https://playground.babylonjs.com/textures/flare.png')
particleSystem.emitter = new BABYLON.Vector3(0, 0.5, 0)
particleSystem.start()

Must just be the fluid renderer that’s doing something to the camera.

3

looks like there is an extra clear after drawing the background video.

We d need a repro unfortunately so that @Evgeni_Popov can have a look

4

Unfortunately I can’t make a BabylonJS Playground because its using an 8th Wall camera. However I can point to an 8th Wall template and the code to add. Its this template babylon.js: Place Ground | 8th Wall | 8th Wall and you’ll need to replace the code in babylonjs-scene-init.js with this

let engine
let scene
let camera

const initXrScene = () => {
  const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(-5, -10, 7), scene)
  light.intensity = 1.0
  camera.position = new BABYLON.Vector3(0, 2, -2)
}

export const startScene = async (canvas) => {
  engine = new BABYLON.Engine(canvas, true)
  scene = new BABYLON.Scene(engine)
  camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)

  initXrScene({scene, camera})

  // Special behavior that turns camera into AR camera
  camera.addBehavior(XR8.Babylonjs.xrCameraBehavior())

  engine.runRenderLoop(() => scene.render())

  window.addEventListener('resize', () => engine.resize())

  const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 1}, scene)
  sphere.position.x = 0.2
  const material = new BABYLON.StandardMaterial('mat', scene)
  material.diffuseColor = BABYLON.Color3.Red()
  material.alpha = 0.5
  sphere.material = material

  const numParticlesEmitRate = 1500 * 2

  const fluidRenderer = scene.enableFluidRenderer()
  const particleSystem = new BABYLON.ParticleSystem('particles', 40000, scene)

  particleSystem.particleTexture = new BABYLON.Texture(
    'https://playground.babylonjs.com/textures/flare32bits.png',
    scene
  )
  particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD

  // Where the particles come from
  particleSystem.createConeEmitter(4, Math.PI / 2)

  // Colors of all particles
  particleSystem.color1 = new BABYLON.Color4(0.4, 1.5, 0.3, 1.0)
  particleSystem.color2 = new BABYLON.Color4(0.4, 1.5, 0.3, 1.0)
  particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0)
  particleSystem.colorDead = new BABYLON.Color4(0.4, 1.0, 0.3, 1.0)

  // Size of each particle (random between...
  particleSystem.minSize = 0.25
  particleSystem.maxSize = 0.25

  // Life time of each particle (random between...
  particleSystem.minLifeTime = 2.0
  particleSystem.maxLifeTime = 2.5

  // Emission rate
  particleSystem.emitRate = numParticlesEmitRate

  // Set the gravity of all particles
  particleSystem.gravity = new BABYLON.Vector3(0, -10.81, 0)

  // Speed
  particleSystem.minEmitPower = 2.5
  particleSystem.maxEmitPower = 6.5
  particleSystem.updateSpeed = 0.02

  // Start the particle system
  particleSystem.preWarmCycles = 60 * 8

  // THIS BIT RUINS THE XR CAMERA FEED
  fluidRenderer.addParticleSystem(particleSystem, false)

  particleSystem.start()
}

If anyone has any suggestions how I can make this easier for people (likely @Evgeni_Popov ) to test pls mention it here

5

The 8th Wall site requires you to create a login and provide payment information, which I don’t want to do, so I can’t test…

Does the new compositeMode property fix the problem?

1 Like
6

@ozRocker Thanks for the access!

This PG reproduces the same situation and proposes a solution:

I did the same changes in 8th Wall.

However, it does not work as expected, because the compositeMode property is only available starting from version 7.6.1, whereas 8th Wall uses 7.0.0.

The fix consists in:

  • Adding these lines after the scene has been created:
    scene.autoClear = false;
    scene.clearColor = new BABYLON.Color4(1,1,1,0);
  • Enabling the composite mode:
    const rro = fluidRenderer.addParticleSystem(particleSystem, false);
    rro.targetRenderer.compositeMode = true;
  • Configuring the fluid renderer post process with alpha mode:
    window.setTimeout(() => {
        const pp = camera._getFirstPostProcess();
        pp.alphaMode = BABYLON.Constants.ALPHA_COMBINE;
        pp.forceAutoClearInAlphaMode = true;
    }, 0);

Let me know if it works for you.

2 Likes
7

That works! There is a file in the 8th Wall workspace called head.html which imports the BabylonJS files and other files you might need, such as jszip.min.js. You can simply change the BabylonJS files being imported to the latest version, which is what I’ve done.

Also people, remember to put that window.setTimeout code after running the fluid renderer. On phone devices the contents of the timeout must happen after user approves of camera, etc… and the fluid animation begins

@Evgeni_Popov you’ve just enabled fluid particles for AR. You’re a legend mate!

2 Likes