fun: no lights... promise

app/react-components/pixi/entity.jsx

@@ -67,12 +67,12 @@ function Entity({entity, ...rest}) {
           entity={entity}
         />
       )}
-      {entity.Light && (
+      {/* {entity.Light && (
         <Light
           x={entity.Position.x}
           y={entity.Position.y}
         />
-      )}
+      )} */}
       {debug && entity.Position && (
         <Crosshair x={entity.Position.x} y={entity.Position.y} />
       )}

app/react-components/pixi/extensions.js

@@ -1,11 +1,9 @@
 import {ExtensionType} from '@pixi/core';
-import {Layer, Stage as LayerStage} from '@pixi/layers';
+import {Stage as LayerStage} from '@pixi/layers';
 
 import {
   AmbientLight,
-  diffuseGroup,
-  normalGroup,
-  lightGroup,
+  deferredLighting,
 } from './lights.js';
 
 export const ApplicationStageLayers = {
@@ -25,11 +23,10 @@ export const ApplicationStageLights = {
     destroy: function() {},
     init: function() {
       const {stage} = this;
-      stage.addChild(new Layer(diffuseGroup));
-      stage.addChild(new Layer(normalGroup));
-      stage.addChild(new Layer(lightGroup));
-      // stage.addChild(new AmbientLight(0x2244ff, 0.1));
-      stage.addChild(new AmbientLight(0xffffff, 1));
+      deferredLighting.addToStage(stage);
+      // const ambientLight = new AmbientLight(0x2244cc, 0.25);
+      const ambientLight = new AmbientLight(0xffffff, 1);
+      stage.addChild(ambientLight);
     },
   },
 };

app/react-components/pixi/light.jsx

@@ -1,19 +1,23 @@
 import {PixiComponent} from '@pixi/react';
 
-let PointLight;
-if ('undefined' !== typeof window) {
-  ({PointLight} = await import('@pixi/lights'));
-}
+import {PointLight} from './lights.js';
 
 const LightInternal = PixiComponent('Light', {
   create({x, y}) {
-    const light = new PointLight(0xffffff, 1);
+    const light = new PointLight(0xffffff - 0x2244cc, 1);
     light.position.set(x, y);
     // light.shader.program.fragmentSrc = light.shader.program.fragmentSrc.replace(
     //   'float D = length(lightVector)',
-    //   'float D = length(lightVector) / 2.0',
+    //   'float D = length(lightVector) / 1.0',
     // );
-    // light.falloff = [1, 10, 100]
+    // light.shader.program.fragmentSrc = light.shader.program.fragmentSrc.replace(
+    //   'intensity = diffuse * attenuation',
+    //   'intensity = diffuse * (attenuation * 2.0)',
+    // );
+    // light.falloff = [0.5, 5, 50];
+    // light.falloff = light.falloff.map((n, i) => n / (2 + i));
+    // light.parentGroup = entityLighting.lightGroup;
+    // delete light.parentGroup;
     return light;
   },
   applyProps(light, oldProps, {x, y}) {

app/react-components/pixi/lights.js

@@ -1,7 +1,63 @@
-let AmbientLight, diffuseGroup, normalGroup, lightGroup;
+import {Group, Layer} from '@pixi/layers';
 
-if ('undefined' !== typeof window) {
-  ({AmbientLight, diffuseGroup, normalGroup, lightGroup} = await import('@pixi/lights'));
+class LightLayer extends Layer {
+  $$diffuseTexture;
+  $$normalTexture;
+  constructor(group, diffuseLayer, normalLayer) {
+    super(group);
+    this.$$diffuseLayer = diffuseLayer;
+    this.$$diffuseTexture = diffuseLayer.getRenderTexture();
+    this.$$normalTexture = normalLayer.getRenderTexture();
+  }
+  get diffuseTexture() {
+    return this.$$diffuseTexture;
+  }
+  get normalTexture() {
+    return this.$$normalTexture;
+  }
 }
 
-export {AmbientLight, diffuseGroup, normalGroup, lightGroup};
+class DeferredLighting {
+  diffuseGroup = new Group(0, false);
+  lightGroup = new Group(0, false);
+  normalGroup = new Group(0, false);
+  constructor() {
+    this.diffuseGroup.useRenderTexture = true;
+    this.diffuseLayer = new Layer(this.diffuseGroup);
+    this.normalGroup.useRenderTexture = true;
+    this.normalLayer = new Layer(this.normalGroup);
+    this.lightLayer = new LightLayer(
+      this.lightGroup,
+      this.diffuseLayer,
+      this.normalLayer,
+    );
+    this.lightLayer.alpha = 0.5;
+  }
+  addToStage(stage) {
+    stage.addChild(this.diffuseLayer);
+    stage.addChild(this.normalLayer);
+    stage.addChild(this.lightLayer);
+  }
+}
+
+export const deferredLighting = new DeferredLighting();
+
+let AmbientLight, PointLight;
+
+if ('undefined' !== typeof window) {
+  const Lights = await import('@pixi/lights');
+  AmbientLight = class AmbientLight extends Lights.AmbientLight {
+    constructor(...args) {
+      super(...args);
+      this.parentGroup = deferredLighting.lightGroup;
+    }
+  }
+  PointLight = class PointLight extends Lights.PointLight {
+    constructor(...args) {
+      super(...args);
+      this.parentGroup = deferredLighting.lightGroup;
+    }
+  }
+}
+
+export {AmbientLight, PointLight};

app/react-components/pixi/sprite.jsx

@@ -3,7 +3,7 @@ import {useEffect, useState} from 'react';
 
 import {useAsset} from '@/context/assets.js';
 
-import {diffuseGroup, normalGroup} from './lights.js';
+import {deferredLighting} from './lights.js';
 
 function textureFromAsset(asset, animation, frame) {
   if (!asset) {
@@ -50,10 +50,10 @@ export default function Sprite({entity, ...rest}) {
     frame,
   );
   if (mounted) {
-    mounted.parentGroup = diffuseGroup;
+    mounted.parentGroup = deferredLighting.diffuseGroup;
   }
   if (normalsMounted) {
-    normalsMounted.parentGroup = normalGroup;
+    normalsMounted.parentGroup = deferredLighting.normalGroup;
   }
   return (
     <>

app/react-components/pixi/tile-layer.jsx

@@ -8,7 +8,7 @@ import {CompositeTilemap} from '@pixi/tilemap';
 import {CHUNK_SIZE} from '@/constants.js';
 import {useAsset} from '@/context/assets.js';
 
-import {diffuseGroup, normalGroup} from './lights.js';
+import {deferredLighting} from './lights.js';
 
 const TileLayerInternal = PixiComponent('TileLayer', {
   create: ({group, tileLayer}) => {
@@ -60,7 +60,7 @@ const TileLayerInternal = PixiComponent('TileLayer', {
             }
             const parts = [
               extless,
-              ...(normalGroup === group ? ['normals'] : []),
+              ...(deferredLighting.normalGroup === group ? ['normals'] : []),
               tileLayer.data[ty * tileLayer.area.x + tx],
             ];
             tilemap.tile(
@@ -93,13 +93,13 @@ export default function TileLayer(props) {
       <TileLayerInternal
         {...props}
         asset={asset}
-        group={diffuseGroup}
+        group={deferredLighting.diffuseGroup}
         renderer={renderer}
       />
       <TileLayerInternal
         {...props}
         asset={normalsAsset}
-        group={normalGroup}
+        group={deferredLighting.normalGroup}
         renderer={renderer}
       />
     </>