Update demo
This commit is contained in:
schmelczerandras
parent
984a22e4be
commit
5d0609b8b0
8 changed files with 119 additions and 60 deletions
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
|
||||
# SDF-2D demo
|
||||
|
||||
Some simple demos to showcase the possibilities of this library.
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,33 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<h1>Javascript is required for this website.</h1>
|
||||
</noscript>
|
||||
<noscript>Javascript is required for this website.</noscript>
|
||||
|
||||
<div id="info">
|
||||
<h1>
|
||||
<a href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">SDF-2D</a>
|
||||
</h1>
|
||||
</div>
|
||||
<button id="info">
|
||||
<a href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
|
||||
SDF-2D<img src="static/logo-white.svg" alt="logo" />
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<button id="remove-clutter">Hide text</button>
|
||||
|
||||
<div id="overlay"></div>
|
||||
|
||||
<canvas id="main"></canvas>
|
||||
|
||||
<div id="errors-container">
|
||||
<div id="errors">
|
||||
<h1>Error</h1>
|
||||
<p id="error-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue