芙芙 | 学习笔记

Appearance

PBR 实现 ​

PBRMetallicRoughnessMaterial 基于金属度/粗糙度工作流程的 PBR 材质。

主要参数:

  • baseColor: 基础颜色，用于定义物体的漫反射颜色。
  • metallic: 金属度，范围从 0（完全非金属）到 1（完全金属）。
  • roughness: 粗糙度，范围从 0（完全光滑）到 1（完全粗糙）。
  • reflectance: 反射率，控制物体表面的反射强度。
  • ambientColor: 环境光颜色，用于模拟环境光的反射。
js
const pbrMaterial = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
pbrMaterial.baseColor = new BABYLON.Color3(1, 0.8, 0.6);
pbrMaterial.metallic = 0.5;
pbrMaterial.roughness = 0.3;
mesh.material = pbrMaterial;

PBRSpecularGlossinessMaterial: 基于镜面反射/光泽度工作流程的 PBR 材质。

主要参数:

  • diffuseColor: 漫反射颜色。
  • specularColor: 镜面反射颜色。
  • glossiness: 光泽度，范围从 0（完全暗淡）到 1（完全光泽）。
  • reflectance: 反射率。

NodeMaterial 编辑器

js
const nodeMaterial = new BABYLON.NodeMaterial("nodeMaterial", scene);
nodeMaterial.buildFromSnippetURL("snippet:url", true, (nodeMaterial) => {
    mesh.material = nodeMaterial;
});

纹理映射（漫反射、法线、反射纹理 ​

漫反射纹理 (Diffuse/Albedo Texture)

  • 定义: 定义物体表面的颜色和图案，例如木纹、石纹、皮肤纹理等。
  • 作用: 为物体表面添加细节和颜色，使其看起来更加真实和丰富。
js
const diffuseTexture = new BABYLON.Texture("path/to/diffuse.jpg", scene);
pbrMaterial.baseColorTexture = diffuseTexture;

法线纹理 (Normal Texture)

  • 定义: 存储物体表面的法线信息，用于模拟凹凸不平的表面细节，例如皱纹、雕刻痕迹等。
  • 作用: 增强物体的立体感和细节表现，而无需增加几何体的复杂度。
js
const normalTexture = new BABYLON.Texture("path/to/normal.jpg", scene);
pbrMaterial.normalTexture = normalTexture;

反射纹理 (Reflection Texture)

  • 定义: 定义物体表面的反射特性，例如环境光反射、镜面反射等。
  • 作用: 使物体表面能够反射周围环境的光线，增强真实感。
js
const reflectionTexture = new BABYLON.CubeTexture("path/to/reflection.dds", scene);
pbrMaterial.reflectionTexture = reflectionTexture;

其他常用纹理 ​

  • 粗糙度纹理 (Roughness Texture): 定义物体表面的粗糙度分布。
  • 金属度纹理 (Metallic Texture): 定义物体表面的金属度分布。
  • 环境光遮蔽纹理 (Ambient Occlusion Texture): 定义物体表面的环境光遮蔽程度。

高级材质（透明材质与自发光材质） ​

透明材质 (Transparent Material)

js
const transparentMaterial = new BABYLON.StandardMaterial("transparent", scene);
transparentMaterial.diffuseTexture = new BABYLON.Texture("path/to/glass.png", scene);
transparentMaterial.transparencyMode = BABYLON.TransparentMode.ALPHABLEND;
transparentMaterial.alpha = 0.5; // 设置透明度
mesh.material = transparentMaterial;

注意事项:

  • 渲染顺序: 透明对象需要按照深度排序进行渲染，以避免渲染错误。
  • 性能开销: 透明渲染会增加渲染计算成本，需要谨慎使用。

自发光材质 (Emissive Material)

js
const emissiveMaterial = new BABYLON.StandardMaterial("emissive", scene);
emissiveMaterial.emissiveTexture = new BABYLON.Texture("path/to/emissive.png", scene);
emissiveMaterial.emissiveColor = new BABYLON.Color3(1, 0.5, 0); // 设置发光颜色
mesh.material = emissiveMaterial;

自定义着色器与 GLSL/HLSL 开发 ​

  • GLSL (OpenGL Shading Language): 用于 OpenGL 和 WebGL 的着色器语言。
  • HLSL (High-Level Shading Language): 用于 DirectX 的着色器语言。

ShaderMaterial 将自定义的 GLSL 或 HLSL 代码应用到材质上

js
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, "shaderPath", {
    attributes: ["position", "normal", "uv"],
    uniforms: ["world", "view", "projection", "textureSampler"]
});
shaderMaterial.setTexture("textureSampler", new BABYLON.Texture("path/to/texture.jpg", scene));
mesh.material = shaderMaterial;

ShaderBuilder 构建自定义着色器

js
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
    vertexSource: `
        precision highp float;
        attribute vec3 position;
        uniform mat4 worldViewProjection;
        void main() {
            gl_Position = worldViewProjection * vec4(position, 1.0);
        }
    `,
    fragmentSource: `
        precision highp float;
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `
});
mesh.material = shaderMaterial;

漫反射纹理 (Diffuse/Albedo Texture) ​

  • 示例
js
// 为一个立方体应用木纹纹理，使其看起来像木箱
const diffuseTexture = new BABYLON.Texture("textures/wood.jpg", scene);
const material = new BABYLON.StandardMaterial("material", scene);
material.diffuseTexture = diffuseTexture;
box.material = material;

// 添加图案、标志、装饰等细节
const patternTexture = new BABYLON.Texture("textures/pattern.png", scene);
material.diffuseTexture = patternTexture;

// 用环境贴图作为漫反射纹理，模拟物体对环境的反射效果。
const envTexture = new BABYLON.CubeTexture("textures/env.dds", scene);
material.diffuseTexture = envTexture;

// 漫反射纹理的特性
diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;

// 过滤模式: 设置纹理的过滤模式，例如线性过滤 (linear) 和最近邻过滤 (nearest)，以控制纹理缩放时的平滑程度。
diffuseTexture.magnificationFilter = BABYLON.Texture.LINEAR;
diffuseTexture.minificationFilter = BABYLON.Texture.LINEAR;

法线纹理 (Normal Texture)

js
const normalTexture = new BABYLON.Texture("textures/normal.jpg", scene);
material.normalTexture = normalTexture;
// 增强真实感: 通过添加法线纹理，可以增强物体的立体感和真实感，例如砖墙的凹凸不平、树皮的粗糙感等。
const brickTexture = new BABYLON.Texture("textures/brick.jpg", scene);
const brickNormal = new BABYLON.Texture("textures/brick_normal.jpg", scene);
material.diffuseTexture = brickTexture;
material.normalTexture = brickNormal;

法线纹理的特性

js
material.normalTexture = normalTexture;
material.bumpTexture = normalTexture; // 旧版本用法
material.bumpScale = 1.0; // 设置法线强度

反射纹理 (Reflection Texture) 示例：

js
// 为一个金属球体应用环境贴图，使其反射周围的环境

const envTexture = new BABYLON.CubeTexture("textures/env.dds", scene);
material.reflectionTexture = envTexture;
material.reflectionColor = new BABYLON.Color3(1, 1, 1);
material.reflectionFresnel = true;
// 镜面反射: 使用高光贴图 (Specular Map) 来控制物体表面的镜面反射强度
const specularTexture = new BABYLON.Texture("textures/specular.jpg", scene);
material.specularTexture = specularTexture;
material.specularColor = new BABYLON.Color3(1, 1, 1);
material.specularPower = 64;
// 反射探针 (Reflection Probes): 使用反射探针来捕捉场景中的环境光信息，并将其应用到物体表面，实现更逼真的反射效果。
const reflectionProbe = new BABYLON.ReflectionProbe("reflectionProbe", 512, scene);
reflectionProbe.renderList.push(mesh);
material.reflectionTexture = reflectionProbe.cubeTexture;

反射纹理的特性

  • 环境贴图类型: 可以使用立方体贴图 (Cube Map) 或双抛物面贴图 (Dual Paraboloid Map) 作为环境贴图。
  • 动态反射: 可以使用动态反射 (Dynamic Reflection) 技术，实现实时反射效果，但会增加渲染计算成本。
  • 反射强度: 可以通过调整反射颜色 (reflectionColor) 和反射强度 (reflectionIntensity) 参数，来控制反射效果的强弱。

其他常用纹理 ​

粗糙度纹理 (Roughness Texture)

js
const roughnessTexture = new BABYLON.Texture("textures/roughness.jpg", scene);
material.roughnessTexture = roughnessTexture;

金属度纹理 (Metallic Texture)

js
const metallicTexture = new BABYLON.Texture("textures/metallic.jpg", scene);
material.metallicTexture = metallicTexture;

环境光遮蔽纹理 (Ambient Occlusion Texture)

js
const aoTexture = new BABYLON.Texture("textures/ao.jpg", scene);
material.ambientTexture = aoTexture;

光泽度纹理 (Glossiness Texture)

js
const glossinessTexture = new BABYLON.Texture("textures/glossiness.jpg", scene);
material.glossinessTexture = glossinessTexture;

Copyright © 2025 芙芙笔记 | Powered by 涩涩