andras/sdf-2d-demo
andras/sdf-2d-demo
Watch
1
0
Fork
You've already forked sdf-2d-demo
 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Update to use new SDF2D version

Browse source
This commit is contained in:
schmelczerandras 2020-10-19 12:22:08 +02:00
commit 9062ae04a3
7 changed files with 160 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/scenes/blob/blob-scene.ts
View file

@ -1,65 +1,66 @@
import { vec2 } from 'gl-matrix';
import { CircleFactory, CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
import { CircleFactory, CircleLight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { settings } from '../../settings';
import { Scene } from '../scene';
import { Blob } from './blob';
const Circle = CircleFactory(rgb255(119, 143, 120));
export class BlobScene implements Scene {
private renderer: Renderer;
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
public async initialize(
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
): Promise<void> {
public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(canvas, [
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2],
},
Blob.descriptor,
]);
this.renderer.setRuntimeSettings({
ambientLight: rgb255(89, 25, 115),
colorPalette: [
rgb255(0, 0, 0),
rgb255(119, 143, 120),
rgb255(119, 143, 120),
rgb255(224, 96, 126),
],
});
const { width, height } = this.canvas.getBoundingClientRect();
const length = vec2.length([width, height]);
this.blob = new Blob([width / 2, -length / 4 + length / 2]);
await runAnimation(
canvas,
[
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2],
},
Blob.descriptor,
],
this.drawNextFrame.bind(this),
{},
{
ambientLight: rgb255(89, 25, 115),
enableHighDpiRendering: true,
colorPalette: [
rgb255(0, 0, 0),
rgb255(119, 143, 120),
rgb255(119, 143, 120),
rgb255(224, 96, 126),
],
}
);
}
private blob: Blob;
private deltaSinceStart = 0;
public drawNextFrame(
private drawNextFrame(
renderer: Renderer,
currentTime: DOMHighResTimeStamp,
deltaTime: DOMHighResTimeStamp
): void {
): boolean {
const { width, height } = this.canvas.getBoundingClientRect();
this.deltaSinceStart += deltaTime;
this.renderer.setViewArea([0, height], [width, height]);
renderer.setViewArea([0, height], [width, height]);
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = prettyPrint(this.renderer.insights);
this.overlay.innerText = prettyPrint(renderer.insights);
const length = vec2.length([width, height]);
const q = (this.deltaSinceStart % 8000) / 4300;
this.blob.animate(this.deltaSinceStart);
const q = (currentTime % 8000) / 4300;
this.blob.animate(currentTime);
[
new Circle([width / 2, -length / 4], length / 2),
this.blob,
@ -79,12 +80,8 @@ export class BlobScene implements Scene {
rgb(0, 0.8, 1),
1
),
].forEach((d) => this.renderer.addDrawable(d));
].forEach((d) => renderer.addDrawable(d));
this.renderer.renderDrawables();
}
public destroy(): void {
this.renderer.destroy();
return currentTime < settings.sceneTimeInMilliseconds;
}
}

73
src/scenes/metaball/metaball-scene.ts
View file

@ -1,45 +1,20 @@
import { vec2 } from 'gl-matrix';
import { compile, Flashlight, Renderer, rgb, rgb255 } from 'sdf-2d';
import { Flashlight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { Random } from '../../helper/random';
import { settings } from '../../settings';
import { Scene } from '../scene';
import { Metaball, MetaCircle } from './metaball';
export class MetaballScene implements Scene {
private circles: Array<Metaball> = [];
private renderer: Renderer;
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
public async initialize(
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
): Promise<void> {
public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(canvas, [
{
...Flashlight.descriptor,
shaderCombinationSteps: [0, 2],
},
{
...MetaCircle.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16],
},
]);
this.renderer.setRuntimeSettings({
ambientLight: rgb(0.1, 0.1, 0.3),
colorPalette: [
rgb(1, 1, 1),
rgb(1, 1, 1),
rgb(1, 1, 1),
rgb(1, 1, 1),
rgb(1, 1, 0),
rgb255(186, 59, 70),
],
});
for (let i = 0; i < 16; i++) {
this.circles.push(
@ -55,26 +30,46 @@ export class MetaballScene implements Scene {
)
);
}
await runAnimation(
canvas,
[
{
...Flashlight.descriptor,
shaderCombinationSteps: [0, 2],
},
{
...MetaCircle.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16],
},
],
this.drawNextFrame.bind(this),
{},
{
ambientLight: rgb(0.1, 0.1, 0.3),
enableHighDpiRendering: true,
}
);
}
public drawNextFrame(
private drawNextFrame(
renderer: Renderer,
currentTime: DOMHighResTimeStamp,
deltaTime: DOMHighResTimeStamp
): void {
): boolean {
const { width, height } = this.canvas.getBoundingClientRect();
const viewAreaWidth = width / Math.max(width, height);
const viewAreaHeight = height / Math.max(width, height);
this.renderer.setViewArea(
renderer.setViewArea(
vec2.fromValues(0, viewAreaHeight),
vec2.fromValues(viewAreaWidth, viewAreaHeight)
);
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = prettyPrint(this.renderer.insights);
this.overlay.innerText = prettyPrint(renderer.insights);
this.circles.forEach((c) => {
c.animate(currentTime / 2000, viewAreaWidth, viewAreaHeight);
this.renderer.addDrawable(c.shape);
renderer.addDrawable(c.shape);
});
const light1 = new Flashlight(
@ -90,13 +85,9 @@ export class MetaballScene implements Scene {
vec2.fromValues(-1, 1)
);
this.renderer.addDrawable(light1);
this.renderer.addDrawable(light2);
renderer.addDrawable(light1);
renderer.addDrawable(light2);
this.renderer.renderDrawables();
}
public destroy(): void {
this.renderer.destroy();
return currentTime < settings.sceneTimeInMilliseconds;
}
}

4
src/scenes/metaball/metaball.ts
View file

@ -1,8 +1,8 @@
import { vec2 } from 'gl-matrix';
import { MetaCircleFactory } from 'sdf-2d';
import { MetaCircleFactory, rgb255 } from 'sdf-2d';
import { Random } from '../../helper/random';
export const MetaCircle = MetaCircleFactory(5);
export const MetaCircle = MetaCircleFactory(rgb255(186, 59, 70));
export class Metaball {
public shape = new MetaCircle(vec2.create(), Random.getRandomInRange(0.025, 0.075));

4
src/scenes/rain/droplet.ts
View file

@ -1,8 +1,8 @@
import { vec2 } from 'gl-matrix';
import { DropletFactory } from 'sdf-2d';
import { DropletFactory, rgb } from 'sdf-2d';
import { Random } from '../../helper/random';
export const Droplet = DropletFactory(1);
export const Droplet = DropletFactory(rgb(0.3, 1, 1));
export class DropletWrapper {
public readonly drawable: InstanceType<typeof Droplet>;

65
src/scenes/rain/rain-scene.ts
View file

@ -1,6 +1,7 @@
import { vec2 } from 'gl-matrix';
import { CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
import { CircleLight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { settings } from '../../settings';
import { Scene } from '../scene';
import { Droplet, DropletWrapper } from './droplet';
@ -9,47 +10,47 @@ export class RainScene implements Scene {
private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 2);
private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 2);
private renderer: Renderer;
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
public async initialize(
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
): Promise<void> {
public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(canvas, [
{
...Droplet.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 2],
},
]);
this.renderer.setRuntimeSettings({
ambientLight: rgb(0.2, 0.2, 0.2),
colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
});
for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
this.droplets.push(new DropletWrapper());
}
await runAnimation(
canvas,
[
{
...Droplet.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 2],
},
],
this.drawNextFrame.bind(this),
{},
{
ambientLight: rgb(0.2, 0.2, 0.2),
enableHighDpiRendering: true,
}
);
}
public drawNextFrame(
private drawNextFrame(
renderer: Renderer,
currentTime: DOMHighResTimeStamp,
deltaTime: DOMHighResTimeStamp
): void {
): boolean {
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);
renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
this.overlay.innerText = prettyPrint(renderer.insights);
const viewAreaSize = this.renderer.viewAreaSize;
const viewAreaSize = renderer.viewAreaSize;
vec2.set(this.light1.center, 0, viewAreaSize.y / 2);
vec2.set(this.light2.center, viewAreaSize.x, viewAreaSize.y / 2);
@ -57,13 +58,9 @@ export class RainScene implements Scene {
this.droplets.forEach((d) => d.animate(currentTime, viewAreaSize));
[...this.droplets.map((d) => d.drawable), this.light1, this.light2].forEach((d) =>
this.renderer.addDrawable(d)
renderer.addDrawable(d)
);
this.renderer.renderDrawables();
}
public destroy(): void {
this.renderer.destroy();
return currentTime < settings.sceneTimeInMilliseconds;
}
}

4
src/scenes/scene.ts
View file

@ -1,5 +1,3 @@
export interface Scene {
initialize(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void>;
drawNextFrame(currentTime: DOMHighResTimeStamp, deltaTime: DOMHighResTimeStamp): void;
destroy(): void;
run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void>;
}

86
src/scenes/tunnel-scene.ts
View file

@ -1,24 +1,24 @@
import { vec2, vec3 } from 'gl-matrix';
import {
CircleLight,
compile,
FilteringOptions,
InvertedTunnelFactory,
Renderer,
renderNoise,
rgb,
runAnimation,
WrapOptions,
} from 'sdf-2d';
import { clamp } from '../helper/clamp';
import { last } from '../helper/last';
import { prettyPrint } from '../helper/pretty-print';
import { Random } from '../helper/random';
import { settings } from '../settings';
import { Scene } from './scene';
const InvertedTunnel = InvertedTunnelFactory(3);
export class TunnelScene implements Scene {
private renderer: Renderer;
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
@ -68,73 +68,69 @@ export class TunnelScene implements Scene {
}
}
public async initialize(
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
): Promise<void> {
public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
const noiseTexture = await renderNoise([1024, 1], 15, 1);
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(canvas, [
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 6, 7],
},
]);
this.renderer.setRuntimeSettings({
isWorldInverted: true,
ambientLight: rgb(0.35, 0.1, 0.45),
colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
textures: {
noiseTexture: {
source: noiseTexture,
overrides: {
maxFilter: FilteringOptions.LINEAR,
wrapS: WrapOptions.MIRRORED_REPEAT,
},
},
},
});
for (let i = 0; i < 200; i++) {
this.generateTunnel();
}
await runAnimation(
canvas,
[
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 6, 7],
},
],
this.drawNextFrame.bind(this),
{ lightPenetrationRatio: 0.5 },
{
isWorldInverted: true,
enableHighDpiRendering: true,
ambientLight: rgb(0.35, 0.1, 0.45),
colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
textures: {
noiseTexture: {
source: noiseTexture,
overrides: {
maxFilter: FilteringOptions.LINEAR,
wrapS: WrapOptions.MIRRORED_REPEAT,
},
},
},
}
);
}
private deltaSinceStart = 0;
public drawNextFrame(
private drawNextFrame(
renderer: Renderer,
currentTime: DOMHighResTimeStamp,
deltaTime: DOMHighResTimeStamp
): void {
): boolean {
const { width, height } = this.canvas.getBoundingClientRect();
this.deltaSinceStart += deltaTime;
const startX = this.deltaSinceStart / 3;
const endX = startX + width;
this.renderer.setViewArea(
vec2.fromValues(startX, height),
vec2.fromValues(width, height)
);
renderer.setViewArea(vec2.fromValues(startX, height), vec2.fromValues(width, height));
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = prettyPrint(this.renderer.insights);
this.overlay.innerText = prettyPrint(renderer.insights);
[
...this.tunnels.filter(
(t) => startX < t.to.x + t.toRadius && t.from.x - t.fromRadius <= endX
),
...this.lights,
].forEach((d) => this.renderer.addDrawable(d));
].forEach((d) => renderer.addDrawable(d));
this.renderer.renderDrawables();
}
public destroy(): void {
this.renderer.destroy();
return currentTime < settings.sceneTimeInMilliseconds;
}
}