done
This commit is contained in:
parent
e18a241289
commit
790d421741
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -14,6 +14,11 @@ import {uiUpdateScene} from './uiscene';
|
|||
import {initUX} from './ux';
|
||||
import {updateCamera} from './camera';
|
||||
|
||||
if (window.innerWidth < 1900) {
|
||||
$('#screen-warning').append(`
|
||||
<div class='display-4'>This app works best on 1920x1080 screens !</div>
|
||||
`);
|
||||
}
|
||||
main();
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -35,90 +35,122 @@ export function uiUpdateScene(context: any) {
|
|||
let instanceRadioString;
|
||||
if ($('input[name=instance]:checked', '#instanceoptions').val() ==
|
||||
'normal') {
|
||||
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal" checked>
|
||||
<label for="normal">Use instance slider</label>
|
||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
||||
<label for="one">Lock to one instance</label>
|
||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
||||
<label for="zero">Do not show object</label>`;
|
||||
instanceRadioString = `
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal" checked>
|
||||
<label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `one" name="` + context.scene.length + `instance" value="one">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `one">Lock to one working instance</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `zero" name="` + context.scene.length + `instance" value="zero">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `zero">Do not show working instance</label>
|
||||
</div>`;
|
||||
} else if (
|
||||
($('input[name=instance]:checked', '#instanceoptions').val() ==
|
||||
'one')) {
|
||||
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
||||
<label for="normal">Use instance slider</label>
|
||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one" checked>
|
||||
<label for="one">Lock to one instance</label>
|
||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
||||
<label for="zero">Do not show object</label>`;
|
||||
instanceRadioString = `
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `one" name="` + context.scene.length + `instance" value="one" checked>
|
||||
<label class="custom-control-label" for="` + context.scene.length + `one">Lock to one working instance</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `zero" name="` + context.scene.length + `instance" value="zero">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `zero">Do not show working instance</label>
|
||||
</div>`;
|
||||
} else {
|
||||
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
||||
<label for="normal">Use instance slider</label>
|
||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
||||
<label for="one">Lock to one instance</label>
|
||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero" checked>
|
||||
<label for="zero">Do not show object</label>`;
|
||||
instanceRadioString = `
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `one" name="` + context.scene.length + `instance" value="one">
|
||||
<label class="custom-control-label" for="` + context.scene.length + `one">Lock to one working instance</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="` + context.scene.length + `zero" name="` + context.scene.length + `instance" value="zero" checked>
|
||||
<label class="custom-control-label" for="` + context.scene.length + `zero">Do not show working instance</label>
|
||||
</div>`;
|
||||
}
|
||||
$('.scene-block').append(`
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change shader: </div>
|
||||
<button id='` + context.scene.length + `s_blackandwhite'>Black & White</button>
|
||||
<button id='` + context.scene.length + `s_color'>Colored</button>
|
||||
<button id='` + context.scene.length + `s_grey'>No texture</button>
|
||||
<button id='` + context.scene.length + `s_texture'>Texture</button>
|
||||
<button id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button>
|
||||
<button id='` + context.scene.length + `s_fractal'>Fractal</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change instances number: </div>
|
||||
<input type="range" min="1" max="180" value="` + $('#instance').val() + `" step='1' class="slider" id="` + context.scene.length + `instance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change rotation: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="range" min="0" max="6.2830" value="` + $('#rotx').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotx">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="range" min="0" max="6.2830" value="` + $('#roty').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `roty">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="range" min="0" max="6.2830" value="` + $('#rotz').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotz">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change scale: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="number" value="` + $('#scalex').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalex">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="number" value="` + $('#scaley').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scaley">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="number" value="` + $('#scalez').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalez">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Translate: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="number" value="` + $('#posx').val() + `" step='0.00001' id="` + context.scene.length + `posx">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="number" value="` + $('#posy').val() + `" step='0.00001' id="` + context.scene.length + `posy">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="number" value="` + $('#posz').val() + `" step='0.00001' id="` + context.scene.length + `posz">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change object: </div>
|
||||
<button id='` + context.scene.length + `o_sphere'>Sphere</button>
|
||||
<button id='` + context.scene.length + `o_teapot'>Teapot</button>
|
||||
<button id='` + context.scene.length + `o_fox'>Fox</button>
|
||||
<button id='` + context.scene.length + `o_mecha'>Mecha</button>
|
||||
<button id='` + context.scene.length + `o_racer'>Racer</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change texture: </div>
|
||||
<button id='` + context.scene.length + `t_wall'>Wall</button>
|
||||
<button id='` + context.scene.length + `t_ice'>Ice</button>
|
||||
<button id='` + context.scene.length + `t_noise'>Noise</button>
|
||||
<button id='` + context.scene.length + `t_fox'>Fox</button>
|
||||
<button id='` + context.scene.length + `t_racer'>Racer</button>
|
||||
<button id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button>
|
||||
</div>`);
|
||||
$('#scene-block').append(`
|
||||
<button class="btn btn-scene" type="button" data-toggle="collapse" data-target="#collapse` + context.scene.length + `" aria-expanded="false" aria-controls="collapse` + context.scene.length + `">
|
||||
Object ` + context.scene.length + `
|
||||
</button>
|
||||
<div class="collapse" id="collapse` + context.scene.length + `">
|
||||
<div class='ui-block my-2'>
|
||||
<div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_blackandwhite'>Black & White</button>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_color'>Colored</button>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_grey'>No texture</button>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_texture'>Texture</button>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button>
|
||||
<button class="my-1 btn btn-shader" id='` + context.scene.length + `s_fractal'>Fractal</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change object: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_sphere'>Sphere</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_teapot'>Teapot</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_fox'>Fox</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_mecha'>Mecha</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_racer'>Racer</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change texture: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_wall'>Wall</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_ice'>Ice</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_noise'>Noise</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_fox'>Fox</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_racer'>Racer</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline-block; width:30%;'>Change instances number: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="` + context.scene.length + `instance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change rotation: </div>
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotx">
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `roty">
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotz">
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change scale: </div>
|
||||
<div style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="` + context.scene.length + `scalex">
|
||||
<div style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="` + context.scene.length + `scaley">
|
||||
<div style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="` + context.scene.length + `scalez">
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Translate: </div>
|
||||
<div style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="` + context.scene.length + `posx">
|
||||
<div style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="` + context.scene.length + `posy">
|
||||
<div style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="` + context.scene.length + `posz">
|
||||
</div>
|
||||
</div>`);
|
||||
$('#' + 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) {
|
||||
|
|
|
|||
171
views/index.ejs
171
views/index.ejs
|
|
@ -8,106 +8,124 @@
|
|||
content="Simple WebGL app to demonstrate my skills">
|
||||
<title>WebGL</title>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='screen-warning'>
|
||||
</div>
|
||||
<div id="root">
|
||||
<canvas id='glCanvas' width='640' height='640'></canvas>
|
||||
<div id='ui'>
|
||||
<div class='ui-block'>
|
||||
<div class='mx-0 px-0' id='ui' style='display: inline-block; width: 620px'>
|
||||
<div class='ui-block lead' style='width: 620px'>
|
||||
To control the camera orientation with mouse, click in the canvas, to exit, click again.<br>
|
||||
To control the camera position, use W/S for Z axis, A/D for X axis, and Space/Shift for fixed Y axis.
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change shader: </div>
|
||||
<button id='s_blackandwhite'>Black & White</button>
|
||||
<button id='s_color'>Colored</button>
|
||||
<button id='s_grey'>No texture</button>
|
||||
<button id='s_texture'>Texture</button>
|
||||
<button id='s_sobel'>Sobel Edge Detection</button>
|
||||
<button id='s_fractal'>Fractal</button>
|
||||
<div class='ui-block my-2'>
|
||||
<div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-shader" id='s_blackandwhite'>Black & White</button>
|
||||
<button class="my-1 btn btn-shader" id='s_color'>Colored</button>
|
||||
<button class="my-1 btn btn-shader" id='s_grey'>No texture</button>
|
||||
<button class="my-1 btn btn-shader" id='s_texture'>Texture</button>
|
||||
<button class="my-1 btn btn-shader" id='s_sobel'>Sobel Edge Detection</button>
|
||||
<button class="my-1 btn btn-shader" id='s_fractal'>Fractal</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change object: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='o_sphere'>Sphere</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='o_teapot'>Teapot</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='o_fox'>Fox</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='o_mecha'>Mecha</button>
|
||||
<button class="my-1 btn btn-object" style='min-width: 8%' id='o_racer'>Racer</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change texture: </div>
|
||||
<div style='display: inline-block; width: 65%'>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_wall'>Wall</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_ice'>Ice</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_noise'>Noise</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_fox'>Fox</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_racer'>Racer</button>
|
||||
<button class="my-1 btn btn-texture" style='min-width: 8%' id='t_racer_wireframe'>Racer Wireframe</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change distance: </div>
|
||||
<div style='display: inline;'>Fine: </div>
|
||||
<input type="range" min="1" max="50" value="25" class="slider" id="distancefine">
|
||||
<div style='display: inline;'>Coarse: </div>
|
||||
<input type="range" min="1" max="1000" value="40" class="slider" id="distance">
|
||||
<div class='distance-block'>
|
||||
<div style='display: inline-block; width:30%;'>Distance Fine: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="1" max="50" value="25" class="slider" id="distancefine">
|
||||
<br>
|
||||
<div style='display: inline-block; width:30%;'>Distance Coarse: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="1" max="1000" value="40" class="slider" id="distance">
|
||||
</div>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change circle size: </div>
|
||||
<input type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize">
|
||||
<div style='display: inline-block; width:30%;'>Change circle size: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change fov: </div>
|
||||
<input type="range" min="15" max="150" value="45" class="slider" id="fov">
|
||||
<div style='display: inline-block; width:30%;'>Change fov: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="15" max="150" value="45" class="slider" id="fov">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change base rotation speed: </div>
|
||||
<input type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
|
||||
<div style='display: inline-block; width:30%;'>Change base rotation speed: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change instances number: </div>
|
||||
<input type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
|
||||
<div style='display: inline-block; width:30%;'>Change instances number: </div>
|
||||
<input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<form id="instanceoptions">
|
||||
<input type="radio" id="normal" name="instance" value="normal" checked>
|
||||
<label for="normal">Use instance slider</label>
|
||||
<input type="radio" id="one" name="instance" value="one">
|
||||
<label for="one">Lock to one working instance</label>
|
||||
<input type="radio" id="zero" name="instance" value="zero">
|
||||
<label for="zero">Do not show working instance</label>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="normal" name="instance" value="normal" checked>
|
||||
<label class="custom-control-label" for="normal">Use instance slider</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="one" name="instance" value="one">
|
||||
<label class="custom-control-label" for="one">Lock to one working instance</label>
|
||||
</div>
|
||||
<div class='custom-control custom-radio'>
|
||||
<input class="custom-control-input" type="radio" id="zero" name="instance" value="zero">
|
||||
<label class="custom-control-label" for="zero">Do not show working instance</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change rotation: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="roty">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change rotation: </div>
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx">
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="roty">
|
||||
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change scale: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="number" value="1" min="0" step='0.00001' id="scalex">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="number" value="1" min="0" step='0.00001' id="scaley">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="number" value="1" min="0" step='0.00001' id="scalez">
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Change scale: </div>
|
||||
<div style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="scalex">
|
||||
<div style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="scaley">
|
||||
<div style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="scalez">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Translate: </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
<input type="number" value="0" step='0.00001' id="posx">
|
||||
<div style='display: inline;'>Y: </div>
|
||||
<input type="number" value="0" step='0.00001' id="posy">
|
||||
<div style='display: inline;'>Z: </div>
|
||||
<input type="number" value="0" step='0.00001' id="posz">
|
||||
<div class='ui-block my-2'>
|
||||
<div style='display: inline-block; width:30%;'>Translate: </div>
|
||||
<div style='display: inline-block; width:2%;'>X: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="posx">
|
||||
<div style='display: inline-block; width:2%;'>Y: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="posy">
|
||||
<div style='display: inline-block; width:2%;'>Z: </div>
|
||||
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="0" step='0.00001' id="posz">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change object: </div>
|
||||
<button id='o_sphere'>Sphere</button>
|
||||
<button id='o_teapot'>Teapot</button>
|
||||
<button id='o_fox'>Fox</button>
|
||||
<button id='o_mecha'>Mecha</button>
|
||||
<button id='o_racer'>Racer</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change texture: </div>
|
||||
<button id='t_wall'>Wall</button>
|
||||
<button id='t_ice'>Ice</button>
|
||||
<button id='t_noise'>Noise</button>
|
||||
<button id='t_fox'>Fox</button>
|
||||
<button id='t_racer'>Racer</button>
|
||||
<button id='t_racer_wireframe'>Racer Wireframe</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<button id='pushtoscene'>Push To Scene</button>
|
||||
</div>
|
||||
<div class='scene-block'>
|
||||
<div class='ui-block text-center my-2'>
|
||||
<button class="btn btn-lg btn-success text-center" id='pushtoscene'>Push To Scene</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<a href='https://git.gaetanbrochard.dev/gbrochar/webgl'>This project's git</a>
|
||||
|
|
@ -116,6 +134,9 @@
|
|||
<p>If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader</p>
|
||||
</div>
|
||||
</div>
|
||||
<canvas class='mx-0 px-0' id='glCanvas' style='display: inline-block; ' width='640' height='640'></canvas>
|
||||
<div class='mx-0 px-0' id='scene-block' style='vertical-align: top; display: inline-block; width: 620px'>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/bundle.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue