Wie würde ich die Reflektion der Umgebung in webgl machen, ohne eine Bibliothek wie three.js zu benutzen?
Ich versuche herauszufinden, wie man die Umgebung auf ein Objekt mappt. Hier ist das Setup:
Wie würde ich die Oberfläche der Teekanne reflektieren lassen? Was ich damit meine, ist, dass anstelle der Teekanne, die ein Grauton ist, ihre Oberfläche ihre Umgebung reflektieren sollte, also sollte das Schachbrett auf ihrer Oberfläche abgebildet sein.
Dies ist ein Beispiel für das, was ich erreichen möchte, aber es verwendet Three.js und möchte es um das alleine zu machen (das ist für eine Klasse).
Macht das Sinn? Wie würde ich anfangen?
Follow-up
Ich beantwortete diese Frage nach Beendigung meiner Hausaufgabe: Ссылка . Siehe die Antwort für Links und Code:)
2 Antworten
Ich habe hier ein gutes Beispiel für diese Teekanne gefunden ...
Beim Durchsehen des Quellcodes habe ich gefunden, wonach ich gesucht habe:
%Vor%... und der Beispiel-Fragment-Shader (der mehr hat, als ich für die Umgebungs-Reflektions-Zuordnung benötige) ...
%Vor%Das Ergebnis war irgendwie cool ...
Fühlen Sie sich frei, es bei Ссылка nachzusehen. Der Quellcode ist alles in seiner Pracht ... der Code ist zum Kotzen, also bitte beurteile mich nicht :) Dies ist die Haupt-JS-Datei: Ссылка . Die Shader befinden sich auf der Seite index.html, also sehen Sie sich einfach die Quelle an.
Der grundlegende Ansatz zum Rendern eines reflektierenden Objekts ist:
- Platzieren Sie die Kamera in der Mitte des Objekts, und rendern Sie die Szene in sechs Texturen, die die sechs Seiten eines Würfels um dieses Objekt herum darstellen.
- Schreiben Sie einen Fragment-Shader, der die Sichtlinie über die Flächennormale reflektiert und auf den Schnittpunkt mit dem Würfel zeigt, um die in der Reflexion sichtbare Farbe zu finden.
(Ich habe das selbst nie gemacht, aber ich habe Tutorials wie dieses gesehen ).
Tags und Links javascript webgl texture-mapping