Babylon.js 第13章 背景材料

一、背景材料

    var backgroundMaterial = new BABYLON.BackgroundMaterial(
        "backgroundMaterial", scene);
    backgroundMaterial.diffuseTexture = new BABYLON.Texture(imgURL[3], scene);
    //地面不透明度
    backgroundMaterial.diffuseTexture.hasAlpha = true;
    //菲涅耳不透明度，为防止相机与地面很近时地面消失。
    //防止在场景中导航时出现刺耳的剪切，所以禁用
    backgroundMaterial.opacityFresnel =false;
    //阴影深度
    backgroundMaterial.shadowLevel = 0.4;
    //禁用rgb颜色
    //为了使用颜色混合
    backgroundMaterial.useRGBColor=false
    backgroundMaterial.primaryColor=BABYLON.Color3.Green()
    //使用镜子创建映像
    var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);
    //接受映像的平面
    mirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
    mirror.renderList.push(sphere);
    //设置反射纹理为镜子
    backgroundMaterial.reflectionTexture = mirror;
    //设置反射菲尼尔
    backgroundMaterial.reflectionFresnel = true;
    //反射的明暗度
    backgroundMaterial.reflectionStandardFresnelWeight = 0.5;
    ground.material = backgroundMaterial;

 二、镜头光晕

    //在场景创建镜头光晕
    let lensFlareSystem=new BABYLON.LensFlareSystem(
        'lensflareSystem',
        light1,
        scene
    )
    //创建每个镜头光晕
    //参数1：光晕大小
    //参数2：光晕位置，介于-1到1，小于0，在对象之后。
    //然后添加光晕颜色和材料
    let flare0=new BABYLON.LensFlare(
        0.1,0.1,new BABYLON.Color3(1,0,0),imgURL[1],lensFlareSystem
    )
    var flare1=new BABYLON.LensFlare(
        0.13,-0.1,new BABYLON.Color3(1,0,1),imgURL[1],lensFlareSystem
    )
    var flare2=new BABYLON.LensFlare(
        0.2,0.2,new BABYLON.Color3(1,1,0),imgURL[1],lensFlareSystem
    )

三、反射探针

    let probe=new BABYLON.ReflectionProbe('main',512,scene)
    probe.renderList.push(sphere)
    probe.renderList.push(sphere1)
    ground.material.reflectionTexture=probe.CubeTexture

必须谨慎使用反射探针，因为它们实际上需要每帧生成 6 个纹理（每个面一个）。

四、360度全景照片

photoDome = new BABYLON.PhotoDome("testdome", url, {<options>}, scene);

 至少需要提供一options个对象参数，主要参数：

• resolution：分辨率
• size:大小
• useDirectMapping：true，使用直接映射技术来渲染视频。除非您想使用该fovMultiplier属性，否则您应该保留此值

有时 360 度全景照片会让人感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。

photoDome.fovMultiplier = newValue;

 fovMultiplier仅在使用useDirectMapping = false创建选项时有效。作为警告，该值距离 1 越远，可见的失真越多。摄影穹顶上的更高分辨率有助于减少但不能消除这种情况。

可以使用以下命令更改以适应图像源的类型：

photoDome.imageMode = BABYLON.PhotoDome.MODE_MONOSCOPIC;
photoDome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE;
photoDome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;

将 360 度全景照片与 WebVR 结合使用：

var vrHelper = scene.createDefaultVRExperience();

它还将在屏幕右下角创建一个 enterVR 按钮，单击该按钮将开始渲染到 HMD。可以通过添加以下代码返回 2D 视图。

scene.actionManager = new BABYLON.ActionManager(scene);

scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 's'
    },
    function () { vrHelper.enterVR(); }
));

scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 'e'
    },
    function () { vrHelper.exitVR(); document.exitFullscreen();}
));

五、全景视频

    var videoDome = new BABYLON.VideoDome(
        "videoDome",
        ["./MP4/exam.mp4"],
        {
            resolution: 32,
            clickToPlay: true,
            useDirectMapping:false,
            halfDomeMode:true
        },
        scene
    );
    videoDome.fovMultiplier=1
    videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
    videoDome.halfDome = true;

对象参数：

• resolution = 32：整数，定义用于承载视频的球体的分辨率。较低的分辨率在极端 fovs 处有更多的伪影
• clickToPlay = false：为视频添加点击播放监听器，不阻止自动播放
• autoPlay = true：自动尝试开始播放视频。如果由于浏览器策略而第一次尝试播放失败，将自动静音并重试。
• loop = true：结束时自动循环播放视频
• size = 1000：创建圆顶的物理半径，默认约为远裁剪平面的一半
• poster：在视频加载期间或用户与视频交互之前显示的图像的 URL
• useDirectMapping = true：使用直接映射技术来渲染视频。除非您想使用该fovMultiplier属性，否则您应该保留此值
• halfDomeMode = false：启用对 180 视频的支持，而不是 360。

有时 360 度视频会感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。

videoDome.fovMultiplier = newValue;

 fovMultiplier仅在使用useDirectMapping = false创建选项时有效。可以使用以下方法更改以适应源视频的类型：

videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;