Three.js: Feature-Anfrage: Screen Space Reflections

Meine einzige Sorge hier ist, dass es mit Stereo-Rendering nicht wirklich gut funktioniert, daher wäre es in WebVR schwierig, aber denke bitte nicht, dass ich gegen die Funktion bin :) :+1:

Schalten Sie es einfach in VR aus. Viele der kostspieligen Effekte funktionieren in VR nicht gut. UE4 schlägt sogar vor, im VR-Kontext aus Geschwindigkeitsgründen mit Forward-Rendering zu arbeiten, anstatt es zu verschieben.

Genau, deshalb bin ich nicht dagegen.

Ich bin hier bei der Arbeit an einer React Native-Implementierung von Reflection Mapping gestolpert. Screen Space Reflections sind großartig für Nicht-VR-Spiele.

THREE.Reflector funktioniert in VR ✌️
https://threejs.org/examples/webvr_sandbox.html

Schön!

Obwohl ich bei Nightly auch "VR Not found" bekomme, werde ich es mir ansehen.

Mein besonderes Problem (das nicht die OPs sind) bestand nicht darin, das Reflexionsproblem zu lösen, sondern wie man native 3.js-Objekte erstellt und sie in der vorhandenen Szene und dem Renderer von ReactVR rendert. Ich habe OK-Ergebnisse erhalten, nur das Hintergrundbild war etwas seltsam, daher sehen Reflexionen seltsam aus - aber das ist wie erwartet, React VR erstellt eine Inside-Out-Kugel für das Hintergrundpanorama. Ich habe keine Cube-Map ausprobiert, aber das könnte besser funktionieren.

Ich bin bei den Seiten des Buches VIEL vorbei, also werde ich wahrscheinlich die vorhandene Demo so lassen, wie sie ist, aber das sieht nach einer großartigen Technik aus.

Ich wollte mehr über diese Art von Effekt erfahren, also habe ich versucht, einen Composer-Effekt dafür zu entwickeln. Es gibt noch einiges zu tun, aber Folgendes habe ich basierend auf der Implementierung von Kode80 und dem Blogpost von Morgan McGuire zusammengestellt (das Laden der Sponza-Szene dauert etwas):

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Einige Dinge, die als nächstes zu tun sind, wären die Beseitigung von Jitter-Artefakten, glänzenden Reflexionen (mit einem Blur-Pass oder Mip-Map-Sampling + Tiefenkarten-Pyramide) und mehreren Bounces durch zeitliche Neuprojektion.

Wenn jemand wirklich daran interessiert ist, diesen Effekt zu verwenden, würde ich mich freuen, mit jemandem zusammenzuarbeiten, um dies ein bisschen mehr zu verfeinern!

@gkjohnson Süß. Ihre Szene kann jedoch zu komplex sein. Auf jeden Fall scheint Ihre Demo weitgehend nicht zu reagieren. Können Sie ein einfacheres Beispiel erstellen? Außerdem wäre ein Ein-Aus-Schalter schön.

@WestLangley

Ihre Demo scheint weitgehend nicht zu reagieren

Kannst du die Demo sehen? Der Bildschirm kann einige Sekunden lang schwarz sein, da das Herunterladen der Sponza-Szene je nach Ihrer Verbindung etwas dauert.

Wenn es überhaupt nicht funktioniert, kann ich etwas einfacheres erstellen - es funktioniert jedoch auf meinem Pixel 2

Ein Ein-Aus-Schalter wäre schön.

Das Herunterdrehen des Schiebereglers "Intensität" auf 0 sieht genauso aus wie das Ausschalten, obwohl Raytracing immer noch stattfindet, sodass es in diesem Fall keinen Leistungsunterschied gibt, wenn Sie danach suchen.

@gkjohnson Verstanden . Auf meinem Mac ist deine Demo eine Weile schwarz und dann beträgt die Bildrate 4.

@WestLangley Es ist ein sehr auflösungsabhängiger Effekt. Wenn Sie also Ihr Fenster verkleinern, wird die Bildrate wahrscheinlich steigen. Das Raytracing mit einer niedrigeren Auflösung und das anschließende Compositing mit dem Puffer mit voller Auflösung würde dazu beitragen, den Effekt skalierbarer zu machen, aber ich habe mir nicht die Zeit genommen, ihn zu optimieren.

@gkjohnson wie würden Sie es nur auf reflektierende Oberflächen maskieren? Wenn ich die Intensität hochdrehe, fängt alles an zu reflektieren und es gibt einige ziemlich erschütternde Artefakte.

@bicubic Im Moment werden keine Oberflächenattribute berücksichtigt, aber es sollte nicht allzu schwierig sein, eine Basisversion davon hinzuzufügen. Sie können den Effekt basierend auf dem Glanz-/Rauheitsattribut des Materials verblassen oder verwischen.

Leider habe ich im Moment keine Verwendung für den Effekt, daher habe ich mich nicht bemüht, diese anderen Funktionen hinzuzufügen. Wie bereits erwähnt, würde ich mich jedoch freuen, mitzuarbeiten und den Effekt abzurunden, wenn Interesse daran besteht, es für etwas zu verwenden!

Sie können den Effekt basierend auf dem Glanz-/Rauheitsattribut des Materials verblassen oder verwischen.

Sinnvoller wäre es, Objekte als reflektierend / nicht reflektierend angeben zu können. Im Moment ist alles reflektierend, auch Dinge wie Vorhänge und Pflanzen. Idealerweise sollte in dieser Demo nur der Boden reflektieren.

@looeee Ich stimme zu, dass ich das sage - sorry, wenn ich unklar war. Die Materialattribute müssten auf ein Ziel geschrieben werden, damit sie im Bildschirmbereich abgetastet und verwendet werden können, um die Reflexionen an dem gegebenen Pixel zu verblassen oder zu verwischen. Dies würde es ermöglichen, dass auch Rauheitskarten usw. die Reflexionen beeinflussen.

Ich würde gerne sehen, dass dies Teil der Standardfunktionen von three.js wird.

Es gibt eine Menge solcher Dinge, die Sie fragen, ob eine Deferred-Renderer-Architektur auch Teil des Standardangebots werden sollte. Speziell für webgl2.0

@gkjohnson hat es verstanden, das macht Sinn. Es scheint jedoch immer noch so, als ob eine Art Maske notwendig sein könnte, um Artefakte zu verhindern. In Ihrem Beispiel möchten Sie keine Reflexionen auf den Vorhängen und Pflanzen. Würde das Verblassen auf Null basierend auf den Eigenschaften dieses Materials korrekt funktionieren?

@bicubic
Ich stimme zu, dass ich auch gerne einen dedizierten verzögerten Rendering-Pfad sehen würde. Mit WebGL2 und mehreren Rendertexturen ist es viel praktikabler.

@looee
Es hängt von dem gewünschten Effekt ab, aber mit dem von mir beschriebenen Ansatz würde sich der gerenderte Rauheitswert effektiv als Maske für die Szene verhalten, wobei ein Rauheitswert von 1 "keine Reflexion an diesem Pixel rendern" und ein Wert von 0 "voll rendern" bedeutet Reflexion an diesem Pixel". Werte dazwischen würden Reflexionen mit einer Teilintensität wiedergeben. Der intensity Schieberegler in der Demo zeigt den Effekt (aber natürlich für die gesamte Szene statt pro Pixel).

Ein anderer Ansatz besteht darin, die reflektierten Pixel basierend auf dem Rauheitswert zu verwischen, um eine diffuse, Licht reflektierende Oberfläche zu emulieren. Die Vorhänge hätten also immer noch einige Reflexionen, nur keine scharfen. Dadurch könnte der Vorhang beispielsweise von einem hell erleuchteten blauen Boden beleuchtet werden.

ein Rauheitswert von 1 bedeutet "keine Reflexion an diesem Pixel rendern" und ein Wert von 0 bedeutet "volle Reflexion an diesem Pixel rendern".

Das scheint gut zu funktionieren. Unreal verwendet einen Parameter "max. Rauheit" und empfiehlt, diesen auf 0,8 einzustellen.

Hoppla

@gkjohnson
Das ist sehr interessant und ich liebe dein Ergebnis, ich integriere es gerade in einen WebGL2/MRT-Renderer und werde damit experimentieren. Ist Ihnen aufgefallen, dass Sie bei jedem Renderaufruf ein Material erstellen?
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar Danke! Und das war mir nicht aufgefallen! Aber wie gesagt, ich denke, es gibt noch ein bisschen Aufräumarbeiten und die Leistung ist wahrscheinlich noch nicht ganz an einem Punkt, an dem sie super brauchbar ist.

Diese Art von Effekten sind sowieso eher für einen verzögerten Renderer geeignet als für vorwärts (vermutlich wie Sie gerade arbeiten). Ich wollte diesen und einige andere hochwertige Effekte zusammenstellen, aber ich bin geneigt zu warten, bis ein richtiger verzögerter Renderer verfügbar ist, bevor ich viel mehr Zeit damit investiere. Ist der verzögerte / MRT-Renderer, an dem Sie arbeiten, auf Github verfügbar?

Ich habe es jetzt integriert, während die SSR-Ausgänge auf eine RT mit niedrigerer Auflösung ausgeben, im Grunde nur die Reflexionen und dann mit einer Tiefenunschärfe mit dem Hauptbild kombiniert, um die Fehler zu entfernen / zu reduzieren. Ich rendere die Rauheitswerte zu einem Attribut RT und verwende es erneut, um die Stärke der Unschärfe zu bestimmen, wobei 1 unsichtbar ist, um das Fragment zu verwerfen.

Die Unschärfe beseitigt auch den Fehler, der mit der Entfernung stärker wird. Ein Problem scheint jedoch wieder Transparenz zu sein und Objekte, die andere teilweise verdecken, was dazu führt, dass die Reflexion der anderen abgeschnitten wird. Ich muss wirklich mehr über die Technik lesen.

Ich verwende es mit einer benutzerdefinierten Engine oben auf THREE, nicht mit dem Compositor von THREE. THREE ist eigentlich bereit, einen WebGL2-Kontext im aktuellen WebGLRenderer zu verwenden, ich habe dort den MRT hinzugefügt. Ich werde es bald auf github stellen, denke ich. Es ist jedoch immer noch erforderlich, die Szene ein zweites Mal für den Tiefenpuffer der Rückseite zu rendern, aber das ist nicht allzu teuer.

@Fyrestar
Hey irgendwelche Neuigkeiten?

Ich habe mein eigenes geschrieben und ein pr zu three.js erstellt , aber jetzt unterstütze ich nur OrthographicCamera, ich versuche, PerspectiveCamera zu unterstützen.
Demo- Demo2

Die PerspectiveCamera-Unterstützung ist jetzt in Ordnung. https://github.com/mrdoob/three.js/pull/20156

Demo

Das ist schön und durchaus eine Leistung. Es ist auf meinem Computer sehr langsam - ich bekomme 5fps bei 1920x1080. Was ist der Unterschied zwischen Ihrer Implementierung und der von Sketchfab? Ich vermute, wenn wir die Unterschiede kennen würden, könnten wir Ihre optimieren ....

@bhouston Danke!

Jetzt ist alles in der Szene reflektierend, aber es wird in den meisten praktischen Projekten nicht benötigt.
Ich füge einige wie die IntensityMap-Eigenschaft hinzu oder verwende vorhandene Roughness Metalness-Informationen, kombiniert mit der Distanzdämpfung, am Pixel mit einem Wert von 0, beende die Berechnung direkt, ich denke, dies wird die fps erheblich verbessern.
Kann auch zufällig einen Teil der reflektierenden Pixel auswählen.

Ich habe versucht, den Code von Sketchfab anzuzeigen, aber es ist fehlgeschlagen. Ich werde es noch einmal versuchen, aber ich habe nicht viel Hoffnung. Wenn jemand den Code von Sketchfab hat, bitte teilen, danke!

------BEARBEITEN------
Darüber hinaus wird das Präsentationsfenster von Sketchfab standardmäßig nicht im Vollbildmodus angezeigt und das Rendern wird gestoppt, wenn kein Vorgang ausgeführt wird.
Wenn es im Vollbildmodus angezeigt wird und sich ständig dreht, hat auch eine einfache Szene eine hohe GPU-Auslastung.

@gonnavis Der Shader-Code für dieses Beispiel sollte über die Chrome-Erweiterung Spector.js angezeigt werden können.

Wenn ich nur mit Sketchfab herumspiele, kann ich sehen, dass sie ihre SSR-Auflösung verschieben und verfeinern. Es würde mich nicht wundern, wenn es sich um 3 bis 5 Qualitätsstufen handelt, die sie nach und nach durchlaufen. Dies stellt sicher, dass eine interaktive Framerate vorhanden ist, die jedoch im statischen Zustand perfektioniert wird.

Dies stellt sicher, dass eine interaktive Framerate vorhanden ist, die jedoch im statischen Zustand perfektioniert wird.

Der Nachteil ist, dass es einen spürbaren Sprung gibt, wenn die Kamera aufhört, sich zu bewegen und die Qualitätsstufen umgeschaltet werden. In manchen Szenen ist es deutlicher als in anderen. Hier ist einer, bei dem es sehr offensichtlich ist.

BEARBEITEN: Sie tun es mit mehr als nur Reflexionen - es scheint, als würden Lichter, Schatten, Reflexionen und möglicherweise die Texturauflösungen schrittweise verbessert. Beobachten Sie das Licht/Schatten an der Rückwand dieser Szene .

Als ich oben mit SSRR experimentierte, habe ich hier ziemlich oft auf Morgan Mcguires Artikel darüber verwiesen, der ein paar Techniken erklärt, die Sketchfab möglicherweise verwendet.

Insbesondere kann die Pixelschrittweite erhöht werden, so dass weniger Pixelpixel abgetastet werden, was mit einem regelmäßigen pro Pixel-Jitter gekoppelt werden kann, so dass Geschwisterpixel beim Steppen verschiedene Tiefenabtastungen "überspringen". Wenn der Strahlschritt hoch genug ist, können Sie am Ende eine binäre Suche hinzufügen, sobald etwas im Tiefenpuffer geschnitten wird, um ein Pixel zu finden, das ein Strahl zuerst getroffen hätte. Die frühzeitige Rückgabe von nicht reflektierenden Fragmenten würde wahrscheinlich helfen, wie Sie bereits @gonnavis erwähnt haben.

Ich habe auch mit einer Tiefen- und Normal-Aware-Upscale eines Raymarch mit niedrigerer Auflösung experimentiert, aber ich kam nie an einen Punkt, an dem ich mit dem Aussehen zufrieden war. Ich denke, diese Technik in Spielen kann ziemlich stark von der Tatsache profitieren, dass verfügbare Auflösungen oft durch zwei teilbar sind, was eine Hochskalierung einfacher macht.

Ich bin jedoch gespannt, wie Sketchfab mit den groben Reflexionen umgeht, die basierend auf der Reflexionsentfernung verschwimmen. Ich habe gesehen, dass Godot Engine nach mit einem Radius basierend auf dem Strahlabstand und der Oberflächenrauheit eine Unschärfe macht, aber das führt zu Artefakten, die ich hier nicht sehe. Bei Spector.js muss ich bei Gelegenheit mal stöbern (danke für den Tipp @WestLangley!). Das von @bhouston veröffentlichte Frostbite-Papier

Es sieht gut aus @gonnavis! Schön zu sehen, dass es vielleicht in die Bibliothek kommt.

@WestLangley Danke! aber wenn ich Spector.js auf Sketchfab verwende, bekomme ich "Keine Frames mit gl-Befehlen erkannt. Versuchen Sie, die Kamera zu bewegen." Error.

Ich bezweifle, dass die Leistung von Sketchfab nach der Optimierung von SSRPass, wie ich bereits sagte, immer noch erheblich führen wird. Vor allem bei kontinuierlichem Rendering und keiner Downgrade-Strategie wie @bhouston @looeee erwähnt. Ich denke sogar, dass das Kernkonzept dieses SSRPass bereits die optimale Lösung ist, wenn nicht über die Implementierungsdetails gesprochen wird.

@gkjohnson Vielen Dank für Ihre Informationen und Unterstützung! Ich werde mich weiter verbessern.

@gonnavis

Ich empfehle die Registerkarte Grafik von Safari:

Wenn Sie Linux verwenden, können Sie Epiphany (auch bekannt als Gnome Web) verwenden:
https://webkit.org/downloads/

Ich glaube nicht, dass es einen WebKit-Build für Windows gibt ...

@mrdoob Danke! Obwohl ich hauptsächlich Windows verwende, werde ich es bei Bedarf auf dem Mac versuchen.

Aber ich frage mich, ob es erlaubt ist, den Code von Sketchfab in die Open-Source-Bibliothek hochzuladen, wenn Sie nützliche Dinge wie die glsl-Funktion finden?

Die Struktur dieses SSRPass basiert auf Three.js SSAOPass , und die Demoszene verwendet pointToLineDistance stammt von wolfram.com und andere, die hauptsächlich von mir geschrieben wurden (natürlich basieren insbesondere andere Three.js-Beispiele). Ich denke, das ist alles kein Problem, aber ist es der gleiche Fall von Sketchfabs Code?

Vielen Dank! aber wenn ich Spector.js auf Sketchfab verwende, bekomme ich "Keine Frames mit gl-Befehlen erkannt. Versuchen Sie, die Kamera zu bewegen." Error.

Scrollen Sie mit der Maus, um die Kamera zu zoomen. Das sollte ausreichen, um Spector auszulösen.

Verwenden Sie in Ihrem Beispiel außerdem eine statische Szene, die keine Renderschleife erfordert. Derzeit ist die Framerate zu niedrig, um akzeptabel zu sein.

@WestLangley In dieser Szene gelungen, danke!

Bitte nicht den Code von Sketchfab posten. Ich habe nur angedeutet, dass wir es verstehen
ihre Techniken. Was wir tun können, ohne ihren Code zu teilen. Du auch
nichts aus ihrem Code kopieren kann, das wäre gegen das Urheberrecht.

Am Di, 25. August 2020 um 06:21 schrieb Vis [email protected] :

@WestLangley https://github.com/WestLangley In dieser Szene erfolgreich
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
Danke!

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
oder abmelden
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

--
Ben Houston , CTO
M : +1-613-762-4113
[email protected]
Ottawa, Kanada
ThreeKit-Visualisierungsplattform: 3D, 2D, AR, VR
http://https//threekit.com/

@bhouston OK, nur bei Bedarf als Referenz.

Ich habe sogar oft das Gefühl, dass es schwieriger ist, sich nach Inspiration weiter die Arbeit und den Code anderer Leute anzusehen, als sie selbst zu schreiben, besonders in einer anderen Umgebung.

Zum Beispiel hat mich dieses Mal hauptsächlich dieses Tut inspiriert, aber es ist schwierig, die Bedeutung des Textes zu Beginn klar zu verstehen und wegen des anderen Koordinatensystems, das er verwendet, und ich weiß nicht, wie ich das ausführen soll. cxx-Datei, also lese ich nur wenig Text und kaum den Code. Also am Ende die beiden Bilder imgA imgB , die mir am meisten geholfen haben.

Fügen Sie einige Demos hinzu.

Demo, Demo2, Demo3, SelectiveDemo, OrthographicDemo.

Inspiriert von @gonnavis bin ich endlich dazu gekommen, ein paar neue Dinge in der SSR-Implementierung

Einige der neuen Funktionen:

• Unterstützung für Blue Noise Ray Jitter, damit das Schnittmuster weniger regelmäßig ist.
• Eine Tiefen- und normalgewichtete Hochskalierung / Unschärfe von einer Marschtextur mit niedrigerer Auflösung, um Details zu erhalten.
• Ein paar an den Augen angepasste Ansätze zum Rendern von Hochglanzreflexionen mit verwackelten Samples und Mipmaps.
• Unterstützung für Normal Maps und Alpha Maps.

Es ist ein ziemlich intensiver Effekt, aber ich habe das Gefühl, dass Sie mit einer Mischung aus Reflexions-Upscaling, Unschärfe, Jitter und geringer Schrittzahl etwas erreichen könnten, das besonders mit kleineren eingebetteten Leinwänden und nicht mit Vollfenster-Apps gut funktioniert. Durch das Auflösen des endgültigen Bildes über mehrere Frames, wie in https://github.com/mrdoob/three.js/issues/14048 beschrieben, können Sie wahrscheinlich auch anständige glänzende Reflexionen erzielen. Natürlich werden die Reflexionen, wie an anderer Stelle erwähnt, ohne separate Durchgänge für diffus und so weiter nicht wirklich richtig, aber es gibt immer etwas anderes zu verbessern.

Hier sind ein paar Screenshots mit höheren Schrittzahlen:

| Kein Glanz | Multisample-Glanz | Tiefenhierarchie Glanz |
|---|---|---|
| | | |

Und hier ist die Demo:

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Es gibt eine Folie in Siggraph 2015 über "Stochastic Screen-Space Reflections", die Sie interessieren könnte: http://advances.realtimerendering.com/s2015/index.html