WebGL wie lange dauert es bis zu ersten ansehnlichen 3D Animationen?

  • Ersteller Ersteller omaliesschen
  • Erstellt am Erstellt am
Ist zwar Off Topic, aber diese 100,000 Stars Seite ist erstens interessant und ja - einfach nur wunderschön.
 
Kein Problem. Es dauert etwas bis das Universum geladen wurde.

PS: Sofern jemand nicht so aufmerksam ist: oben links den Button klicken um das Programm zu starten.

Gibt hier noch mehr gelungene Beispiele: http://www.chromeexperiments.com/tag/3d/
 
Zuletzt bearbeitet:
Wie sind deine Kenntnisse in 3D? Willst du es selber modellieren oder hast du jemanden.
Die Applikationslogik benötigt auch Einarbeitung, nur mit Framework zu empfehlen.
Im Studium haben wir das http://www.ambiera.com/coppercube/ benutzt.
 
Die Beispiele basieren auf three.js, bis auf der TwitterGlobe

Meine Kentnisse in 3D?

X, Y, Z.^-^ und CAD...

Wäre interessant zu wissen ob das ganze im Endeffekt darauf hinaus läuft über ein Framework mit wenig viel zu erreichen oder ob man die Mehrheit der Berechnungen, Formeln noch selbst schreiben muss.

Eine saubere Netzwerkstruktur wäre vll. eins der ersten Ziele. Verknüpfungen etc. ohne Texturen. In Richtung Etherape 3D.

3D Objekte an sich sind erstmal gar nicht von Interesse. Ich nehm an die lassen sich mit entsprechenden 3d Programmen modellieren und als JSON String exportieren. Das ganze dann schwerfällig zum drehen zu bekommen wird vermutlich kein Hexenwerk sein.
Ergänzung ()

PS: http://learningwebgl.com/blog/?p=1008

Code:
for (var i in stars) {
      stars[i].draw(tilt, spin, twinkle);
      spin += 0.1;
}

Hat ein wenig was von:

Code:
 do { greatStuff } while ( coffee.ml > 50 );

Das Beispiel ist recht überschaubar und dennoch kommt am Ende mehr raus als man vermuten würde.
 
Zuletzt bearbeitet:
Wäre interessant zu wissen ob das ganze im Endeffekt darauf hinaus läuft über ein Framework mit wenig viel zu erreichen oder ob man die Mehrheit der Berechnungen, Formeln noch selbst schreiben muss.

Kommt drauf an was du so genau machen willst. Willst du lediglich ein 3D-Modell anzeigen lassen, dann finden sich die Codeschnipsel dafür an jeder Ecke ( Ob es dafür auch Frameworks gibt weiss ich nicht, da ich nur normales OpenGL programmiert habe), ist auch nicht sonderlich schwer. Willst du allerdings komplexere Effekte haben, so musst du dir deine eigenen Shaderprogramme in GLSL schreiben. Dafür empfiehlt es sich die Mathematik (Matrizenrechnung!) bzw. die optische Physik hinter dem 3D-Zeugs so halbwegs beherrschen um dies verwirklichen zu können.
 
Einfach Objekte anzeigen hätte kein Reiz. Der Funktionale Charakter überwiegt zwar den optischen Anspruch aber bisschen Old Fashioned sollte schon drinn sein.

Was wäre denn geeignete Literatur?

PS: Auch empfehlenswert wenn man den Song bis zum Ende erträgt: http://lights.elliegoulding.com/
http://www.netmagazine.com/features/another-10-webgl-sites-will-blow-you-away


Was wären die erste Schritte wenn man drei Punkte X,Y,Z (dreidimensional), über eine Linie (Röhrenförmig/Schlauch) verbinden möchte die ein wenig durchhängt und elastisch auf Kontakt reagiert?
 
Zuletzt bearbeitet:
Irgendwelche Bücher über Shaderprogrammierung. Ob es sich hierbei um ein OpenGL oder WebGL Buch handelt, ist weitestgehend egal. Auch ist es mehr oder weniger egal ob es sich um ein OpenGL oder um ein Direct Draw Buch handelt, da sich die beiden Shadersprachen HLSL und GLSL nur leicht durch ihren Syntax unterscheiden.
Um bei OpenGL zu bleiben, so fand ich allerdings dieses Buch nicht schlecht: http://www.packtpub.com/opengl-4-0-shading-language-cookbook/book


Was wären die erste Schritte wenn man drei Punkte X,Y,Z (dreidimensional), über eine Linie (Röhrenförmig/Schlauch) verbinden möchte die ein wenig durchhängt und elastisch auf Kontakt reagiert?

Die Linie oder den Schlauch in viele kleine Segmente unterteilen. Dann über den Schlauch eine Physikalische Simulation drüber laufen lassen, je nachdem welche Effekte du simulieren willst. Das ganze kannst du auf der CPU (vermutlich am performantesten) oder auf der GPU machen. Da hätest du dann die Wahl die Simulation in OpenGL bzw WebGL über die Rasterisierungspipeline zu machen oder mit OpenCL bzw WebCL als reines GPGPU. Das Ergebnis dieser Simulation wäre dann eine Menge an "transformierten" Segmenten, welche du dann als solche wie ein normales 3D-Mesh rendern könntest.
Das ganze hat somit weniger etwas mit Rendern sondern eher etwas mit einer physikalischen Simulation zu tun. Auch geht die physikalische Simulation in die Richtung gewöhnliche Differentialgleichungen (Eulerintegration etc).
 
Zuletzt bearbeitet:
Geht m.E. leider in Google dazu nichts gefunden, aber ich würde es Instinktiv so lösen:

Schlauch in Punkte bzw, Segmente P unterteilen:
P1, P2, P3, P4, P5. . . .
Jedes Segment hat eine Position im Raum Pos (X Y Z), eine Geschwindigkeit V und eine Masse m.
Jeweils 2 Benachbarte Segmente üben eine Kraft F aufeinander auf:
P1<-F12-> P2<-F23-> P3 <-F34-> P4 <-F45-> P5. . . .
Die Kraft F sei nur Abhängig von dem Abstand s von den beiden aufeinanderfolgenden Punkten. Die Richtung des Kraftvektors zeige immer zum Mittelpunkt der beiden aufeinanderfolgenden Punkte. Eine Formel für F ist wohl eine Materialkonstante. Bei einer Feder wäre sie eine lineare Funktion, während sie bei einer Saite irgendeine harte Funktion wäre.
Dann kann man gleichsetzen:
FGes = FLinks + FRechts
a = FGes/m
Dann kann man leicht integrieren:
VNeu = VAlt + a*DT
PosNeu = PosAlt + VAlt*DT + 0.5*a*DT^2

Dadurch kann man für jeden Punkt für jeden Zeitschritt seine neue Position berechnen. So integriert man auf diese Art und weise Permanent in einem Mainloop.

Wenn man Benutzereingabe Gravitation oder Reibung haben will müsste man dann soetwas machen:
FGes = FInput + FGravitation +FLinks + FRechts +FReibung

Für die Reibung gelte hierbei:
FReibung = -Faktor *v^2 (Faktor >0)

Generell ist dies aber nur eine einfache Lösung. Je nachdem wieviel zusätzliche Effekte der Art du haben willst (Torsion etc) oder dir noch zusätzlich Stabilität wünschst, dass dir die ganze Sache nicht um die Ohren fliegt, kann das ganze noch sehr schnell sehr viel komplexer werden.
 
Zuletzt bearbeitet:
Sehr aufschlussreich. Ich denke ein grobes Bild hab ich mittlerweile.

Die Shader machen den Großteil der Arbeit?

Gibt es zum erzeugen des Schlauchfragments fertige Standardfunktionen oder muss das Objekt eigenständig mathematisch berechnet werden?

Wie umfangreich wird in der Regel der Anteil selbst geschriebener "Interaktionslogik" ?

Seh ich das richtig wenn ich denke dass ein Objekt erzeugt wird und eine in der Regel schon vorhandene Funktion (Pixel-Shader ?) dafür sorgt dass sich seine Oberfläche wie Gelee verhält oder schreibt man die Eigenschaft selbst?
 
Zuletzt bearbeitet:
Ich hab nur (das zugegebenermaßen ziemlich verzerrten) Bild aus meinem Computergrafikkurs an der Uni.

Da war es schon ein ziemlicher Krampf bis zur ersten vorzeigbaren Version unseres 3D Tetris Spiels.
 
Wie umfangreich wird in der Regel der Anteil selbst geschriebener "Interaktionslogik" ?

if(MaustasteGedrückt())
{
FrageMauszeigerPositionab()
BerechneKraftNachSelbstWillkürlichGewähltenFormeln(MauszeigerPosition)
}

Nicht so aufwändig würde ich sagen . . .

Die Shader machen den Großteil der Arbeit?

Die Shader kümmern sich im Optimalfall bei einem solchen Problem nur um die Darstellung, nicht um die physikalische Simulation selbst. (Natürlich kann man die physikalische Simulation auch mit Hilfe von Shadern berechnen, aber davon würde ich hier dringend abraten). In einfachsten Fall hättest du dann einen solchen Shadercode um deinen Schlauch zu zeichnen:
//VertexShader:
uniform mat4 ModelviewProjection;
in vec4 PositionIn;

void main()
{
gl_Position = ModelviewProjection*Position;
}

//Fragmentshader:
out vec4 Color;
void main()
{
Color= vec4(1,0,0,1);
}

Das obige Vertexshaderprogramm würde für jeden Eckpunkt der Dreiecke deines Meshes einmal aufgerufen werden. Dies würde dir nun die Eckpunkte der Segmente deines Schlauches (PositionIn), welche dir zuvor die physikalische Simulation berechnet hat mit der Kameratransformationsmatrix (ModelviewProjection) passend transformieren. Das Ergebnis davon (gl_Position) dient dazu, dass der Rasterisierer weiss, wo auf dem Bildschirm die Ecken eines Dreiecks abgebildet werden. Dann geht der Rasterisierer her und bestimmt welche Pixel auf dem Bildschirm das Dreieck bedeckt und startet für jeden dieser Pixel obiges Fragmentshaderprogramm. Dieses Programm würde dann in den Framebuffer die Farbe 1,0,0,1 also rot rausschreiben.

Gibt es zum erzeugen des Schlauchfragments fertige Standardfunktionen oder muss das Objekt eigenständig mathematisch berechnet werden?

Bei reinem WebGL nicht, soetwas spezielles ist eher in komplexeren 3D-Engines oder Physikengines vorhanden. Solche bei einem so einfachen Problem zu verwenden ist m.E. allerdings etwas ein Overkill.

Seh ich das richtig wenn ich denke dass ein Objekt erzeugt wird und eine in der Regel schon vorhandene Funktion (Pixel-Shader ?) dafür sorgt dass sich seine Oberfläche wie Gelee verhält oder schreibt man die Eigenschaft selbst?

Dein Pixelshader (in OpenGL Fragmentshader genannt) sorgt in dem meisten Fällen nur für Licht und Materialeffekte (wie durchsichtig ist die Oberfläche, wie reflektiert sie das Licht) und wird, wie bereits erwähnt, nicht dafür verwendet, dass die Oberfläche sich bei Krafteinwirkung wie Gelee verformt. Des Weiteren sind Shader an sich "sehr low Level". Wenn man einen Effekt erzielen will, so muss man ihn durch mathematische Formeln formulieren, es sei denn man findet irgendein Framework, welchem einen dies abnimmt oder erleichtert. Diverse 3D-Engines haben afaik solche fortgeschrittenen Shadereditoren.
 
Zuletzt bearbeitet:
Zurück
Oben