From f99dc857c894119379623be7105a05687e30d896 Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Sun, 4 Oct 2020 10:49:31 +0200 Subject: [PATCH] Add noise to tunnels --- package.json | 2 +- src/index.ts | 6 ++++-- src/scenes/blob/blob.ts | 5 ++--- src/scenes/tunnel-scene.ts | 20 +++++++++++++++++++- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index ddd615f..bf7fc29 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "resolve-url-loader": "^3.1.1", "sass": "^1.26.3", "sass-loader": "^9.0.3", - "sdf-2d": "^0.3.6", + "sdf-2d": "^0.4.0", "source-map-loader": "^1.1.0", "svg-url-loader": "^6.0.0", "terser-webpack-plugin": "^2.3.8", diff --git a/src/index.ts b/src/index.ts index 8a48776..50108da 100644 --- a/src/index.ts +++ b/src/index.ts @@ -64,11 +64,13 @@ const handleScene = async ( }; requestAnimationFrame(handleFrame); - const nextScene = new NextSceneConstructor(); - await nextScene.initialize(canvas, overlay); + await isOver; currentScene.destroy(); + const nextScene = new NextSceneConstructor(); + await nextScene.initialize(canvas, overlay); + return nextScene; }; diff --git a/src/scenes/blob/blob.ts b/src/scenes/blob/blob.ts index 8a4f5b7..5aa0ffa 100644 --- a/src/scenes/blob/blob.ts +++ b/src/scenes/blob/blob.ts @@ -10,13 +10,12 @@ export class Blob extends Drawable { uniform vec2 rightFootCenters[BLOB_COUNT]; uniform float headRadii[BLOB_COUNT]; uniform float footRadii[BLOB_COUNT]; - //uniform float ks[BLOB_COUNT]; float smoothMin(float a, float b) { const float k = 80.0; - float res = exp2( -k*a ) + exp2( -k*b ); - return -log2( res )/k; + float res = exp2(-k * a) + exp2(-k * b); + return -log2(res) / k; } float circleDistance(vec2 circleCenter, float radius, vec2 target) { diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index 583a973..b249846 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -1,5 +1,13 @@ import { vec2, vec3 } from 'gl-matrix'; -import { CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d'; +import { + CircleLight, + compile, + FilteringOptions, + InvertedTunnel, + Renderer, + renderNoise, + WrapOptions, +} from 'sdf-2d'; import { clamp } from '../helper/clamp'; import { last } from '../helper/last'; import { prettyPrint } from '../helper/pretty-print'; @@ -63,6 +71,7 @@ export class TunnelScene implements Scene { canvas: HTMLCanvasElement, overlay: HTMLDivElement ): Promise { + const noiseTexture = await renderNoise([1000, 1], 60, 1 / 8, true); this.canvas = canvas; this.overlay = overlay; this.renderer = await compile(canvas, [ @@ -81,6 +90,15 @@ export class TunnelScene implements Scene { 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: { + source: noiseTexture, + overrides: { + maxFilter: FilteringOptions.LINEAR, + wrapS: WrapOptions.MIRRORED_REPEAT, + }, + }, + }, }); for (let i = 0; i < 200; i++) {