Explore

TypeA->TypeB is a function that maps TypeA to TypeB. For instance, Point2DSignal->Point4DSignal is a type of a function that maps a Point2DSignal to a Point4DSignal.

Texture2d_1ch is the same as Point2DSignal->ScalarSignal. Texture2d_2ch is the same as Point2DSignal->Point2DSignal. Texture2d_3ch is the same as Point2DSignal->PointSignal. Texture2d_4ch is the same as Point2DSignal->Point4DSignal. TextureSdf is the same as Point2DSignal->ScalarSignal.

Certain functions can accept multiple types. This is denoted by the following generic types: GenericVector can be a ScalarSignal, Point2DSignal, PointSignal, Point4DSignal. GenericMatrix can be a Matrix2, Matrix3, Matrix4. Generic can be a GenericVector, GenericMatrix. GenericFunction is the same as GenericA->GenericB.

When multiple arguments are marked with the same Generic they all have to be of the same type. For instance, in composition(f: GenericA->GenericB, g: GenericA): GenericB both occurrences of GenericA must refer to the same type, as do both occurrences of GenericB. GenericA may, but doesn't have to, be different from GenericB though. E.g. this is valid: composition(f: Point2DSignal->Point4DSignal, g: Point2DSignal): Point4DSignal

Note: Signals returned from methods within this module will not work in any other context.

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');

// 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);

// Locate the material in the Assets
const material = Materials.get('defaultMaterial0');

// 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});

Properties

This module exposes no properties.

Methods

Method	Description
`blend`	`blend(src: PointSignal, dest: PointSignal, config: {mode: Shaders.BlendMode}): PointSignal blend(src: PointSignal, dest: Point4DSignal, config: {mode: Shaders.BlendMode}): Point4DSignal blend(src: Point4DSignal, dest: PointSignal, config: {mode: Shaders.BlendMode}): Point4DSignal blend(src: Point4DSignal, dest: Point4DSignal, config: {mode: Shaders.BlendMode}): Point4DSignal` Blends two colors with the specified blending mode. When a color is passed as PointSignal its alpha value is considered to be 1. When both colors are passed as PointSignal (i.e. without the alpha channel), the result is also PointSignal.
`colorSpaceConvert`	`colorSpaceConvert(color: PointSignal, config: {inColorSpace: Shaders.ColorSpace, outColorSpace: Shaders.ColorSpace}): PointSignal colorSpaceConvert(color: Point4DSignal, config: {inColorSpace: Shaders.ColorSpace, outColorSpace: Shaders.ColorSpace}): Point4DSignal` Converts a color from the input color space to the output colorspace.
`composition`	`composition(f: (val: GenericA) => GenericB, g: (val: GenericI) => GenericA): (val: GenericI) => GenericB composition(f: (val: GenericA) => GenericB, g: GenericA): GenericB` Returns a signal for the shader composition of the two given functions (e.g. texture and a transform).
`derivative`	`derivative(val: GenericVector, config: {derivativeType: Shaders.DerivativeType}): GenericVector` Returns a signal for the specified shader derivative of the given signal.
`fallback`	`fallback(main: Generic, fallback: Generic): Generic fallback(main: GenericFunction, fallback: GenericFunction): GenericFunction` Forwards the main input if present, otherwise uses fallback.
`fragmentStage`	`fragmentStage(val: Generic): Generic fragmentStage(val: GenericFunction): GenericFunction` Places the subsequent computation on val to the fragment stage.
`functionScalar`	`functionScalar(): (val: ScalarSignal) => ScalarSignal` Returns a signal for the identity function over the specified type.
`functionVec2`	`functionVec2(): (val: Point2DSignal) => Point2DSignal` Returns a signal for the identity function over the specified type.
`functionVec3`	`functionVec3(): (val: PointSignal) => PointSignal` Returns a signal for the identity function over the specified type.
`functionVec4`	`functionVec4(): (val: Point4DSignal) => Point4DSignal` Returns a signal for the identity function over the specified type.
`gradient`	`gradient(config: {type: Shaders.GradientType}): Texture2d_1ch` Returns a signal for the specified gradient.
`renderTargetSize`	`renderTargetSize(): Point2DSignal` Returns a signal of the current render target's size.
`sdfAnnular`	`sdfAnnular(sdf: TextureSdf, width: ScalarSignal): TextureSdf` Returns a signal of the given SDF shape made annular (ring-like) by the specified width.
`sdfCircle`	`sdfCircle(center: Point2DSignal, radius: ScalarSignal): TextureSdf` Returns a signal for a circle SDF shape.
`sdfComplement`	`sdfComplement(sdf: TextureSdf): TextureSdf` Returns a signal of the complement of the given SDF shape.
`sdfDifference`	`sdfDifference(sdf1: TextureSdf, sdf2: TextureSdf): TextureSdf` Returns a signal of the difference of the two given SDF shapes.
`sdfEllipse`	`sdfEllipse(center: Point2DSignal, halfSize: Point2DSignal): TextureSdf` Returns a signal for an ellipse SDF shape.
`sdfFlip`	`sdfFlip(sdf: TextureSdf, offset: Point2DSignal, normal: Point2DSignal): TextureSdf` Returns a signal of the given SDF shape flipped around the plane given by the offset an normal.
`sdfHalfPlane`	`sdfHalfPlane(offset: Point2DSignal, normal: Point2DSignal): TextureSdf` Returns a signal for a half-plane SDF shape.
`sdfIntersection`	`sdfIntersection(sdf1: TextureSdf, sdf2: TextureSdf): TextureSdf` Returns a signal of the intersection of the two given SDF shapes.
`sdfLine`	`sdfLine(offset: Point2DSignal, normal: Point2DSignal, halfWidth: ScalarSignal): TextureSdf` Returns a signal for a line SDF shape.
`sdfMix`	`sdfMix(sdf1: TextureSdf, sdf2: TextureSdf, alpha: ScalarSignal): TextureSdf` Returns a signal of the linear interpolation of the two given SDF shapes, modulated by alpha.
`sdfPolygon`	`sdfPolygon(center: Point2DSignal, radius: ScalarSignal, numSides: ScalarSignal, config: {sdfVariant: Shaders.SdfVariant}): TextureSdf` Returns a signal for a polygon SDF shape.
`sdfRectangle`	`sdfRectangle(center: Point2DSignal, halfSize: Point2DSignal, config: {sdfVariant: Shaders.SdfVariant}): TextureSdf` Returns a signal for a rectangle SDF shape.
`sdfRepeat`	`sdfRepeat(sdf: TextureSdf, pivot: Point2DSignal, size: Point2DSignal): TextureSdf` 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.
`sdfRotation`	`sdfRotation(sdf: TextureSdf, pivot: Point2DSignal, angle: ScalarSignal): TextureSdf` Returns a signal of the given SDF shape rotated around the given pivot by the given angle.
`sdfRotationalRepeat`	`sdfRotationalRepeat(sdf: TextureSdf, pivot: Point2DSignal, radius: ScalarSignal, numTimes: ScalarSignal): TextureSdf` 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.
`sdfRound`	`sdfRound(sdf: TextureSdf, radius: ScalarSignal): TextureSdf` Returns a signal of the given SDF shape rounded by the specified radius.
`sdfScale`	`sdfScale(sdf: TextureSdf, pivot: Point2DSignal, size: Point2DSignal): TextureSdf` Returns a signal of the given SDF shape scaled around the given pivot by the given size.
`sdfShear`	`sdfShear(sdf: TextureSdf, pivot: Point2DSignal, shear: Point2DSignal): TextureSdf` Returns a signal of the given SDF shape scaled around the given pivot by the given shear amount.
`sdfSmoothDifference`	`sdfSmoothDifference(sdf1: TextureSdf, sdf2: TextureSdf, K: ScalarSignal): TextureSdf` Returns a signal of the smooth difference of the two given SDF shapes, modulated by K.
`sdfSmoothIntersection`	`sdfSmoothIntersection(sdf1: TextureSdf, sdf2: TextureSdf, K: ScalarSignal): TextureSdf` Returns a signal of the smooth intersection of the two given SDF shapes, modulated by K.
`sdfSmoothUnion`	`sdfSmoothUnion(sdf1: TextureSdf, sdf2: TextureSdf, K: ScalarSignal): TextureSdf` Returns a signal of the smooth union of the two given SDF shapes, modulated by K.
`sdfStar`	`sdfStar(center: Point2DSignal, radius1: ScalarSignal, radius2: ScalarSignal, numSides: ScalarSignal): TextureSdf` Returns a signal for a star SDF shape.
`sdfTranslation`	`sdfTranslation(sdf: TextureSdf, offset: Point2DSignal): TextureSdf` Returns a signal of the given SDF shape translated by the given offset.
`sdfTwist`	`sdfTwist(sdf: TextureSdf, pivot: Point2DSignal, twist: ScalarSignal): TextureSdf` Returns a signal of the given SDF shape twisted around the pivot by the given amount.
`sdfUnion`	`sdfUnion(sdf1: TextureSdf, sdf2: TextureSdf): TextureSdf` Returns a signal of the union of the two given SDF shapes.
`textureSampler`	`textureSampler(texture: Texture2d_1ch, uv: Point2DSignal): ScalarSignal textureSampler(texture: Texture2d_2ch, uv: Point2DSignal): Point2DSignal textureSampler(texture: Texture2d_3ch, uv: Point2DSignal): PointSignal textureSampler(texture: Texture2d_4ch, uv: Point2DSignal): Point4DSignal` Samples the given texture at the specified uv coordinates.
`textureTransform`	`textureTransform(texture: Texture2d_1ch, transform: Matrix3): Texture2d_1ch textureTransform(texture: Texture2d_2ch, transform: Matrix3): Texture2d_2ch textureTransform(texture: Texture2d_3ch, transform: Matrix3): Texture2d_3ch textureTransform(texture: Texture2d_4ch, transform: Matrix3): Texture2d_4ch` Transforms the given texture with the specified Mat3 transform.
`vertexAttribute`	`vertexAttribute(config: {[variableName: string]: Shaders.VertexAttribute}): GenericVector` Returns a signal for the specified vertex attribute depending on the VertexAttribute used: `VertexAttribute.POSITION`: `Point4DSignal` `VertexAttribute.NORMAL`: `PointSignal` `VertexAttribute.TANGENT`: `Point4DSignal` `VertexAttribute.TEX_COORDS`: `Point2DSignal` `VertexAttribute.COLOR`: `Point4DSignal` `VertexAttribute.BASE_POSITION`: `Point4DSignal`
`vertexTransform`	`vertexTransform(config: {[variableName: string]: Shaders.BuiltinUniform}): GenericMatrix` Returns a signal for the specified vertex transform depending on the BuiltinUniform used: `BuiltinUniform.MVP_MATRIX`: `Matrix4` `BuiltinUniform.MV_MATRIX`: `Matrix4` `BuiltinUniform.M_MATRIX`: `Matrix4` `BuiltinUniform.V_MATRIX`: `Matrix4` `BuiltinUniform.P_MATRIX`: `Matrix4` `BuiltinUniform.VP_MATRIX`: `Matrix4` `BuiltinUniform.NORMAL_MATRIX`: `Matrix3` `BuiltinUniform.INV_M_MATRIX`: `Matrix4` `BuiltinUniform.INV_V_MATRIX`: `Matrix4` `BuiltinUniform.INV_P_MATRIX`: `Matrix4`

Classes

This module exposes no classes.

Enums

Enum	Description
`BlendedMaterialTextures`	The `BlendedMaterialTextures` enum describes the different texture slots for a flat material.
`BlendMode`	The `BlendMode` enum describes the blending mode.
`BuiltinUniform`	The `BuiltinUniform` enum describes the bultin shader uniforms.
`ColorSpace`	The `ColorSpace` enum describes the color space.
`DefaultMaterialTextures`	The `DefaultMaterialTextures` enum describes the different texture slots for a default material.
`DerivativeType`	The `DerivativeType` enum describes the shader derivative type.
`FacePaintMaterialTextures`	The `FacePaintMaterialTextures` enum describes the different texture slots for a face paint material.
`GradientType`	The `GradientType` enum describes the type of the shader gradient.
`PhysicallyBasedMaterialTextures`	The `PhysicallyBasedMaterialTextures` enum describes the different texture slots for a physically based material.
`SdfVariant`	The `SdfVariant` enum describes the SDF variant.
`VertexAttribute`	The `VertexAttribute` enum describes the bultin vertex attributes.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs

About Create Ad Careers Platform Policy Privacy Policy Cookies Terms