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 and your own render pipeline for your project.

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

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
    };
}

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

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

• 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

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

• Readd transmission material
• HDR bloom example
• SMAA

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

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

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

• WebXR examples

• Documentation

• Releases