Egalware/web3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix comportamento animazione start/stop x risparmio GPU

Browse Source
This commit is contained in:
Samuele Locatelli
2024-06-25 12:10:27 +02:00
parent 67ac56922f
commit 4860c824af
3 changed files with 128 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebDoorView/3DM_test/test_js_call/index3.html
+85 -28
View File
@@ -5,6 +5,7 @@
<title> Door render </title>
<link rel = "stylesheet" href = "style.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script type = "importmap">
{
"imports": {
@@ -24,37 +25,82 @@
<div class="d-flex">
</div>
<div class = 'container'>
<button id = 'helpButton'>?</button>
<button onclick="resetCamera()">bar</button>
<button onclick="setOrtho()">O</button>
<button onclick="setPersp()">P</button>
<button onclick="toggleCube()">C</button>
<button onclick="toggleFrame()">F</button>
<button onclick="toggleGrid()">G</button>
<button onclick="toggleQuote()">Q</button>
<button onclick="toggleRotate()">R</button>
<button class="btn btn-sm btn-light" id = 'helpButton'>?</button>
<!-- <button class="btn btn-sm btn-light" onclick="resetCamera()">bar</button>
<button class="btn btn-sm btn-light" onclick="setOrtho()">O</button>
<button class="btn btn-sm btn-light" onclick="setPersp()">P</button>
<button class="btn btn-sm btn-light" onclick="toggleCube()">C</button>
<button class="btn btn-sm btn-light" onclick="toggleFrame()">F</button>
<button class="btn btn-sm btn-light" onclick="toggleGrid()">G</button>
<button class="btn btn-sm btn-light" onclick="toggleQuote()">Q</button>
<button class="btn btn-sm btn-light" onclick="toggleRotate()">R</button> -->
<button class="btn btn-sm btn-light" onclick="doFreeze()">A</button>
<button class="btn btn-sm btn-light" onclick="doAnim()">S</button>
</div>
<div class = 'container'>
<div id = 'infoDiv'>
<pre>
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Quotes : Key-Q
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
</pre>
<ul class="list-group small">
<li class="list-group-item active">
<b>Camera settings</b>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Toggle Show-Cube : <b>C</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleCube()">C</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Toggle Show-Frame : <b>F</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleFrame()">F</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Toggle Show-Grid : <b>G</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleGrid()">G</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Toggle Show-Quotes : <b>Q</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleQuote()">Q</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Toggle Auto-rotation : <b>R</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleRotate()">R</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
Center: <b>SpaceBar</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="resetCamera()">_</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
ISO/ORTHO: <b>O</b> ( orthographic )
</div>
<button class="btn btn-sm btn-primary py-0" onclick="setOrtho()">O</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<div>
PERSP: <b>P</b> ( perspective )
</div>
<button class="btn btn-sm btn-primary py-0" onclick="setPersp()">P</button>
</li>
<li class="list-group-item d-flex justify-content-between">
<b>Zoom</b> Wheel-Scroll
</li>
<li class="list-group-item d-flex justify-content-between">
<b>Pan</b> Mouse-Wheel and Drag
</li>
<li class="list-group-item d-flex justify-content-between">
<b>Rotate</b> CTRL + Mouse-Right + Drag
</li>
</ul>
</div>
</div>
</div>
@@ -63,6 +109,7 @@
<div id = 'RefRender'></div>
<div id = 'Ref1Render'></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
<script type = 'module'>
import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
@@ -94,6 +141,16 @@
WGL.resetCamera();
}
// imposta animazione vs freezed
window.doFreeze = () =>
{
WGL.doFreeze();
}
window.doAnim = () =>
{
WGL.doAnimate();
}
// reset camera
window.setOrtho = () =>
{
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
Generated Vendored
+31 -9
View File
@@ -32,6 +32,7 @@ var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var fram
/* Box3d of the door ------------ */
var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame()
/* ------------------------------ */
var freezed = 0;
// costanti globali
// scene
@@ -90,6 +91,20 @@ class webgl_original {
let timeElapsed = endTime - startTime;
console.log('init done in : ' + timeElapsed);
}
async doFreeze()
{
freezed = 1;
}
async doAnimate()
{
if(freezed == 1)
{
freezed = 0;
await animate();
}
}
/**
* reset posizione camera
@@ -99,6 +114,7 @@ class webgl_original {
myResetCamera();
}
/**
* imposta vista isometrica/ortografica
*/
@@ -161,13 +177,19 @@ export { webgl_original }
// rendering
function animate() {
requestAnimationFrame( animate) ;
if (freezed == 1)
{
console.log(freezed);
return;
}
renderer.render( scene, controls.object) ;
controls.update() ;
cube_ref.update( controls) ;
renderer_ref.render( scene_ref, camera_ref) ;
updateRef( frame_ref1, camera_ref1, controls) ;
renderer_ref1.render( scene_ref1, camera_ref1) ;
requestAnimationFrame( animate) ;
}
function readDoor() {
@@ -177,22 +199,22 @@ function readDoor() {
// removing shading from colors and adjusting z-fighting with lines ( organizing groups entities )
for ( let i = 0 ; i < object.children.length ; ++ i)
setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ;
// adding groups to scene
// adding groups to scene
scene.add( dimensionGroup) ;
scene.add( general_entity_Group) ;
// setting Box3d of the door
// setting Box3d of the door
set3dBox( object) ;
// setting camera position
// setting camera position
setCameraPosition() ;
// setting grid
// setting grid
setGrid() ;
// setting frame
// setting frame
setFrame() ;
// static cube
// static cube
setStaticCube() ;
// static frame
// static frame
setStaticFrame() ;
// render loop
// render loop
animate() ;
}) ;
}
WebDoorView/3DM_test/test_js_call/style.css
+12 -20
View File
@@ -14,16 +14,16 @@ canvas {
#divMenu {
position: fixed ;
top: 10px ;
right: 10px ;
top: 1rem;
right: 1rem;
background-color: transparent ;
width: 275px ;
width: 20rem ;
}
.container {
width: 100% ;
height: auto ;
margin-bottom: 10px ;
margin-bottom: 1rem ;
}
.container::after {
@@ -38,12 +38,6 @@ canvas {
display: block ;
}
#helpButton {
text-decoration: underline ;
/* float: right ; */
height: auto ;
}
#infoDiv {
width: 100% ;
height: auto ;
@@ -54,19 +48,17 @@ canvas {
#RefRender {
position: fixed ;
width: 200px ;
height: 200px ;
bottom: 10px ;
right: 10px ;
/*border: 1px solid black ;*/
width: 10rem ;
height: 10rem ;
bottom: 0.5rem ;
right: 0.5rem ;
}
#Ref1Render {
position: fixed ;
width: 150px ;
height: 150px ;
bottom: 10px ;
left: 10px ;
width: 8rem ;
height: 8rem ;
bottom: 0.5rem ;
left: 0.5rem ;
background-color: transparent ;
/*border: 1px solid black ;*/
}