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
und unter download die three.js-master.zip heruntergeladen.

Einen leichten Einstieg findet man z.B. über die
Links:  [...]  [...]  [...]  [...]  [...]  [...] 

Damit habe ich zuerst eine "Grundübung" gebastelt und dann einen Androiden mit gps Bandarole  [...]  (Bildschirm nach Ende der Datenaufnahme) gebaut.

Da  [...]  kann man es anschauen und z.B. den Androiden selbst mit der Maus (oder per touch) steuern.

Mit der web Konsole z.B. in Firefox kann man die minimale html Seite und auch das JavaScript ansehen.

Die grundlegenden Skripte three.min.js und für die Steuerung OrbitControl.js findet man nach entpacken von three.js-master.zip dann im Ordner three.js-master\build und three.js-master\examples\js\controls .
 
31.01.2016  
 



 
- Seite 12 -



HofK
Bei der Modifizierung der Geometrie gab es ein echtes Problem.

Ich benutze Raycaster und habe irgendwann bemerkt, dass ich die Rückseiten der Flächen nicht greifen konnte.
.
Also habe ich das Beispiel  [...]  genommen und stark vereinfacht/abgewandelt und statt non-indexed eine indexed BufferGeometry und Multimaterial (array) mit THREE.DoubleSide, THREE.FrontSide, THREE.BackSide. Da  [...]  kann man es probieren. Es wird immer nur die Vorderseite erkannt. Selbst bei BackSide, wo das Material dann nicht angezeigt wird - aber die weiße Umrandung.

Also bei discourse.threejs.org eine Frage formuliert  [...] 

Ich hatte keine Chance! Multimaterial wird nicht unterstützt. Aber Mugen87 hat ein workaround  [...]  parat.

Man ersetzt in three.js
function Mesh( geometry, material ) { … }
Mesh.prototype = Object.assign( … )


und schon funktioniert es. [...] 

Trotz der Hilfsgitter ist die Orientierung im Raum schwierig. Man bewegt sich ja mit dem Handhabungspunkt (Würfel) in der sich stets selbst ausrichtenden grauen orthogonalen Hilfsebene.

Die Punkte (1, 2 oder 3) des Dreiecks bewegen sich parallel. Da muss mir noch etwas einfallen.
 
vor 30 Tagen  
 




HofK
Nach einigen Experimenten
-------


habe ich mich entschieden, zusätzlich zur Kamera - orthogonalen Ausrichtung der Hilfsebene die Koordinatenebenen fixierbar zu gestalten. Dazu drückt man die Tasten x, y, oder z.

Die jeweilige Koordinate bleibt dann unverändert, die Hilfsebene ist orthogonal zur Achse.

Trotzdem ist die Handhabung etwas "hakelig" und man muss ein wenig üben. Problem ist, dass die Maus einerseits die Kamera steuern muss (OrbitControls.js) und andererseits auch die Geometriekoordinaten verschieben soll.

Dabei ist die praktische Umschaltung problematisch. Mag sein, dass meine Lösung nicht optimal ist. Vielleicht erhalte ich ja noch einen Expertentipp?

Wer lieber mit der Eingabe arbeitet, hat da keine Probleme. Die Genauigkeit lässt sich einstellen.



Für den Export habe ich mit Hilfe von prisoner849 (Paul West)  [...]  eine recht elegante Variante. Sie ist auch bei modifyCreateGeo.html  [...]  nachgetragen. (siehe weiter oben)

Da  [...]  bzw.  [...]  ausprobieren.

Bitte beachten, dass der Export ohne Nachfrage in der Zwischenablage landet. Steht auch da!

Export the changed code.
The code is displayed here
and is also copied to the clipboard.
 
vor 26 Tagen  
 




HofK

THREEp ist fertiggestellt

Vor ziemlich genau einem Jahr begonnen! Da konnte ich nicht absehen, wohin das führt und wie lange es dauert.

Nun sind beide Addons fertig!
Siehe meine Seite  [...]  und GitHub  [...] 
Auch Beispiele und dazu eine Formenbibliothek zu THREEp.  [...]  Noch erweiterbar.

Von der Beseitigung der Nähte bei Geometry habe ich abgesehen. Der Aufwand ist unverhältnismäßig hoch. Besonders, da Geometry keine dauernde Zukunft hat. 

Da noch das Tool für THREEf - siehe Bild im vorherigen Beitrag  [...] 
Bei discourse  [...] 

Da kann es mit anderen Sachen weitergehen
 
vor 22 Tagen  
 




p.specht
Gratuliere! Ausprobieren leider eine Zeitfrage, aber geplant!
Gruss

P.S.: GitHub-Link hat einen Punkt am Ende zuviel.
 
So Computer sind halt auch nur Menschen...
vor 21 Tagen  
 




HofK
p.specht (28.01.2018)
P.S.: GitHub-Link hat einen Punkt am Ende zuviel.


Danke für den Hinweis, korrigiert!
 
vor 21 Tagen  
 



 
- Seite 13 -



HofK
da geht es weiter ...

Eine Kugel ist überall schön rund, ein Oktaeder nur eckig und kantig.

Aber was liegt dazwischen?

Man kann ein Oktaeder stetig zu einer Kugel transformieren. Dazu benötigt man passende Zick Zack Funktionen.

Eine schöne Herleitung findet man da:  [...] 

Mit dieser Hilfe ist die Transformation dann kein Problem. Im momentanen Testcode ist die Transformation noch als Konstante 0.5 eingetragen. Da muss noch ein Parameter mit Werten 0 bis 1 ersetzt werden.

In der xyz Berechnug wurde dann einfach sin durch sinlike und cos durch coslike ersetzt - fertig.
function sinlike( x ) {

    var y1 = 2 / pi * Math.asin( Math.sin( x ) );
    var y2 = Math.sin( x );
    return y1 + 0.5 * ( y2 - y1 );

}

function coslike( x ) {

    var y1 = -2 / pi * Math.asin( -Math.cos( x ) );
    var y2 = Math.cos( x );
    return y1 + 0.5 * ( y2 - y1 );

}

function xyzCalculation( ) {

    x = g.radius( t ) * coslike( theta ) * coslike( phi );
    y = g.radius( t ) * sinlike( theta );
    z = -g.radius( t ) * coslike( theta ) * sinlike( phi );

    if ( !g.driftDefault ) {

        x += signX * g.driftX( t );
        y += signY * g.driftY( t );
        z += signZ * g.driftZ( t );

    }

}




Die Konstruktion besteht aus 8 unabhängigen Teilen. Diese können mit einem Parameter drift auseinander geschoben werden - abhängig von der Zeit. Das habe ich im Bild gemacht. Dadurch ist auch die leichte Rundung gut zu erkennen.

Ohne Drift und mit passendem Parameter erhält man ein Oktaeder.

 
vor 14 Tagen  
 




HofK
Auch andere 2Pi periodische Funktionen ergeben interessante Formen.

Um das schnell zu testen, habe ich mal XProfan benutzt. Damit geht das ohne großen Aufwand so nebenbei. Da ich in letzter Zeit fast nur mit JavaScript gearbeitet habe, ist es ebenfalls ganz gut, auch abweichende Syntax zu verwenden. Es wird ein Punkt mit x zwischen 0 und Pi/2 und y zwischen 0 und 1 - hier (0.5, 0.75) - angegeben. Daraus werden zwei Geradenabschnitte bestimmt. Nun wird durch entsprechende Zuordnung aus diesem Teilstück die periodische Funktion gebastelt.



Daraus wird



Es ist ein Fehler im 4. (letzten) Oktanten zu erkennen. Offenbar ein nummerisches Problem, muss ich noch näher beleuchten.

Der Code:
XProfan 11
// Periodische Funktion erzeugen
Var px! = 0.5
Var py! = 0.75
//-------------
Window 0,0 - 1800,1000
Var x! = 0
Var y! = 0
Var m! = 0
Var pi2! = Pi() / 2
UsePen 0, 2, RGB(200,0,0)
x! = -1.57
MoveTo 400 + x! * 200 , 500 + 200

WhileLoop 0, 784

    x! = x! + 0.01
    y! = sinlike(x!)
    LineTo 400 + x! * 200 , 500 - y! * 200

EndWhile

UsePen 0, 2, RGB(0,200,0)
x! = -1.57
MoveTo 400 + x! * 200 , 500

WhileLoop 0, 784

    x! = x! + 0.01
    y! = coslike(x!)
    LineTo 400 + x! * 200 , 500 - y! * 200

EndWhile

UsePen 0, 1, RGB(0,0,0)
x! = -1.57
MoveTo 400 + x! * 200 , 500 + 200

WhileLoop 0, 784

    x! = x! + 0.01
    y! = sin(x!)
    LineTo 400 + x! * 200 , 500 - y! * 200

EndWhile

UsePen 0, 1, RGB(0,200,200)
x! = -1.57
MoveTo 400 + x! * 200 , 500

WhileLoop 0, 784

    x! = x! + 0.01
    y! = cos(x!)
    LineTo 400 + x! * 200 , 500 - y! * 200

EndWhile

UsePen 0, 1, RGB(0,0,200)
Line 100, 500, 1700, 500
Line 400,  50,  400, 900
waitinput

Proc k1

    Parameters x!
    m! = ( 1 - py! ) / ( pi2! - px! )

    if x! <= px!

        return  py! / px! * x!;

    endif

    if x! > px!

        return   m! * x! + 1 - pi2! * m!

    endif

EndProc

Proc sinlike

    Parameters x!

    if ( x! < 0 )

        return -k1( -x! )

    endif

    if ( x! >= 0 ) AND ( x! <= pi2!)

        return k1( x! );

    endif

    if ( x! > pi2! ) AND ( x! <= Pi() )

        return k1( Pi()  - x! );

    endif

    if ( x! > Pi() ) AND ( x! <= 3 * pi2! )

        return -k1( x! - Pi() );

    endif

    if ( x! > 3 * pi2! ) AND ( x! <= 2 * Pi() )

        return -k1( 2 * Pi() - x! );

    endif

    if ( x! > 2 * Pi() ) AND ( x! <= 5 * pi2!)

        return  k1( x! - 2 * Pi()  );

    endif

EndProc

Proc coslike

    Parameters x!
    return sinlike( x! + pi2! );

EndProc


nur die Funktionen in JavaScript

var px = 0.5;
var py = 0.75;

function k1( x ) {

var m = ( 1 - py ) / ( pi2 - px );
return x > px ? m * x + 1 - pi2 * m : py / px * x;

}

function sinlike( x ) {

if ( x < 0 ) return -k1( -x );
if ( x >= 0 && x <= pi2 ) return k1( x );
if ( x > pi2 && x <= pi ) return k1( pi - x );
if ( x > pi && x <= 3 * pi2 ) return -k1( x - pi );
if ( x > 3 * pi2 && x <= 2 * pi ) return -k1( 2 * pi - x );
if ( x > 2 * pi && x <= 5 * pi2) return k1( x - 2 * pi );

}

function coslike( x ) {

return sinlike( x + pi2 );

}
 
vor 11 Tagen  
 




p.specht
Unermüdlich! Toll ...
 
XProfan 11
So Computer sind halt auch nur Menschen...
vor 11 Tagen  
 




HofK
Offenbar ein nummerisches Problem, muss ich noch näher beleuchten.

Schuld sind die unvermeidlichen Rundungsfehler. So kommt es vor, dass 5 mal Pi-Halbe leicht überschritten wird. Abhilfe schafft eine kleine Zugabe oder weglassen der oberen Schranke. Letztere Methode hat den Nachteil, dass dann irgendwelche Folgefehler schwerer zu ermitteln sind.

if ( x > 2 * pi && x <= 5 * pi2 + 0.001 ) return k1( x - 2 * pi, t );
//if ( x > 2 * pi ) return k1( x - 2 * pi, t ); // ???


Neu: Parameter t in der Funktion k1. 

Es gibt mittlerweile drei Modi um die Form festzulegen.
g.contourmode mit den möglichen Werten

'rounding'
'profile'
'point'


Bei der Parameterangabe sieht das dann so aus.

var parameters = {

contourmode: 'profile',

// rounding: function( t ){ return -0.7 + 1.2 * ( 1 + Math.sin( 0.4 * t ) ) },

profile: function( x, t ){ return 0.90 * Math.sin( x ) + 0.10 * Math.sin( 9 * x ) * Math.sin( t ) },

// pointX: function( t ){ return 0.6 * ( 1 + Math.sin( 0.4 * t) ) },
// pointY: function( t ){ return 0.4 * ( 1 + Math.sin( 0.3 * t) ) },

}


Bei 'profile' ist eine beliebige Funktion mit f(0,t) = 0 und f(Pi/2,t) = 1 anzugeben.
Diese wird dann wieder periodisch auf 0 bis 2*Pi erweitert.

Ein Schnappschuss des obigen Beispiels

 
vor 10 Tagen  
 




HofK
Der Konturmodus 'point' ist ganz schön eckig.

Da gibt es doch noch die Bézierkurven  [...]  um die Ecke auszubügeln. Hier benötigt man die quadratische Form der Kurve.

Allerdings sind die Kurven abhängig von einem Parameter definiert. Ich benötige aber eine Funktion y = f(x). Also muss der Parameter raus. Die äußeren Punkte sind fest: P0(0,0) und P2(Pi/2, 1). Der mittlere Punkt sei P1(px, py)

Durch ( 0, 0 ) vereinfacht sich die Rechnung. Man kann durch lösen einer quadratischen oder linearen Gleichung den Parameter in Abhängigkeit von x ermitteln und dann in die Parametergleichung y einsetzen. Der Parameter t ist hier nicht die Zeit! Da muss man aufpassen, sonst gibt es Chaos. Also mal wieder ein Blatt Papier verbraucht.



Mit XProfan sieht das dann so aus:
// Bezierfunktion 0 .. Pi/2
Var pi2! = Pi() / 2
Var px! = 1.2
Var py! = 0.4
//-------------
Window 0,0 - 1800,1000
Var x! = 0
Var y! = 0
UsePen 0, 1, RGB(0,0,200)
Line 500, 600, 1000, 600
Line 600, 400,  914, 400
Line 600, 300,  600, 700
Line 914, 400,  914, 600
UsePen 0, 3, RGB(200,0,0)
MoveTo 600 , 600

WhileLoop 0, 156

    x! = x! + 0.01
    y! = bezier( x!, px!, py! )
    LineTo 600 + x! * 200 , 600 - y! * 200

EndWhile

waitinput

Proc bezier

    Parameters x!// , px!, py!
    var tm! = 0
    var a! = pi2! - 2 * px!

    If a! = 0

        tm! = x! / (  2 * px!)

    Else

        var tp! = px! / a!
        var tr! = tp! * tp! + x! / a!

        If ( px! < pi2! / 2)

            tm! = -tp! + Sqrt( tr! )

        Else

            tm! = -tp! - Sqrt( tr! )

        Endif

    Endif

    return ( 1 - 2 * py!) * tm! * tm! + 2 * py! * tm!

EndProc


Mit Strichstärke 3:



In JavaScript:
function bezier( x ) {

    var tm;
    var a = pi2 - 2 * pX;

    if( a === 0 ) {

        tm = x / ( 2 * pX );

    } else {

        var tp = pX / a;
        var tr = tp * tp  + x / a;
        tm =  - tp + ( pX < pi2 / 2 ? 1 : -1 ) * Math.sqrt( tr );

    }

    return ( 1 - 2 * pY ) * tm * tm + 2 * pY * tm;

}


Da auch hier ein Punkt anzugeben ist, habe ich contourmode nochmal geändert. Jetzt gibt es 'rounding' 'profile' 'bezier' 'linear'
(linear war vorher point)

Noch zwei Schnappschüsse bei zeitabhängigen Punkten (t Zeit)

contourmode: 'bezier',
pointX: function( t ){ return 0.6 * ( 1 + Math.sin( 0.4 * t) ) },
pointY: function( t ){ return 0.4 * ( 1 + Math.sin( 0.3 * t) ) },





 
vor 7 Tagen  
 




HofK
geschafft

Die erste spezielle Geometrie ist soweit fertig. Möglich, dass mir noch eine Ergänzung einfällt, dann wird halt erweitert.

Bei threejs.hofk.de habe ich es eingebunden. Unmittelbarer unter  [...]  bzw.  [...]  erreichbar.



Bei den speziellen Geometrien ist es kein echter Buddelkasten. Es gibt eine beliebig erweiterbare Anzahl von Beispielen mit den zugehörigen Parametern. Das macht Sinn, da die Anzahl der Parameter deutlich geringer ist als bei THREEf und THREEp.

Man kopiert die Parameter einfach in sein eigenes Programm oder ergänzt die Beispielsammlung für sich.

Benutzt man Firefox, bekommt man auch lokal ohne irgendwelche Manipulationen die Texturen. 

...
parameterExamples[ 12 ] = {
equator: 30,
uvmode: 1,
contourmode: 'profile',
parts: [ 1, 0, 1, 0, 1, 0, 1, 0 ],
profile: function( x, t ){ return 1 - 0.97* Math.cos( x ) - 0.03 * Math.cos( 21 * x ) },
}


parameterExamples[ 13 ] = {

}
...

Einfach weitere parameterExamples[ ... ] Blöcke ergänzen und ausfüllen.

Die Parameter sind in THREEg.js ersichtlich.
/*	parameter overview	--- all parameters are optional ---
p = {
// simple properties
equator,
uvmode,
contourmode,
// array, value 1 for octant, otherwise arbitrary - upper counterclockwise, lower clockwise
parts,
// functions with  parameter time   // function ( t )
radius,
rounding,
profile,		// y = f( x, t ),  0 < x < PI / 2, 0 < y < 1
pointX,			// interval 0 to PI / 2
pointY,			// interval 0 to 1
driftX,
driftY,
driftZ,
explod,			// factor for exploded view - non indexed BufferGeometry
}
*/
//............................................................set defaults
g.equator = 	p.equator !== undefined ? p.equator	: 6;
g.uvmode = 		p.uvmode !== undefined ? p.uvmode	: 0;
g.contourmode =	p.contourmode !== undefined ? p.contourmode	:'rounding'; // 'profile'  'bezier' 'linear'
g.parts = 		p.parts !== undefined ? p.parts	: [ 1, 1, 1, 1, 1, 1, 1, 1 ];
g.radius = 		p.radius !== undefined ? p.radius		: function ( t ) { return 1 };
g.rounding =	p.rounding !== undefined ? p.rounding	: function ( t ) { return 1 };
g.profile = 	p.profile !== undefined ? p.profile		: function ( x, t ) { return Math.sin( x ) };
g.pointX = 		p.pointX !== undefined ? p.pointX		: function ( t ) { return 0.001 };
g.pointY = 		p.pointY !== undefined ? p.pointY		: function ( t ) { return 0.999 };
g.driftX =		p.driftX !== undefined ? p.driftX		: function ( t ) { return 0 };
g.driftY =		p.driftY !== undefined ? p.driftY		: function ( t ) { return 0 };
g.driftZ = 		p.driftZ !== undefined ? p.driftZ		: function ( t ) { return 0 };
g.explode = 	p.explode !== undefined ? p.explode		: function ( t ) { return 0 };
 
vor 5 Tagen  
 




p.specht
Hah! Die Pixar Studios bekommen offenbar Konkurrenz!
Faszinierend!
 
XProfan 11
So Computer sind halt auch nur Menschen...
vor 4 Tagen  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

22.186 Betrachtungen

Unbenanntvor 0 min.
Roland SchäfferGestern (20:02)
Uwe LangGestern (15:46)
ByteAttack vor 3 Tagen
Sebald Grandjean vor 3 Tagen
Mehr...

Themeninformationen



AGB  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Impressum  |  Shop  |  Support  |  Schnittstellen  |  Suche  |  XProfan.De

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

Cookie-Richtlinie


Information über die Nutzung von Cookies, und darüber, dass Sie mit Nutzung der Seiten unseren AGB zustimmen.

OKDatenschutzbestimmungen
Ich möchte keinen Cookie