andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update project

Browse source
This commit is contained in:
schmelczerandras 2020-09-20 20:15:27 +02:00
parent bcbf4224c2
commit fd64d9491d
16 changed files with 311 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,2 @@
export const prettyPrint = (o: any): string =>
JSON.stringify(o, (_, v) => (v.toFixed ? Number(v.toFixed(2)) : v), ' ');

28
src/index.html
View file

@ -2,37 +2,23 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SDF-2D demo</title>
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="785" />
<meta property="og:image:width" content="1438" />
<meta property="og:image:height" content="638" />
<meta property="og:url" content="https://sdf2d.schmelczer.dev" />
<meta property="og:image" content="https://sdf2d.schmelczer.dev/og-image.jpg" />
<meta name="theme-color" content="#103783" />
<meta
name="description"
content="Some simple demos to showcase the possibilities of the sdf-2d library library. Click on the title to find out more."
/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="static/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="static/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="static/favicons/favicon-16x16.png"
/>
</head>
<body>
<noscript>Javascript is required for this website.</noscript>

11
src/index.ts
View file

@ -3,15 +3,18 @@ import '../static/favicons/apple-touch-icon.png';
import '../static/favicons/favicon-16x16.png';
import '../static/favicons/favicon-32x32.png';
import '../static/favicons/favicon.ico';
//import '../static/og-image.jpg';
import '../static/logo-white.svg';
import '../static/og-image.jpg';
import { DeltaTimeCalculator } from './helper/delta-time-calculator';
import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
import { BlobScene } from './scenes/blob-scene';
import { BlobScene } from './scenes/blob/blob-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, RainScene*/ BlobScene];
const sceneIntervalInSeconds = 80000;
const scenes = [TunnelScene, RainScene, BlobScene];
const sceneIntervalInSeconds = 8;
glMatrix.setMatrixArrayType(Array);
removeUnnecessaryOutlines();

56
src/scenes/blob-scene.ts → src/scenes/blob/blob-scene.ts
View file

@ -1,6 +1,8 @@
import { vec3 } from 'gl-matrix';
import { vec2, vec3 } from 'gl-matrix';
import { Circle, CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
import { Scene } from './scene';
import { prettyPrint } from '../../helper/pretty-print';
import { Scene } from '../scene';
import { Blob } from './blob';
export class BlobScene implements Scene {
private renderer: Renderer;
@ -19,25 +21,33 @@ export class BlobScene implements Scene {
this.renderer = await compile(
canvas,
[
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
shaderCombinationSteps: [1, 2],
},
Blob.descriptor,
],
[vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
[
vec3.fromValues(0, 0, 0),
vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
]
);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
shadowLength: 550,
shadowLength: 800,
});
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(
currentTime: DOMHighResTimeStamp,
@ -48,20 +58,28 @@ export class BlobScene implements Scene {
this.renderer.setViewArea([0, height], [width, height]);
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = JSON.stringify(
this.renderer.insights,
(_, v) => (v.toFixed ? Number(v.toFixed(2)) : v),
' '
);
this.overlay.innerText = prettyPrint(this.renderer.insights);
const q = (this.deltaSinceStart % 5000) / 2500;
console.log(q);
const length = vec2.length([width, height]);
const q = (this.deltaSinceStart % 8000) / 4000;
this.blob.animate(this.deltaSinceStart);
[
new Circle([width / 2, -width / 4], width / 2),
new CircleLight([q * width, Math.sin(q * Math.PI) * height], [1, 0.8, 0], 1),
new Circle([width / 2, -length / 4], length / 2),
this.blob,
new CircleLight(
[(q - 1) * width, Math.sin((q - 1) * Math.PI) * height],
[
(Math.cos((1 - q) * Math.PI) * length) / 2 + width / 2,
(Math.sin((1 - q) * Math.PI) * length) / 2,
],
[1, 0.8, 0],
1
),
new CircleLight(
[
(Math.cos(-q * Math.PI) * length) / 2 + width / 2,
(Math.sin(-q * Math.PI) * length) / 2,
],
[0, 0.8, 1],
1
),

139
src/scenes/blob/blob.ts Normal file
View file

@ -0,0 +1,139 @@
import { mat2d, vec2 } from 'gl-matrix';
import { Circle, Drawable, DrawableDescriptor } from 'sdf-2d';
export class Blob extends Drawable {
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform struct {
vec2 headCenter;
vec2 leftFootCenter;
vec2 rightFootCenter;
float headRadius;
float footRadius;
float k;
}[BLOB_COUNT] blobs;
float smoothMin(float a, float b)
{
const float k = 80.0;
float res = exp2( -k*a ) + exp2( -k*b );
return -log2( res )/k;
}
float circleDistance(vec2 circleCenter, float radius) {
return distance(position, circleCenter) - radius;
}
void blobMinDistance(inout float minDistance, inout float color) {
for (int i = 0; i < BLOB_COUNT; i++) {
float headDistance = circleDistance(blobs[i].headCenter, blobs[i].headRadius);
float leftFootDistance = circleDistance(blobs[i].leftFootCenter, blobs[i].footRadius);
float rightFootDistance = circleDistance(blobs[i].rightFootCenter, blobs[i].footRadius);
float res = min(
smoothMin(headDistance, leftFootDistance),
smoothMin(headDistance, rightFootDistance)
);
minDistance = min(minDistance, res);
color = mix(1.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
}
}
`,
distanceFunctionName: 'blobMinDistance',
},
uniformName: 'blobs',
uniformCountMacroName: 'BLOB_COUNT',
shaderCombinationSteps: [1],
empty: new Blob(vec2.fromValues(0, 0)),
};
public readonly boundingCircleRadius = 200;
protected readonly headRadius = 70;
protected readonly footRadius = 30;
private readonly headOffset = vec2.fromValues(0, 120);
private leftFootOffset = vec2.fromValues(-30, this.footRadius);
private rightFootOffset = vec2.fromValues(30, this.footRadius);
private leftFootOffsetDefault = vec2.fromValues(-30, this.footRadius);
private rightFootOffsetDefault = vec2.fromValues(30, this.footRadius);
protected boundingCircle = new Circle(vec2.create(), this.boundingCircleRadius);
protected head = new Circle(vec2.create(), this.headRadius);
protected leftFoot = new Circle(vec2.create(), this.footRadius);
protected rightFoot = new Circle(vec2.create(), this.footRadius);
public constructor(private center: vec2) {
super();
this.position = center;
}
public set position(value: vec2) {
vec2.copy(this.boundingCircle.center, value);
vec2.add(this.head.center, value, this.headOffset);
vec2.add(this.leftFoot.center, value, this.leftFootOffset);
vec2.add(this.rightFoot.center, value, this.rightFootOffset);
}
public animate(time: number) {
const offset = 20;
const q = (time % 1000) / 500;
vec2.subtract(
this.rightFootOffset,
this.rightFootOffsetDefault,
vec2.fromValues(q * offset, 0)
);
vec2.subtract(
this.leftFootOffset,
this.leftFootOffsetDefault,
vec2.fromValues(q * offset, 0)
);
vec2.add(
this.rightFootOffset,
this.rightFootOffset,
vec2.fromValues(
Math.min(1, q) * offset * 2,
Math.sin(Math.min(1, q) * Math.PI) * 10
)
);
vec2.add(
this.leftFootOffset,
this.leftFootOffset,
vec2.fromValues(
(q > 1 ? q - 1 : 0) * offset * 2,
Math.sin((q > 1 ? q - 1 : 0) * Math.PI) * 10
)
);
this.position = this.center;
}
public minDistance(target: vec2): number {
return this.boundingCircle.minDistance(target);
}
protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
return {
headCenter: vec2.transformMat2d(vec2.create(), this.head.center, transform2d),
leftFootCenter: vec2.transformMat2d(
vec2.create(),
this.leftFoot.center,
transform2d
),
rightFootCenter: vec2.transformMat2d(
vec2.create(),
this.rightFoot.center,
transform2d
),
headRadius: this.headRadius * transform1d,
footRadius: this.footRadius * transform1d,
};
}
}

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

@ -1,5 +1,6 @@
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';
@ -7,7 +8,7 @@ export class RainScene implements Scene {
private droplets: Array<Droplet> = [];
private light1: CircleLight = new CircleLight(
vec2.create(),
vec3.fromValues(1, 0, 1),
vec3.fromValues(0.5, 0, 1),
1
);
private light2: CircleLight = new CircleLight(
@ -20,12 +21,6 @@ export class RainScene implements Scene {
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
public constructor() {
for (let i = 0; i < 40; i++) {
this.droplets.push(new Droplet());
}
}
public async initialize(
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
@ -51,6 +46,10 @@ export class RainScene implements Scene {
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(
@ -60,12 +59,7 @@ export class RainScene implements Scene {
const { width, height } = this.canvas.getBoundingClientRect();
this.renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = JSON.stringify(
this.renderer.insights,
(_, v) => (v.toFixed ? Number(v.toFixed(2)) : v),
' '
);
this.overlay.innerText = prettyPrint(this.renderer.insights);
const viewAreaSize = this.renderer.viewAreaSize;

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

@ -2,6 +2,7 @@ import { vec2, vec3 } from 'gl-matrix';
import { CircleLight, compile, InvertedTunnel, Renderer } 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 { Scene } from './scene';
@ -101,11 +102,7 @@ export class TunnelScene implements Scene {
);
this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = JSON.stringify(
this.renderer.insights,
(_, v) => (v.toFixed ? Number(v.toFixed(2)) : v),
' '
);
this.overlay.innerText = prettyPrint(this.renderer.insights);
[
...this.tunnels.filter(