Home

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.

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

Class structure

class Template {
    constructor() {
        // Property initializers

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

    addListeners() {
        window.addEventListener('resize', this.onResize);
        // gsap.ticker.add(this.onUpdate);
        ticker.add(this.onUpdate);
        ticker.start();
    }

    removeListeners() {
        window.removeEventListener('resize', this.onResize);
        // gsap.ticker.remove(this.onUpdate);
        ticker.remove(this.onUpdate);
    }

    // Event handlers

    onResize = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const dpr = window.devicePixelRatio;
    };

    onUpdate = (time, delta, frame) => {
    };

    // Public methods

    animateIn = () => {
    };

    animateOut = () => {
    };

    ready = async () => {
    };

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

        // Dispose properties

        // Render targets

        // Materials

        // Geometries

        // Empty arrays
    };
}

Roadmap

Pending Safari support

• class fields (remove Babel, no more transpiling needed!)
• WebGL 2
• Import maps
• WebGPU

r19

• Add Wobble
• Add Flowmap
• Add Reflector
• Add Text
• Examples
• UIL

r20

• Implement pointer events
• Implement binary WebSockets
• Improved reflections
• CubeCamera example
• Baked occlusion example
• Subsurface scattering example
• Fresnel example
• Page transition example
• Add SoftShadows and example

v1.0

• Improved reflections
• Volumetric lighting example
• Lens flare example
• Revert to library
• Semantic versioning

v1.1

• Readd transmission material
• HDR bloom example
• SMAA

v1.2

• Removed transmission material
• Started OGL examples
• Improved motion blur
• Per-object motion blur material
• Add Fluid and examples

v1.3

• Unreal bloom upstream updates
• Improved reflections
• Improved soft shadows
• Kawase blur material
• Terrain examples
• Texture projection example
• Transitioning between scenes example
• Simplified InputManager example
• Enter portals example

v1.4

• Global illumination
• 3DLUT material
• TRAA
• GPU picking

v1.5

• WebXR examples

v1.6

• Documentation

Changelog

• Releases