diff --git a/public/css/style.css b/public/css/style.css index a523d7e..f26e74a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -3,6 +3,7 @@ html { margin: 0; height: 100%; width: 100%; + background-color: #1d2021; } body { @@ -10,6 +11,8 @@ body { margin: 0; height: 100%; width: 100%; + background-color: #1d2021; + color: #ebdbb2; } /* Chrome, Safari, Edge, Opera */ @@ -34,7 +37,22 @@ input[type=number] { vertical-align: top; } -#pushtoscene { - height: 50px; - width: 150px; +.btn-shader { + background-color: #cc241d; + color: #ebdbb2; +} + +.btn-object { + background-color: #98971a; + color: #ebdbb2; +} + +.btn-texture { + background-color: #458588; + color: #ebdbb2; +} + +.btn-scene { + background-color: #b16286; + color: #ebdbb2; } \ No newline at end of file diff --git a/src/client/main.ts b/src/client/main.ts index 75a2b0e..ce7ad51 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -14,6 +14,11 @@ import {uiUpdateScene} from './uiscene'; import {initUX} from './ux'; import {updateCamera} from './camera'; +if (window.innerWidth < 1900) { + $('#screen-warning').append(` +
This app works best on 1920x1080 screens !
+ `); +} main(); /** diff --git a/src/client/uiscene.ts b/src/client/uiscene.ts index 39d3d15..5e53e5a 100644 --- a/src/client/uiscene.ts +++ b/src/client/uiscene.ts @@ -35,90 +35,122 @@ export function uiUpdateScene(context: any) { let instanceRadioString; if ($('input[name=instance]:checked', '#instanceoptions').val() == 'normal') { - instanceRadioString = ` - - - - - `; + instanceRadioString = ` +
+ + +
+
+ + +
+
+ + +
`; } else if ( ($('input[name=instance]:checked', '#instanceoptions').val() == 'one')) { - instanceRadioString = ` - - - - - `; + instanceRadioString = ` +
+ + +
+
+ + +
+
+ + +
`; } else { - instanceRadioString = ` - - - - - `; + instanceRadioString = ` +
+ + +
+
+ + +
+
+ + +
`; } - $('.scene-block').append(` -
-
Change shader:
- - - - - - -
-
-
Change instances number:
- -
-
-
` + instanceRadioString + `
-
-
-
Change rotation:
-
X:
- -
Y:
- -
Z:
- -
-
-
Change scale:
-
X:
- -
Y:
- -
Z:
- -
-
-
Translate:
-
X:
- -
Y:
- -
Z:
- -
-
-
Change object:
- - - - - -
-
-
Change texture:
- - - - - - -
`); + $('#scene-block').append(` + +
+
+
Change shader:
+
+ + + + + + +
+
+
+
Change object:
+
+ + + + + +
+
+
+
Change texture:
+
+ + + + + + +
+
+
+
Change instances number:
+ +
+
+
` + instanceRadioString + `
+
+
+
Change rotation:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Change scale:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Translate:
+
X:
+ +
Y:
+ +
Z:
+ +
+
`); $('#' + context.scene.length + 't_wall').on('click', (event) => { const n = parseInt(event.target.id.split('t')[0]); if (context.cache.textures.wall == null) { @@ -135,6 +167,14 @@ export function uiUpdateScene(context: any) { } context.scene[n - 1].texture = context.cache.textures.ice; }); + $('#' + context.scene.length + 't_noise').on('click', (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.noise == null) { + context.cache.textures.noise = loadTexture(context.gl, + '/static/textures/noise.png'); + } + context.scene[n - 1].texture = context.cache.textures.noise; + }); $('#' + context.scene.length + 't_fox').on('click', (event) => { const n = parseInt(event.target.id.split('t')[0]); if (context.cache.textures.fox == null) { diff --git a/views/index.ejs b/views/index.ejs index efbd019..cdc7158 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -8,106 +8,124 @@ content="Simple WebGL app to demonstrate my skills"> WebGL + + + + + +
+
- -
-
+
+
To control the camera orientation with mouse, click in the canvas, to exit, click again.
To control the camera position, use W/S for Z axis, A/D for X axis, and Space/Shift for fixed Y axis.
-
-
Change shader:
- - - - - - +
+
Change shader:
+
+ + + + + + +
+
+
+
Change object:
+
+ + + + + +
+
+
+
Change texture:
+
+ + + + + + +
-
Change distance:
-
Fine:
- -
Coarse:
- +
+
Distance Fine:
+ +
+
Distance Coarse:
+ +
-
Change circle size:
- +
Change circle size:
+
-
Change fov:
- +
Change fov:
+
-
Change base rotation speed:
- +
Change base rotation speed:
+
-
Change instances number:
- +
Change instances number:
+
- - - - - - +
+ + +
+
+ + +
+
+ + +
-
-
Change rotation:
-
X:
- -
Y:
- -
Z:
- +
+
Change rotation:
+
X:
+ +
Y:
+ +
Z:
+
-
-
Change scale:
-
X:
- -
Y:
- -
Z:
- +
+
Change scale:
+
X:
+ +
Y:
+ +
Z:
+
-
-
Translate:
-
X:
- -
Y:
- -
Z:
- +
+
Translate:
+
X:
+ +
Y:
+ +
Z:
+
-
-
Change object:
- - - - - -
-
-
Change texture:
- - - - - - -
-
- -
-
+
+
This project's git @@ -116,6 +134,9 @@

If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader

+ +
+