Salve, ecco alcune rapide premesse... probabilmente troppo rapide per una cosa così tosta.

Proviamoci......

-----Il linguaggio HTML serve a costruire pagine web residenti su un web-server remoto e accessibili localmente tramite internet da un web browser (Chrome,Firefox,Edge...)

-----Il linguaggio javascript permette elaborazioni locali e interazioni con gli elementi delle pagine HTML.

----Lanciando un link alla pagina residente sul web-server il nostro browser riceve ed elabora il codice HTML con il codice javascript incorporato.

-----Il browser apre una pagina web anche con un link locale senza interazione con un web-server remoto ma in questo caso non tutte le funzionalità potebbero essere operative.

-----volendo aggirare l'ostacolo è possibile usare un web-server locale (SERVEZ per esempio).

In questo modo il link locale viene aperto tramite il web-server locale garantendo tutte le funzionalità.

-----Per comprendere agevolmente il codice proposto sarebbe utile un minimo di conoscenza del linguaggio HTML/javascript; userò comunque molte annotazioni esplicative del codice.

-----Il codice javascript è racchiuso tra i tag nella pagina HTML.

-----Il codice HTML e quello javascript sono in formato testo editabile con qualunque editor testuale. Uso SublimeText come editor di testo specializzato.

Corso1-----------------------------------------


-----Babylon offre una moltitudine di metodi per creare facilmente linee, piani, cubi, sfere, nastri .....sono primitive molto comode. In questo primo pacchetto introduttivo si costruiscono da zero le strutture 3d principali partendo dai singoli vertici (x,y,z) , le sequenza di formazione dei triangoli elementati e le corrispondenze tra i vertici 3d nello spazio e i vertici 2d delle immagini che ricoprono (texture) le figure 3d. Viene implementata una semplice animazione di rotazione.

Cavolo...ho letto solo ora!!Interessantissimo!

Salve, procedendo in solitaria su qualsiasi percorso, la mancanza di una guida, di uno sherpa , di un maestro ti costringe a procedere per tentativi. L'esperienza e l'apprendimento che via via viene acquisito è si un bagaglio prezioso , ma non garantisce mai che la via che stai percorrendo sia la migliore. A volte solo alla fine , e non sempre, raggiunto l'obiettivo, si può capire se il percorso compiuto è stato più o meno efficace, efficiente , economico ... il più semplice. La condizione essenziale per procedere è la passione, la curiosità quasi infantile. A volte sei costretto a ritornare indietro a quel bivio che ti ha portato in quel "cul de sac" dal quale non sei stato in grado di uscire.
Il ruolo del maestro è fondamentale in qualunque disciplina.

Ho ormai scelto di procedere alla scoperta di BabylonJS, non so se è la piattaforma 3d migliore, ma ormai sono andato troppo avanti, troppo tempo ho impegnato, e quindi "tirrem innanz".

Ci sono stati perlomeno due ostacoli che mi hanno costretto a retrocedere per tentare altre vie.

Il primo ostacolo è stata l'implementazione di una galleria....
come creare un buco in quella trama di triangoli...

Gli esempi che ho postato precedentemente sono sufficienti per risolvere il problema. Se faccio coincidere i tre vertici di uno dei triangoli con uno solo dei suoi vertici ... il triangolo di fatto sparisce e il gioco è fatto.... compare un buco.

Ho perso mesi a fare un buco in un terreno dinamico , ed ho fallito.
Un terreno dinamico è una trama (mesh) dedicata a risolvere la visualizzazione di vaste aree parzializzando la visuale solo ad una sottoarea più piccola vicino all'osservatore (telecamera).

Vi accorgerete che nel mio plastico ferroviario , mano a mano che avanzate , crescono le parti delle montagne lontane che via via si avvicinano.

Non è un bell'effetto , è possibile aggiungere una nebbia per nascondere la progressiva visualizzazione dei particolari lontani che via via si avvicinano .... non mi è piaciuto...

Non essendo riuscito a fare un buco nel terreno dinamico .... ho abbandonato il terreno dinamico ed ho optato per terreno semplice... facilmente bucabile.

C'era un altro problema da risolvere. Man mano che aggiungo binari , treni, fabbricati, alberi il sistema rallenta.
Quando il motore grafico non riesce a mantenere almeno 20 frame/sec
la visualizzazione procede sempre più a scatti... sgradevole.

Un elaboratore più potente, migliorerebbe la fluidità della visualizzazione, ma così è troppo facile e ... costoso.

Bisogna cercare soluzioni software....

Ho dovuto abbandonare un bel po di codice per ripartire con "StarGate"....
Sono sempre stato affascinato dalla fantascienza, Star Treak, WarmHole .... La piegatura dello SpazioTempo... I signori dello spazio 4D .... Interstellar...

Cosa centra con i trenini ? ... mo ve lo spiego....

Se viaggio in treno tra Roma e Frascati, se sono a Roma vedo Roma e se sono a Frascati vedo Frascati. Potrei avere due telecamere , una a Roma ed una a Frascati, ma se rinuncio a guardarle contemporaneamente , quando elaboro la visualizzazione a Roma non mi serve elaborare quello che ,essendo a Roma, non vedo a Frascati.
Nel nostro caso se ci sono due treni uno a Roma ed uno a Frascati devo elaborare le loro posizioni ma non la visualizzazione di entrambi....

In BabylonJS è possibile elaborare piu scene ma non è possibile spostare una mesh tra una scena e l'altra..... come faccio a spostare il mio trenino tra la scena di Roma e quella di Frascati ? ... non si può.

La Fantascienza, la fantasia ci aiuta ancora una volta...

La teoria degli infiniti ... universi paralleli.

Di ogni trenino esistono i rispettivi alias in ogni scena. A seconda delle situazioni in ogni scena vengono o meno visualizzati gli alias di quella scena....

Faccio fatica a spiegarlo e mi rendo conto di essere quasi incomprensibile.... ehhehehehhh.

Facciamo un esempio.... con un treno solo e due scene.
In ogni scena esiste un alias del treno ma solo uno è visibile nella sua scena di ... esistenza.

Il treno ... esiste a Roma , il suo alias a Frascati è invisibile.
Si avvicina allo Stargate, nascosto in mezzo alla galleria....
Appena lo supera diventa invisibile e diventa visibile il suo alias nella scena di Frascati.... adesso mi sembra comprensibile...

La galleria è un espediente, ma possiamo pensarne altri, per mascherare il repentino cambio di scena.

Ho quasi ultimato l'implementazione di un plastico con quattro scene e sto sistemando il salto di scena dei convogli...

L'idea ha funzionato , una quinta scena (master) visualizza solo il pannello dei comandi utente ed elabora solo le posizioni della posizione dei convogli nelle rispettive scene di esistenza...

Quando sarà operativa vi farò partecipi....

In questo link vi propongo l'ultima versione con una scena singola.

Alcune operazioni di manovra compreso l'approccio automatico , l'aggancio e lo sgancio dei rotabili sono operative ma incomplete con bug irrisolti e ormai abbandonati.

Le gallerie nel terreno dinamico sembrano averlo bucato , ma è solo un trucco di paraventi ... Potete scoprire molte cose volando con il joystick del drone...

Ecco il link.....

LINK

E' migliorato molto complimenti!
grazie per il giro turistico gratis

Notevole il salto...

Salve, ho proseguito il mio percorso ferroviario nel mio progetto virtuale in 3D. Appena avrò abbozzato una versione sufficientemente autonoma ve la proporrò con il solito link...

Sto usando un giocattolo di costruzioni... incredibile..

Ho costruito una vallata stretta e tortuosa dove i binari costeggiano scarpate e dirupi... In fondo alla valle scorre un torrente...
La vecchia linea trifase alimenta le locomotive E555 che arrancano in salita... Cosa alimenta la linea ? Da dove arriva l'ENERGIA ?

Il tema dell'energia non è eludibile ... in un sito come questo...

Costruisco la diga... il salto è notevole... due dighe.
Manca qualcosa... in una realtà virtuale manca sempre qualcosa..

Vediamo ora di calcolare la posizione di due punti sulla parabola a distanza orizzontale e verticale predefiniti.

data la parabola y1= p x1^2 (*)
la distanza orizzontale d e quella verticale h
il secondo punto ha coordinate:
x2=x1+d (**); y2=y1+h;
imponiamo che tale punto appartenga alla parabola
y2= p x2^2 ;
sostituendo otteniamo :
y1+h= p(x1+d)^2;
y1=p(x1+d)^2-h;
y1=p x1^2+ p d^2+ 2p x1 d -h; confrontando con (*)
y1=p x1^2; risolvendo per differenza
0 = 0 + p d^2+ 2p x1 d -h;
2p x1 d = h - p d^2;
x1 = (h - p d^2)/2pd;
x1 = h/2pd - (p d^2)/2pd ; semplificando il secondo membro
-----------------------
x1 = h/2pd - d/2 ; (***)
-----------------------
x2 = x1 + d; (**)
-----------------------

La (***) individua l'ascissa del primo punto sulla parabola
La (**) individua l'ascissa del secondo punto sulla parabola.

Vediamo ora il funzionamento su un simulatore HTML.

-TOP CODE-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sostegni su catenaria </title> </head> <body> distanza : <span id="sldd" style="font-size: 22pt">10</span> <input id="sld" type="range" min="20" max="300" value="10" style="width: 350px" onmousemove="ReCalc();">                 altezza : <span id="sldh" style="font-size: 22pt">0</span> <input id="slh" type="range" min="0" max="200" value="0" style="width: 350px" onmousemove="ReCalc();"> <canvas id="myCanvas" width="1000" height="420" style="border:1px solid #000";></canvas> <script> var dat1=document.getElementById("dat1"); var sldd=document.getElementById("sldd"); var sldh=document.getElementById("sldh"); var sld= document.getElementById("sld"); var slh= document.getElementById("slh"); var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var x0=500,y0=300,f=.001; var x,y,x1,y1,x2,y2; var p=.001; // coefficiente parabola Remake(20,0); // parametri iniziali diastanza:20 altezza:0 //---------------------------- function Remake(d,h){ //------------- oscuramento sfondo ctx.fillStyle = "black"; ctx.fillRect(0, 0, 1000,600); ctx.fill(); //---------------titolo ctx.fillStyle= "white"; ctx.font = "20px Georgia"; ctx.fillText("Sostegni su catenaria",400,50); //------------- tracciamento parabola ctx.strokeStyle= "white"; ctx.beginPath(); ctx.moveTo(100,140); for(x=-500;x<500;x++){ y=p*x*x; ctx.lineTo(x0+x,y0-y); } //------------ x1=h/(2*p*d)-d/2; // formula risolutiva ascissa prima sospensione y1=-p*x1*x1; // ordinata prima sospensione //------------traccia prima sospensione ctx.moveTo(x0+x1,y0+y1); ctx.lineTo(x0+x1-5,y0+y1+100); ctx.lineTo(x0+x1+10,y0+y1+100); ctx.lineTo(x0+x1,y0+y1); ctx.arc(x0+x1, y0+y1, 5, 0, 2 * Math.PI); //------------ x2=x1+parseInt(d);// ascissa seconda sospensione y2=-p*x2*x2; // ordinata seconda sospensione //------------traccia seconda sospensione ctx.moveTo(x0+x2,y0+y2); ctx.lineTo(x0+x2-5,y0+y2+100); ctx.lineTo(x0+x2+10,y0+y2+100); ctx.lineTo(x0+x2,y0+y2); ctx.arc(x0+x2, y0+y2, 5, 0, 2 * Math.PI); //---------------disegna ctx.stroke(); } function ReCalc(){ d=sld.value; sldd.innerHTML = d; h=slh.value; sldh.innerHTML = h; Remake(d,h); } </script> </body> </html>
-BOTTOM CODE-

Come al solito potete copiaincollare il codice su un file di testo e rinominarlo "comevipare.html" ... forse meglio con "catenaria.html".

Aprite il file così ottenuto con il browser HTML ....
dovreste vedere questo :

Vediamo ora come affrontare il tracciamento di una catenaria tra due sospensioni in uno spazio 3d.

Nello spazio 2d le coordinate dei sostegni sono (x1,y1) e (x2,y2).
Nello spazio 3d le coordinate dei sostegni sono (x1,y1,z1) e (x2,y2,z2).
L'altezza tra i sostegni continua ad essere y2-y1.
La distanza orizzontale diventa l'ipotenusa di un triangolo rettangolo in cui i cateti sono (x2-x1) e (z2-z1) ... (Teorema di Pitagora).

Nel programma che vi propongo troverete nella funzione d_par(v1,v2)
le formule della distanza (Pitagora) ed il calcolo dell'angolo orizzontale
tra i sostegni... arcotangente di (z2-z1)/((x2-x1).

La funzione calcola distanza e angolo orizzontale tra i sostegni (v1 e v2)
dove v1 è il vettore (x1,y1,z1) e v2 è il vettore (x2,y2,z2)

-TOP CODE-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../BabylonJS/babylon_min.js"></script> </head> <body> <canvas id="renderCanvas" width="1000" height="600"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true,{preserveDrawingBuffer: true, stencil: true }); var $tral=[]; var $tern=[]; var $pall=[]; var $a,$d; var createScene = function () { var scene = new BABYLON.Scene(engine); //scene.ambientColor = new BABYLON.Color3(1, 1, 1); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 50, 20), scene); light.diffuse = new BABYLON.Color3(1, 1, 1); light.specular = new BABYLON.Color3(1, 1, 1); light.groundColor = new BABYLON.Color3(1, 1, 1); var camera = new BABYLON.FreeCamera("camera1",new BABYLON.Vector3(30,.6,-10), scene); camera.attachControl(canvas, true); camera.rotation=new BABYLON.Vector3(0,-.8,0); //----Mesh Traliccio let tralMat = new BABYLON.StandardMaterial("tralMat",scene); tralMat.diffuseTexture= new BABYLON.Texture("textures/trali.png", scene); tralMat.diffuseTexture.hasAlpha = true; tralMat.backFaceCulling = false; var positions =[ -2, 10, .1, 2, 10, .1, -2,.85, .5, 2,.85, .5, // 3 Traliccio -2, 10, -.1, 2, 10, -.1, -2,.85, -.5, 2,.85, -.5, // 7 -.75, 0, .75, .75, 0, .75, -.75,.84, .75, .75,.84, .75, //11 Blocco -.75,.84,-.75, .75,.84,-.75, -.75, 0,-.75, .75, 0,-.75]; //15 var indices =[ 0, 1, 3, 3, 2, 0, 4 , 5, 7, 7, 6, 4, 8, 9,11, 11,10, 8, 10,11,13, 13,12,10, 12 ,13,15, 15,14,12, 14, 8,10, 10,12,14, 9,15,13, 13,11,9]; var uvs =[ 0, 1, 1, 1, 0,.087, 1, .087, // 3 0, 1, 1, 1, 0,.087, 1, .087, // 7 .45, .07, .55,.07, .45, 0, .55, 0, //11 .45, .07, .55,.07, .45, 0, .55, 0]; //15 var normals = []; BABYLON.VertexData.ComputeNormals(positions, indices, normals); var vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.indices = indices; vertexData.normals = normals; vertexData.uvs = uvs; $tral[0]=[]; $tral[0][0] = new BABYLON.Mesh("custom", scene); vertexData.applyToMesh($tral[0][0]); //-------------------------------------------------Traliccio 1 $tral[0][0].material=tralMat; $tral[0][0].position=new BABYLON.Vector3(0,0,0); $tral[0][0].rotation=new BABYLON.Vector3(0,0,0); //-------------------------------------------------Traliccio 2 $tral[1]=[]; $tral[1][0]=$tral[0][0].clone(); $tral[1][0].position=new BABYLON.Vector3(0,0,50); $tral[1][0].rotation=new BABYLON.Vector3(0,0,0); //-------------------------------------------------Traliccio 3 $tral[2]=[]; $tral[2][0]=$tral[0][0].clone(); $tral[2][0].position=new BABYLON.Vector3(40,20,90); $tral[2][0].rotation=new BABYLON.Vector3(0,.5,0); //-------------------------------------------------Traliccio 4 $tral[3]=[]; $tral[3][0]=$tral[0][0].clone(); $tral[3][0].position=new BABYLON.Vector3(40,-20,250); $tral[3][0].rotation=new BABYLON.Vector3(0,.5,0); IsoDat(); Terna(); return scene; }; scene = createScene(); engine.runRenderLoop(function () { if (scene) {scene.render();} }); window.addEventListener("resize", function () {engine.resize();}); function IsoDat(){ let a,dt1,dt2,dt3,x1,x2,x3,y1,y2,y3,z1,z2,z3; for(var k=0;k<$tral.length;k++){ a=-$tral[k][0].rotation.y; x1=$tral[k][0].position.x-1.22*Math.cos(a); x2=$tral[k][0].position.x-1.74*Math.cos(a); x3=$tral[k][0].position.x+1.59*Math.cos(a); y1=$tral[k][0].position.y+8.4; y2=$tral[k][0].position.y+6.9; y3=$tral[k][0].position.y+7.65; z1=$tral[k][0].position.z-1.22*Math.sin(a); z2=$tral[k][0].position.z-1.74*Math.sin(a); z3=$tral[k][0].position.z+1.59*Math.sin(a); $tral[k][1]=new BABYLON.Vector3(x1,y1,z1); $tral[k][2]=new BABYLON.Vector3(x2,y2,z2); $tral[k][3]=new BABYLON.Vector3(x3,y3,z3); if(k>0){ $tral[k][4]=y1-$tral[k-1][1].y; //h $tral[k][5]=y2-$tral[k-1][2].y; $tral[k][6]=y3-$tral[k-1][3].y; d_par($tral[k-1][1],$tral[k][1]); $tral[k][7]=$d;$tral[k][10]=$a; // distanza angolo d_par($tral[k-1][2],$tral[k][2]); $tral[k][8]=$d;$tral[k][11]=$a; d_par($tral[k-1][3],$tral[k][3]); $tral[k][9]=$d;$tral[k][12]=$a; } } } function Terna(){ for(var k=1;k<$tral.length;k++){ $tern[k]=[]; for(var f=0;f<3;f++){Fase(k,f);} } } function Fase(k,f){ let xk,yk,vx,vz; let c=[]; let w=10; // spezzate let p=.003; // coefficiente parabola y= p*x*x let h=$tral[k][4+k-1]; // dislivello let d=$tral[k][7+k-1] // distanza let ds=d/(w); // lunghezza spezzata let x1=-h/(2*p*d)-d/2; // start su parabola let y1=p*x1*x1; let a=$tral[k][10+f]; // angolo orizzontale let point; let sfe; c[0]=$tral[k][1+f]; // start Vector3 for(var j=1;j<(w+1);j++){ vx=ds*Math.cos(a); vz=ds*Math.sin(a); xk=x1+j*ds; yk=y1-p*xk*xk; // ordinata parabola c[j]= new BABYLON.Vector3(c[j-1].x-vx,c[0].y-yk,c[j-1].z-vz); point=[c[j-1],c[j]]; $tern[k][1]= BABYLON.MeshBuilder.CreateLines("lines", {points: point}); $tern[k][1].color = new BABYLON.Color3(.2,.1,0); $tern[k][1].useVertexAlpha=false; /* sfe = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: .2}); sfe.position=c[j]; $pall.push(sfe); sfe.setEnabled=false; */ } } function d_par(v1,v2){ let x1,y1,z1,z2; x1=v1.x;z1=v1.z; x2=v2.x;z2=v2.z; $a=Math.atan2(z2-z1,x2-x1); // angolo $d=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(z2-z1,2)); // distanza } </script> </body> </html>
-BOTTOM CODE-

Ecco cosa appare ...

Ho completato l'inserimento delle linee primarie 66 kV nel mio simulatore ferroviario, Non potevano mancare Centrali Idroelettriche e SSE di conversione 3.4 kV.
L'esigenza principale che sto cercando di mantenere è la velocità di elaborazione... Devo compromettere la qualità della grafica per non appesantire troppo l'elaborazione cercando di non ridurre troppo i fps: frames/sec .
Vi propongo un video del risultato ottenuto ...



Saluti...

Veramente apprezzabile, complimenti. Anche l'audio contribuisce alla sensazione più realistica... Qualche fischio (Tuuuu tuuuu) magari ci starebbe...
Credo che si possa attivare in corrispondenza di eventi particolari: partenza, incrocio treni, approssimarsi al PL o altro; come per le Cascate e la Vaporiera...

Magari il fischietto del CapoStazione all'avvio, i Din-din-din-din-din dell'Annucio Treni i l Dlen-Delen dei PL... Lo so "ricordo ad occhi aperti"!

I miei ricordi fanciulleschi erano legati molto anche sulle Catenarie delle Funi di Guardia o delle immancabili linee telegrafiche/telefoniche che ondeggiavano.

I sostegni della Linea di Contatto coincidono con due Martellamenti (To-Ton To-Ton) e il sincrono di video più audio, mi sembra induca un senso di monotonia. Il paesaggio mutevole per contro rende attraente la sceneggiatura.

So quanto sforzo sta dietro a queste cose e guardandolo è stata la mia immaginazione che ha aggiunto tutte quelle cose...
Che emozione!!!

3 ore di suoni del treno in corsa, ideale per rilassarsi, studiare, dormire. ASMR

wow!!!

Sempre meglio complimenti