Deutsch
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL mit three.js

 
- Seite 1 -



HofK
Auf einen heißen Tipp von IF hin, habe ich mir mal
three.js  [...]  angeschaut. Da  [...]  (ganz unten) die ersten Resultate.
 
31.01.2016  
 



 
- Seite 42 -



HofK
[OFFTOPIC]
Das "Großprojekt"- besser "Langzeitprojekt" ist die Portierung der 8 Bit CPU Simulation von Windows/XProfan/Deutsch zu Browser(Firefox)/Deutsch/Englisch unter Nutzung von three.js.

Curved2Geometry entstand aus einer Frage auf discourse  [...]  und ist abgeschlossen.

Wie bisher werde ich solche kleinen Sachen nebenher machen. Sonst wird es zu langweilig. Die Portierung erfordert noch viel fleißige Kleinarbeit, dann die Hilfen, Deutsch zu Englisch usw.

Demnächst werde ich das noch unvollständige Anfängerbeispiel  [...]  weiter ergänzen. Da gibt es noch eine to do Liste.

Aber es dreht sich immer um three.js 3D Grafik im Browser.

[/OFFTOPIC]
 
13.05.2021  
 




p.specht
[OFFTOPIC]Geklärt, danke![/OFFTOPIC]
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
13.05.2021  
 




HofK
Nach der Grafik waren die Tastatureingaben dran.

Dabei gilt es zwei unterschiedliche Fälle zu behandeln.

Während das binäre Maschinenprogramm läuft, muss auf jeden Tastendruck reagiert werden. Handelt es sich um ein Tastaturzeichen und keine Steuertaste, ist der binäre Wert in das Tastaturbyte des RAM einzutragen. Dazu das Zeichen und der hexadezimale Wert.

Drückt man mit Shift das Ä, sieht das so aus.



Kommt im Binärcode bei der Abarbeitung der Assemblerbefehl INP
muss auch die Eingabe mehrerer Ziffern möglich sein, um den Zahlenraum abzudecken.

Die Programmierung unterscheidet sich grundlegend von der Lösung mit XProfan.

Bei der laufenden Eingabe erscheint das Zeichen in einem span Element, beim INP Befehl gibt man in ein input, text Element ein. Bei XProfan reicht ein Edit-Feld, in das auch ausgegeben wird. Beim Browser macht da das "Eigenleben" einen Strich durch die Rechnung, man erhält doppelte Anzeigen. Mag sein, dass ich den richtigen Trick nicht gefunden habe.

Die zwei Elemente liegen übereinander und werden bei Bedarf sichtbar gemacht.



Beim Testen der laufenden Tastatureingabe stoppte plötzlich das Binärprogramm, obwohl ich nicht auf den Startbutton geklickt hatte.

Da ich "wild" auf der Tastatur herumgehämmert hatte, wusste ich nicht, ob es irgendeine Taste war. Die Steuertasten hatte ich vorher bereits aussortiert.
const noChars = ['Shift', 'Control', 'Alt', 'AltGraph', 'Enter', 'Backspace', 'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'Tab',  'CapsLock', 'Pause', 'ScrollLock', 'NumLock', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'OS', 'ContextMenu', 'Dead' ];

function onWindowKeyDown( event ) {

    if( progRuns && !paused && !onInput ) {

        let key = event.key;
        let noChr = false;

        for ( let i = 0; i < noChars.length; i ++ ) {

            noChr = noChr || ( key === noChars[ i ] );

            if ( noChr ) break;

            }

            if ( !noChr ) {

                key = key[0];// wichtig bei toten Tasten 'Dead'
                settext( inpKey_, key );// ... Zeichen in key Eingabe
                console.log('key ', key, '  key.ord( ) ', key.ord( ) ) //////////////////////////////////////////////////////////////////////////////////
                btmp = d255_to_bin8( key.ord( ) );
                settext( altinp_, key.ord( ) > 127 ? bin8_to_dez( btmp ).str( ) :'' );	// Wert des Zeichens darstellen
                settext( binp_, btmp );// binär anzeigen
                settext( hinp_, "h" + bin8_to_hex2( btmp ) );// hexadezimal anzeigen
                settext( ans_, key );// ANSI anzeigen
                RAM[ 246 ][2] = btmp;// RAM Adr 246 = hF6 binär eintragen ...
                rf_binRAM( 246 );
                RAM[ 246 ][3] = key + "    h" + bin8_to_hex2( btmp );// ... Zeichen und Wert hexadezimal eintragen
                rf_assFlagsRAM( 246 );

            }

        }

    }


Es stellte sich heraus, dass es beim drücken der Leertaste passiert. Mit console.log das event ausgegeben zeigte es sich, dass tatsächlich die Leertaste Schuld ist. Jedenfalls in Firefox!!! - siehe Bemerkungen weiter oben.

Da ich mich nie intensiv mit den Events beschäftigt hatte, musste ich erst einmal schauen und stellte fest, dass das 'click' nicht mehr genutzt werden sollte. Wegen der mobilen Geräte ist neuerdings das Pointer-Event zu wählen.

Also umgestellt. Damit funktioniert es nun und das Leerzeichen funkt nicht mehr dazwischen.



Ausprobieren - auch Konsole öffnen  [...] 

Hinweis: onPointerDown ist mittlerweile onStartbinPointerDown
 
20.05.2021  
 




HofK
Zwischendurch mal wieder eine kleinere Sache.

Da waren Fragen auf discourse
Animation. Move object along complex paths [...] 
Struggling with paths  [...] 

Daraufhin habe ich verschiedene Lösungsansätze ausprobiert. Aber ohne wirklichen Erfolg. Mit Quaternionen bin ich nicht zum Ziel gekommen, aber mit Matrizen hat es nach einem blöden Fehler von mir dann geklappt. Der Fehler verursachte eine Spiegelung mit flackern. Da ich es mir nicht erklären konnte, habe ich eine Frage auf discourse formuliert.  [...]  Bevor eine Antwort kam , habe ich den Fehler aber selbst gefunden. Ein Minus vor einem Vektor fehlte, in three.js mit .negate( ) zu notieren.

Nun bewegt sich die Biene exakt zur Raumkurve. Siehe  [...] 

 
03.06.2021  
 




HofK
Im Anfängerbeispiel  [...]  gab es bisher zwei Bienen an fester Position. Eine Biene bleibt im Schritt 3 fixiert, die andere bewegt sich nun im Schritt 15 auf ihrer Flugbahn mit Start an der Wabe.



Dazu gibt es vorher im Schritt 14 noch die Darstellung einer Raumkurve mittels THREE.LineLoop (oder nur Line für nicht geschlossene Kurven).

 
05.06.2021  
 




HofK
Nach dem Bienenflug habe ich jetzt noch das Autorennen  [...]  auf einen neuen Stand gebracht. In der alten Version wurde das Objekt nur um die y Achse gedreht. Ist die Straße nicht waagerecht entspricht das natürlich nicht der Realität.

Außerdem hatte ich statt Autos nur Quader benutzt. Jetzt ist es realistischer.  [...] 

 
12.06.2021  
 




p.specht
... faszinierend!
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
12.06.2021  
 




HofK
Auf discourse gab es mal wieder eine interessante Frage.

Wie extrudiert man einen Pfad?  [...] 

Mir fiel dann ein, dass ein kürzlich zu einer anderen Frage erstelltes Beispiel nur leicht abgeändert eine mögliche Variante ist. Siehe  [...] 

Dort zu finden  [...] 

 
17.06.2021  
 




HofK
Beim Autorennen ist die Berechnung mit den Matrizen M3 und M4 etwas aufwändig. Ich habe weiter nach einer Möglichkeit gesucht, um aus dem System Tangente, Normale, Binormale unmittelbar die Quaternation zu bestimmen.

Eine Anfrage auf stackoverflow  [...]  blieb erfolglos.

Nach einigen Versuchen habe ich dann selbst die Lösung gefunden.

Die Lösung basiert darauf, dass man die neue Basis als Rotation der Ausgangsbasis auffasst. Daraus erhält man eine Rotationsmatrix, in diesem Fall ist es einfach die Transponierte.

Verbindet man dies nun mit der bekannten Transformation Rotationsmatrix zu Quaternion  [...]  erhält man den richtigen Algorithmus.

Auf den ersten Blick gibt es kaum einen Unterschied, da die Transponierte benutzt wird. Man beachte aber die Vorzeichen.

Man kann die neue Methode .setFromBasis zur three.js class Quaternion hinzufügen
class Quaternion {

    constructor( x = 0, y = 0, z = 0, w = 1 ) {

        this._x = x;
        this._y = y;
        this._z = z;
        this._w = w;

    }

    setFromBasis( e1, e2, e3 ) {

        const	m11 = e1.x, m12 = e1.y, m13 = e1.z,
        m21 = e2.x, m22 = e2.y, m23 = e2.z,
        m31 = e3.x, m32 = e3.y, m33 = e3.z,
        trace = m11 + m22 + m33;

        if ( trace > 0 ) {

            const s = 0.5 / Math.sqrt( trace + 1.0 );
            this._w = 0.25 / s;
            this._x = -( m32 - m23 ) * s;
            this._y = -( m13 - m31 ) * s;
            this._z = -( m21 - m12 ) * s;

        } else if ( m11 > m22 && m11 > m33 ) {

            const s = 2.0 * Math.sqrt( 1.0 + m11 - m22 - m33 );
            this._w = ( m32 - m23 ) / s;
            this._x = -0.25 * s;
            this._y = -( m12 + m21 ) / s;
            this._z = -( m13 + m31 ) / s;

        } else if ( m22 > m33 ) {

            const s = 2.0 * Math.sqrt( 1.0 + m22 - m11 - m33 );
            this._w = ( m13 - m31 ) / s;
            this._x = -( m12 + m21 ) / s;
            this._y = -0.25 * s;
            this._z = -( m23 + m32 ) / s;

        } else {

            const s = 2.0 * Math.sqrt( 1.0 + m33 - m11 - m22 );
            this._w = ( m21 - m12 ) / s;
            this._x = -( m13 + m31 ) / s;
            this._y = -( m23 + m32 ) / s;
            this._z = -0.25 * s;

        }

        this._onChangeCallback();
        return this;

    }

}


oder mit
in seinen Code integrieren.

Lösung dort benutzt: [...]  [...]  [...] 
 
24.06.2021  
 




p.specht
Ich würde gerne im roten Auto mitfahren - oder mit einer mitlaufenden Kamera dahinter zuschauen... (Ein Depp kann sich mehr wünschen als 10 Baumeister bauen)
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
24.06.2021  
 



 
- Seite 43 -



HofK
p.specht (24.06.2021)
Ich würde gerne im roten Auto mitfahren - oder mit einer mitlaufenden Kamera dahinter zuschauen... (Ein Depp kann sich mehr wünschen als 10 Baumeister bauen)


Auch auf discourse gab es einen Vorschlag:

( Usnul / übersetzt)
" ... Ich würde vorschlagen, die Startaufstellung zu entfernen und vielleicht ein bisschen mit der Kamera zu spielen, um es interessanter zu gestalten. Vielleicht ein Überkopfmodus, um einem Auto zu folgen? ...  "

Meine Antwort ( übersetzt)

"Ja, man könnte ein richtiges Rennen draus machen, mit Gelände, Rampen und Brücken und mehreren Fahrzeugen. Bessere Modelle, als ich sie einfach kopiert habe. Und dazu noch Abzweigungen der Straße, siehe
Create a curved plane surface which dynamically changes its size - #20 by hofk [...] 

Aber das ist nicht mein Ding. Ich selbst habe auch noch nie Computerspiele gespielt. Ich benutze auch keine Modellierungssoftware. Ich interessiere mich für mathematische Zusammenhänge und Algorithmen. Das kann man sehen, wenn man sich meine Github-Seite anschaut.

Aber vielleicht nimmt es ja jemand als Anregung und macht etwas daraus. Es kann dann hier angehängt werden.
 "
 
27.06.2021  
 




HofK
Bei der CPU Simulation gibt es Fortschritte.

Die CPU clock funktioniert in wesentlichen Teilen. Man kann die Taktfrequenz während des Programmlaufs verändern und die binäre Uhr zählt mit. Dabei sind noch nicht alle Varianten implementiert. Bei dieser Sache kann man nicht von XProfan abschreiben, sondern muss die identische Wirkungsweise mit anderen Mitteln erreichen.



Aktuell da  [...] 
 
vor 31 Tagen  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

149.668 Betrachtungen

Unbenanntvor 0 min.
Michael W.Vorgestern (01:27)
Ernst vor 9 Tagen
R.Schneider vor 24 Tagen
Georg Teles vor 24 Tagen
Mehr...

Themeninformationen



Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie