diff --git a/README.md b/README.md new file mode 100644 index 0000000..f47e781 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +![logo](static/logo.svg) + +# SDF-2D demo + +Some simple demos to showcase the possibilities of this library. diff --git a/package.json b/package.json index 739bf45..33ec4ae 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "gl-matrix": "^3.3.0", "html-webpack-inline-source-plugin": "0.0.10", "html-webpack-plugin": "^3.2.0", - "image-webpack-loader": "^6.0.0", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-loader": "^3.0.0", @@ -53,7 +52,7 @@ "sass": "^1.26.3", "sass-loader": "^9.0.3", "sdf-2d": "^0.0.0", - "sharp": "^0.25.4", + "source-map-loader": "^1.1.0", "style-loader": "^1.1.4", "svg-url-loader": "^6.0.0", "terser-webpack-plugin": "^2.3.8", @@ -61,7 +60,6 @@ "typescript": "^3.9.7", "webpack": "^4.44.1", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3", - "source-map-loader": "^1.1.0" + "webpack-dev-server": "^3.10.3" } } diff --git a/src/index.html b/src/index.html index 371a58d..360b255 100644 --- a/src/index.html +++ b/src/index.html @@ -2,24 +2,33 @@ - Test + SDF-2D demo + - + -
-

- SDF-2D -

-
+
+ +
+
+

Error

+

+
+
diff --git a/src/index.scss b/src/index.scss index 0ca3fb1..9ef9eb5 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,3 +1,5 @@ +$bg: linear-gradient(90deg, #103783, #9bafd9); + html, body, canvas#main { @@ -10,24 +12,29 @@ html { @media (max-width: 800px) { font-size: 0.7rem; } + background: $bg; } * { margin: 0; box-sizing: border-box; - font-family: Helvetica, Arial, sans-serif; + font-family: Helvetica, Tahoma, sans-serif; color: white; } body { position: relative; - h1 { - font-size: 2.5rem; + a { + text-decoration: none; } button { - font-size: 1.25rem; + cursor: pointer; + border: 2px solid white; + border-radius: 6px; + padding: 0.2em 0.5rem; + background: none; } #info, @@ -39,29 +46,58 @@ body { #info { left: 0; + font-size: 2.5rem; + + a { + display: flex; + justify-content: center; + align-items: center; + + img { + $size: 80px; + width: $size; + height: $size; + padding-left: 16px; + } + } } #overlay { - font-size: 0.7rem; + font-size: 0.75rem; right: 0; - - $outline-width: 0.5px; - text-shadow: -$outline-width -$outline-width 0 #000, - $outline-width -$outline-width 0 #000, -$outline-width $outline-width 0 #000, - $outline-width $outline-width 0 #000; - white-space: pre; + font-family: 'Lucida Console', Monaco, monospace; } #remove-clutter { bottom: 0; - border: 2px solid white; - border-radius: 6px; - padding: 0.2em 0.5rem; - background: none; + font-size: 1.25rem; } - canvas#main { - background-color: hotpink; + #errors-container { + display: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + + text-align: center; + justify-content: center; + align-items: center; + + #errors { + width: min(500px, 90vw); + height: min(500px, 90vw); + h1 { + font-size: 3rem; + padding: 2rem; + } + + p { + text-align: left; + font-size: 1.25rem; + } + } } } diff --git a/src/index.ts b/src/index.ts index 6931846..d2d5892 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,7 +5,7 @@ import { RainScene } from './scenes/rain/rain-scene'; import { Scene } from './scenes/scene'; import { TunnelScene } from './scenes/tunnel-scene'; -const scenes = [RainScene, TunnelScene]; +const scenes = [TunnelScene, RainScene]; const sceneIntervalInSeconds = 8; glMatrix.setMatrixArrayType(Array); @@ -13,6 +13,8 @@ glMatrix.setMatrixArrayType(Array); const deltaTimeCalculator = new DeltaTimeCalculator(); const canvas = document.querySelector('canvas') as HTMLCanvasElement; const info = document.querySelector('#info'); +const errorText = document.querySelector('#error-text') as HTMLParamElement; +const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement; const button = document.querySelector('#remove-clutter'); const overlay = document.querySelector('#overlay') as HTMLDivElement; @@ -54,7 +56,8 @@ const main = async () => { } } catch (e) { console.error(e); - alert(e); + errorText.innerText = e; + errorsContainer.style.display = 'flex'; } }; diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index 7f7e5dd..1b39475 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/src/scenes/rain/rain-scene.ts @@ -44,15 +44,7 @@ export class RainScene implements Scene { shaderCombinationSteps: [2], }, ], - [ - vec3.fromValues(0.4, 1, 0.6), - vec3.fromValues(1, 1, 0), - vec3.fromValues(0.3, 1, 1), - ], - { - softShadowTraceCount: '32', - hardShadowTraceCount: '16', - } + [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)] ); this.renderer.setRuntimeSettings({ diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index a87fa2f..a687384 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -24,11 +24,16 @@ export class TunnelScene implements Scene { previousRadius = last(this.tunnels).toRadius; } - let height = previousEnd.y + Random.getRandomInRange(-400, 400); + let height = + previousEnd.y + + Random.getRandomInRange(-canvasSize.height / 3, canvasSize.height / 3); height = clamp(height, 200, canvasSize.height - 200); - const currentEnd = vec2.fromValues(this.tunnels.length * 200, height); - const currentToRadius = Random.getRandom() * 100 + 50; + const currentEnd = vec2.fromValues( + this.tunnels.length * (canvasSize.width / 6), + height + ); + const currentToRadius = (Random.getRandom() * canvasSize.height) / 6 + 50; this.tunnels.push( new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius) @@ -38,8 +43,12 @@ export class TunnelScene implements Scene { this.lights.push( new CircleLight( previousEnd, - [Random.getRandom(), Random.getRandom(), Random.getRandom()], - 0.25 + vec3.normalize(vec3.create(), [ + Random.getRandom(), + Random.getRandom(), + Random.getRandom(), + ]), + 0.35 ) ); } @@ -63,23 +72,16 @@ export class TunnelScene implements Scene { shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7], }, ], - [ - vec3.fromValues(0.4, 1, 0.6), - vec3.fromValues(1, 1, 0), - vec3.fromValues(0.3, 1, 1), - ], - { - softShadowTraceCount: '64', - hardShadowTraceCount: '16', - } + [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)] ); this.renderer.setRuntimeSettings({ isWorldInverted: true, - ambientLight: vec3.fromValues(0.45, 0.25, 0.45), + ambientLight: vec3.fromValues(0.35, 0.1, 0.45), + shadowLength: 550, }); - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 200; i++) { this.generateTunnel(); } } @@ -91,20 +93,26 @@ export class TunnelScene implements Scene { ): void { const { width, height } = this.canvas.getBoundingClientRect(); this.deltaSinceStart += deltaTime; + const startX = this.deltaSinceStart / 3; + const endX = startX + width; this.renderer.setViewArea( - vec2.fromValues(this.deltaSinceStart / 2, height), + vec2.fromValues(startX, 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.tunnels, ...this.lights].forEach((d) => this.renderer.addDrawable(d)); + [ + ...this.tunnels.filter( + (t) => startX < t.to.x + t.toRadius && t.from.x - t.fromRadius <= endX + ), + ...this.lights, + ].forEach((d) => this.renderer.addDrawable(d)); this.renderer.renderDrawables(); } diff --git a/webpack.config.js b/webpack.config.js index f7bc59f..0dfabec 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -92,6 +92,14 @@ module.exports = { }, exclude: /node_modules/, }, + { + test: /\.svg$/, + loader: 'svg-url-loader', + options: { + limit: 10 * 1024, + noquotes: true, + }, + }, { test: /\.js$/, enforce: 'pre',