Options
All
  • Public
  • Public/Protected
  • All
Menu

SDF-2D - v0.7.6

Index

Namespaces

Enumerations

Drawable Classes

Other Classes

Interfaces

Type aliases

Variables

Color Functions

Drawable Functions

Other Functions

Object literals

Type aliases

TextureWithOptions

TextureWithOptions: { overrides: Partial<TextureOptions>; source: TexImageSource }

Type declaration

Variables

Let _id

_id: number = 0

Color Functions

Const hex

  • hex(hex: string): vec3

Const hsl

  • hsl(hue: number, saturation: number, lightness: number): vec3

Const rgb

  • rgb(r: number, g: number, b: number): vec3

  • Return a color contained in a vec3.

    Parameters

    • r: number

      Should be between 0 and 1

    • g: number

      Should be between 0 and 1

    • b: number

      Should be between 0 and 1

    Returns vec3

Const rgb255

  • rgb255(r: number, g: number, b: number): vec3

  • Return a color contained in a vec3.

    Parameters

    • r: number

      Should be between 0 and 255

    • g: number

      Should be between 0 and 255

    • b: number

      Should be between 0 and 255

    Returns vec3

Const rgba

  • rgba(r: number, g: number, b: number, a: number): vec4

  • Return a color with transparency contained in a vec4.

    Parameters

    • r: number

      Should be between 0 and 1

    • g: number

      Should be between 0 and 1

    • b: number

      Should be between 0 and 1

    • a: number

      Should be between 0 and 1

    Returns vec4

Const rgba255

  • rgba255(r: number, g: number, b: number, a: number): vec4

  • Return a color with transparency contained in a vec4.

    Parameters

    • r: number

      Should be between 0 and 255

    • g: number

      Should be between 0 and 255

    • b: number

      Should be between 0 and 255

    • a: number

      Should be between 0 and 255

    Returns vec4

Drawable Functions

Const CircleFactory

  • CircleFactory(color: vec3 | vec4 | number): typeof CircleBase

Const DropletFactory

  • DropletFactory(color: vec3 | vec4 | number): typeof DropletBase

Const HexagonFactory

  • HexagonFactory(color: vec3 | vec4 | number): typeof HexagonBase

Const InvertedTunnelFactory

Const MetaCircleFactory

  • MetaCircleFactory(color: vec3 | vec4 | number, k?: number): typeof MetaCircleBase

Const NoisyPolygonFactory

  • NoisyPolygonFactory(vertexCount: number, color: vec3 | vec4 | number): typeof PolygonBase & NoisyPolygonBase

Const PolygonFactory

  • PolygonFactory(vertexCount: number, color: vec3 | vec4 | number): typeof PolygonBase

Const RotatedRectangleFactory

Other Functions

compile

  • Compiles a new renderer instance. There can multiple renderers on a single page.

    Asynchronous behaviour is required for parallel shader compiling. Trying to draw before the returned promise resolves, results in no action taken. Settings can be set before promise resolution and they will be applied later.

    The descriptors of every to-be-drawn objects are required before creating the renderer, allowing the compiler to only create the shaders that will actually be used.

    Example usage:

     import { compile, hsl, CircleFactory, CircleLight } from 'sdf-2d';

 const canvas = document.querySelector('canvas');
 const Circle = CircleFactory(hsl(30, 66, 50));
 const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);

    Parameters

    • canvas: HTMLCanvasElement

      The returned renderer will only be able to draw to this canvas.

    • descriptors: Array<DrawableDescriptor>

      The descriptor of every single object (and light) that ever needs to be drawn by this renderer has to be given before compiling.

    • Default value settingsOverrides: Partial<StartupSettings> = {}

      Sensible defaults are provided, but these can be overridden.

    Returns Promise<Renderer>

Const renderNoise

  • renderNoise(textureSize: ReadonlyVec2, scale: number, amplitude: number, ignoreWebGL2?: boolean): Promise<HTMLCanvasElement>

  • Create a renderer, draw a 2D noise texture with it, then destroy the used resources, while returning the generated texture in the form of a canvas.

    Parameters

    • textureSize: ReadonlyVec2

      The resolution of the end result

    • scale: number

      A starting value can be 15

    • amplitude: number

      A starting value can be 1

    • Default value ignoreWebGL2: boolean = false

      Ignore WebGL2, even when it's available

    Returns Promise<HTMLCanvasElement>

runAnimation

  • Implements the boilerplate code required to run real-time animations in the browser. An FPS based autoscaler is also used. This creates an additional fps key in the renderers insights property.

    Example usage:

      <canvas id="main" style="width: 300px; height: 150px"></canvas>

    The canvas needs to have a fixed size specified by CSS.

    import { CircleFactory, CircleLight, hsl, runAnimation } from 'sdf-2d';

const canvas = document.querySelector('canvas');
const Circle = CircleFactory(hsl(180, 100, 40));

runAnimation(canvas, [Circle.descriptor, CircleLight.descriptor], (renderer, time) => {
  renderer.addDrawable(
    new Circle([150 + 50 * Math.cos(time / 1000), 75 + 50 * Math.sin(time / 1000)], 25)
  );
  renderer.addDrawable(new CircleLight([150, 75], hsl(270, 100, 40), 0.1));
  return true;
});

    Parameters

    • canvas: HTMLCanvasElement

      The returned renderer will only be able to draw to this canvas.

    • descriptors: Array<DrawableDescriptor>

      The descriptor of every single object (and light) that ever needs to be drawn by this renderer has to be given before compiling.

    • animate: (renderer: Renderer, currentTimeInMilliseconds: DOMHighResTimeStamp, deltaTimeInMilliseconds: DOMHighResTimeStamp) => boolean

      This function will be called before rendering each frame. renderDrawables must not be called by the animate function. It should return true if the animation should be continued. To break out of the animation loop, a false (falsy) return value must be given.

        • (renderer: Renderer, currentTimeInMilliseconds: DOMHighResTimeStamp, deltaTimeInMilliseconds: DOMHighResTimeStamp): boolean

        • Parameters

          • renderer: Renderer
          • currentTimeInMilliseconds: DOMHighResTimeStamp
          • deltaTimeInMilliseconds: DOMHighResTimeStamp

          Returns boolean

    • Default value settings: Partial<StartupSettings & RuntimeSettings> = {}

    Returns Promise<void>

Object literals

Const defaultRuntimeSettings

defaultRuntimeSettings: object

Contains the default values used for RuntimeSettings.

ambientLight

ambientLight: vec3 = vec3.fromValues(0.25, 0.15, 0.25)

colorPalette

colorPalette: never[] = []

distanceRenderScale

distanceRenderScale: number = 0.5

enableHighDpiRendering

enableHighDpiRendering: false = false

isWorldInverted

isWorldInverted: false = false

lightCutoffDistance

lightCutoffDistance: number = 400

lightsRenderScale

lightsRenderScale: number = 1

motionBlur

motionBlur: number = 0.3

textures

textures: {}

Type declaration

tileMultiplier

tileMultiplier: number = 8

Const defaultStartupSettings

defaultStartupSettings: object

Contains the default values used for StartupSettings.

backgroundColor

backgroundColor: vec4 = vec4.fromValues(1, 1, 1, 1)

enableContextLostSimulator

enableContextLostSimulator: false = false

enableStopwatch

enableStopwatch: false = false

ignoreWebGL2

ignoreWebGL2: false = false

lightPenetrationRatio

lightPenetrationRatio: number = 0.75

paletteSize

paletteSize: number = 256

shadowTraceCount

shadowTraceCount: number = 16