-
Notifications
You must be signed in to change notification settings - Fork 48
Home
Patrick Schroen edited this page Jul 27, 2024
·
67 revisions
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 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
- 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
- Global illumination
- 3DLUT material
- TRAA
- GPU picking
- WebXR examples
- Documentation