A plugin that adds deferred lighting to PixiJS.
Note: This modules requires v7.0.0+ of PixiJS and v2.0.1+ of @pixi/layers.
You have to create three layers: one for sprites, one for their normals and one for lights. Sprites and normals are rendered to temporary RenderTexture, and lights have those two textures as an input.
// Get class references
import {Application, Sprite, Container, lights} from 'pixi.js';
import {Layer, Stage} from '@pixi/layers';
import {diffuseGroup, normalGroup, lightGroup, PointLight} from '@pixi/lights';
// Create new application
const app = new Application({
backgroundColor: 0x000000, // Black is required!
width: 800,
height: 600
});
document.body.appendChild(app.view);
// Use the pixi-layers Stage instead of default Container
app.stage = new Stage();
// Add the background diffuse color
const diffuse = Sprite.fromImage('images/BGTextureTest.jpg');
diffuse.parentGroup = diffuseGroup;
// Add the background normal map
const normals = Sprite.fromImage('images/BGTextureNORM.jpg');
normals.parentGroup = normalGroup;
// Create the point light
const light = new PointLight(0xffffff, 1);
light.x = app.screen.width / 2;
light.y = app.screen.height / 2;
// Create a background container
const background = new Container();
background.addChild(
normals,
diffuse,
light
);
app.stage.addChild(
// put all layers for deferred rendering of normals
new Layer(diffuseGroup),
new Layer(normalGroup),
new Layer(lightGroup),
// Add the lights and images
background
);If you want to use light shaders inside a filter, make sure its full-screen:
app.stage.filters = [new BlurFilter()];
app.stage.filterArea = app.screen;Navigate pixi-lights npm package, take dist/pixi-lights.js file.
<script src='lib/pixi.js'></script>
<script src='lib/pixi-lights.umd.js'></script>all classes can be accessed through PIXI.lights global namespace.
You normally don't need to build this module, you can just download a release from the releases page.
Then you can install dependencies and build:
npm i && npm run buildThat will output the built distributables to ./lib and ./dist.
- More lighting types, left are:
- Spot lights
- Hemisphere lights
- Area lights
- Add dynamic shadows
- Write tests!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
