t3d-effect-composer

A high-performance, highly extensible post-processing effects library for t3d.js.

Examples — Documents(文档)

Features

• Post-processing Effects: SSAO/GTAO, SSR, Color Correction, Depth of Field, Bloom, FXAA, Chromatic Aberration, Vignetting, Blur Edge, Film Grain, and more
• Mesh Effects: Inner Glow, Glow, Soft Glow, Motion Tailing, Radial Tailing, Ghosting, Outline, and more
• Extended Rendering: Decal Projection, Lens Flare, LUT Color Grading, Overlay Compositing, Sketch Rendering, UV Debugging, Volume Rendering, and more

Running Examples

To run the examples locally:

1. Clone the repository
2. Install dependencies for examples:

   npm run install-examples

3. Start a local server in the examples directory and open any HTML file

The examples demonstrate various effects and features of the t3d-effect-composer library.

Quick Start

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const gl = canvas.getContext('webgl2', {
    antialias: true,
    alpha: false,
    stencil: true
});
const renderer = new t3d.WebGLRenderer(gl);
const screenRenderTarget = new t3d.ScreenRenderTarget(canvas);
screenRenderTarget.setColorClearValue(0.1, 0.1, 0.1, 1);

const effectComposer = new t3d.DefaultEffectComposer(width, height, {});

const scene = new t3d.Scene();

const geometry = new t3d.BoxGeometry(8, 8, 8);
const material = new t3d.PBRMaterial();
const mesh = new t3d.Mesh(geometry, material);
scene.add(mesh);

const ambientLight = new t3d.AmbientLight(0xffffff);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff);
directionalLight.position.set(-5, 5, 5);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.position.set(0, 10, 30);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

function loop(count) {
    requestAnimationFrame(loop);
    
    mesh.euler.y = count / 1000 * .5; // rotate cube

    scene.updateMatrix();
    scene.updateRenderStates(camera);
    scene.updateRenderQueue(camera);

    effectComposer.render(renderer, scene, camera, screenRenderTarget);
}
requestAnimationFrame(loop);

function onWindowResize() {
    width = window.innerWidth || 2;
    height = window.innerHeight || 2;

    camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);

    screenRenderTarget.resize(width, height);
    effectComposer.resize(width, height);
}
window.addEventListener("resize", onWindowResize, false);