跳到主要内容

材质

材质（Material）影响物体最终的渲染效果，也是 3D 开发中较复杂的部分，在 Tinoe 内不同的材质对应有不同的着色器，从而达到不同的渲染效果。Tinoe 提供了几种常见的内置材质，力求覆盖常见使用场景，减少用户手写着色器的必要。

常用材质​

更多未列出的材质可以参考这里 API

BlinnPhong​

BlinnPhongMaterial是基于 Blinn-Phong 光照反射模型 实现的，该模型是目前很多 CG 软件和图形底层 API 中默认的光照渲染方法。在 Tinoe 中，我们也首先推荐使用BlinnPhongMaterial。

BlinnPhongMaterial的参数主要分为三大部分：

  1. 高光(Specular Highlights)
  2. 漫反射(Diffuse Reflection)
  3. 自发光(Emissive Lighting)

每个部分均有颜色和纹理两种类型参数可以设置，如下所示。

// 创建
const bpMat = new BlinnPhongMaterial({
  diffuseColor: '#fff',
});

// 设置漫反射
bpMat.diffuseColor = new Color('#0000ff');
bpMat.diffuseTexture = await stage.loader.loadTexture2D('path/to/diffuseTexture');

// 设置高光
bpMat.specularColor = new Color('#00ff00');
bpMat.specularTexture = await stage.loader.loadTexture2D('path/to/specularTexture');

// 设置自发光
bpMat.emissionColor = new Color('#ff0000');
bpMat.emissionTexture = await stage.loader.loadTexture2D('path/to/emissionTexture');

除此之外，还提供shininess参数设置光照衰减系数，normalTexture上传法线贴图等，具体请参考 API 文档。

PBR​

基于物理的渲染（Physically Based Rendering, PBR）是一种通过对现实中的光照进行建模、实现如照片般真实的渲染方法。对应这种方法，Tinoe 提供了PBRMaterial。

除了BlinnPhongMaterial的漫反射、高光、自发光等属性外，PBRMaterial还提供金属度、粗糙度、光泽度、折射系数、 金属粗糙度纹理、高光光泽度纹理等丰富参数，以达到更拟真的视觉效果。

具体参数请参考 API 文档。

Line​

画线这件事情可能比我们想象中的要稍微复杂一些，Tinoe 内我们为LineGeometry专门设计了对应的材质LineMaterial，二者需要搭配使用才能画出有效线段。

// 默认创建
const lineMat = new LineMaterial();

// 参数配置创建
const lineMat = new LineMaterial({
  lineWidth: 2, // 线宽
  color: '#223344', // 颜色
  zOffset: 1, // z方向偏移，用于避免 z-fighting 问题
});

API​

Material

Q&A​