跳至主要內容

环境与天气

大约 4 分钟

环境与天气

雾化效果

雾化效果主要是指一个物体离得越远,就越模糊,通常在园区级或区级场景下非常有用,主要用于远景向近景过渡的视觉效果,如蓝天白云下,远景向近景过渡时表达为浅蓝或浅白的雾效果,夜晚下,远景向近景过渡时表达为黑色或深色系的雾效果。

雾环境通过 scene 的初始化参数 fog 或者 scene.setFog 方法设置。

{
    scene: {
        fog: {
            visible: false, // 默认不可见
            color: "#ffffff", // 颜色
            near: 10, // 代表从该距离起物体开始受雾效果影响
            far: 30, // 代表从该距离之后物体完全看不清
        },
    }
}

viewer.scene.setFog({
    visible: true, // 默认不可见
    color: "#ffffff", // 颜色
    near: 10, // 代表从该距离起物体开始受雾效果影响
    far: 30, // 代表从该距离之后物体完全看不清
})

天空盒子

引擎依赖包提供了常见的天空盒子类型:蓝天白云(多云)、阴天、夜晚、宇宙、星空。

id备注
cloudy多云
cloudy2多云2
dark暗黑
midnight夜晚
milkyway银河
overcast阴天

天空盒子通过 scene 的初始化参数background 或者 scene.setBackground 方法设置。

// Viewer初始化时的场景背景参数
{
    scene: {
        background: {
            skyboxPath: "./resources/skybox/cloudy/"
        },
    }
}

viewer.scene.setBackground({
    skyboxPath: "./resources/skybox/cloudy/"
});

HDR环境贴图

HDR环境贴图可以通过 Scene 的初始化参数和 scene.setEnvironment 方法设置,可以通过将纹理贴图到模型上面来模拟环境纹理反光。

HDR全称High-Dynamic Range(高动态光照渲染),通过HDR,显示器或相机可以很好的表现超出其亮度范围的图像,也可以简单理解为HDR能大幅提高画面细节的明暗对比度。直白点讲,HDR是指一个图像中最亮处和最暗处之间的比值,能够让图像明亮的地方更亮,而黑色的地方更黑暗深邃。

HDR由两部分组成,动态曝光控制和光晕效果。先说动态曝光控制,通常,显示器能够显示R、G、B分量在[0,255]之间的像素值。而256个不同的亮度级别显然不能表示自然界中光线的亮度情况。举个例子,太阳的亮度是白炽灯亮度的几千倍或者被漫反射照亮的室内亮度的几万倍,这远远超出了显示器的亮度表示能力。HDR技术所要解决的问题就是在有限的亮度范围内表示出宽广的亮度范围。原理类似于照相机的曝光功能,通过算法调整光线亮度,将光线从高动态范围映射到低动态范围,从而得到得到令人信服的光照效果。

HDR的另一部分是光晕效果。人从暗处走到光亮的地方,瞳孔由于来不及收缩,眼睛会自己眯起来,以保护视网膜上的感光细胞。HDR通过对原始图像进行调整,可以模拟这种人眼自动适应光线变化的生理反应,产生类似于光晕的效果。

图像经HDR处理后的理想结果是亮处足够耀眼,暗处能够分辨物体的轮廓与深度,而非原图的一团漆黑。

{
    scene: {
        envmap: "./hdrs/3.hdr"
    }
}

viewer.scene.setEnvironment("./hdr/3.hdr");

下雪

下雪模拟了现实环境下雪花飘落的效果,可设置雪花贴图、雪花大小、飘落的速度,雪花始终沿Y轴做垂直方向偏移,在旋转相机视角时可观察雪花下落效果,需要重点说明的是,下雪不会在模型表面产生积雪效果。

下雪对象为VT.Snow, 继承自Points对象,可初始化此对象后添加到 Scene 场景中。

var snow = new VT.Snow({
    // 雪花数量
    number: 20000,
    // 雪花范围
    range: 200,
    // 雪花贴图设置
    material: {
        // 大小
        size: 2.0,
        // 贴图
        map: {
            image: "./resources/textures/snow.png"
        }
    }
});

viewer.scene.add(snow);

下雨

下雨模拟了现实环境下雨滴坠落的效果,可设置雨滴速度、方向、明暗度,下雨效果通过Shader实现。

下雨对象为VT.Rain,可初始化此对象后添加到 Scene 场景中。

    var rain = new VT.Rain();
    viewer.scene.add(rain);
上次编辑于:
贡献者: dashun