feat: Lighting (#3824)
Basic lighting system huzzah! big thanks to @jyoung4242 for struggling and pioneering this approach in their original branch https://github.com/jyoung4242/canvasOverlayLighting
https://github.com/user-attachments/assets/33a49359-9824-4d31-97f4-e76a208249c0
## Features
Lighting is potentially performance impacting so we decided to flag it on the engine config like physics
```typescript
const game = new ex.Engine({
lighting: true,
...
});
```
Additionally the ambient light is configured in the engine config as well. It can be overriden per scene if desired by updating the LightingSystem args.
```typescript
const game = new ex.Engine({
lighting: {
enabled: true,
ambientIntensity: 0.1,
ambientColor: ex.Color.fromRGB(60, 60, 200)
}
});
```
1. Point Light Component
2. Cone Light Component
3. Occluders! (The thing that cast shadows
We have 3 by default
Box, Circle, and Polygon
```typescript
var crate = new ex.Actor({ pos: ex.vec(520, 260), width: 40, height: 40, color: ex.Color.Brown });
crate.addComponent(new ex.LightOccluderComponent({ shape: { kind: 'box', width: 40, height: 40 } }));
crate.actions.repeatForever((ctx) => ctx.rotateBy({ angleRadiansOffset: Math.PI, duration: 4000 }));
game.add(crate);
var pillar = new ex.Actor({ pos: ex.vec(300, 180), radius: 25, color: ex.Color.Gray });
pillar.addComponent(new ex.LightOccluderComponent({ shape: { kind: 'circle', radius: 25 } }));
game.add(pillar);
var wedge = new ex.Actor({
pos: ex.vec(460, 460),
color: ex.Color.DarkGray,
collider: ex.Shape.Polygon([ex.vec(-30, 20), ex.vec(30, 20), ex.vec(0, -30)])
});
wedge.addComponent(
new ex.LightOccluderComponent({ shape: { kind: 'polygon', vertices: [ex.vec(-30, 20), ex.vec(30, 20), ex.vec(0, -30)] } })
);
game.add(wedge);
```
5. Darkness Component
Whole screen darkness overlay (note missing width/height)
```typescript
var environment = new ex.Actor({ name: 'environment' });
environment.addComponent(new ex.DarknessComponent({
color: ex.Color.fromRGB(0, 0, 10),
intensity: 0.9,
}));
game.add(environment);
```
Specific area darkness with width/height
```typescript
var room = new ex.Actor({ name: 'room', pos: ex.vec(750, 150) });
room.addComponent(new ex.DarknessComponent({
color: ex.Color.fromRGB(5, 5, 20),
intensity: 0.95,
width: 300,
height: 200,
}));
game.add(room);
```
6. Lighting System
Uses a ex.ScreenElement -> ex.Canvas under the hood, you can specify the z axis that shadows live.
This is using 2D canvas destination-out and radial gradients to make the "light" work.
7. Flickering System
Completely optional handles the flickering modulation behavior, primary and secondary frequencies configurable
Co-authored-by: Justin Young <62815737+jyoung4242@users.noreply.github.com>
feat: Shader Pipelines (#3828)
This PR adds Shader pipeline capabilities to Materials/PostProcessors!
https://github.com/user-attachments/assets/256bdf2c-c09d-40db-b5cd-0e0e1776729c
1. You can stack fragment shaders on each other and re-use them to mix/match effects
- Built in uniforms are passed through each pass
- We support lists of glsl fragment strings or ShaderPasses, and ShaderPipelines that can wrap up multipass effects into a convient package
3. This enables effects like Blur/Bloom/Glow (built in ShaderPipelines) that are only easily possible with multipass workflows
Example using multiple strings
```typescript
// 3. Custom 2-pass pipeline from bare glsl strings
var redOnly = ex.glsl`
in vec2 v_uv;
uniform sampler2D u_image;
out vec4 fragColor;
void main() {
vec4 color = texture(u_image, v_uv);
fragColor = vec4(color.r + color.g + color.b, 0.0, 0.0, color.a);
}`;
var pulseBlue = ex.glsl`
in vec2 v_uv;
uniform sampler2D u_image;
uniform float u_time_ms;
out vec4 fragColor;
void main() {
vec4 color = texture(u_image, v_uv);
float pulse = (sin(u_time_ms / 300.0) + 1.0) / 2.0;
fragColor = vec4(color.r, 0.0, pulse * color.r, color.a);
}`;
var tinted = new ex.Actor({ pos: ex.vec(480, 150) });
tinted.graphics.use(swordImage.toSprite());
tinted.graphics.material = new ex.Material({
name: 'tint-pipeline',
graphicsContext,
passes: [redOnly, pulseBlue]
});
```
Built in effects!
```typescript
var bloomEffect = new ex.BloomEffect({ graphicsContext, threshold: 0.3, intensity: 1.5 });
var blooming = new ex.Actor({ pos: ex.vec(780, 150) });
blooming.graphics.use(swordImage.toSprite());
blooming.graphics.material = new ex.Material({
name: 'bloom-material',
graphicsContext,
passes: bloomEffect,
padding: 32
});
game.add(blooming);
```
Accidental bug fixes
- The time based uniforms in post processors were counting N times based on the number of postprocessors
This was re-implemented resurrected from my old branch back onto main
* https://github.com/excaliburjs/Excalibur/compare/main...feat/shader-pipelines
Huge thanks to Andrew Adamson's tutorials and code samples that provided the inspiration for the framebuffer technique
* https://youtu.be/bAq9Zk7BAWo?si=f4h0rBBR9T5yaS2W
* https://github.com/scriptfoundry/WebGL2-Videos-Materials/blob/main/25.framebuffer.basics.js
feat: Shader Pipelines (#3828)
This PR adds Shader pipeline capabilities to Materials/PostProcessors!
https://github.com/user-attachments/assets/256bdf2c-c09d-40db-b5cd-0e0e1776729c
1. You can stack fragment shaders on each other and re-use them to mix/match effects
- Built in uniforms are passed through each pass
- We support lists of glsl fragment strings or ShaderPasses, and ShaderPipelines that can wrap up multipass effects into a convient package
3. This enables effects like Blur/Bloom/Glow (built in ShaderPipelines) that are only easily possible with multipass workflows
Example using multiple strings
```typescript
// 3. Custom 2-pass pipeline from bare glsl strings
var redOnly = ex.glsl`
in vec2 v_uv;
uniform sampler2D u_image;
out vec4 fragColor;
void main() {
vec4 color = texture(u_image, v_uv);
fragColor = vec4(color.r + color.g + color.b, 0.0, 0.0, color.a);
}`;
var pulseBlue = ex.glsl`
in vec2 v_uv;
uniform sampler2D u_image;
uniform float u_time_ms;
out vec4 fragColor;
void main() {
vec4 color = texture(u_image, v_uv);
float pulse = (sin(u_time_ms / 300.0) + 1.0) / 2.0;
fragColor = vec4(color.r, 0.0, pulse * color.r, color.a);
}`;
var tinted = new ex.Actor({ pos: ex.vec(480, 150) });
tinted.graphics.use(swordImage.toSprite());
tinted.graphics.material = new ex.Material({
name: 'tint-pipeline',
graphicsContext,
passes: [redOnly, pulseBlue]
});
```
Built in effects!
```typescript
var bloomEffect = new ex.BloomEffect({ graphicsContext, threshold: 0.3, intensity: 1.5 });
var blooming = new ex.Actor({ pos: ex.vec(780, 150) });
blooming.graphics.use(swordImage.toSprite());
blooming.graphics.material = new ex.Material({
name: 'bloom-material',
graphicsContext,
passes: bloomEffect,
padding: 32
});
game.add(blooming);
```
Accidental bug fixes
- The time based uniforms in post processors were counting N times based on the number of postprocessors
This was re-implemented resurrected from my old branch back onto main
* https://github.com/excaliburjs/Excalibur/compare/main...feat/shader-pipelines
Huge thanks to Andrew Adamson's tutorials and code samples that provided the inspiration for the framebuffer technique
* https://youtu.be/bAq9Zk7BAWo?si=f4h0rBBR9T5yaS2W
* https://github.com/scriptfoundry/WebGL2-Videos-Materials/blob/main/25.framebuffer.basics.js