使用材质库

从之前的教程中，我们看到材质系统涉及到WebGL的可编程着色器、状态参数，对于开发者来说，直接编写这些着色器程序或更改状态参数，开发成本过高，因此我们提供了ore.material库，包含了丰富的材质类型、着色器类型、状态类型，下面介绍几个常用的接口类：

材质接口	描述
unlight_color unlight_texture unlight_cube_texture	无光影的材质类型，它的参数可以是颜色、一张图片、或者环境贴图
head_light_color head_light_texture head_light_cube_texture	头灯光影的材质类型，它的参数可以是颜色、一张图片、或者环境贴图
gouraud_color gouraud_texture gouraud_cube_texture	gouraud材质类型，它的参数可以是颜色、一张图片、或者环境贴图
phong_color phong_texture phong_cube_texture	phong材质类型，它的参数可以是颜色、一张图片、或者环境贴图
flat	平面材质类型，它的参数是一个颜色
transparent_unlight_color	无光影透明材质，输入的参数是一个颜色
transparent_color	头灯光影透明材质，输入的参数是一个颜色
point_sprites_square	正方形点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_disc	圆盘点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_spiral	螺旋纹点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_rose	花瓣点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_sphere	球形点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_star	星星点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_circle	圆环点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_grid	方格点精灵材质类型，输入的参数是一个颜色和点精灵大小
point_sprites_icon	图标点精灵材质类型，输入的参数是一个图片和点精灵大小
toon	卡通材质类型，它的参数是一个颜色和一个颜色数量
pbr_color pbr_cube_texture	pbr材质类型，它的参数是一个颜色、金属度、粗糙度，外加环境贴图

在下面这个例子中，我们会创建一个teapot几何，然后使用材质库的接口，为它设置不同的材质。

import { toon } from 'ore.material';

// 使用material中的toon接口，快速定义卡通材质
const color = clr3(0.5, 0.6, 0.8);
const material = toon(color);
// 使用teapot几何体
const geometry = await loadStanford('teapot');
const node: JNode = {
    mesh: {
        primitives: [{ geometry, material }]
    }
};

const background = Background({
    size: ivec2(canvas.width, canvas.height),
    colorMask: clr4(0.9, 0.8, 0.7, 1.0),
    depthMask: float(1.0)
});
const camera = Camera();

const pass: JPass = Pass({
    background: background,
    camera: camera,
    node: {
        children: [node],
    }
});

const scene: JScene = {
    name: 'scene',
    passes: [pass],
};

下面是运行结果：

teapot几何