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

Update demo

Browse source
This commit is contained in:
schmelczerandras 2020-09-19 20:09:54 +02:00
parent 984a22e4be
commit 5d0609b8b0
8 changed files with 119 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

5
README.md Normal file
View file

@ -0,0 +1,5 @@
![logo](static/logo.svg)
# SDF-2D demo
Some simple demos to showcase the possibilities of this library.

6
package.json
View file

@ -42,7 +42,6 @@
"gl-matrix": "^3.3.0", "gl-matrix": "^3.3.0",
"html-webpack-inline-source-plugin": "0.0.10", "html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.4", "optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
@ -53,7 +52,7 @@
"sass": "^1.26.3", "sass": "^1.26.3",
"sass-loader": "^9.0.3", "sass-loader": "^9.0.3",
"sdf-2d": "^0.0.0", "sdf-2d": "^0.0.0",
"sharp": "^0.25.4", "source-map-loader": "^1.1.0",
"style-loader": "^1.1.4", "style-loader": "^1.1.4",
"svg-url-loader": "^6.0.0", "svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^2.3.8", "terser-webpack-plugin": "^2.3.8",
@ -61,7 +60,6 @@
"typescript": "^3.9.7", "typescript": "^3.9.7",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.11", "webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3", "webpack-dev-server": "^3.10.3"
"source-map-loader": "^1.1.0"
} }
} }

27
src/index.html
View file

@ -2,24 +2,33 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Test</title> <title>SDF-2D demo</title>
<meta
name="description"
content="Some simple demos to showcase the possibilities of this library."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body> <body>
<noscript> <noscript>Javascript is required for this website.</noscript>
<h1>Javascript is required for this website.</h1>
</noscript>
<div id="info"> <button id="info">
<h1> <a href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
<a href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">SDF-2D</a> SDF-2D<img src="static/logo-white.svg" alt="logo" />
</h1> </a>
</div> </button>
<button id="remove-clutter">Hide text</button> <button id="remove-clutter">Hide text</button>
<div id="overlay"></div> <div id="overlay"></div>
<canvas id="main"></canvas> <canvas id="main"></canvas>
<div id="errors-container">
<div id="errors">
<h1>Error</h1>
<p id="error-text"></p>
</div>
</div>
</body> </body>
</html> </html>

70
src/index.scss
View file

@ -1,3 +1,5 @@
$bg: linear-gradient(90deg, #103783, #9bafd9);
html, html,
body, body,
canvas#main { canvas#main {
@ -10,24 +12,29 @@ html {
@media (max-width: 800px) { @media (max-width: 800px) {
font-size: 0.7rem; font-size: 0.7rem;
} }
background: $bg;
} }
* { * {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Tahoma, sans-serif;
color: white; color: white;
} }
body { body {
position: relative; position: relative;
h1 { a {
font-size: 2.5rem; text-decoration: none;
} }
button { button {
font-size: 1.25rem; cursor: pointer;
border: 2px solid white;
border-radius: 6px;
padding: 0.2em 0.5rem;
background: none;
} }
#info, #info,
@ -39,29 +46,58 @@ body {
#info { #info {
left: 0; 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 { #overlay {
font-size: 0.7rem; font-size: 0.75rem;
right: 0; 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; white-space: pre;
font-family: 'Lucida Console', Monaco, monospace;
} }
#remove-clutter { #remove-clutter {
bottom: 0; bottom: 0;
border: 2px solid white; font-size: 1.25rem;
border-radius: 6px;
padding: 0.2em 0.5rem;
background: none;
} }
canvas#main { #errors-container {
background-color: hotpink; 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;
}
}
} }
} }

7
src/index.ts
View file

@ -5,7 +5,7 @@ import { RainScene } from './scenes/rain/rain-scene';
import { Scene } from './scenes/scene'; import { Scene } from './scenes/scene';
import { TunnelScene } from './scenes/tunnel-scene'; import { TunnelScene } from './scenes/tunnel-scene';
const scenes = [RainScene, TunnelScene]; const scenes = [TunnelScene, RainScene];
const sceneIntervalInSeconds = 8; const sceneIntervalInSeconds = 8;
glMatrix.setMatrixArrayType(Array); glMatrix.setMatrixArrayType(Array);
@ -13,6 +13,8 @@ glMatrix.setMatrixArrayType(Array);
const deltaTimeCalculator = new DeltaTimeCalculator(); const deltaTimeCalculator = new DeltaTimeCalculator();
const canvas = document.querySelector('canvas') as HTMLCanvasElement; const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const info = document.querySelector('#info'); 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 button = document.querySelector('#remove-clutter');
const overlay = document.querySelector('#overlay') as HTMLDivElement; const overlay = document.querySelector('#overlay') as HTMLDivElement;
@ -54,7 +56,8 @@ const main = async () => {
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
alert(e); errorText.innerText = e;
errorsContainer.style.display = 'flex';
} }
}; };

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

@ -44,15 +44,7 @@ export class RainScene implements Scene {
shaderCombinationSteps: [2], shaderCombinationSteps: [2],
}, },
], ],
[ [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
vec3.fromValues(0.4, 1, 0.6),
vec3.fromValues(1, 1, 0),
vec3.fromValues(0.3, 1, 1),
],
{
softShadowTraceCount: '32',
hardShadowTraceCount: '16',
}
); );
this.renderer.setRuntimeSettings({ this.renderer.setRuntimeSettings({

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

@ -24,11 +24,16 @@ export class TunnelScene implements Scene {
previousRadius = last(this.tunnels).toRadius; 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); height = clamp(height, 200, canvasSize.height - 200);
const currentEnd = vec2.fromValues(this.tunnels.length * 200, height); const currentEnd = vec2.fromValues(
const currentToRadius = Random.getRandom() * 100 + 50; this.tunnels.length * (canvasSize.width / 6),
height
);
const currentToRadius = (Random.getRandom() * canvasSize.height) / 6 + 50;
this.tunnels.push( this.tunnels.push(
new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius) new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius)
@ -38,8 +43,12 @@ export class TunnelScene implements Scene {
this.lights.push( this.lights.push(
new CircleLight( new CircleLight(
previousEnd, previousEnd,
[Random.getRandom(), Random.getRandom(), Random.getRandom()], vec3.normalize(vec3.create(), [
0.25 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], 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)]
vec3.fromValues(0.4, 1, 0.6),
vec3.fromValues(1, 1, 0),
vec3.fromValues(0.3, 1, 1),
],
{
softShadowTraceCount: '64',
hardShadowTraceCount: '16',
}
); );
this.renderer.setRuntimeSettings({ this.renderer.setRuntimeSettings({
isWorldInverted: true, 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(); this.generateTunnel();
} }
} }
@ -91,20 +93,26 @@ export class TunnelScene implements Scene {
): void { ): void {
const { width, height } = this.canvas.getBoundingClientRect(); const { width, height } = this.canvas.getBoundingClientRect();
this.deltaSinceStart += deltaTime; this.deltaSinceStart += deltaTime;
const startX = this.deltaSinceStart / 3;
const endX = startX + width;
this.renderer.setViewArea( this.renderer.setViewArea(
vec2.fromValues(this.deltaSinceStart / 2, height), vec2.fromValues(startX, height),
vec2.fromValues(width, height) vec2.fromValues(width, height)
); );
this.renderer.autoscaleQuality(deltaTime); this.renderer.autoscaleQuality(deltaTime);
this.overlay.innerText = JSON.stringify( this.overlay.innerText = JSON.stringify(
this.renderer.insights, this.renderer.insights,
(_, v) => (v.toFixed ? Number(v.toFixed(2)) : v), (_, 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(); this.renderer.renderDrawables();
} }

8
webpack.config.js
View file

@ -92,6 +92,14 @@ module.exports = {
}, },
exclude: /node_modules/, exclude: /node_modules/,
}, },
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
limit: 10 * 1024,
noquotes: true,
},
},
{ {
test: /\.js$/, test: /\.js$/,
enforce: 'pre', enforce: 'pre',