Alien.js
[![NPM Package][npm]][npm-url] [![NPM Downloads][npm-downloads]][npmtrends-url] [![DeepScan][deepscan]][deepscan-url] [![Discord][discord]][discord-url]
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 multiple 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.jsimport { 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/meshbvh entry point for three-mesh-bvh utilities.
npm i three three-mesh-bvh @alienkitty/alien.jsimport { MeshPointsGenerator } from '@alienkitty/alien.js/three/meshbvh';
// ...
const pointsGenerator = new MeshPointsGenerator(mesh);
pointsGenerator.sampleCount = count;
pointsGenerator.build();
The @alienkitty/alien.js/three/oimophysics entry point for OimoPhysics utilities.
npm i three saharan/OimoPhysics @alienkitty/alien.jsimport { 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.jsimport { 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 crystal gltf (ktx2 basis and draco compressed) cubecamera (orbit camera, debug) cubecamera rainbow (orbit camera, debug) refraction cube (orbit camera, debug) wobble camera wobble input manager panel tracking (debug) graph tracking (debug) backdrop infinite stars (RGB shift, debug) cyberspace (RGB shift, debug) mesh points (motion blur, SSS, volumetric light with lens flare, debug) fibonacci sphere (motion blur, SSS, volumetric light with lens flare, 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 (debug) blur (Gaussian blur) blur (single pass Gaussian blur sum) blur (Poisson-disc blur) blur (bokeh 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) vignette blur (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 (options) 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, github) multiuser balls (websocket thread, github)
websockets
json (github) binary (github) multiuser fluid (binary, github) multiuser blocks (binary, github) multiuser balls (binary, github)
Getting started
Clone this repository and install its dependencies:
git clone https://github.com/alienkitty/alien.js
cd alien.js
npm i three three-mesh-bvh saharan/OimoPhysics --allow-git=root
cd examples
npm i
npm run build
npm startESLint
npm i -D eslint eslint-plugin-html @eslint/js globals --allow-git=root
npx eslint src
npx eslint examples/about/src
npx eslint examples/ogl/*.html
npx eslint examples/three/*.html
npx eslint examples/three/transitionsResources
See also
[npm]: https://img.shields.io/npm/v/@alienkitty/alien.js [npm-url]: https://www.npmjs.com/package/@alienkitty/alien.js [npm-downloads]: https://img.shields.io/npm/dw/@alienkitty/alien.js [npmtrends-url]: https://www.npmtrends.com/@alienkitty/alien.js [deepscan]: https://deepscan.io/api/teams/20020/projects/23996/branches/734567/badge/grade.svg [deepscan-url]: https://deepscan.io/dashboard#view=project&tid=20020&pid=23996&bid=734567 [discord]: https://img.shields.io/discord/773739853913260032 [discord-url]: https://discord.gg/9rSkAzB7PM