Ich möchte ein WebGLTexture-Objekt, das ich gerendert habe, verwenden und damit ein HTML-Bildelement erstellen. Das Ziel besteht darin, das Ergebnis eines Offscreen-Rendering-Passes zu Debugging-Zwecken anzuzeigen. Es sollte viel einfacher sein als das Rendern der Textur zu einem Vollbildschirm-Quad, meiner aktuellen Debugging-Methode.
Das Erstellen einer Textur aus einem Bildelement ist in WebGL wirklich einfach:
%Vor%Das Laden und Dekodieren von Bildern ist für Sie vollständig erledigt.
Gibt es eine ähnlich einfache Möglichkeit, das Gegenteil zu tun? d.h.:
%Vor%Wenn es einen Weg gibt, dies zu tun, bin ich sicher, dass es in Kontexten außerhalb des Debuggens nützlich sein wird. Ich werde weiter sehen, ob ich einen Weg finden kann, es zu tun, aber ich habe das Gefühl, dass jemand das vorher versucht haben muss.
Sie können einen Framebuffer erstellen, der von einer Textur unterstützt wird, und dann die Rohpixeldaten aus dem Framebuffer mit gl.readPixels () . Sobald Sie das Datenpixel haben, können Sie es mithilfe von ImageData auf eine 2D-Leinwand kopieren. Dann können Sie ein Bild erstellen, indem Sie die src-Eigenschaft des Bildes auf canvas.toDataURL () setzen.
%Vor%Hier ist ein Beispiel für die Ausführung eines node.js-Servers in Verbindung mit toDataURL (), um mehrere Bilder direkt auf die Festplatte zu übertragen:
Ein WebGL-Kontext ist ein Canvas, und es gibt mehrere gut dokumentierte Möglichkeiten, ein Bild aus einem Canvas herauszuholen. Daher wird die grundlegende Methodologie ungefähr so aussehen:
Wenn Sie das Bild wirklich speichern möchten, müssen Sie es wahrscheinlich an einen Server zur Verarbeitung senden. Wenn Sie jedoch nur das Bild auf der gleichen Seite anzeigen möchten, auf der es gerendert wurde, können Sie das Bild einstellen dataURI, die Sie für das img -Attribut des src -Tags erhalten haben, und es sollte ordnungsgemäß angezeigt werden.
Tags und Links webgl