gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

done

This commit is contained in:
gbrochar 2020-11-29 11:28:16 +01:00
parent e18a241289
commit 790d421741
4 changed files with 241 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/css/style.css
View File

@ -3,6 +3,7 @@ html {
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #1d2021;
} }
body { body {
@ -10,6 +11,8 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #1d2021;
color: #ebdbb2;
} }
/* Chrome, Safari, Edge, Opera */ /* Chrome, Safari, Edge, Opera */
@ -34,7 +37,22 @@ input[type=number] {
vertical-align: top; vertical-align: top;
} }
#pushtoscene { .btn-shader {
height: 50px; background-color: #cc241d;
width: 150px; color: #ebdbb2;
}
.btn-object {
background-color: #98971a;
color: #ebdbb2;
}
.btn-texture {
background-color: #458588;
color: #ebdbb2;
}
.btn-scene {
background-color: #b16286;
color: #ebdbb2;
} }

5
src/client/main.ts
View File

@ -14,6 +14,11 @@ import {uiUpdateScene} from './uiscene';
import {initUX} from './ux'; import {initUX} from './ux';
import {updateCamera} from './camera'; import {updateCamera} from './camera';
if (window.innerWidth < 1900) {
$('#screen-warning').append(`
<div class='display-4'>This app works best on 1920x1080 screens !</div>
`);
}
main(); main();
/** /**

198
src/client/uiscene.ts
View File

@ -35,90 +35,122 @@ export function uiUpdateScene(context: any) {
let instanceRadioString; let instanceRadioString;
if ($('input[name=instance]:checked', '#instanceoptions').val() == if ($('input[name=instance]:checked', '#instanceoptions').val() ==
'normal') { 'normal') {
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal" checked> instanceRadioString = `
<label for="normal">Use instance slider</label> <div class='custom-control custom-radio'>
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one"> <input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal" checked>
<label for="one">Lock to one instance</label> <label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero"> </div>
<label for="zero">Do not show object</label>`; <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 ( } else if (
($('input[name=instance]:checked', '#instanceoptions').val() == ($('input[name=instance]:checked', '#instanceoptions').val() ==
'one')) { 'one')) {
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal"> instanceRadioString = `
<label for="normal">Use instance slider</label> <div class='custom-control custom-radio'>
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one" checked> <input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal">
<label for="one">Lock to one instance</label> <label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero"> </div>
<label for="zero">Do not show object</label>`; <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 { } else {
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal"> instanceRadioString = `
<label for="normal">Use instance slider</label> <div class='custom-control custom-radio'>
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one"> <input class="custom-control-input" type="radio" id="` + context.scene.length + `normal" name="` + context.scene.length + `instance" value="normal">
<label for="one">Lock to one instance</label> <label class="custom-control-label" for="` + context.scene.length + `normal">Use instance slider</label>
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero" checked> </div>
<label for="zero">Do not show object</label>`; <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(` $('#scene-block').append(`
<div class='ui-block'> <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 + `">
<div style='display: inline;'>Change shader: </div> Object ` + context.scene.length + `
<button id='` + context.scene.length + `s_blackandwhite'>Black & White</button> </button>
<button id='` + context.scene.length + `s_color'>Colored</button> <div class="collapse" id="collapse` + context.scene.length + `">
<button id='` + context.scene.length + `s_grey'>No texture</button> <div class='ui-block my-2'>
<button id='` + context.scene.length + `s_texture'>Texture</button> <div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
<button id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button> <div style='display: inline-block; width: 65%'>
<button id='` + context.scene.length + `s_fractal'>Fractal</button> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_blackandwhite'>Black & White</button>
</div> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_color'>Colored</button>
<div class='ui-block'> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_grey'>No texture</button>
<div style='display: inline;'>Change instances number: </div> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_texture'>Texture</button>
<input type="range" min="1" max="180" value="` + $('#instance').val() + `" step='1' class="slider" id="` + context.scene.length + `instance"> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button>
</div> <button class="my-1 btn btn-shader" id='` + context.scene.length + `s_fractal'>Fractal</button>
<div class='ui-block'> </div>
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form> </div>
</div> <div class='ui-block my-2'>
<div class='ui-block'> <div style='display: inline-block; width:30%;'>Change object: </div>
<div style='display: inline;'>Change rotation: </div> <div style='display: inline-block; width: 65%'>
<div style='display: inline;'>X: </div> <button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_sphere'>Sphere</button>
<input type="range" min="0" max="6.2830" value="` + $('#rotx').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotx"> <button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_teapot'>Teapot</button>
<div style='display: inline;'>Y: </div> <button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_fox'>Fox</button>
<input type="range" min="0" max="6.2830" value="` + $('#roty').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `roty"> <button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_mecha'>Mecha</button>
<div style='display: inline;'>Z: </div> <button class="my-1 btn btn-object" style='min-width: 8%' id='` + context.scene.length + `o_racer'>Racer</button>
<input type="range" min="0" max="6.2830" value="` + $('#rotz').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotz"> </div>
</div> </div>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Change scale: </div> <div style='display: inline-block; width:30%;'>Change texture: </div>
<div style='display: inline;'>X: </div> <div style='display: inline-block; width: 65%'>
<input type="number" value="` + $('#scalex').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalex"> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_wall'>Wall</button>
<div style='display: inline;'>Y: </div> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_ice'>Ice</button>
<input type="number" value="` + $('#scaley').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scaley"> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_noise'>Noise</button>
<div style='display: inline;'>Z: </div> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_fox'>Fox</button>
<input type="number" value="` + $('#scalez').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalez"> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_racer'>Racer</button>
</div> <button class="my-1 btn btn-texture" style='min-width: 8%' id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button>
<div class='ui-block'> </div>
<div style='display: inline;'>Translate: </div> </div>
<div style='display: inline;'>X: </div> <div class='ui-block'>
<input type="number" value="` + $('#posx').val() + `" step='0.00001' id="` + context.scene.length + `posx"> <div style='display: inline-block; width:30%;'>Change instances number: </div>
<div style='display: inline;'>Y: </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">
<input type="number" value="` + $('#posy').val() + `" step='0.00001' id="` + context.scene.length + `posy"> </div>
<div style='display: inline;'>Z: </div> <div class='ui-block'>
<input type="number" value="` + $('#posz').val() + `" step='0.00001' id="` + context.scene.length + `posz"> <form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
</div> </div>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Change object: </div> <div style='display: inline-block; width:30%;'>Change rotation: </div>
<button id='` + context.scene.length + `o_sphere'>Sphere</button> <div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
<button id='` + context.scene.length + `o_teapot'>Teapot</button> <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">
<button id='` + context.scene.length + `o_fox'>Fox</button> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
<button id='` + context.scene.length + `o_mecha'>Mecha</button> <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">
<button id='` + context.scene.length + `o_racer'>Racer</button> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Z: </div>
</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 class='ui-block'> </div>
<div style='display: inline;'>Change texture: </div> <div class='ui-block my-2'>
<button id='` + context.scene.length + `t_wall'>Wall</button> <div style='display: inline-block; width:30%;'>Change scale: </div>
<button id='` + context.scene.length + `t_ice'>Ice</button> <div style='display: inline-block; width:2%;'>X: </div>
<button id='` + context.scene.length + `t_noise'>Noise</button> <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">
<button id='` + context.scene.length + `t_fox'>Fox</button> <div style='display: inline-block; width:2%;'>Y: </div>
<button id='` + context.scene.length + `t_racer'>Racer</button> <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">
<button id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button> <div style='display: inline-block; width:2%;'>Z: </div>
</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) => { $('#' + context.scene.length + 't_wall').on('click', (event) => {
const n = parseInt(event.target.id.split('t')[0]); const n = parseInt(event.target.id.split('t')[0]);
if (context.cache.textures.wall == null) { 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[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) => { $('#' + context.scene.length + 't_fox').on('click', (event) => {
const n = parseInt(event.target.id.split('t')[0]); const n = parseInt(event.target.id.split('t')[0]);
if (context.cache.textures.fox == null) { if (context.cache.textures.fox == null) {

171
views/index.ejs
View File

@ -8,106 +8,124 @@
content="Simple WebGL app to demonstrate my skills"> content="Simple WebGL app to demonstrate my skills">
<title>WebGL</title> <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"> <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> </head>
<body> <body>
<div id='screen-warning'>
</div>
<div id="root"> <div id="root">
<canvas id='glCanvas' width='640' height='640'></canvas> <div class='mx-0 px-0' id='ui' style='display: inline-block; width: 620px'>
<div id='ui'> <div class='ui-block lead' style='width: 620px'>
<div class='ui-block'>
To control the camera orientation with mouse, click in the canvas, to exit, click again.<br> 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. 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>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Change shader: </div> <div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
<button id='s_blackandwhite'>Black & White</button> <div style='display: inline-block; width: 65%'>
<button id='s_color'>Colored</button> <button class="my-1 btn btn-shader" id='s_blackandwhite'>Black & White</button>
<button id='s_grey'>No texture</button> <button class="my-1 btn btn-shader" id='s_color'>Colored</button>
<button id='s_texture'>Texture</button> <button class="my-1 btn btn-shader" id='s_grey'>No texture</button>
<button id='s_sobel'>Sobel Edge Detection</button> <button class="my-1 btn btn-shader" id='s_texture'>Texture</button>
<button id='s_fractal'>Fractal</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>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change distance: </div> <div class='distance-block'>
<div style='display: inline;'>Fine: </div> <div style='display: inline-block; width:30%;'>Distance Fine: </div>
<input type="range" min="1" max="50" value="25" class="slider" id="distancefine"> <input class='custom-range' style='width:65%' type="range" min="1" max="50" value="25" class="slider" id="distancefine">
<div style='display: inline;'>Coarse: </div> <br>
<input type="range" min="1" max="1000" value="40" class="slider" id="distance"> <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>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change circle size: </div> <div style='display: inline-block; width:30%;'>Change circle size: </div>
<input type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize"> <input class='custom-range' style='width:65%' type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change fov: </div> <div style='display: inline-block; width:30%;'>Change fov: </div>
<input type="range" min="15" max="150" value="45" class="slider" id="fov"> <input class='custom-range' style='width:65%' type="range" min="15" max="150" value="45" class="slider" id="fov">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change base rotation speed: </div> <div style='display: inline-block; width:30%;'>Change base rotation speed: </div>
<input type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed"> <input class='custom-range' style='width:65%' type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change instances number: </div> <div style='display: inline-block; width:30%;'>Change instances number: </div>
<input type="range" min="1" max="180" value="9" step='1' class="slider" id="instance"> <input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<form id="instanceoptions"> <form id="instanceoptions">
<input type="radio" id="normal" name="instance" value="normal" checked> <div class='custom-control custom-radio'>
<label for="normal">Use instance slider</label> <input class="custom-control-input" type="radio" id="normal" name="instance" value="normal" checked>
<input type="radio" id="one" name="instance" value="one"> <label class="custom-control-label" for="normal">Use instance slider</label>
<label for="one">Lock to one working instance</label> </div>
<input type="radio" id="zero" name="instance" value="zero"> <div class='custom-control custom-radio'>
<label for="zero">Do not show working instance</label> <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> </form>
</div> </div>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Change rotation: </div> <div style='display: inline-block; width:30%;'>Change rotation: </div>
<div style='display: inline;'>X: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx"> <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 style='display: inline;'>Y: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="roty"> <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 style='display: inline;'>Z: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Z: </div>
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz"> <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>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Change scale: </div> <div style='display: inline-block; width:30%;'>Change scale: </div>
<div style='display: inline;'>X: </div> <div style='display: inline-block; width:2%;'>X: </div>
<input type="number" value="1" min="0" step='0.00001' id="scalex"> <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;'>Y: </div> <div style='display: inline-block; width:2%;'>Y: </div>
<input type="number" value="1" min="0" step='0.00001' id="scaley"> <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;'>Z: </div> <div style='display: inline-block; width:2%;'>Z: </div>
<input type="number" value="1" min="0" step='0.00001' id="scalez"> <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>
<div class='ui-block'> <div class='ui-block my-2'>
<div style='display: inline;'>Translate: </div> <div style='display: inline-block; width:30%;'>Translate: </div>
<div style='display: inline;'>X: </div> <div style='display: inline-block; width:2%;'>X: </div>
<input type="number" value="0" step='0.00001' id="posx"> <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;'>Y: </div> <div style='display: inline-block; width:2%;'>Y: </div>
<input type="number" value="0" step='0.00001' id="posy"> <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;'>Z: </div> <div style='display: inline-block; width:2%;'>Z: </div>
<input type="number" value="0" step='0.00001' id="posz"> <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>
<div class='ui-block'> <div class='ui-block text-center my-2'>
<div style='display: inline;'>Change object: </div> <button class="btn btn-lg btn-success text-center" id='pushtoscene'>Push To Scene</button>
<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> </div>
<div class='ui-block'> <div class='ui-block'>
<a href='https://git.gaetanbrochard.dev/gbrochar/webgl'>This project's git</a> <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> <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>
</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> </div>
<script src="js/bundle.js"></script> <script src="js/bundle.js"></script>
</body> </body>