ShadersModule


The ShadersModule exposes APIs to create Visual Shaders using JavaScript.

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

// Assign the shader signal to the diffuse texture of the material
material.setTexture(mix2, {textureSlotName: "diffuseTexture"});

Properties

This class exposes no properties.

Methods

MethodDescription

SdfTwist

ShadersModule.sdfTwist(sdf: ShaderSignal, pivot: ShaderSignal, twist: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape twisted around the pivot by the given amount.

blend

ShadersModule.blend(src: ShaderSignal, dest: ShaderSignal, {"mode": ShadersModule.BlendMode.OVERLAY}): ShaderSignal

Blends two colors with the specified blending mode.

colorSpaceConvert

ShadersModule.colorSpaceConvert(color: ShaderSignal, {"inColorSpace": ShadersModule.ColorSpace.RGB, "outColorSpace": ShadersModule.ColorSpace.HSV}): ShaderSignal

Converts a color from the input color space to the output colorspace.

composition

ShadersModule.composition(f: ShaderSignal, g: ShaderSignal): ShaderSignal

Returns a signal for the shader composition of the two given functions (e.g. texture and a transform).

derivative

ShadersModule.derivative(val: ShaderSignal, {"derivativeType": ShadersModule.DerivativeType.FWIDTH}): ShaderSignal

Returns a signal for the specified shader derivative of the given signal.

fallback

ShadersModule.fallback(main: ShaderSignal, fallback: ShaderSignal): ShaderSignal

Forwards the main input if present, otherwise uses fallback.

fragmentStage

ShadersModule.fragmentStage(val: ShaderSignal): ShaderSignal

Places the subsequent computation on val to the fragment stage.

functionScalar

ShadersModule.functionScalar(): ShaderSignal ShadersModule.functionVec2(): ShaderSignal ShadersModule.functionVec3(): ShaderSignal ShadersModule.functionVec4(): ShaderSignal

Returns a signal for the identity function over the specified type.

functionVec2

ShadersModule.functionScalar(): ShaderSignal ShadersModule.functionVec2(): ShaderSignal ShadersModule.functionVec3(): ShaderSignal ShadersModule.functionVec4(): ShaderSignal

Returns a signal for the identity function over the specified type.

functionVec3

ShadersModule.functionScalar(): ShaderSignal ShadersModule.functionVec2(): ShaderSignal ShadersModule.functionVec3(): ShaderSignal ShadersModule.functionVec4(): ShaderSignal

Returns a signal for the identity function over the specified type.

functionVec4

ShadersModule.functionScalar(): ShaderSignal ShadersModule.functionVec2(): ShaderSignal ShadersModule.functionVec3(): ShaderSignal ShadersModule.functionVec4(): ShaderSignal

Returns a signal for the identity function over the specified type.

gradient

ShadersModule.gradient({"type": ShadersModule.GradientType}): ShaderSignal

Returns a signal for the specified gradient.

sdfAnnular

ShadersModule.sdfAnnular(sdf: ShaderSignal, width: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape made annular (ring-like) by the specified width.

sdfCircle

ShadersModule.sdfCircle(center: ShaderSignal, radius: ShaderSignal): ShaderSignal

Returns a signal for circle SDF shape.

sdfComplement

ShadersModule.sdfComplement(sdf: ShaderSignal): ShaderSignal

Returns a signal of the complement of the given SDF shape.

sdfDifference

ShadersModule.sdfDifference(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal

Returns a signal of the difference of the two given SDF shapes.

sdfEllipse

ShadersModule.sdfEllipse(center: ShaderSignal, halfSize: ShaderSignal): ShaderSignal

Returns a signal for ellipse SDF shape.

sdfFlip

ShadersModule.sdfFlip(sdf: ShaderSignal, offset: ShaderSignal, normal: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape flipped around the plane given by the offset an normal.

sdfHalfPlane

ShadersModule.sdfHalfPlane(offset: ShaderSignal, normal: ShaderSignal): ShaderSignal

Returns a signal for half-plane SDF shape.

sdfIntersection

ShadersModule.sdfIntersection(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal

Returns a signal of the intersection of the two given SDF shapes.

sdfLine

ShadersModule.sdfLine(offset: ShaderSignal, normal: ShaderSignal, halfSize: ShaderSignal): ShaderSignal

Returns a signal for line SDF shape.

sdfMix

ShadersModule.sdfMix(sdf1: ShaderSignal, sdf2: ShaderSignal, alpha: ShaderSignal): ShaderSignal

Returns a signal of the linear interpolation of the two given SDF shapes, modulated by alpha.

sdfPolygon

ShadersModule.sdfPolygon(center: ShaderSignal, radius: ShaderSignal, numSides: ShaderSignal, {"sdfVariant": S.SdfVariant.EXACT}): ShaderSignal

Returns a signal for polygon SDF shape.

sdfRectangle

ShadersModule.sdfRectangle(center: ShaderSignal, halfSize: ShaderSignal, {"sdfVariant": S.SdfVariant.EXACT}): ShaderSignal

Returns a signal for rectangle SDF shape.

sdfRepeat

ShadersModule.sdfRepeat(sdf: ShaderSignal, pivot: ShaderSignal, size: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape's grid repetition. Shape should be centered at pivot and fit within the given size.

sdfRotation

ShadersModule.sdfRotation(sdf: ShaderSignal, pivot: ShaderSignal, angle: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape rotated around the given pivot by the given angle.

sdfRotationalRepeat

ShadersModule.sdfRotationalRepeat(sdf: ShaderSignal, pivot: ShaderSignal, radius: ShaderSignal, numTimes: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape's rotational repetition numTimes at the given radius. Shape should be centered at pivot and fit within the angular sector defined by numTimes at the given radius.

sdfRound

ShadersModule.sdfRound(sdf: ShaderSignal, radius: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape rounded by the specified radius.

sdfScale

ShadersModule.sdfScale(sdf: ShaderSignal, pivot: ShaderSignal, size: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape scaled around the given pivot by the given size.

sdfShear

ShadersModule.sdfShear(sdf: ShaderSignal, pivot: ShaderSignal, shear: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape scaled around the given pivot by the given shear amount.

sdfSmoothDifference

ShadersModule.sdfSmoothDifference(sdf1: ShaderSignal, sdf2: ShaderSignal, K: ShaderSignal): ShaderSignal

Returns a signal of the smooth difference of the two given SDF shapes, modulated by K.

sdfSmoothIntersection

ShadersModule.sdfSmoothIntersection(sdf1: ShaderSignal, sdf2: ShaderSignal, K: ShaderSignal): ShaderSignal

Returns a signal of the smooth intersection of the two given SDF shapes, modulated by K.

sdfSmoothUnion

ShadersModule.sdfSmoothUnion(sdf1: ShaderSignal, sdf2: ShaderSignal, K: ShaderSignal): ShaderSignal

Returns a signal of the smooth union of the two given SDF shapes, modulated by K.

sdfStar

ShadersModule.sdfStar(center: ShaderSignal, radius1: ShaderSignal, radius2: ShaderSignal, numSides: ShaderSignal): ShaderSignal

Returns a signal for polygon SDF shape.

sdfTranslation

ShadersModule.sdfTranslation(sdf: ShaderSignal, offset: ShaderSignal): ShaderSignal

Returns a signal of the given SDF shape translated by the given offset.

sdfUnion

ShadersModule.sdfUnion(sdf1: ShaderSignal, sdf2: ShaderSignal): ShaderSignal

Returns a signal of the union of the two given SDF shapes.

textureSampler

ShadersModule.textureSampler(texture: ShaderSignal, uv: ShaderSignal): ShaderSignal

Samples the given texture at the specified uv coordinates.

textureTransform

ShadersModule.textureTransform(texture: ShaderSignal, transform: ShaderSignal): ShaderSignal

Transforms the given texture with the specified Mat3 transform.

vertexAttribute

ShadersModule.vertexAttribute({"variableName": ShadersModule.VertexAttribute.TEX_COORDS}): ShaderSignal

Returns a signal for the specified vertex attribute.

vertexTransform

ShadersModule.vertexTransform({"variableName": ShadersModule.BuiltinUniform.MVP_MATRIX}): ShaderSignal

Returns a signal for the specified vertex transform.

Enums

ValueDescription

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.

DerivativeType

The DerivativeType enum describes the shader derivative type.

GradientType

The GradientType enum describes the type of the shader gradient.

SdfVariant

The SdfVariant enum describes the SDF variant.

VertexAttribute

The VertexAttribute enum describes the bultin vertex attributes.