Babylon.js 第33章 网格高亮与发光

目录

一、创建高亮网格

 1、示例

二、发光网格 

1、创建：

2、添加属性

3、完整示例 

一、创建高亮网格

    let h1=new BABYLON.HighlightLayer('h',scene,{camera:camera})

其对象参数：

• mainTextureRatio?: number - 乘法因子应用于画布大小以计算用于生成发光对象的渲染目标大小（越小越快）。
• mainTextureFixedSize?: number - 强制使用固定大小的纹理以确保调整大小独立模糊。
• blurTextureSizeRatio?: number - 乘法因子适用于模糊第一步中的主要纹理大小，以减小要模糊的图片大小（越小越快）。
• blurVerticalSize?: number - 垂直模糊在模糊纹理的纹素中有多大。
• blurHorizo​​ntalSize?: number - 水平模糊在模糊纹理的纹素中的大小。
• alphaBlendingMode?: number - 用于应用模糊的 Alpha 混合模式。默认为结合。
• camera?: Camera - 附加到图层的相机（只有这个相机可以看到高光）。

 1、示例

    //必须保证引擎使用模板创建
    var engine=new BABYLON.Engine(canvas,true,{stencil:true})

    let h1=new BABYLON.HighlightLayer('h',scene,{camera:camera})
    //具体的渲染函数addMesh(),第二个参数使用自发光纹理作为高亮颜色的来源
    //h1.addMesh(sphere,BABYLON.Color3.Yellow(),true)
    h1.addMesh(sphere1,BABYLON.Color3.Green())
    h1.addMesh(ground,BABYLON.Color3.Green())
    //移除高光网格
    //h1.removeMesh(sphere)
    
    //内外发光设置
    //h1.outerGlow=false
    h1.innerGlow=false

    //sphere在透明情况下，如下设置，可以使其它网格发光正确
    h1.addExcludedMesh(sphere)
    
    let mat=new BABYLON.StandardMaterial('s',scene)
    mat.alpha=0.3
    sphere.material=mat

二、发光网格 

1、创建：

只需添加以下代码即可让设置了自发光材料的网格发光：

let gl=new BABYLON.GlowLayer('g',scene)

2、添加属性

为了控制改变模糊的形状，你可以依赖创建选项：

• mainTextureRatio：乘法因子应用于画布大小以计算用于生成发光对象的渲染目标大小（越小越快）。
• mainTextureFixedSize：强制使用固定大小的纹理以确保调整大小独立模糊，以防止模糊的形状根据目标设备大小而改变。
• blurKernelSize：模糊纹理的内核有多大。

• mainTextureSamples:抗锯齿

3、完整示例 

    let gl=new BABYLON.GlowLayer('g',scene,{
        mainTextureFixedSize:1024,
        blurKernelSize:64,
        mainTextureSamples:0
    })
    //添加发光网格
    gl.addExcludedMesh(sphere)
    //移除发光网格
    gl.addIncludedOnlyMesh(sphere)
    /*
    *设置函数以覆盖发光材质和颜色
    gl.customEmissiveColorSelector=function(mesh,subMehs,material,result){
        if(mesh.name==='sphere'){
            result.set(1,0,1,1)
        }else{
            result.set(0,0,1,1)
        }
    }
    */
    //设置发光网格亮度
    gl.intensity=1

默认情况下，发光层将使用自发光纹理和自发光颜色来生成每个活动网格的发光颜色。但是您可以使用以下回调覆盖此行为：

• customEmissiveColorSelector: (mesh: Mesh, subMesh: SubMesh, material: Material, result: Color4) => void: 用于让用户在每个网格基础上覆盖颜色选择的回调
• customEmissiveTextureSelector(mesh: Mesh, subMesh: SubMesh, material: Material) => Texture: 回调用于让用户基于每个网格覆盖纹理选择