Babylonjs加载两个图像在彼此的顶部与第二个图像是透明的

我正在使用babylonjs加载两个图像。一个是标准的jpg图像，另一个是带有透明背景的png图像。当我加载这两个图像时，图像会在彼此的顶部加载，但jpg图像不会通过应该透明的区域显示出来。有谁知道我是怎么做到的吗?

var createScene = function() {
  var scene = new BABYLON.Scene(engine);
  //Create a light
  var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
  //Create an Arc Rotate Camera - aimed negative z this time
  var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 210, BABYLON.Vector3.Zero(), scene);
  camera.attachControl(canvas, true);
  //Creation of a repeated textured material
  var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
  materialPlane.diffuseTexture = new BABYLON.Texture("images/art.jpg", scene);
  //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene);
  //materialPlane.useAlphaFromDiffuseTexture
  materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
  materialPlane.backFaceCulling = false; //Allways show the front and the back of an element
  var spotPlain = new BABYLON.StandardMaterial("texture", scene, true);
  spotPlain.emissiveTexture = new BABYLON.Texture("images/scodix1.png", scene);
  spotPlain.anisotropicFilteringLevel = 50;
  //materialPlane.emissiveTexture = new BABYLON.Texture('images/transparent.png', scene);
  //materialPlane.useAlphaFromDiffuseTexture
  spotPlain.specularColor = new BABYLON.Color3(0, 0, 0);
  spotPlain.backFaceCulling = false; //Allways show the front and the back of an element
  //Creation of a plane
  //var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
  var plane = BABYLON.MeshBuilder.CreatePlane("plane", {
    width: 261,
    height: 153
  }, scene);
  plane.rotation.x = Math.PI / 2;
  plane.material = materialPlane;
  plane.material = spotPlain;
  return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
  scene.render();
});