Babylon.js 第25章物理渲染

关注

最新推荐文章于 2026-08-02 16:50:40 发布 · 1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

WebGL BabylonJS如何创建自定义天空盒天空盒通常是一个立方体盒子，其内部贴有六个方向的纹理，分别代表了上、下、前、后、左、右六个方向的天空景象。这些纹理能够形成一个连续的、无缝的天空背景，使得观察者在场景中的任何位置看到的天空都是一致的。通过调整天空盒的纹理，可以模拟不同的天气、环境和氛围，如晴天、多云、夜晚、黄昏等。阅读详情

PBR金属材料

baseColor / baseTexture：基础颜色根据金属度的值有两种不同的解释。当材料是金属时，基色是在法向入射 (F0) 下测得的特定反射率值。对于非金属，基色表示材料反射的漫反射颜色。
metal：指定材质的金属标量值。也可用于缩放金属纹理的金属度值。
roughness：指定材质的粗糙度标量值。也可用于缩放金属纹理的粗糙度值。
metalRoughnessTexture：同时包含 B 通道中的金属值和 G 通道中的粗糙度值的纹理，以保持更好的精度。环境光遮挡也可以保存在 R 通道中。
environmentTexture：环境纹理

    let pbr=new BABYLON.PBRMetallicRoughnessMaterial('pbr',scene)
    pbr.baseColor=new BABYLON.Color3.Green()
    pbr.metallic=1
    pbr.roughness=0.6
    pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
    pbr.specularColor = new BABYLON.Color3(1.0, 0.766, 0.336);
    pbr.metallicRoughnessTexture = new BABYLON.Texture("../img/4.png", scene);
    pbr.specularGlossinessTexture = new BABYLON.Texture("../img/5.png", scene);
    
    pbr.environmentTexture=BABYLON.CubeTexture.CreateFromPrefilteredData(
        '../img/sun.dds',
        scene
    )
    sphere.material=pbr

PBR镜面光泽度

diffuseColor/diffuseTexture：指定材质的漫反射颜色。
specularColor：指定材质的镜面反射颜色。这表明材料的反射性（无反射）。
glossiness：指定材质的光泽度。这表明“反射有多尖锐”。
specularGlossinessTexture：指定每像素材质的镜面反射颜色 RGB 和光泽度 A。
environmentTexture:环境纹理

var pbr = new BABYLON.PBRSpecularGlossinessMaterial("pbr", scene);
pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.specularColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.glossiness = 0.4;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
  "/textures/environment.dds",
  scene
);

可以使用 specularGlossinessTexture（如 metalRoughnessTexture 纹理）来提供对镜面反射和光泽度的更多控制：

pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.specularColor = new BABYLON.Color3(1.0, 1.0, 1.0);
pbr.glossiness = 1.0;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
  "/textures/environment.dds",
  scene
);
pbr.specularGlossinessTexture = new BABYLON.Texture("/textures/sg.png", scene);

收录于