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

Use new library version

Browse source
This commit is contained in:
schmelczerandras 2020-09-24 14:20:30 +02:00
commit e4b15ff5f6
4 changed files with 51 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { vec2, vec3 } from 'gl-matrix';
import { Circle, CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Blob } from './blob';
@ -18,26 +19,24 @@ export class BlobScene implements Scene {
): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(
canvas,
[
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2],
},
Blob.descriptor,
],
[
vec3.fromValues(0, 0, 0),
vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
]
);
this.renderer = await compile(canvas, [
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2],
},
Blob.descriptor,
]);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
shadowLength: 800,
colorPalette: [
rgb255(0, 0, 0),
rgb255(119, 173, 120),
rgb255(224, 96, 126),
rgb255(224, 96, 126),
],
});
const { width, height } = this.canvas.getBoundingClientRect();

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

@ -35,7 +35,7 @@ export class Blob extends Drawable {
);
minDistance = min(minDistance, res);
color = mix(1.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
}
}
`,

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

@ -1,6 +1,7 @@
import { vec2, vec3 } from 'gl-matrix';
import { vec2 } from 'gl-matrix';
import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Droplet } from './droplet';
@ -20,27 +21,23 @@ export class RainScene implements Scene {
): 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 = await compile(canvas, [
{
...Tunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [2],
},
]);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
tileMultiplier: 8,
ambientLight: rgb(0.2, 0.2, 0.2),
colorPalette: [rgb(1, 1, 0), rgb(1, 1, 0), rgb(0.3, 1, 1), rgb(0.3, 1, 1)],
});
for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {
for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
this.droplets.push(new Droplet());
}
}

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

@ -64,25 +64,22 @@ export class TunnelScene implements Scene {
): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(
canvas,
[
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
},
],
[rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)]
);
this.renderer = await compile(canvas, [
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
},
]);
this.renderer.setRuntimeSettings({
isWorldInverted: true,
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
ambientLight: rgb(0.35, 0.1, 0.45),
shadowLength: 550,
colorPalette: [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)],
});
for (let i = 0; i < 200; i++) {