uwenayoallain / alien.js

👽 Future web pattern

Alien.js

Future web pattern

Alien.js is a MVC design pattern for building single-page applications with ES modules and three.js, intended for developers who are interested in creating their own shaders.

The post-processing workflow takes a more linear approach, so instead of abstracting with an effect composer, you work directly with the render targets, making it easier to build custom effects.

The idea is to keep it simple, with minimal abstraction, and to build websites more like a framework, which is why rollup.js is used instead for bundling.

In its design, everything is an ES module, all user interfaces and components follow the same class structure, making it easy to copy-paste from examples and between projects.

Note this design pattern intentionally does not use underscores or private fields, in favour of cleaner code.

Examples

ui

logo (interface)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
magnetic (component, svg)
tilt
styles
fps
fps panel
panel (standalone)
panel tracking (3d scene, debug)
page transition (3d scene)
page transition (3d scene, canvas mask transition)
smooth scroll (3d scene, debug)
smooth scroll (3d scene with skew effect, debug)
smooth scroll (3d scene with scroll direction and camera parallax, debug)
ufo (2d scene, smooth scroll with skew effect)

3d

ripple
cubemap uv
spherical cube uv
penrose triangle
abstract cube
polyhedron (orbit camera, debug)
cubecamera (orbit camera, debug)
cubecamera rainbow (orbit camera, debug)
camera wobble
camera transition (with motion blur and tilt shift effect, debug)
panel tracking (debug)

shader

noise
fxaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
matcap
pbr
soft particles
tilt shift (with Gaussian blur)
dof (fake with Bokeh blur, debug)
chromatic aberration
film grain
reflection (with fast Gaussian blur)
reflection (physically based material)
reflection (DuDv)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
fresnel (with looping noise)
hologram
subsurface scattering (SSS)
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
transition (mask)
transition (fade with RGB shift)
transition (scene)
transition (scene with page direction and camera parallax)
transition (scroll, debug)
transition (scroll direction and camera parallax, debug)
camera transition (with motion blur and tilt shift effect, debug)
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)
rhythm

thread

canvas (noise)
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)

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 (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)

Class structure

import { Events } from '../config/Events.js';
import { Interface } from '../utils/Interface.js';
import { Stage } from '../utils/Stage.js';

class Logo extends Interface {
    constructor() {
        super('.logo');

        this.initHTML();

        this.addListeners();
        this.onResize();
    }

    initHTML() {
        this.css({
            left: 50,
            top: 50,
            width: 64,
            height: 64,
            cursor: 'pointer',
            opacity: 0
        });

        this.image = new Interface(null, 'img');
        this.image.attr({ src: 'assets/images/alienkitty.svg' });
        this.image.css({
            position: 'relative',
            width: '100%'
        });
        this.add(this.image);
    }

    addListeners() {
        Stage.events.on(Events.RESIZE, this.onResize);
        this.element.addEventListener('mouseenter', this.onHover);
        this.element.addEventListener('mouseleave', this.onHover);
        this.element.addEventListener('click', this.onClick);
    }

    removeListeners() {
        Stage.events.off(Events.RESIZE, this.onResize);
        this.element.removeEventListener('mouseenter', this.onHover);
        this.element.removeEventListener('mouseleave', this.onHover);
        this.element.removeEventListener('click', this.onClick);
    }

    /**
     * Event handlers
     */

    onResize = () => {
        const { width, height } = Stage;

        if (width < height) {
            this.css({
                left: 30,
                top: 30,
                width: 40,
                height: 40
            });
        } else {
            this.css({
                left: 50,
                top: 50,
                width: 64,
                height: 64
            });
        }
    };

    onHover = ({ type }) => {
        this.clearTween();

        if (type === 'mouseenter') {
            this.tween({ opacity: 0.6 }, 300, 'easeOutCubic');
        } else {
            this.tween({ opacity: 1 }, 300, 'easeOutCubic');
        }
    };

    onClick = () => {
        // open('https://alien.js.org/');
        Stage.setPath('/');
    };

    /**
     * Public methods
     */

    animateIn = () => {
        this.tween({ opacity: 1 }, 600, 'easeInOutSine');
    };

    destroy = () => {
        this.removeListeners();

        return super.destroy();
    };
}

Getting started

Clone this repository template and install its dependencies:

git clone https://github.com/pschroen/alien.js
cd alien.js
npm i

# or

npx degit pschroen/alien.js my-app
cd my-app
npm i

# Serve at localhost:8080
npm run dev

# Build for production
npm run build

localhost:8080/ (without ui)
localhost:8080/?ui (with ui)
localhost:8080/?ui&orbit (with ui and orbit controls)
localhost:8080/?orbit (just orbit controls)

With examples

npm i
cd examples
npm i
npm run build
npm start

With ESLint

npm i -D eslint eslint-plugin-html @babel/eslint-parser
npx eslint src
npx eslint examples/*.html
npx eslint examples/about/src
npx eslint examples/transitions

Resources

• The Wiki
• Example project structure
• Tween
• Changelog

See also

• Three.js
• Post Processing
• OGL