Babylon-mapbox billboard

by gtsl2

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

let scene;

function createEngine(glContext) {
	return new BABYLON.Engine(glContext, true, 
    {
      useHighPrecisionMatrix: true,
    },
    true);
}

function createScene(engine) {
	scene = new BABYLON.Scene(engine);
  scene.activeCamera = new BABYLON.Camera("mapbox-Camera", new BABYLON.Vector3(), scene);
  scene.autoClear = false;
  scene.detachControl();
  
  // from https://www.babylonjs-playground.com/#UJEIL#13
  
  var camera = scene.activeCamera;
 	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(1, 1, 0), scene)

  var ground = BABYLON.Mesh.CreateGround('', 100, 100, 3, scene)
  ground.position.y = -3
  ground.material = new BABYLON.StandardMaterial('', scene)
  window.m = ground.material.specularColor = BABYLON.Color3.Black()
  ground.material.diffuseColor = BABYLON.Color3.Black()
  
  var particleSystem = new BABYLON.ParticleSystem("particles", 20000, scene);
  particleSystem.particleTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/flare.png", scene);
  particleSystem.emitter = BABYLON.Vector3.Zero();
  particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
  particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
  particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
  particleSystem.minSize = 1;
  particleSystem.maxSize = 5;
  particleSystem.minLifeTime = 4;
  particleSystem.maxLifeTime = 5;
  particleSystem.emitRate = 1000;
  var meshEmitter = new BABYLON.MeshParticleEmitter(ground);
  particleSystem.particleEmitterType = meshEmitter;
  particleSystem.emitter = ground;
  particleSystem.minEmitPower = 10;
  particleSystem.maxEmitPower = 30;
  particleSystem.updateSpeed = 0.05;
  particleSystem.start();

  scene.registerBeforeRender(function () {
  	engine.wipeCaches(true);
  })

  return scene;	
}

function render(engine, matrix) {
  if(scene) {
   	var projection = BABYLON.Matrix.FromArray(matrix);
    projection._m = matrix; 
   ...