Component that set real-time calculated animation on a canvas as texture to the existing material of an entity. The main purpose is testing the (currently) experimental transferControlToOffscreen method.
The animation is an updated version of the existing WarpSpeed.js library. There are two was two run the calculation:
- On the main thread.
- In a web worker.
WarpSpeed is a perfect way to demonstrate how important it is to not to block the main thread because it's highly tweakable until rich significant FPS drops and looks pretty cool.
Simple usage is simple, download and embed the package and write something like:
<a-box warpspeed></a-box>
For more detailed usage check the demo branch and its LIVE demonstration page with GUI for the properties.
Speed change removed from the original script because of A-Frame's animation capability.
Property | Description | Default Value |
---|---|---|
width | Texture width in pixel. | 512 |
height | Texture height in pixel. | 512 |
speed | The speed at which we're moving through the starfield. | 0.7 |
density | Star density. | 25.7 |
useCircles | Drawing squares instead of circles is faster, but looks less pretty. | true |
depthAlpha | Stars that are further from the camera are less opaque. Slower. | true |
warpEffect | Draws lines instead of just the stars. Slower. | true |
warpEffectLength | How long the warp strikes are in depth units. | 5 |
starScale | Size of stars. | 3 |
backgroundColor | Background color. | #100a1a |
starColor | Star color. | #ffffff |
useWorker | Run calculations in a web worker. | false |
If the browser is not capable of running the requirements for web worker calculation useWorker
automatically set to false.
Unlicensed, the original texture version requires LGPL3+ which is not in GitHub templates.