如何

使用图层蒙版和多相机纹理


如何使用图层蒙版和多相机纹理

使用Layermasks的多个摄像机的不同网格

A layerMask是分配给每个网格和相机的编号。它在位级用于指示灯和摄像机是否应照亮或显示网格。默认值0x0FFFFFFF将使网格被照亮并由任何灯光和相机显示。

该功能主要用于多台摄像机同时处于活动状态。如果您希望屏幕上始终可见并且可选择的网格,例如按钮,您可以添加第二个摄像头和灯光到场景中以专门显示和点亮它。

您需要第二台摄像机才能看到按钮。该按钮也应该只显示一次。

请注意,默认值layerMask以前4位为0或关闭开始。如果第二个摄像头和按钮都具有layerMask下面4个值中的一个,那么第二个摄像头只会看到按钮:

  • 0x10000000
  • 0x20000000
  • 0x40000000
  • 0x80000000

还应该注意的layerMask是,任何人都看不到具有0 的网格。这可能对隐藏事物有好处。

要设置多台摄像机:

if (scene.activeCameras.length === 0){
    scene.activeCameras.push(scene.activeCamera);
}              
var secondCamera = new Babylon.Camera(...);
secondCamera.layerMask = 0x10000000;
scene.activeCameras.push(secondCamera);

var Button = new BABYLON.Mesh(...);
Button.layerMask = 0x10000000;

灯火

除非第二个摄像机的网格材料是纯粹发光的,否则这仍然会留下任何光线,使按钮照亮所有其他网格,并且场景中的其他灯光照亮按钮。要使场景灯不亮,请循环显示现有灯光,并设置excludeWithLayerMask值:

for(var i = scene.lights.length - 1; i >= 0; i--){
    scene.lights[i].excludeWithLayerMask = 0x10000000;
}

然后点亮“按钮”:

var light = new BABYLON.Light(...);
light.includeOnlyWithLayerMask = 0x10000000;

最后,如果以后可能会生成更多灯光,您可以在添加灯光时注册回叫:

scene.onNewLightAdded = onNewLight;

这可能是:

onNewLight = function (newLight, positionInArray, scene) {
    newLight.excludeWithLayerMask = 0x10000000;
};

枪支示例

这是使用显示枪瞄准器的第二个正交相机的简单示例。为了简单起见,使用发光材料来避免照明它。只需将其复制并粘贴到任何场景中,然后调用即可。所layerMask选择的还允许巴比伦的Dialog扩展进行互操作。也许这些可以结合使用测距仪进行抬头坦克瞄准。

商业质量的实施可能不会使用CreateBox(),因为它创造了无论如何都无法直接看到的深度面。除非是平板电脑应用,否则还应考虑窗口大小的变化。

function addGunSight(scene){
    if (scene.activeCameras.length === 0){
        scene.activeCameras.push(scene.activeCamera);
    }              
    var secondCamera = new BABYLON.FreeCamera("GunSightCamera", new BABYLON.Vector3(0, 0, -50), scene);                
    secondCamera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
    secondCamera.layerMask = 0x20000000;
    scene.activeCameras.push(secondCamera);

    meshes = [];
    var h = 250;
    var w = 250;

    var y = BABYLON.Mesh.CreateBox("y", h * .2, scene);
    y.scaling = new BABYLON.Vector3(0.05, 1, 1);
    y.position = new BABYLON.Vector3(0, 0, 0);
    meshes.push(y);

    var x = BABYLON.Mesh.CreateBox("x", h * .2, scene);
    x.scaling = new BABYLON.Vector3(1, 0.05, 1);
    x.position = new BABYLON.Vector3(0, 0, 0);
    meshes.push(x);

    var lineTop = BABYLON.Mesh.CreateBox("lineTop", w * .8, scene);
    lineTop.scaling = new BABYLON.Vector3(1, 0.005, 1);
    lineTop.position = new BABYLON.Vector3(0, h * 0.5, 0);
    meshes.push(lineTop);

    var lineBottom = BABYLON.Mesh.CreateBox("lineBottom", w * .8, scene);
    lineBottom.scaling = new BABYLON.Vector3(1, 0.005, 1);
    lineBottom.position = new BABYLON.Vector3(0, h * -0.5, 0);
    meshes.push(lineBottom);

    var lineLeft = BABYLON.Mesh.CreateBox("lineLeft", h, scene);
    lineLeft.scaling = new BABYLON.Vector3(0.010, 1,  1);
    lineLeft.position = new BABYLON.Vector3(w * -.4, 0, 0);
    meshes.push(lineLeft);


    var lineRight = BABYLON.Mesh.CreateBox("lineRight", h, scene);
    lineRight.scaling = new BABYLON.Vector3(0.010, 1,  1);
    lineRight.position = new BABYLON.Vector3(w * .4, 0, 0);
    meshes.push(lineRight);

    var gunSight = BABYLON.Mesh.MergeMeshes(meshes);
    gunSight.name = "gunSight";
    gunSight.layerMask = 0x20000000;
    gunSight.freezeWorldMatrix();

    var mat = new BABYLON.StandardMaterial("emissive mat",scene);
    mat.checkReadyOnlyOnce = true;
    mat.emissiveColor = new BABYLON.Color3(0,1,0);

    gunSight.material = mat;
}

看到它的实际效果:
https://www.babylonjs-playground.com/index.html#2GXKNW#22