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 two entry points depending on your use case.

The @alienkitty/alien.js/three entry point for three.js custom 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);

And the @alienkitty/alien.js/three/oimophysics entry point for OimoPhysics custom 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.world.getGravity());

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)
panel tracking crystals (debug)
crystals (orbit controls)
dark crystals (orbit controls)

shader

noise
fxaa
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
film grain
reflection (with fast Gaussian blur)
reflection (diffuse)
reflection (metalness)
reflection (normalmap)
reflection (DuDv)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
fresnel (with looping noise)
hologram
transmission (modified physically based material)
subsurface scattering (SSS)
volumetric light (god rays)
anamorphic light (fast anamorphic lens flares)
lensflare
lensflare (with anamorphic light)
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

pbr (texture loader thread)
cubemap uv (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)

test

wobble
oimophysics

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/three/*.html
npx eslint examples/three/transitions

Resources

• The Wiki
• Tween
• Changelog

See also

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