andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests 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
parent f0a9c1df68
commit 9062ae04a3
14 changed files with 160 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -45,7 +45,7 @@
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.3",
"sass-loader": "^9.0.3",
"sdf-2d": "^0.5.0",
"sdf-2d": "^0.6.0",
"source-map-loader": "^1.1.0",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^2.3.8",

2
src/helper/pretty-print.ts
View file

@ -1,4 +1,4 @@
export const prettyPrint = (o: any): string =>
JSON.stringify(o, (_, v) => (v.toFixed ? Number(v.toFixed(3)) : v), ' ')
JSON.stringify(o, (_, v) => (v?.toFixed ? Number(v.toFixed(3)) : v), ' ')
.replace(/("|,|{|^\n)/g, '')
.replace(/(\W*}\n?)+/g, '\n\n');

2
src/index.html
View file

@ -25,7 +25,7 @@
<a id="info" href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
<p>SDF-2D</p>
<img src="static/logo-white.svg" alt="logo" />
<img width="64" height="64" src="static/logo-white.svg" alt="logo" />
</a>
<code id="overlay"></code>
<button id="toggle-text">Loading…</button>

41
src/index.ts
View file

@ -7,22 +7,18 @@ import '../static/logo-white.svg';
import '../static/no-change/404.html';
import '../static/no-change/robots.txt';
import '../static/og-image.png';
import { DeltaTimeCalculator } from './helper/delta-time-calculator';
import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
import { BlobScene } from './scenes/blob/blob-scene';
import { MetaballScene } from './scenes/metaball/metaball-scene';
import { RainScene } from './scenes/rain/rain-scene';
import { Scene } from './scenes/scene';
import { TunnelScene } from './scenes/tunnel-scene';
import './styles/index.scss';
const scenes = [TunnelScene, MetaballScene, RainScene, BlobScene];
const sceneIntervalInSeconds = 8;
glMatrix.setMatrixArrayType(Array);
removeUnnecessaryOutlines();
const deltaTimeCalculator = new DeltaTimeCalculator();
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const errorText = document.querySelector('#error-text') as HTMLParamElement;
const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
@ -43,44 +39,13 @@ const handleTextToggle = () => {
toggleButton.addEventListener('click', handleTextToggle);
handleTextToggle();
const handleScene = async (
currentScene: Scene,
NextSceneConstructor: new () => Scene
): Promise<Scene> => {
let triggerIsOver: () => void;
const isOver = new Promise((resolve) => (triggerIsOver = resolve));
let timeSinceStart = 0;
const handleFrame = (currentTime: DOMHighResTimeStamp) => {
const deltaTime = deltaTimeCalculator.getNextDeltaTime(currentTime);
currentScene.drawNextFrame(currentTime, deltaTime);
if ((timeSinceStart += deltaTime) > sceneIntervalInSeconds * 1000) {
triggerIsOver();
} else {
requestAnimationFrame(handleFrame);
}
};
requestAnimationFrame(handleFrame);
await isOver;
currentScene.destroy();
const nextScene = new NextSceneConstructor();
await nextScene.initialize(canvas, overlay);
return nextScene;
};
const main = async () => {
try {
let i = 0;
let currentScene: Scene = new scenes[i++]();
await currentScene.initialize(canvas, overlay);
for (;;) {
currentScene = await handleScene(currentScene, scenes[i++ % scenes.length]);
const currentScene = new scenes[i++ % scenes.length]();
await currentScene.run(canvas, overlay);
}
} catch (e) {
console.error(e);

59
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, [
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.renderer.setRuntimeSettings({
],
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),
],
});
const { width, height } = this.canvas.getBoundingClientRect();
const length = vec2.length([width, height]);
this.blob = new Blob([width / 2, -length / 4 + length / 2]);
}
);
}
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>;

51
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,17 +10,19 @@ 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, [
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],
@ -28,28 +31,26 @@ export class RainScene implements Scene {
...CircleLight.descriptor,
shaderCombinationSteps: [0, 2],
},
]);
this.renderer.setRuntimeSettings({
],
this.drawNextFrame.bind(this),
{},
{
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());
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>;
}

52
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,15 +68,19 @@ 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, [
for (let i = 0; i < 200; i++) {
this.generateTunnel();
}
await runAnimation(
canvas,
[
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
@ -85,10 +89,12 @@ export class TunnelScene implements Scene {
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 6, 7],
},
]);
this.renderer.setRuntimeSettings({
],
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: {
@ -100,41 +106,31 @@ export class TunnelScene implements Scene {
},
},
},
});
for (let i = 0; i < 200; i++) {
this.generateTunnel();
}
);
}
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;
}
}

3
src/settings.ts Normal file
View file

@ -0,0 +1,3 @@
export const settings = {
sceneTimeInMilliseconds: 7000,
};

7
src/styles/index.scss
View file

@ -66,12 +66,15 @@ body {
#overlay {
right: 0;
font-size: 0.75rem;
white-space: pre;
white-space: pre-wrap;
overflow-wrap: break-word;
font-family: 'Lucida Console', Monaco, monospace;
font-size: 0.75rem;
max-width: 400px;
@media (max-width: $breakpoint) {
font-size: 0.6rem;
max-width: 200px;
}
}

1
src/styles/mixins.scss
View file

@ -1,5 +1,6 @@
@mixin card {
backdrop-filter: blur(16px);
background-color: rgba(0, 0, 0, 0.15);
border: 2px solid white;
border-radius: 12px;