Alien.js

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.

Usage

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#v1.2.3 @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);

Examples

transitions

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

3d

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
panel tracking (debug)
backdrop
infinite stars (RGB shift, debug)
black holes (with per-object motion blur, debug, orbit controls)
stripe gradient (akella version)

shader

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 (with Gaussian blur)
dof (fake with Bokeh blur, debug)
chromatic aberration
barrel distortion (RGB shift)
radial blur (RGB shift)
film grain
reflection (with 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)

physics

instancing (SSS, debug)
instancing (physics thread, SSS, debug)
picking (contact audio, SSS, debug)
picking (physics thread, contact audio, SSS, debug)

audio

picking (with fast 3d audio, debug)

thread

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

websockets

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

Getting started

Clone this repository and install its dependencies:

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

ESLint

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

Resources

• The Wiki
• Tween
• Changelog

See also

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