[Stage3D] Environment Reflections

[Stimpy]

Guten Mittag liebe ZFX'ler,

momentan probiere ich mich daran ein Shader für Stage3D , also in AGAL, zu schreiben welcher Environment Reflections über eine CubeMap anzeigen soll. Leider ist mein Erfolg nicht so wie er soll, denn die Reflection/CubeMap sieht immer sehr komisch und verzerrt aus. Da es kaum AGAL Seiten/Shader gibt versuche ich mich daran etwas von GLSL zu portieren, leider mit mäßigem Erfolg. Und im Rahmen meiner Verzweiflung dachte ich mir: Fragst du mal hier nach.

Das ganze kann man sich unter: http://nord5.de/reflection/ ansehen, mit der Maus kann man die Plane bewegen und mit Q und A die Kamera kippen - Sowie mit W und S Zoomen. Falls beim Start FlashPlayer Fehler kommen, einfach auf "Weiter" klicken. (Benötigt wird Flash Player 11.6). Wie man sieht - Sieht man das es falsch ist. :evil:

Mein Shader macht momentan folgendes:

VertexShader:

Code: Alles auswählen

// WorldToScreen:
				"m44 vt0,va0,vc0\n" +				// Position in ScreenSpace
				// Reflection:
				// vt2 = CameraPosition - VertexPosition;
				"sub vt2, vc8, vt0 \n" +	
                                // vt2 = Normalisieren			
				"nrm vt2.xyz vt2 \n" +
				//vt2 = Mit View multiplizieren?!
				"m44 vt2.xyz vt2.xyz vc4\n" +
				// An FragmentShader
				"mov v0, va0\n" + 
				"mov v1, va1\n" +
				"mov v2, vt2\n" +	
				"mov v3, vc16\n" +           // v3 = Normal, da es eine Plane ist kann ich hier ein statischen Wert benutzen
				// Output:				
				"mov op, vt0\n";

FragmentShader:

Code: Alles auswählen

	"dp3 ft0, v2, v3 \n" +
				"add ft0, ft0, ft0\n" +
				"mul ft0, v3, ft0\n" +
				"sub ft0, v2, ft0\n" +
				"neg ft0, ft0\n" +
				"nrm ft0.xyz, ft0\n" +
			
				"tex ft0 ft0 fs0<cube,clamp,mipmaplinear>\n" +		
				"mov oc ft0\n";

Die Berechnung im PixelShader habe ich mir frecherweise von http://davidejones.com/blog/1692-enviro ... t-refract/ gemobst.

Hat zufällig jemand eine Idee? Mir ist nicht so ganz klar wo der Fehler ist, was ich verstehe ist das ich ein Strahl zur Plane schicke - Welcher Reflektiert auf die Cube Map zeigen soll - Die Berechnung ehr weniger :| .

[Chromanoid]

Nur am Rande: Schau Dir doch mal EasyAGAL an, dann kann man lesbarer AGAL programmieren.

[Akustikkoppler]

Meiner Meinung nach fehlt dir noch eine Multiplikation mit der inversen ModelView-Matrix.
Habe mal versucht den passenden Teil für dich aus meinem großen Shader heraus zu trennen.

Kompletten Source findest du hier: DynamicShader.as

Ein Beispiel hier: ComposeCubeMap
(Mit IE9 oder höher öffnen. Mit Chrome und FF wird WebGL verwendet)

Vertex Shader

Code: Alles auswählen

//va0 = Position
//va1 = Normal
//va2 = Texcoord
//vc0 = ModelViewProjection-Matrix
//vc4 = ModelView-Matrix

//SS_Pos = pos * mvp-Matrix
m44 op, va0, vc0

//VS_Pos = pos * mv-Matrix
m44 v0, va0, vc4

//VS_Normal = normal * mv-Matrix
m33 vt0.xyz, va1, vc4
mov v1, vt0.xyz1

//Texcoord
mov v2, va2

Fragment Shader

Code: Alles auswählen

//v0 = VS_Pos
//v1 = VS_Normal
//v2 = Texcoord
//fc0 = InverseModelView-Matrix

//EyePos = -VS_Pos							
neg ft0.xyz, v0

//Normalize Normal
nrm ft1.xyz, v1.xyz

dp3 ft2.w, ft0.xyz, ft1.xyz
add ft2.w, ft2.w, ft2.w
mul ft2.xyz, ft1.xyz, ft2.w
sub ft2.xyz, ft0.xyz, ft2.xyz
neg ft2.xyz, ft2.xyz
m33 ft2.xyz, ft2, fc0

tex ft2, ft2, fs0 <3d, cube, linear>

mov oc, ft0

[Stimpy]

Hi,

erst einmal vielen Dank für deine Hilfe und den Shader-Code. Ich werde das morgen früh im Büro mal probieren ob es mein Problem löst. Was mir noch aufgefallen ist, dass wenn ich den Link wie beschrieben im IE öffne dann sehe ich keine Reflections - Nur ein Teapot ohne Texturen. Ich weiß nicht ob das relevant ist, aber wollte es erwähnt haben. ;)

[Stimpy]

EDIT: uv war falsch gesetzt....

Ein riesen großes Danke an Akustikkoppler für den Shader Code. Das funktioniert ganz hervorragend. ( http://nord5.de/reflection/ ) - Großes Danke :)

Kleine Frage noch - Wie könnte man es am geschicktesten anstellen das sich die CubeMap dreht? Also der Würfel den die Cube letzendlich darstellt rotiert, gibt es da eine simple Methode?

Und eine kleine zweite Frage: Das ist so normal/gewollt beim Environment Reflections das wenn ich die Kamera bewege die CubeMap immer um die Kamera ist richtig? Also wenn ich zoome dann sehe ich exakt die selbe CubeMap oder die Kamera bewege nach links/recht oder Oben/Unten. Nur wenn ich Sie rotiere ändert sich die CubeMap- Das ist richtig so, oder?! Ich habe noch nie solche Reflektionen programmiert und auch noch nie darauf geachtet. Wenn ich dynamisch Bewegung darin haben will, muss ich über ein Extra Render-Pass die CubeMap dynamisch neu zeichnen, right?

Grüße

Stimpy

[Akustikkoppler]

Hi Stimpy,

Beispiel sollte jetzt auch wieder im IE funktionieren, hat aus irgendeinem Grund ein Symlink gefehlt.

Das sich die CubeMap beim Zoomen nicht verändert ist normal, da der Reflect-Vector, den du zum sampeln aus der Textur nutzt, ja anhand des View-Vectors und der Normale berechnet wird und diese sich beim Zoomen nicht ändern. Bei einer Translation oder Rotation solltest du allerdings schon eine Änderung sehen.

Kannst du auch in meinem Beispiel testen:

Linke-Maus-Taste: Rotation
Mittlere-Maus-Taste: Translation
Mausrad/Rechte-Maus-Taste: Zoomen

In deinem Beispiel sieht es allerdings immer noch so aus als würdest du den berechneten Reflection-Vector nicht zurück in den Object-Space transformieren, also die Multiplikation mit der inversen Model-View-Matrix fehlt anscheinend noch.

Für eine dynamische CubeMap musst du in Flash im Moment noch sechs Render-Passes aus den sechs verschiedenen Kameraperspektiven durchführen, da der Multiple-Render-Target Support wohl erst frühestens im Flash Player 1.8 kommt.

[Stimpy]

Hi,

vorweg zum MRT kurz: Da gab es vor ein paar Wochen ein Meeting mit Adobe zu, dort wurde gesagt dass das Extended Profile (Ein Part davon war MRT) gestrichen wurde da es nicht mit allen Browsern kompatibel ist. Es wird also vorläufig gar nicht kommen. Sechs Passes sind natürlich sehr Rechenintensiv, allerdings könnte ich ja nur eine SkyBox 6 x von jeder Seite rendern - Dann hätte ich ja die transformation.

Wenn ich mich in meinem Beispiel bewege , also mit der Maus die Plane hin und her schiebe, dann ändert sich an der CubeReflection ja gar nix. Wenn ich die Kamera kippe allerdings schon (Q oder A), das ist dann noch falsch. Mist....

Das mit der inversen View Matrix verstehe ich nicht so Recht, also warum es nicht geht. Im Shader benutzt du die ModelView ja im Vertex und invertiert im Fragment.

Code: Alles auswählen

	
// Im VertexShader
//vc4 = ModelView-Matrix
"m44 v0, va0, vc4 \n" +			

Code: Alles auswählen

// Im Fragment Shader
//fc20 = InverseModelView-Matrix
"m33 ft2.xyz, ft2, fc20 \n" +						

Und die Matrizen setze ich eigentlich:

Code: Alles auswählen

stage3D.context3D.setProgramConstantsFromMatrix(
						Context3DProgramType.VERTEX,
						4,										// In Register (v4)
						cam.getView(),
						true
					);	
					
					cam.getView().invert();
					
					stage3D.context3D.setProgramConstantsFromMatrix(
						Context3DProgramType.FRAGMENT,
						20,										// In Register (v20)
						cam.getView(),
						true
					);	
					

Das ist doch alles richtig? Oder nicht?! Nun stehe ich völlig auf dem Schlauch....die ModelView Matrix ist bei mir momentan die VIewMatrix da die ModelMatrix immer nur eine Identity Matrix ist - Meine Koordinate lege ich schon in den WorldSpace an. Ich weiß das dies für Rotationen usw. ungünstig ist, aber für die derzeitige Anwendung ist das völlig ausreichend das so anzulegen. Und die View mit der Model-Identity zu Multiplizieren wäre ja auch blödsinn....

Hm, nun bin ich etwas verwirrt bis verzweifelt. Wäre schon schön wenn der Shader bei Bewegung sich auch bewegt.

Aber großes Danke schon vorweg wenn du mir noch einmal kurz auf die Sprünge helfen könntest.

Grüße

Stimpy

[Akustikkoppler]

Vergess mein Kommentar das dein Beispiel falsch aussieht. Sollte alles passen.
Das simple Plane Model hat mich wohl irgendwie irritiert, da man daran die Reflektion nicht so wirklich schön sieht.

Eine Sphere wäre für Testzwecke vielleicht aussagekräftiger.

[Stimpy]

Naja, wenn ich in deinem Beispiel den Teapot nach hinten schiebe dann schiebt sich die Reflection ja mit nach hinten also wird kleiner proportional zum Teapot, was irgendwie richtiger aussieht. Meine Plane hingegen ist die Reflection immer gleich groß - Eigentlich müsste die doch auch beim reinzoomen mitzoomen :geek: Oder renderst du die CubeMap dynamisch?

[Akustikkoppler]

Die CubeMap in dem Beispiel ist statisch.
Kannst deine Szene ja mal mit einer Sphere testen.

Source zur Generierung einer Sphere findest du hier: Sphere.as

[Stimpy]

Nochmal doof nachgefragt: Und was ist deine CubeMap? Okay, dynamisch wohl...also renderst du die 6 Passes für die CubeMap? Werde morgen früh mal ein Teapot in meine Szene setzen ;)

[Akustikkoppler]

Meine CubeMap sind einfach sechs statische Texturen, da ist nichts dynamisch in dem Beispiel.
Kannst dir ja einfach mal den Quellcode der HTML-Datei anschauen, da steckt die Komplette Szene drinne.

[Stimpy]

Also jetzt steh ich auf dem Schlauch, du sagst deine CubeMap ist statisch und meine CubeMap ist statisch. Bei meiner weiß ich das Sie statisch ist. Aber wenn ich deinen Teapot nach hinten schiebe ändert sich nicht die Reflektion darauf - Die verkleinert sich genau wie der Teapot. Bei mir verkleinert sich die Textur nicht sondern der Sichtbare Teil der Textur wird größer. Was mache ich jetzt anders als du?! (EDIT: Kann das damit zusammenhängen das man bei dir den Teapot schiebt und bei mir die ganze View?!)

[Akustikkoppler]

Ich meinem Beispiel wird auch nur die Kamera bewegt und nicht das Modell.

Hier ist mal ein Beispiel mit unterschiedlichen Geometrien (Sphere, Cone, Cylinder, Plane).
Hier kannst du auch sehen wie sich die Plane bei mir verhält.

ComposedCubeMap

Am besten wieder im IE testen, im WebGL-Backend(Chrome, FF) sieht es momentan etwas seltsam aus.

[Stimpy]

Achso, hm, okay die Plane verhält sich bei dir genau so wie bei mir. Dann ist es ja im Prinzip alles richtig und eine Plane ist ehr ungeeignet für eine statische Reflection. Vielen Dank das du mir das nochmal so aufzeigtest. Sieht natürlich trotzdem ein bischen doof aus fürs Auge, meine Idee ist es einen Cube um die Szene zu legen und den von der Kamera aus zu Rendern in die Cube - Das müsste dann glaube ich runder aussehen für das Auge. Werde ich heute mal probieren.

EDIT:
Habe meine Demo mal um einen Teapot erweitert: http://www.nord5.eu/reflection
Auch bei mir verhält sich das mit dem Teapot nicht so extrem wie mit der Plane, beim Plane hat man irgendwie das Gefühl er maskiert ein drunterliegendes Bitmap - Was doof aussieht , dooferweise brauchen wir eine Plane....nun ja, werde mein Ansatz mit der dynamischen CubeMap mal ausprobieren.

[Stimpy]

Einen guten Abend,

noch immer - oder wieder - bin ich mit meinem CubeMapping beschäftigt. Den CubeMap selber zu rendern mit einer statischen CubeMap hatte ich ja soweit, da das mit dem statischen noch nicht das gewünschte Resultat erbringt will ich ja nun die CubeMap dynamisch rendern. Um zu testen ob das alles klappt(was nicht danach aussieht :evil: ) wollte ich mir nun 6 Quadrate auf den Bildschirm zeichnen die die einzelnen Faces der CubeMap anzeigen - Um einfach zu sehen was er da macht.

Dabei stellte sich mir die Frage, die mir mein Freund Google auch nicht so wirklich beantworten konnte, wie die UV Koordinaten von CubeMaps sind?! Also damit ich ein Quadrat eine feste Seite der CubeMap zum Rendern zuweisen kann, da soll sich nichts bewegen oder ähnliches. So wie wenn ich eine SkyBox per CubeMap texturiere. Wie sind denn die UV Koordinaten für die Seiten, weiß das zufällig jemand? So wirklich was drüber finden tu ich nicht, evtl. suche ich auch falsch.

Grüße

Stimpy

[B.G.Michi]

Hier ein Link wie das Ganze in Direct3D9 aussieht. Ich tippe einfach mal, dass es mit Stage3D genauso funktioniert :)

[Schrompf]

Eine CubeMap ist wirklich ein Würfel. Texturkoordinaten dafür sind dreidimensional. Stell Dir vor, Du hast in der Mitte des Würfels einen Pfeil, der in irgendeine Richtung weg von der Mitte zeigt. Dieser Vektor ist eine CubeMap-Texturkoordinate.

[Stimpy]

Hmmm, naja also erst einmal danke für den Link. Dort wird ja erklärt wie man den reflektierten Vector berechnet usw. - Das habe ich ja schon. Ich will ja wirklich ein festes Face zuweisen vom Cube auf ein Quadrat. Das mit den 3 Dimensionen in der UV Koordinate habe ich auch verstanden von Schrompf, ich hab ein Pfeil zum Würfel soweit so klar. Aber ein Vector hat ja x,y,z,w....und meine Textur des Quadrats hat ja 4 UV Koordinaten. Und wenn ich jetzt auf das Links Face schaue als Beispiel habe ich also ein Vector von -1,0,0 z.B...aber wie bekomme ich jetzt diesen Richtungsvektor in UV Koordinaten für mein Quadrat - Also 4 UV Koordinaten. Hoffe man versteht was ich meine :?

[Schrompf]

Ne, da ist wohl doch noch was falsch angekommen bei Dir. Es gibt Vektoren mit beliebiger Anzahl Komponenten. Dein Beispiel mit x,y,z,w sind 4 Komponenten. Aber ich schrieb ja bereits, dass die CubeMap-Texturkoordinaten 3D-Vektoren sind. Normale Texturkoordinaten von 2D-Texturen sind eben nur 2D-Vektoren.

Wenn Du nun die Texturkoordinaten einer Würfelseite suchst, brauchst Du die vier Vektoren, die auf die 4 Ecken der Würfelseite zeigen. Die linke Seite der Cubemap hat ihre Mitte z.B. bei (-1, 0, 0). Das ist die Richtung, in die Du schaust, wenn Du in der Mitte des Würfels sitzt und zur linken Seite rausguckst. Von da aus betrachtet geht dann die linke Kante der Würfelseite von (-1, 1, -1) bis (-1, -1, -1) und die rechte Kante der Würfelseite von (-1, 1, 1) bis (-1, -1, 1).

Das ist übrigens das Koordinatensystem von DirectX. Ich weiß nicht, welches Koordinatensystem Stage3D verwendet, aber es gibt eigentlich nur die D3D- oder die OpenGL-Variante. Im schlimmsten Fall sind ein paar Würfelseiten also gespiegelt.

[Stimpy]

Guten Mittag,

das Vektoren eine beliebige Anzahl an Komponenten haben ist mir schon klar, nicht das du mich für völlig bescheuert hälst :mrgreen: Das war nur ein Beispiel das mein Problem ist von einem Richtungsvektor auf 4 UV Koordinaten zu kommen. Stage3D benutzt ein Right-Handed Koordinatensystem ist also wie OpenGL und die Z-Achse umgedreht zu DirectX. Zurück zum Thema.

EDIT:

Hat sich erledigt, die Reihenfolge war falsch....so geht alles, siehe Demo (http://nord5.de/reflection/) :)

Code: Alles auswählen

		zBuffQuads[currentIndex].mesh.addUV3(-1,  1, -1 ); 	
			zBuffQuads[currentIndex].mesh.addUV3(-1,  1,  1 );
			zBuffQuads[currentIndex].mesh.addUV3(-1, -1,  1 ); 
			zBuffQuads[currentIndex].mesh.addUV3(-1, -1, -1 );  

Noch eine letzte Frage, denn dann habe ich alles fertig. Wenn ich jetzt die Szene dynamisch Render, also die 6 Seiten des Cubes. Dann muss ich das vom Punkt der Kamera aus ohne Rotationen und mit ortho Projection und 90 FOV - Stimmt das so?

[Schrompf]

Kommt drauf an, in welchem Koordinatensystem Du die CubeMap adressierst :-) Ich empfehle Dir wirklich wirklich ernsthaft, mal einen Pixel auf Papier durchzurechnen und dabei an jede Variable bei jeder Operation dranzuschreiben, in welchem Koordinatensystem die sich gerade befindet. Nur Du weißt, in welchem Koordinatensystemen Du arbeiten willst.

[Stimpy]

In wie fern? Das CubeMapping war ja schon richtig, die UV Koordinaten habe ich nun auch, in die Texturen Render ich nun auch dynamisch vom Cube, der reflektierte Vektor stimmt auch. Aber das Resultat ist Murks .... :roll: Alles zu sehen hier : http://nord5.de/reflection/ (Mit der Maus die Plane bewegen per Drag, Q & A kippt die Kamera, W & S zoomt).