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 @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, 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)

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
input manager
panel tracking (debug)
backdrop
infinite stars (RGB shift, debug)
black holes (per-object motion blur, volumetric light and fluid sim, debug, orbit controls)
stripe gradient (akella version)

shader

noise
fxaa
fxaa (OGL version)
smaa
blur (Gaussian blur)
blur (single pass Gaussian blur sum)
blur (Poisson-disc blur)
blur (bokeh blur)
blur (vignette blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
bloom (Unreal bloom with HDR)
basic lighting (color with position-based lighting, orbit camera, debug)
basic lighting (texture with position-based lighting, orbit camera, debug)
matcap
soft particles
tilt-shift (Gaussian blur)
dof (fake with bokeh blur, debug)
chromatic aberration
barrel distortion (RGB shift)
radial blur (RGB shift)
radial glow (position-based for fake volumetric light, orbit controls)
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)
light rays (god rays with Perlin noise texture, akella version)
volumetric light (god rays)
anamorphic light (fast anamorphic lens flares)
lensflare (position-based)
lensflare (position-based with anamorphic light)
motion blur (per-object and camera)
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
datamosh
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)
gravity balls (motion blur, SSS, volumetric light with lens flare, debug)
gravity balls (physics thread, motion blur, SSS, volumetric light with lens flare, debug)

audio

picking (fast 3d audio, debug)

thread

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

websockets

json (glitch)
binary (glitch)
multiuser fluid (binary, glitch)
multiuser blocks (binary, glitch)
multiuser balls (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
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
• Changelog

See also

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