跳到主要内容

自定义材质

Tinoe 内置的几种常用材质 不满足需求时，用户还可以使用 ShaderMaterial创建自己定义的材质，通常需要配合自定义几何体 使用。

示例​

使用​

创建​

在创建ShaderMaterial时，必须传入顶点和片元着色器的代码。

const myMat = new ShaderMaterial({
  vertexSource: vs, // 顶点着色器
  fragmentSource: fs, // 片元着色器
});

更新 Uniform​

通过.setUniform(key, value)设置着色器中某 uniform 的值。

// 上传数值
myMat.setUniform('width', 1.5);

// 上传数组
myMat.setUniform('array', [1, 2, 3, 4]);

// 上传内置数学类型
const centerPosition = new Vector3(1, 1, 1);
myMat.setUniform('center', centerPosition);

// 上传texture
const tex = await stage.loader.loadTexture2D('/path/to/texture');
myMat.setUniform('texture', tex);

宏开关​

通过调用 .setMacro(key: string, enable: boolean)，打开或关闭宏key。

myMat.setMacro('enable_xxx', true); // 开启`enable_xxx`的宏定义

克隆​

.clone()会返回一个与当前材质一样着色器代码的实例，适合复用自定义材质的场景。

const mySecondMat = myMat.clone();

API​

ShaderMaterial

Q&A​

  • 如果想搭配 Tinoe 内置几何体使用，那着色器代码中相同意义的属性命名和 Tinoe 内置的属性名相同，如下表。

    内置属性名解释
    a_position顶点位置
    a_texcoord纹理坐标
    a_normal法线
    a_tangent切线
    a_color颜色