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 = `
- Use instance slider
-
- Lock to one instance
-
- Do not show object `;
+ instanceRadioString = `
+
+
+ Use instance slider
+
+
+
+ Lock to one working instance
+
+
+
+ Do not show working instance
+
`;
} else if (
($('input[name=instance]:checked', '#instanceoptions').val() ==
'one')) {
- instanceRadioString = `
- Use instance slider
-
- Lock to one instance
-
- Do not show object `;
+ instanceRadioString = `
+
+
+ Use instance slider
+
+
+
+ Lock to one working instance
+
+
+
+ Do not show working instance
+
`;
} else {
- instanceRadioString = `
- Use instance slider
-
- Lock to one instance
-
- Do not show object `;
+ instanceRadioString = `
+
+
+ Use instance slider
+
+
+
+ Lock to one working instance
+
+
+
+ Do not show working instance
+
`;
}
- $('.scene-block').append(`
-
-
Change shader:
-
Black & White
-
Colored
-
No texture
-
Texture
-
Sobel Edge Detection
-
Fractal
-
-
-
Change instances number:
-
-
-
-
-
-
-
Change rotation:
-
X:
-
-
Y:
-
-
Z:
-
-
-
-
Change scale:
-
X:
-
-
Y:
-
-
Z:
-
-
-
-
Translate:
-
X:
-
-
Y:
-
-
Z:
-
-
-
-
Change object:
-
Sphere
-
Teapot
-
Fox
-
Mecha
-
Racer
-
-
-
Change texture:
-
Wall
-
Ice
-
Noise
-
Fox
-
Racer
-
Racer Wireframe
-
`);
+ $('#scene-block').append(`
+
+ Object ` + context.scene.length + `
+
+
+
+
Change shader:
+
+ Black & White
+ Colored
+ No texture
+ Texture
+ Sobel Edge Detection
+ Fractal
+
+
+
+
Change object:
+
+ Sphere
+ Teapot
+ Fox
+ Mecha
+ Racer
+
+
+
+
Change texture:
+
+ Wall
+ Ice
+ Noise
+ Fox
+ Racer
+ Racer Wireframe
+
+
+
+
Change instances number:
+
+
+
+
+
+
+
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:
-
Black & White
-
Colored
-
No texture
-
Texture
-
Sobel Edge Detection
-
Fractal
+
+
Change shader:
+
+ Black & White
+ Colored
+ No texture
+ Texture
+ Sobel Edge Detection
+ Fractal
+
+
+
+
Change object:
+
+ Sphere
+ Teapot
+ Fox
+ Mecha
+ Racer
+
+
+
+
Change texture:
+
+ Wall
+ Ice
+ Noise
+ Fox
+ Racer
+ Racer Wireframe
+
-
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:
-
Sphere
-
Teapot
-
Fox
-
Mecha
-
Racer
-
-
-
Change texture:
-
Wall
-
Ice
-
Noise
-
Fox
-
Racer
-
Racer Wireframe
-
-
- Push To Scene
-
-
+
+ Push To Scene
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
+
+
+