A helper class for calculating the elapsed time between frames.
-Handles the case, where the browser tab is not in focus and requestAnimationFrame
- does not get called for performance reasons. In this case, the return deltaTime won't be
- an unreasonably large value.
Return the elapsed time in milliseconds since the previous call of this
- method by subtracting the previously given currentTime argument from the
- current currentTime argument.
Takes visibilitychange events into account.
-Current time acquired e.g. with requestAnimationFrame.
Base class of every drawable object.
-To create your own drawables, you need to subclass from this.
---Although lights are also subclasses of Drawable, you cannot create your own light sources.
-
This should be defined in inherited classes.
-Return the values that should be given to the shaders through uniform inputs.
-position-like properties should be transformed by this matrix - before being returned.
-scalar properties should be transformed by this number - before being returned.
-The lower bound of the distance between the target and the object.
-It can return 0 by default, the only consequence of this, is a reduced performance. - Because this object won't benefit from tile-based rendering.
-AbstractBase class of every drawable object.
+To create your own drawables, you need to subclass from this.
+++Although lights are also subclasses of Drawable, you cannot create your own light sources.
+
Protected AbstractgetReturn the values that should be given to the shaders through uniform inputs.
+position-like properties should be transformed by this matrix +before being returned.
+scalar properties should be transformed by this number +before being returned.
+AbstractminThe lower bound of the distance between the target and the object.
+It can return 0 by default, the only consequence of this, is a reduced performance. +Because this object won't benefit from tile-based rendering.
+ProtectedlightnessStatic ReadonlydescriptorThis should be defined in inherited classes.
+ProtectedgetReturn the values that should be given to the shaders through uniform inputs.
+position-like properties should be transformed by this matrix +before being returned.
+scalar properties should be transformed by this number +before being returned.
+The lower bound of the distance between the target and the object.
+It can return 0 by default, the only consequence of this, is a reduced performance. +Because this object won't benefit from tile-based rendering.
+ProtectedlightnessStatic ReadonlydescriptorThis should be defined in inherited classes.
+ProtectedgetThe lower bound of the distance between the target and the object.
+It can return 0 by default, the only consequence of this, is a reduced performance. +Because this object won't benefit from tile-based rendering.
+Base class of every drawable object.
+To create your own drawables, you need to subclass from this.
+++Although lights are also subclasses of Drawable, you cannot create your own light sources.
+
StaticdescriptorThis should be defined in inherited classes.
+ProtectedgetReturn the values that should be given to the shaders through uniform inputs.
+position-like properties should be transformed by this matrix +before being returned.
+scalar properties should be transformed by this number +before being returned.
+The lower bound of the distance between the target and the object.
+It can return 0 by default, the only consequence of this, is a reduced performance. +Because this object won't benefit from tile-based rendering.
+Static ReadonlydescriptorThis should be defined in inherited classes.
+ProtectedgetReturn the values that should be given to the shaders through uniform inputs.
+position-like properties should be transformed by this matrix +before being returned.
+scalar properties should be transformed by this number +before being returned.
+The lower bound of the distance between the target and the object.
+It can return 0 by default, the only consequence of this, is a reduced performance. +Because this object won't benefit from tile-based rendering.
+Set the quality of rendering based on FPS values.
-When using this the size of the canvas must be fixed with CSS.
-The addDeltaTime method should be called once every frame.
Usage:
- const renderer = await compile(...);
- const autoscaler = new FpsQualityAutoscaler(renderer);
-
- Autoscaling is also done by calling this function
-Set the quality of rendering based on FPS values.
+When using this the size of the canvas must be fixed with CSS.
+The addDeltaTime method should be called once every frame.
Usage:
+ const renderer = await compile(...);
const autoscaler = new FpsQualityAutoscaler(renderer);
+
+
+A helper class for calculating the elapsed time between frames.
+Handles the case, where the browser tab is not in focus and requestAnimationFrame
+does not get called for performance reasons. In this case, the return deltaTime won't be
+an unreasonably large value.
Return the elapsed time in milliseconds since the previous call of this
+method by subtracting the previously given currentTime argument from the
+current currentTime argument.
Takes visibilitychange events into account.
+Current time acquired e.g. with requestAnimationFrame.
On WebGL it only work with power of 2 texture sizes.
-On WebGL it only work with power of 2 texture sizes.
-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]);
+
+
+The returned renderer will only be able to draw to this canvas.
+The descriptor of every single object (and light) that +ever needs to be drawn by this renderer has to be given before compiling.
+Sensible defaults are provided, but these can be overridden.
+Providing a noise texture is required for this drawable.
+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.
+The resolution of the end result
+A starting value can be 15
+A starting value can be 1
+Ignore WebGL2, even when it's available
+Return a color given in a hexadecimal form as a vec3.
+A hexadecimal color with (#ff0000) or without (ff0000) +a leading hash mark.
+source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+Return a color contained in a vec3.
+Should be between 0 and 360
+Should be between 0 and 100
+Should be between 0 and 100
+source: https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
+Return a color with transparency contained in a vec4.
+Should be between 0 and 255
+Should be between 0 and 255
+Should be between 0 and 255
+Should be between 0 and 255
+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;
});
+
+
+The returned renderer will only be able to draw to this canvas.
+The descriptor of every single object (and light) that +ever needs to be drawn by this renderer has to be given before compiling.
+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.
Return a color given in a hexadecimal form as a vec3.
-A hexadecimal color with (#ff0000) or without (ff0000) - a leading hash mark.
-source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-Return a color contained in a vec3.
-Should be between 0 and 360
-Should be between 0 and 100
-Should be between 0 and 100
-source: https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
-Return a color contained in a vec3.
-Should be between 0 and 1
-Should be between 0 and 1
-Should be between 0 and 1
-Return a color contained in a vec3.
-Should be between 0 and 255
-Should be between 0 and 255
-Should be between 0 and 255
-Return a color with transparency contained in a vec4.
-Should be between 0 and 1
-Should be between 0 and 1
-Should be between 0 and 1
-Should be between 0 and 1
-Return a color with transparency contained in a vec4.
-Should be between 0 and 255
-Should be between 0 and 255
-Should be between 0 and 255
-Should be between 0 and 255
-Providing a noise texture is required for this drawable.
-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]);
-
- The returned renderer will only be able to draw to this canvas.
-The descriptor of every single object (and light) that - ever needs to be drawn by this renderer has to be given before compiling.
-Sensible defaults are provided, but these can be overridden.
-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.
-The resolution of the end result
-A starting value can be 15
-A starting value can be 1
-Ignore WebGL2, even when it's available
-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;
-});
-
- The returned renderer will only be able to draw to this canvas.
-The descriptor of every single object (and light) that - ever needs to be drawn by this renderer has to be given before compiling.
-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.
Contains the default values used for RuntimeSettings.
-Contains the default values used for StartupSettings.
-The motivation behind this library and more in-depth information about the rendering techniques utilised can be found in my thesis.
- -If you're planning on creating animated content, use the runAnimation function to spare yourself from writing boilerplate code. - Further documentation on its usage is available in its documentation.
- ---Iñigo Quilez has some great 2D SDF-s
-
descriptor of type DrawableDescriptorsThe vec2, vec3, and vec4 types seen in the documentation come from the glMatrix library and are equivalent to regular JS Arrays or Float32Arrays. So, feel free to give [x, y] as an input for functions requiring vec2.
Anywhere, where positions need to be specified, the y values grow upwards. That means, when setting the view area, the origin is at the bottom left corner of the display.
For optimising the evaluation of the distance field, the display is divided up into a grid of tiles. The shaders for each tile are compiled to support a fix maximum number of objects on it. When using the built-in drawables it is possible that after a certain number of on-screen objects new ones won't be visible.
-Mitigating this issue is quite easy. Instead of the following code:
-this.renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
-
- Modify it to something similar:
-this.renderer = await compile(canvas, [
- {
- ...Circle.descriptor,
- shaderCombinationSteps: [0, 1, 2, 24, 64],
- },
- {
- ...CircleLight.descriptor,
- shaderCombinationSteps: [0, 1, 2, 4],
- },
-]);
-
- The usage of too large numbers is not advised for compatibility and performance reasons alike.
---Steps are very useful for tile-based rendering, because it is possible for one tile (at a given moment) to be empty or contain just a few objects, while others have a large cluster of objects. The compiled shaders only take into account the necessary number of objects on each tile.
-
The motivation behind this library and more in-depth information about the rendering techniques utilised can be found in my thesis.
+If you're planning on creating animated content, use the runAnimation function to spare yourself from writing boilerplate code. +Further documentation on its usage is available in its documentation.
+++Iñigo Quilez has some great 2D SDF-s
+
descriptor of type DrawableDescriptorsThe vec2, vec3, and vec4 types seen in the documentation come from the glMatrix library and are equivalent to regular JS Arrays or Float32Arrays. So, feel free to give [x, y] as an input for functions requiring vec2.
Anywhere, where positions need to be specified, the y values grow upwards. That means, when setting the view area, the origin is at the bottom left corner of the display.
For optimising the evaluation of the distance field, the display is divided up into a grid of tiles. The shaders for each tile are compiled to support a fix maximum number of objects on it. When using the built-in drawables it is possible that after a certain number of on-screen objects new ones won't be visible.
+Mitigating this issue is quite easy. Instead of the following code:
+this.renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
+
+
+Modify it to something similar:
+this.renderer = await compile(canvas, [
{
...Circle.descriptor,
shaderCombinationSteps: [0, 1, 2, 24, 64],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 4],
},
]);
+
+
+The usage of too large numbers is not advised for compatibility and performance reasons alike.
+++Steps are very useful for tile-based rendering, because it is possible for one tile (at a given moment) to be empty or contain just a few objects, while others have a large cluster of objects. The compiled shaders only take into account the necessary number of objects on each tile.
+
Used for containing the required information to compile drawables into - shader code.
-Each Drawable must have a static property of this type, called descriptor.
-For more information on how to create your own DrawableDescriptor-s, look at the - code of CircleFactory or InvertedTunnelFactory.
-When no shaderCombinationStep matches the current number of drawables exactly,
- the value of empty is used to pad out arrays.
Calculating the number of objects to be drawn is done using the following pseudo-formula:
-objectCountScaler * propertyUniformMapping[0].length
-By default, its value is 1
-An object describing the relationship between the object returned by a Drawable's - getObjectToSerialize and the name of the arrays used in the GLSL code.
-Required property for shapes having physical dimensions.
-Number of possible drawables around each tile.
-For each step, a shader will be generated. And at runtime the closes matching - shader will be used to render a given part of the scene.
-Must contain 0 as a value.
-The name of the uniform int used in the code to refer to the - number of drawables of this type.
-Used for containing the required information to compile drawables into +shader code.
+Each [[Drawable]] must have a static property of this type, called descriptor.
+For more information on how to create your own DrawableDescriptor-s, look at the +code of [[CircleFactory]] or [[InvertedTunnelFactory]].
+ReadonlyemptyWhen no shaderCombinationStep matches the current number of drawables exactly,
+the value of empty is used to pad out arrays.
OptionalobjectCalculating the number of objects to be drawn is done using the following pseudo-formula:
+objectCountScaler * propertyUniformMapping[0].length
+By default, its value is 1
+An object describing the relationship between the object returned by a [[Drawable]]'s +getObjectToSerialize and the name of the arrays used in the GLSL code.
+OptionalsdfRequired property for shapes having physical dimensions.
+The name of the function defined in the value of shader.
+Its signature should look like this:
float (in vec2 target, out float colorIndex)
+
+
+OptionalisInverted?: booleanBy default, drawables are not inverted.
+The actual GLSL code for observing the drawables represented by this descriptor.
+Your code should work with both version 100 and version 300 es
+Number of possible drawables around each tile.
+For each step, a shader will be generated. And at runtime the closes matching +shader will be used to render a given part of the scene.
+Must contain 0 as a value.
+The name of the uniform int used in the code to refer to the +number of drawables of this type.
+OptionalfloatOptionalprogramOptionalrendererOptionalsdf2dOptionalstartupOptionalvendorThe main interface through which rendering can be achieved.
+Multiple renderers are permitted on a single page.
+ReadonlycanvasGet the actual resolution of the canvas without triggering a reflow.
+A ResizeObserver is utilised fot achieving this.
+ReadonlyinsightsGet useful information about the hardware and the SDF2D renderer.
+Its scheme is subject to change.
+During context lost it might be null.
+ReadonlyviewGet the viewArea size set by the last setViewArea.
By default, canvasSize is used for the view area size.
Let go of every GPU resource held by the renderer.
+It's up to the browser and driver whether these resources are actually freed. +Nonetheless, when a renderer is no longer needed, this method should be called.
+The inverse of worldToDisplayCoordinates, returns the world coordinates
+from a pixel's position.
The view area coordinates are also given in world coordinates.
+Useful for picking.
+The origin is in the display's top left corner. +Just as in mouse events' clientX and clientY.
+Render every drawable added since the last renderDrawables call.
Resizing of framebuffers and the canvas also takes effect
+when calling renderDrawables.
Patch the current runtime settings with new values.
+Set the camera transformation.
+top (!) left. By default, equals to [0, canvasHeight].
+need not be equal to the canvas size, though their aspect ratio +should be the same to avoid stretching.
+The inverse of displayToWorldCoordinates, returns the screen space position
+of a point given in world space coordinates.
While the origin for worldCoordinates resides in the bottom-left corner, +the origin of the returned display coordinates is placed in the top left.
+Coordinates used when drawing objects.
+Interface for a configuration object containing the settings +that can be changed during runtime.
+The default values for RuntimeSettings can be found in [[defaultRuntimeSettings]].
+A light affecting every pixel (even the ones inside objects).
+Its length should be less than the one specified in [[StartupSettings]].paletteSize.
+The possible colors for the objects. Each color is referenced by its index in the +palette.
+Can have transparency, but only if WebGL2 support is enabled.
+The resolution of the distance field rendering will be scaled up or down with this value.
+Because of interpolation, this can be set much lower than the lightsRenderScale, while
+maintaining closely the same perceived quality.
Setting this is a great way to balance quality and performance.
+When set to true rendering will be done on the screen's real resolution.
By default, every pixel is outside of objects. Flipping this value to true will
+result in every pixel being inside a large object. From then it only makes sense to
+draw inverted objects.
When lights reach the end of the display, they are slowly faded out. The length +of this phaseout can be set through this value.
+The resolution of the final frame will be scaled by this value.
+Setting this is a great way to balance quality and performance.
+Set the extent of the motion blur.
+The values must be between 0 and 1. Where 0 means no motion blur, +and values just below 1 mean an extreme amount of motion blur.
+It is possible to use your own textures in your SDF definitions.
+The keys of the object should be the name used to reference them in the GLSL code, +and the values should be the textures themselves or a TextureWithOptions specifying +the texture's [[TextureOptions]]. +It can be a canvas, img element, Image and so on.
+First, the SDF of the scene is evaluated at every single pixel. +For speeding this process up, the screen is divided up into tiles, +this way each having to deal with a fewer objects.
+For each tile, it is decided which objects are near its close vicinity. +This comes with some overhead for the CPU, while saving the GPU from loads of +calculations. The workload can be balanced between the CPU and the GPU by setting +this number.
+Interface for a configuration object containing the settings +that need to be given before shader compilation.
+The default values for StartupSettings can be found in [[defaultStartupSettings]].
+The default background color of the scene, can have transparency on every platform.
+Many context lost event will be simulated when enabled.
+Useful for testing.
+Creates a stopwatch used for measuring the GPU render time +when its required extension is available.
+You should only have one renderer with enabled stopwatch.
+When set to true, rendering will fall back to WebGL
+even when WebGL2 is present.
Useful for testing compatibility.
+Controls how overlapping lights combine.
+At 0 lights are summed additively (the physically-correct default):
+two nearby lights brighten their overlap and their glows merge into a
+shape larger than either alone. At 1 overlapping lights instead take
+the per-channel maximum, so a combination never reads brighter or larger
+than its strongest contributor. Values in between blend the two.
A single light looks the same at any value. Should be between 0 and 1.
+The illumination is multiplied by this constant where +the distance field is negative (i.e. inside objects).
+Should be between 0 and 1, but other values are also permitted.
+Gives the number of possible object colors for the scene.
+When using WebGL, only 256 different colors can be used. +On WebGL2, its value should not be larger than 4096 for +maintaining compatibility with low-end devices.
+The raytracing algorithm used for shadows requires a step count. +Sensible values for this are between 8 and 32.
+The higher the number, the harder the shadows will get. +Some ambient occlusion like effects can be visible on lower trace counts.
+The main interface through which rendering can be achieved.
-Multiple renderers are permitted on a single page.
-Get the actual resolution of the canvas without triggering a reflow.
-A ResizeObserver is utilised fot achieving this.
-Get useful information about the hardware and the SDF2D renderer.
-Its scheme is subject to change.
-During context lost it might be null.
-Get the viewArea size set by the last setViewArea.
By default, canvasSize is used for the view area size.
Schedule a drawable to be rendered during the next renderDrawables call.
Must be a subclass of drawable and its class must contain a - static descriptor property of type DrawableDescriptor.
-Let go of every GPU resource held by the renderer.
-It's up to the browser and driver whether these resources are actually freed. - Nonetheless, when a renderer is no longer needed, this method should be called.
-The inverse of worldToDisplayCoordinates, returns the world coordinates
- from a pixel's position.
The view area coordinates are also given in world coordinates.
-Useful for picking.
-The origin is in the display's top left corner. - Just as in mouse events' clientX and clientY.
-Render every drawable added since the last renderDrawables call.
Resizing of framebuffers and the canvas also takes effect
- when calling renderDrawables.
Patch the current runtime settings with new values.
-Set the camera transformation.
-top (!) left. By default, equals to [0, canvasHeight].
-need not be equal to the canvas size, though their aspect ratio - should be the same to avoid stretching.
-The inverse of displayToWorldCoordinates, returns the screen space position
- of a point given in world space coordinates.
While the origin for worldCoordinates resides in the bottom-left corner, - the origin of the returned display coordinates is placed in the top left.
-Coordinates used when drawing objects.
-Interface for a configuration object containing the settings - that can be changed during runtime.
-The default values for RuntimeSettings can be found in defaultRuntimeSettings.
-A light affecting every pixel (even the ones inside objects).
-Its length should be less than the one specified in StartupSettings.paletteSize.
-The possible colors for the objects. Each color is referenced by its index in the - palette.
-Can have transparency, but only if WebGL2 support is enabled.
-The resolution of the distance field rendering will be scaled up or down with this value.
-Because of interpolation, this can be set much lower than the lightsRenderScale, while
- maintaining closely the same perceived quality.
Setting this is a great way to balance quality and performance.
-When set to true rendering will be done on the screen's real resolution.
By default, every pixel is outside of objects. Flipping this value to true will
- result in every pixel being inside a large object. From then it only makes sense to
- draw inverted objects.
When lights reach the end of the display, they are slowly faded out. The length - of this phaseout can be set through this value.
-The resolution of the final frame will be scaled by this value.
-Setting this is a great way to balance quality and performance.
-Set the extent of the motion blur.
-The values must be between 0 and 1. Where 0 means no motion blur, - and values just below 1 mean an extreme amount of motion blur.
-It is possible to use your own textures in your SDF definitions.
-The keys of the object should be the name used to reference them in the GLSL code, - and the values should be the textures themselves or a TextureWithOptions specifying - the texture's TextureOptions. - It can be a canvas, img element, Image and so on.
-First, the SDF of the scene is evaluated at every single pixel. - For speeding this process up, the screen is divided up into tiles, - this way each having to deal with a fewer objects.
-For each tile, it is decided which objects are near its close vicinity. - This comes with some overhead for the CPU, while saving the GPU from loads of - calculations. The workload can be balanced between the CPU and the GPU by setting - this number.
-Interface for a configuration object containing the settings - that need to be given before shader compilation.
-The default values for StartupSettings can be found in defaultStartupSettings.
-The default background color of the scene, can have transparency on every platform.
-Many context lost event will be simulated when enabled.
-Useful for testing.
-Creates a stopwatch used for measuring the GPU render time - when its required extension is available.
-You should only have one renderer with enabled stopwatch.
-When set to true, rendering will fall back to WebGL
- even when WebGL2 is present.
Useful for testing compatibility.
-The illumination is multiplied by this constant where - the distance field is negative (i.e. inside objects).
-Should be between 0 and 1, but other values are also permitted.
-Gives the number of possible object colors for the scene.
-When using WebGL, only 256 different colors can be used. - On WebGL2, its value should not be larger than 4096 for - maintaining compatibility with low-end devices.
-The raytracing algorithm used for shadows requires a step count. - Sensible values for this are between 8 and 32.
-The higher the number, the harder the shadows will get. - Some ambient occlusion like effects can be visible on lower trace counts.
-Importing this file gives arrays (Array and Float32Array instances)
+two new properties: x and y. The former refers to their 0th element,
+and the latter to their 1st.
ConstContains the default values used for [[RuntimeSettings]].
+ConstContains the default values used for [[StartupSettings]].
+