HUD之间也会有层级关系，就像html的zIndex一样

HUD之间的层级关系应该在2D绘制部分完成，然后将所有的最终结果一次性绘制到3D空间，只要保证绘制的物体在裁剪空间范围内，就可以忽略所有的变换过程，直接渲染。

    //创建2DCanvas和2D上下文

    //创建2DCanvas和2D上下文

    var canvas_2d = wx.createCanvas('canvas_2d');

    var ctx = canvas_2d.getContext('2d');

    //加载巴比伦3D引擎（使用默认的Canvas）

    var engine = self.engine = new BABYLON.Engine(canvas, true);

...

    //一个特殊的顶点着色，没有任务矩阵变换

    BABYLON.Effect.ShadersStore["hudVertexShader"] = `

    #ifdef GL_ES

    precision highp float;

    #endif

    // Attributes

    attribute vec3 position;

    attribute vec2 uv;

    // Normal

    varying vec2 vUV;

    void main(void) {

    gl_Position = vec4(position, 1.0);

    vUV = uv;

    }        

    `;

    //最普通片元着色器，只有一个2D采样

    BABYLON.Effect.ShadersStore["hudFragmentShader"] = `

    #ifdef GL_ES

    precision highp float;

    #endif

    varying vec2 vUV;

    // Refs

    uniform sampler2D textureSampler;

    void main(void) {

    gl_FragColor = texture2D(textureSampler, vUV);

    }   

    `;

    var hudMaterial = new BABYLON.ShaderMaterial("hud", scene, {

      vertexElement: "hud",

      fragmentElement: "hud"

    },

      {

        needAlphaBlending: true,

        attributes: ["position", "uv"],

        samplers: ["textureSampler"]

      });

    var planeVertexData = BABYLON.VertexData.CreatePlane({ size: 2 });//从-1，-1 到 1,1的简单平面覆盖整个3D空间

    delete planeVertexData.normals;

    var hud = new BABYLON.Mesh("Hud", scene);//HUD网格对象

    planeVertexData.applyToMesh(hud);

    //贴图大小和2D屏幕大小一致

    var hudTexture = new BABYLON.DynamicTexture("dynamic texture", { width: canvas_2d.width, height: canvas_2d.height }, scene, true);

    var textureContext = hudTexture.getContext();//贴图的绘制上下文

    hud.material = hudMaterial;

    hudMaterial.setTexture("textureSampler", hudTexture);

    hudMaterial.backFaceCulling = false; //关闭背面裁剪

    hudMaterial.disableDepthWrite = true;//关闭写深度缓存

    hudTexture.update();//贴图更新

    // 实现游戏帧循环

    this.loop = () => {

      //在2DCanvas上绘制两个矩形

      ctx.clearRect(0, 0, canvas_2d.width, canvas_2d.height);

      ctx.fillStyle = 'blue';

      ctx.fillRect(0, 0, 100, 100);

      ctx.fillStyle = 'red';

      ctx.fillRect(canvas_2d.width - 100, canvas_2d.height - 100, 100, 100);

      //将2DCanvas绘制贴图的上下文

      textureContext.drawImage(canvas_2d, 0, 0);

      //贴图更新

      hudTexture.update();

      //保证每一帧HUD都在

      hud.position = new BABYLON.Vector3(camera._currentTarget.x, camera._currentTarget.y, camera._currentTarget.z);

      scene.render();

    ...

球，曲线和天空盒子是在3DCanvas上绘制的，前面的蓝块和红块是在2DCnavas上绘制的。