81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { vec2, vec3 } from 'gl-matrix';
|
|
import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
|
|
import { prettyPrint } from '../../helper/pretty-print';
|
|
import { Scene } from '../scene';
|
|
import { Droplet } from './droplet';
|
|
|
|
export class RainScene implements Scene {
|
|
private droplets: Array<Droplet> = [];
|
|
private light1: CircleLight = new CircleLight(
|
|
vec2.create(),
|
|
vec3.fromValues(0.5, 0, 1),
|
|
1
|
|
);
|
|
private light2: CircleLight = new CircleLight(
|
|
vec2.create(),
|
|
vec3.fromValues(1, 0, 0.5),
|
|
1
|
|
);
|
|
|
|
private renderer: Renderer;
|
|
private canvas: HTMLCanvasElement;
|
|
private overlay: HTMLDivElement;
|
|
|
|
public async initialize(
|
|
canvas: HTMLCanvasElement,
|
|
overlay: HTMLDivElement
|
|
): Promise<void> {
|
|
this.canvas = canvas;
|
|
this.overlay = overlay;
|
|
this.renderer = await compile(
|
|
canvas,
|
|
[
|
|
{
|
|
...Tunnel.descriptor,
|
|
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
|
|
},
|
|
{
|
|
...CircleLight.descriptor,
|
|
shaderCombinationSteps: [2],
|
|
},
|
|
],
|
|
[vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
|
|
);
|
|
|
|
this.renderer.setRuntimeSettings({
|
|
ambientLight: vec3.fromValues(0.45, 0.25, 0.45),
|
|
tileMultiplier: 10,
|
|
});
|
|
|
|
for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {
|
|
this.droplets.push(new Droplet());
|
|
}
|
|
}
|
|
|
|
public drawNextFrame(
|
|
currentTime: DOMHighResTimeStamp,
|
|
deltaTime: DOMHighResTimeStamp
|
|
): void {
|
|
const { width, height } = this.canvas.getBoundingClientRect();
|
|
this.renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
|
|
this.renderer.autoscaleQuality(deltaTime);
|
|
this.overlay.innerText = prettyPrint(this.renderer.insights);
|
|
|
|
const viewAreaSize = this.renderer.viewAreaSize;
|
|
|
|
vec2.set(this.light1.center, 0, viewAreaSize.y / 2);
|
|
vec2.set(this.light2.center, viewAreaSize.x, viewAreaSize.y / 2);
|
|
|
|
this.droplets.forEach((d) => d.animate(currentTime, viewAreaSize));
|
|
|
|
[...this.droplets.map((d) => d.drawable), this.light1, this.light2].forEach((d) =>
|
|
this.renderer.addDrawable(d)
|
|
);
|
|
|
|
this.renderer.renderDrawables();
|
|
}
|
|
|
|
public destroy(): void {
|
|
this.renderer.destroy();
|
|
}
|
|
}
|