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
.
//============================================================================== // 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]
This module exposes no properties.
Method | Description |
---|---|
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 |
This module exposes no classes.
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 paintmaterial. |
GradientType | The GradientType enum describes the type of the shader gradient. |
PhysicallyBasedMaterialTextures | The PhysicallyBasedMaterialTextures enum describes the different texture slots for aphysically based material. |
SdfVariant | The SdfVariant enum describes the SDF variant. |
VertexAttribute | The VertexAttribute enum describes the bultin vertex attributes. |