着色器

着色器允许您使用 WebGL 对任何节点应用自定义效果。

Experimental

This is an experimental feature. The behavior and API may change drastically between minor releases.

可以使用 shaders 属性指定着色器。在最简单的情况下，该值应该是一个包含片段着色器 GLSL 代码的字符串：

import myShader from './myShader.glsl';

//...

view.add(
  <Circle
    size={200}
    fill="lightseagreen"
    shaders={myShader}
  />,
);

下面是一个简单着色器的示例，它反转节点的颜色：

myShader.glsl
#version 300 es
precision highp float;

#include "@motion-canvas/core/shaders/common.glsl"

void main() {
    outColor = texture(sourceTexture, sourceUV);
    outColor.rgb = 1.0 - outColor.rgb;
}

GLSL 预处理器

Motion Canvas 附带一个简单的 GLSL 预处理器，允许您包含文件