Scripting API
ShadersModule

ShadersModule

The ShadersModule exposes APIs to create Visual Shaders using JavaScript.
The following is an explanation of the unique types and concepts specific to the ShadersModule.

PrimitiveOrShaderSignal is a union type of Point2DSignal, PointSignal, Point4DSignal, VectorSignal, TransformSignal, or ShaderSignal.
ShaderSignal is a graphics shader output that produces one of the types defined in the above union. As ShaderSignal is GPU bound, it can only be used in a GPU context.

ShaderSignal can also be of a function type, used for function mapping from one type to another.
For example, a shader with the signature function(Point2DSignal): Point4DSignal is a type of a function that maps a Point2DSignal to a Point4DSignal.

Example

//==============================================================================
// The following example demonstrates how to use visual shaders to tile SDF
// shapes. This is a script version of the following Patch Editor example:
// https://fb.me/tiled-sdf-patch
//
// Project setup:
// - Insert a rectangle and set it to 'Fill Parent'
// - Create a new material and assign it to the rectangle
//==============================================================================

// Load in the required modules
const Materials = require('Materials');
const Reactive = require('Reactive');
const Shaders = require('Shaders');

// Enable async/await in JS [part 1]
(async function() {
  // Locate the material in the Assets
  const [material] = await Promise.all([
    Materials.findFirst('defaultMaterial0')
  ]);

  // Create the SDF Star parameters
  const center = Reactive.pack2(0.05,0.05);
  const radius = 0.04;
  const radius2 = Reactive.mul(radius,0.5);
  const sides = 5;

  // Create the SDF Star
  const sdfStar = Shaders.sdfStar(center,radius,radius2,sides);

  // Create the SDF Mix
  const sdfMix = Shaders.sdfMix(sdfStar,0,0.993);

  // Create the SDF Repeat parameters
  const pivot = Reactive.pack2(0.05,0.05);
  const size = Reactive.pack2(0.09,0.09);

  // Create the SDF Repeat
  const sdfRepeat = Shaders.sdfRepeat(sdfMix,pivot,size);

  // Create the step
  const step = Reactive.step(sdfRepeat,0);

  // Create the gradient
  const gradient = Shaders.gradient({"type" : Shaders.GradientType.HORIZONTAL});

  // Create the first mix paramaters
  const color1 = Reactive.pack4(1,0.57,0,1);
  const color2 = Reactive.pack4(1,0.25,1,1);

  // Create the first mix
  const mix1 = Reactive.mix(color1,color2,gradient);

  // Create the color for the second mix
  const color3 = Reactive.pack4(0,0,0,0);

  // Create the second mix
  const mix2 = Reactive.mix(mix1,color3,step);

  // Define the texture slot of the material to update
  const textureSlot = Shaders.DefaultMaterialTextures.DIFFUSE;

  // Assign the shader signal to the texture slot
  material.setTexture(mix2, {textureSlotName: textureSlot});

// Enable async/await in JS [part 2]

Properties

This module exposes no properties.

Methods

MethodDescription
blend
blend(src: ShaderSignal | PointSignal | Point4DSignal, dst: ShaderSignal | PointSignal | Point4DSignal, config: {mode: BlendMode}): ShaderSignal


Blends two colors using the specified blending mode.
When a color is passed as a PointSignal, its alpha value is considered to be 1.
If both colors are passed as a PointSignal (without the alpha channel specified), the result will also be a PointSignal.
src: either a PointSignal, a Point4DSignal or a Shader which outputs one of these two types.
dst: either a PointSignal, a Point4DSignal or a Shader which outputs one of these two types.
returns: a shader which outputs a Point4DSignal if either of (or both) src or dst are of type Point4DSignal, or a PointSignal if not.
colorSpaceConvert
colorSpaceConvert(color: ShaderSignal | PointSignal | Point4DSignal, config: {inColorSpace: ColorSpace, outColorSpace: ColorSpace}): ShaderSignal


Converts a color from the input color space to the output color space.
color: either a PointSignal, a Point4DSignal or a shader which outputs one of these two types.
returns: a shader which outputs a Point4DSignal if color is of Point4DSignal type, or a PointSignal if not.
composition
composition(f: ShaderSignal, g: ShaderSignal | number | ScalarSignal | Point2DSignal | PointSignal | Point4DSignal | VectorSignal | TransformSignal): ShaderSignal


Returns a signal for the shader composition of the two given functions (a texture and a transform for example).
f: a shader which takes in a value of one type and outputs a different type. For example, function_f(A): B
g: a shader which takes in a value of one type and outputs a different type (for example, function_g(I): A), or a signal of A.
returns: a shader of function_f(function_g(I)) => A, if g was a shader, or function_f(signal of A) => B, if otherwise.
derivative
derivative(v: ShaderSignal | number | ScalarSignal | Point2DSignal | PointSignal | Point4DSignal | VectorSignal, config: {derivativeType: DerivativeType}): ShaderSignal


Returns a signal for the specified shader derivative of the given signal.
v: either a ScalarSignal, a Point2DSignal, a PointSignal, a Point4DSignal, a VectorSignal, or a shader which outputs one of these types.
returns: a shader of a derivate type specified by config.
fallback
fallback(main: ShaderSignal | number | ScalarSignal | Point2DSignal | PointSignal | Point4DSignal | VectorSignal | TransformSignal, fallback: ShaderSignal | number | ScalarSignal | Point2DSignal | PointSignal | Point4DSignal | VectorSignal | TransformSignal): ShaderSignal


Forwards the main input if present, otherwise uses fallback.
main: a signal or shader which outputs a value of signal type.
fallback: a signal or shader which outputs a value of signal type.
returns: main if its output is present, or fallback if not.
fragmentStage
fragmentStage(v: ShaderSignal | number | ScalarSignal | Point2DSignal | PointSignal | Point4DSignal | VectorSignal | TransformSignal): ShaderSignal


Forces the computation of val to happen at the fragment stage.
v: a signal or shader which outputs a value of signal type.
functionScalar
functionScalar(): ShaderSignal


Returns a signal for the identity function over the specified type.
returns: shader function(ScalarSignal): ScalarSignal
functionVec2
functionVec2(): ShaderSignal


Returns a signal for the identity function over the specified type.
returns: shader function(Point2DSignal): Point2DSignal
functionVec3
functionVec3(): ShaderSignal


Returns a signal for the identity function over the specified type.
returns: shader function(PointSignal): PointSignal
functionVec4
functionVec4(): ShaderSignal


Returns a signal for the identity function over the specified type.
returns: shader function(Point4DSignal): Point4DSignal
gradient
gradient(config: {type: GradientType}): ShaderSignal


Returns a signal for the specified gradient.
returns: shader function(Point2DSignal): ScalarSignal representing a gradient defined by config
renderTargetSize
renderTargetSize(): Point2DSignal


Returns a signal of the current render target's size.
returns: shader function(): Point2DSignal
sdfAnnular
sdfAnnular(sdf: ShaderSignal, width: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the given SDF shape made annular (ring-like) by the specified width.
sdf: shader function(Point2DSignal): ScalarSignal
width: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfCircle
sdfCircle(center: ShaderSignal | Point2DSignal, radius: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal for a circle SDF shape.
center: Point2DSignal or shader function(): Point2DSignal
radius: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfComplement
sdfComplement(sdf: ShaderSignal): ShaderSignal


Returns a signal of the complement of the given SDF shape.
sdf: shader function(Point2DSignal): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfDifference
sdfDifference(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal


Returns a signal of the difference of the two given SDF shapes.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal which result is the product of substracting result of sdf2 from result of sdf1
sdfEllipse
sdfEllipse(center: ShaderSignal | Point2DSignal, halfSize: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal for an ellipse SDF shape.
center: Point2DSignal or shader function(): Point2DSignal
halfSize: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfFlip
sdfFlip(sdf: ShaderSignal, offset: ShaderSignal | Point2DSignal, normal: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal of the given SDF shape flipped around the plane given by the offset an normal.
sdf: shader function(Point2DSignal): ScalarSignal
offset: Point2DSignal or shader function(): Point2DSignal
normal: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfHalfPlane
sdfHalfPlane(offset: ShaderSignal | Point2DSignal, normal: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal for a half-plane SDF shape.
offset: Point2DSignal or shader function(): Point2DSignal
normal: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfIntersection
sdfIntersection(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal


Returns a signal of the intersection of the two given SDF shapes.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfLine
sdfLine(offset: ShaderSignal | Point2DSignal, normal: ShaderSignal | Point2DSignal, halfWidth: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal for a line SDF shape.
offset: Point2DSignal or shader function(): Point2DSignal
normal: Point2DSignal or shader function(): Point2DSignal
halfWidth: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfMix
sdfMix(sdf1: ShaderSignal, sdf2: ShaderSignal, alpha: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the linear interpolation of the two given SDF shapes, modulated by alpha.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
alpha: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfPolygon
sdfPolygon(center: ShaderSignal | Point2DSignal, radius: ShaderSignal | number | ScalarSignal, numSides: ShaderSignal | number | ScalarSignal, config: {sdfVariant: SdfVariant}): ShaderSignal


Returns a signal for a polygon SDF shape.
center: Point2DSignal or shader function(): Point2DSignal
radius: number, ScalarSignal or shader function(): ScalarSignal
numSides: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfRectangle
sdfRectangle(center: ShaderSignal | Point2DSignal, halfSize: ShaderSignal | Point2DSignal, config: {sdfVariant: SdfVariant}): ShaderSignal


Returns a signal for a rectangle SDF shape.
center: Point2DSignal or shader function(): Point2DSignal
halfSize: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfRepeat
sdfRepeat(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, size: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal of the given SDF shape's grid repetition.
The shape should be centered on the pivot and fit within the given size.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
size: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfRotation
sdfRotation(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, angle: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the given SDF shape rotated around the given pivot by the given angle.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
angle: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfRotationalRepeat
sdfRotationalRepeat(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, radius: ShaderSignal | number | ScalarSignal, numTimes: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the given SDF shape's rotational repetition numTimes at the given radius.
The shape should be centered on the pivot and fit within the angular sector defined by numTimes at the given radius.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
radius: number, ScalarSignal or shader function(): ScalarSignal
numTimes: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfRound
sdfRound(sdf: ShaderSignal, radius: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the given SDF shape rounded by the specified radius.
sdf: shader function(Point2DSignal): ScalarSignal
radius: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfScale
sdfScale(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, size: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal of the given SDF shape scaled around the given pivot by the given size.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
size: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfShear
sdfShear(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, shear: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal of the given SDF shape scaled around the given pivot by the given shear amount.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
shear: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfSmoothDifference
sdfSmoothDifference(sdf1: ShaderSignal, sdf2: ShaderSignal, k: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the smooth difference of the two given SDF shapes, modulated by K.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
k: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfSmoothIntersection
sdfSmoothIntersection(sdf1: ShaderSignal, sdf2: ShaderSignal, k: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the smooth intersection of the two given SDF shapes, modulated by K.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
k: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfSmoothUnion
sdfSmoothUnion(sdf1: ShaderSignal, sdf2: ShaderSignal, k: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the smooth union of the two given SDF shapes, modulated by K.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
k: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfStar
sdfStar(center: ShaderSignal | Point2DSignal, radius1: ShaderSignal | number | ScalarSignal, radius2: ShaderSignal | number | ScalarSignal, numSides: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal for a star SDF shape.
center: Point2DSignal or shader function(): Point2DSignal
radius1: number, ScalarSignal or shader function(): ScalarSignal
radius2: number, ScalarSignal or shader function(): ScalarSignal
numSides: number, ScalarSignal or shader function(): ScalarSignal
sdfTranslation
sdfTranslation(sdf: ShaderSignal, offset: ShaderSignal | Point2DSignal): ShaderSignal


Returns a signal of the given SDF shape translated by the given offset.
sdf: shader function(Point2DSignal): ScalarSignal
offset: Point2DSignal or shader function(): Point2DSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfTwist
sdfTwist(sdf: ShaderSignal, pivot: ShaderSignal | Point2DSignal, twist: ShaderSignal | number | ScalarSignal): ShaderSignal


Returns a signal of the given SDF shape twisted around the pivot by the given amount.
sdf: shader function(Point2DSignal): ScalarSignal
pivot: Point2DSignal or shader function(): Point2DSignal
twist: number, ScalarSignal or shader function(): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
sdfUnion
sdfUnion(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal


Returns a signal of the union of the two given SDF shapes.
sdf1: shader function(Point2DSignal): ScalarSignal
sdf2: shader function(Point2DSignal): ScalarSignal
returns: shader function(Point2DSignal): ScalarSignal
textureSampler
textureSampler(texture: ShaderSignal, uv: ShaderSignal | Point2DSignal): ShaderSignal


Samples the given texture at the specified uv coordinates.
texture: shader function(Point2DSignal): ScalarSignal, function(Point2DSignal): Point2DSignal, function(Point2DSignal): PointSignal or function(Point2DSignal): Point4DSignal
uv: Point2DSignal or shader function(): Point2DSignal
returns: shader function(): ScalarSignal, function(): Point2DSignal, function(): PointSignal or function(): Point4DSignal depending on underlying texture shader return type
textureTransform
textureTransform(texture: ShaderSignal, transform: ShaderSignal): ShaderSignal


Transforms the given texture with the specified Mat3 transform.
texture: shader function(Point2DSignal): ScalarSignal, function(Point2DSignal): Point2DSignal, function(Point2DSignal): PointSignal or function(Point2DSignal): Point4DSignal
transform: shader function(): Matrix3Signal
returns: shader function(Point2DSignal): ScalarSignal, function(Point2DSignal): Point2DSignal, function(Point2DSignal): PointSignal or function(Point2DSignal): Point4DSignal depending on underlying texture shader return type
vertexAttribute
vertexAttribute(config: {variableName: VertexAttribute}): ShaderSignal


Returns a signal for the specified vertex attribute depending on the VertexAttribute used.
returns:
for VertexAttribute.POSITION a shader function(): Point4DSignal
for VertexAttribute.NORMAL a shader function(): PointSignal
for VertexAttribute.TANGENT a shader function(): Point4DSignal
for VertexAttribute.TEX_COORDS a shader function(): Point2DSignal
for VertexAttribute.COLOR a shader function(): Point4DSignal
for VertexAttribute.BASE_POSITION a shader function(): Point4DSignal
vertexTransform
vertexTransform(config: {variableName: BuiltinUniform}): ShaderSignal


Returns a signal for the specified vertex transform depending on the BuiltinUniform used.
returns:
for BuiltinUniform.MVP_MATRIX a shader function(): TransformSignal
for BuiltinUniform.MV_MATRIX a shader function(): TransformSignal
for BuiltinUniform.M_MATRIX a shader function(): TransformSignal
for BuiltinUniform.V_MATRIX a shader function(): TransformSignal
for BuiltinUniform.P_MATRIX a shader function(): TransformSignal
for BuiltinUniform.VP_MATRIX a shader function(): TransformSignal
for BuiltinUniform.NORMAL_MATRIX a shader function(): Matrix3Signal
for BuiltinUniform.INV_M_MATRIX a shader function(): TransformSignal
for BuiltinUniform.INV_V_MATRIX a shader function(): TransformSignal
for BuiltinUniform.INV_P_MATRIX a shader function(): TransformSignal

Classes

This module exposes no classes.

Enums

EnumDescription
BlendedMaterialTexturesThe BlendedMaterialTextures enum describes the different texture slots for a flat material.
BlendModeThe BlendMode enum describes the blending mode.
BuiltinUniformThe BuiltinUniform enum describes the bultin shader uniforms.
ColorSpaceThe ColorSpace enum describes the color space.
DefaultMaterialTexturesThe DefaultMaterialTextures enum describes the different texture slots for a default material.
DerivativeTypeThe DerivativeType enum describes the shader derivative type.
FacePaintMaterialTexturesThe FacePaintMaterialTextures enum describes the different texture slots for a face paint
material.
GradientTypeThe GradientType enum describes the type of the shader gradient.
PhysicallyBasedMaterialTexturesThe PhysicallyBasedMaterialTextures enum describes the different texture slots for a
physically based material.
SdfVariantThe SdfVariant enum describes the SDF variant.
VertexAttributeThe VertexAttribute enum describes the bultin vertex attributes.

Was this article helpful?