This library is part of two sibling libraries, Space.js for UI, Panel components, Tween, Web Audio, loaders, utilities, and Alien.js for 3D utilities, materials, shaders and physics.

Alien.js is divided into three entry points depending on your use case.

The @alienkitty/alien.js/three entry point for three.js utilities and materials.

npm i three @alienkitty/alien.js

import { Vector3 } from 'three';
import { Wobble } from '@alienkitty/alien.js/three';

const position = new Vector3();
const wobble = new Wobble(position);
wobble.scale = 100;

function animate(time) {
    requestAnimationFrame(animate);

    console.log(position);
    wobble.update(time * 0.001 * 0.5); // seconds * 0.5
}

requestAnimationFrame(animate);

The @alienkitty/alien.js/three/oimophysics entry point for OimoPhysics utilities.

npm i three saharan/OimoPhysics @alienkitty/alien.js

import { OimoPhysics } from '@alienkitty/alien.js/three/oimophysics';

const physics = new OimoPhysics();
console.log(physics.getGravity());

And the @alienkitty/alien.js/ogl entry point for OGL material programs.

npm i ogl @alienkitty/alien.js

import { FXAAProgram } from '@alienkitty/alien.js/ogl';

// ...
const program = new FXAAProgram(gl);

page
canvas (mask)
shader (mask)
shader (fade with RGB shift)
scene
scene (page direction, camera parallax)
scroll (debug)
scroll (scroll direction, camera parallax, debug)
scroll (scroll direction, camera zoom, debug)
scroll (smooth scroll, debug)
scroll (smooth scroll with skew, debug)
scroll (smooth scroll with scroll direction, camera parallax, debug)
camera (motion blur, tilt shift, debug)

ripple
cubemap uv
spherical cube uv
penrose triangle
abstract cube
polyhedron (orbit camera, debug)
crystal gltf (orbit camera, debug, orbit controls)
cubecamera (orbit camera, debug)
cubecamera rainbow (orbit camera, debug)
camera wobble
input manager
panel tracking (debug)
backdrop
infinite stars (RGB shift, debug)
black holes (per-object motion blur, volumetric light and fluid, debug, orbit controls)
stripe gradient (akella version)

noise
fxaa
fxaa (OGL version)
smaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
bloom (Unreal bloom with HDR)
matcap
soft particles
tilt shift (Gaussian blur)
dof (fake with Bokeh blur, debug)
chromatic aberration
barrel distortion (RGB shift)
radial blur (RGB shift)
film grain
reflection (fast Gaussian blur)
reflection (diffuse)
reflection (metalness)
reflection (normalmap)
reflection (DuDv)
flowmap
flowmap (RGB shift)
flowmap (view)
fluid distortion
fluid distortion (RGB shift)
fluid distortion (view)
depth (aperture with dither)
fresnel (with looping noise)
hologram
subsurface scattering (SSS)
volumetric light (god rays)
anamorphic light (fast anamorphic lens flares)
lensflare
lensflare (with anamorphic light)
motion blur (per-object and camera, debug, orbit controls)
baked cube
baked cube (DuDv)
baked cube (SSS, debug)
baked abstract cube
baked abstract cube (DuDv)
baked abstract cube (SSS, debug)
baked spherical cube
baked spherical cube (DuDv)
baked spherical cube (SSS, debug)
soft shadows
text (MSDF text)
afterimage
alienkitty (2d scene, flowmap with RGB shift, MSDF text)

instancing (SSS, debug)
instancing (physics thread, SSS, debug)
picking (contact audio, SSS, debug)
picking (physics thread, contact audio, SSS, debug)
gravity balls (motion blur, SSS, volumetric light with lens flare, debug)
gravity balls (physics thread, motion blur, SSS, volumetric light with lens flare, debug)

picking (fast 3d audio, debug)

cubemap uv (texture and buffer geometry loader thread)
instancing (physics thread)
picking (physics thread)
multiuser blocks (websocket thread, glitch)

json (glitch)
binary (glitch)
multiuser fluid (binary, glitch)
multiuser blocks (binary, glitch)

Clone this repository and install its dependencies:

git clone https://github.com/alienkitty/alien.js
cd alien.js
npm i three saharan/OimoPhysics
cd examples
npm i
npm run build
npm start

npm i -D eslint eslint-plugin-html
npx eslint src
npx eslint examples/about/src
npx eslint examples/ogl/*.html
npx eslint examples/three/*.html
npx eslint examples/three/transitions

• The Wiki
• Tween
• Changelog

• Space.js
• Three.js
• Post Processing
• OGL