THREE.js Unschärfe der frame-buffer
Muss ich die Unschärfe für die frame-buffer und ich weiß nicht, wie man die frame-Puffer mit THREE.js.
Möchte ich die Unschärfe für die ganze frame-buffer eher als Unschärfe die einzelnen Texturen in der Szene. Also ich denke, ich sollte Lesen Sie die frame-Puffer und dann Weichzeichnen, anstatt dies zu tun, in shaders.
Hier ist was ich versucht habe:
Anruf bei init:
var renderTarget = new THREE.WebGLRenderTarget(512, 512, {
wrapS: THREE.RepeatWrapping,
wrapT: THREE.RepeatWrapping,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType,
stencilBuffer: false,
depthBuffer: true
});
renderTarget.generateMipmaps = false;
Rufen Sie in jedem frame:
var gl = renderer.getContext();
//render to target
renderer.render(scene, camera, renderTarget, false);
framebuffer = renderTarget.__webglFramebuffer;
console.log(framebuffer);
gl.flush();
if (framebuffer != null)
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
var width = height = 512;
var rdData = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rdData);
console.log(rdData);
//render to screen
renderer.render(scene, camera);
Aber framebuffer
ist WebFramebuffer {}
und rdData
ist voll von 0
. Tue ich das in der richtigen Weise?
Nicht blur "jede Texturen in der Szene."
Dann, wie sollte ich die Unschärfe für die ganze Szene im detail?
Ich glaube, Sie finden diesen Beitrag aufschlussreich für dein problem: stackoverflow.com/questions/15077762/...
Dann, wie sollte ich die Unschärfe für die ganze Szene im detail?
Ich glaube, Sie finden diesen Beitrag aufschlussreich für dein problem: stackoverflow.com/questions/15077762/...
InformationsquelleAutor Ovilia | 2013-03-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Jede Unschärfe verwenden sollen Shader effizient zu sein, aber in diesem Fall nicht als Material.
Wenn Sie wollen blur die gesamte frame-buffer-und render, die auf dem Bildschirm verwenden Sie die effect-Komponist. Es befindet sich in three.js/examples/js./postprocessing/EffectComposer.js
Einrichten der Szene, die Kamera und renderer als normal, aber darüber hinaus fügen Sie eine Instanz des Effekts Komponist. Mit der Szene als render-pass.
Dann verschwimmen die ganzen Puffer mit zwei Durchgängen mit dem mitgelieferten blur-Shader, die sich in drei.js/Beispiele/shaders/
schließlich in Ihrer Methode aufgerufen, in jedem frame gerendert mit dem Komponisten statt der renderer
Hier ist ein link zu einem funktionierenden Beispiel von full screen blur http://bit.ly/WfFKe7
HorizontalBlurShader
für die ganze Szene.es klingt wie Sie versuchen zu tun, eine Tiefe von Feld-Weichzeichnung. Der Prozess ist ähnlich und die Unschärfe wird immer noch behandelt werden, indem Sie einen shader und geschrieben werden, wieder auf ein full-screen-quad. Ich habe ein Beispiel für die Schärfentiefe hier andrewberg.com/prototypes/threejs/bokeh
Super Antwort, vielen Dank für den link! verstehe ich richtig, dass "effectscomposer" Bibliothek funktioniert unabhängig vom rest der drei-renderer? es nimmt alles, was im inneren der renderer als ein 2d-Bild und wendet den filter auf? (ich Frage, weil ich möchte, verschwimmt das Bild und die Schwelle, es zu erreichen, um zu "wabbelig" - Effekt)
Das ist richtig alle Effekte angewendet werden, um ein 2d-Bild in einem post-processing Schritt.
Dank Andrew, ist das code-snippet funktionierte sehr gut für mich, einfach zu Folgen.
InformationsquelleAutor Andrew Berg
Versuchen, mit den MeshDepthMaterial und machen diese in Ihrem shader.
Schlage ich vor, das Rendern, die Bewegungsunschärfe pass mit einem dedizierten Kamera mit den gleichen Einstellungen wie die Szene, in der diffusen Kamera. Dann durch verstellen der Kamera frustrum können Sie tun sowohl dem Bildschirm und der Tiefe der Unschärfe-Effekte. Für einen screen-setup bewegen Sie den in der Nähe von frustrum in Richtung der Kamera und bewegen Sie den weit frustrum in Schritten von der Kamera Weg.
http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial
InformationsquelleAutor Eli Peters