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

Update to use new sdf-2d API

Browse source
This commit is contained in:
schmelczerandras 2020-10-13 23:02:43 +02:00
parent 41ea5d7db9
commit f0a9c1df68
13 changed files with 38 additions and 41 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.4.0",
"sdf-2d": "^0.5.0",
"source-map-loader": "^1.1.0",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^2.3.8",

13
src/helper/circle.ts Normal file
View file

@ -0,0 +1,13 @@
import { vec2 } from 'gl-matrix';
export class Circle {
constructor(public center: vec2, public radius: number) {}
public distance(target: vec2): number {
return vec2.distance(this.center, target) - this.radius;
}
public distanceBetween(target: Circle): number {
return vec2.distance(target.center, this.center) - this.radius - target.radius;
}
}

3
src/helper/rgb.ts
View file

@ -1,3 +0,0 @@
import { vec3 } from 'gl-matrix';
export const rgb = (r: number, g: number, b: number): vec3 => vec3.fromValues(r, g, b);

4
src/helper/rgb255.ts
View file

@ -1,4 +0,0 @@
import { vec3 } from 'gl-matrix';
export const rgb255 = (r: number, g: number, b: number): vec3 =>
vec3.fromValues(r / 255, g / 255, b / 255);

4
src/helper/rgba.ts
View file

@ -1,4 +0,0 @@
import { vec4 } from 'gl-matrix';
export const rgba = (r: number, g: number, b: number, a: number): vec4 =>
vec4.fromValues(r, g, b, a);

4
src/helper/rgba255.ts
View file

@ -1,4 +0,0 @@
import { vec4 } from 'gl-matrix';
export const rgba255 = (r: number, g: number, b: number, a: number): vec4 =>
vec4.fromValues(r / 255, g / 255, b / 255, a / 255);

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

@ -1,11 +1,11 @@
import { vec2 } from 'gl-matrix';
import { Circle, CircleLight, compile, Renderer } from 'sdf-2d';
import { CircleFactory, CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
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;

9
src/scenes/blob/blob.ts
View file

@ -1,5 +1,6 @@
import { mat2d, vec2 } from 'gl-matrix';
import { Circle, Drawable, DrawableDescriptor } from 'sdf-2d';
import { Drawable, DrawableDescriptor } from 'sdf-2d';
import { Circle } from '../../helper/circle';
export class Blob extends Drawable {
public static descriptor: DrawableDescriptor = {
@ -22,9 +23,9 @@ export class Blob extends Drawable {
return distance(target, circleCenter) - radius;
}
float blobMinDistance(vec2 target, out float colorIndex) {
float blobMinDistance(vec2 target, out vec4 color) {
float minDistance = 1000.0;
colorIndex = 3.0;
color = readFromPalette(3);
for (int i = 0; i < BLOB_COUNT; i++) {
float headDistance = circleDistance(headCenters[i], headRadii[i], target);
@ -124,7 +125,7 @@ export class Blob extends Drawable {
}
public minDistance(target: vec2): number {
return this.boundingCircle.minDistance(target);
return this.boundingCircle.distance(target);
}
protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {

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

@ -1,11 +1,9 @@
import { vec2 } from 'gl-matrix';
import { compile, Flashlight, MetaCircle, Renderer } from 'sdf-2d';
import { compile, Flashlight, Renderer, rgb, rgb255 } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { Random } from '../../helper/random';
import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Metaball } from './metaball';
import { Metaball, MetaCircle } from './metaball';
export class MetaballScene implements Scene {
private circles: Array<Metaball> = [];

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

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

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

@ -1,9 +1,10 @@
import { vec2 } from 'gl-matrix';
import { Droplet } from 'sdf-2d';
import { DropletFactory } from 'sdf-2d';
import { Random } from '../../helper/random';
export const Droplet = DropletFactory(1);
export class DropletWrapper {
public readonly drawable: Droplet;
public readonly drawable: InstanceType<typeof Droplet>;
private speed = Random.getRandom() * 0.2 + 0.2;
private position = vec2.fromValues(

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

@ -1,10 +1,8 @@
import { vec2 } from 'gl-matrix';
import { CircleLight, compile, Droplet, Renderer } from 'sdf-2d';
import { CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { DropletWrapper } from './droplet';
import { Droplet, DropletWrapper } from './droplet';
export class RainScene implements Scene {
private droplets: Array<DropletWrapper> = [];
@ -34,7 +32,6 @@ export class RainScene implements Scene {
this.renderer.setRuntimeSettings({
ambientLight: rgb(0.2, 0.2, 0.2),
backgroundColor: rgb(1, 1, 1),
colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
});

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

@ -3,25 +3,26 @@ import {
CircleLight,
compile,
FilteringOptions,
InvertedTunnel,
InvertedTunnelFactory,
Renderer,
renderNoise,
rgb,
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 { rgb } from '../helper/rgb';
import { rgba } from '../helper/rgba';
import { Scene } from './scene';
const InvertedTunnel = InvertedTunnelFactory(3);
export class TunnelScene implements Scene {
private renderer: Renderer;
private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
private tunnels: Array<InvertedTunnel> = [];
private tunnels: Array<InstanceType<typeof InvertedTunnel>> = [];
private lights: Array<CircleLight> = [];
private generateTunnel() {
@ -71,7 +72,7 @@ export class TunnelScene implements Scene {
canvas: HTMLCanvasElement,
overlay: HTMLDivElement
): Promise<void> {
const noiseTexture = await renderNoise([1024, 1], 60, 1 / 8);
const noiseTexture = await renderNoise([1024, 1], 15, 1);
this.canvas = canvas;
this.overlay = overlay;
@ -89,7 +90,6 @@ export class TunnelScene implements Scene {
this.renderer.setRuntimeSettings({
isWorldInverted: true,
ambientLight: rgb(0.35, 0.1, 0.45),
backgroundColor: rgba(1, 1, 1, 1),
colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
textures: {
noiseTexture: {