THREE.js le flou de la mémoire tampon de trame

J'ai besoin de flou de la mémoire d'image et je ne sais pas comment pour obtenir le tampon de trame à l'aide de THREE.js.

Je veux le flou de l'ensemble de la mémoire d'image plutôt que le flou de chacun des textures de la scène. Donc je suppose que je devrais lire le tampon de trame et ensuite, le flou, plutôt que de prendre dans les shaders.

Voici ce que j'ai essayé:

Appel lorsque 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;

Appel dans chaque image:

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);

Mais framebuffer est WebFramebuffer {} et rdData est plein de 0. Suis-je le faire dans le droit chemin?

  • Qui n'a pas de flou de chacun des textures de la scène."
  • Alors, comment dois-je le flou de l'ensemble de la scène, dans le détail?
  • Je pense que vous trouverez ce post perspicaces à votre problème: stackoverflow.com/questions/15077762/...
InformationsquelleAutor Ovilia | 2013-03-12
  1. 17

    Tout flou doit utiliser les shaders pour être efficace, mais dans ce cas pas sous la forme de matériaux.

    Si vous souhaitez flouter l'ensemble de la mémoire d'image et un rendu à l'écran, utilisez l'effet compositeur. Il est situé dans three.js/examples/js./postprocessing/EffectComposer.js

    Configurer la caméra de scène et le rendu comme d'habitude, mais en plus d'ajouter une instance de l'effet compositeur. Avec la scène comme une passe de rendu.

    composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

    Ensuite, le flou sur l'ensemble de la mémoire tampon avec deux passes à l'aide du câble flou shaders situé à trois.js/exemples/shaders/

    hblur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
composer.addPass( hblur );

vblur = new THREE.ShaderPass( THREE.VerticalBlurShader );
//set this shader pass to render to screen so we can see the effects
vblur.renderToScreen = true;
composer.addPass( vblur );

    enfin dans votre méthode appelée dans chaque image de rendu en utilisant le compositeur au lieu de le convertisseur

    composer.render();

    Voici un lien vers un exemple de travail en plein écran flou http://bit.ly/WfFKe7

    • Je vais le flou de l'ensemble de la scène selon les informations de profondeur de chaque pixel, donc j'ai encore besoin d'obtenir le framebuffer plutôt que d'en ajouter HorizontalBlurShader pour l'ensemble de la scène.
    • il semble que vous essayez de faire, une profondeur de champ flou. Le processus est similaire et le flou sera toujours gérée par un shader et être rédigée de retour à un plein écran de quad. J'ai un exemple de travail de profondeur de champ, ici andrewberg.com/prototypes/threejs/bokeh
    • super réponse, merci pour le lien! dois-je comprends bien que "effectscomposer" de la bibliothèque fonctionne de façon indépendante du reste de la trois moteur de rendu? qu'il prend tout ce qui est à l'intérieur du moteur de rendu comme une image 2d, et applique un filtre sur elle? (je demande parce que je voudrais le flou de l'image et le seuil en vue de parvenir à "bancale" effet)
    • C'est exact, tous les effets sont appliqués à une image 2d dans un post étape de traitement.
    • Merci Andrew, l'extrait de code très bien fonctionné pour moi, facile à suivre.
    InformationsquelleAutor Andrew Berg
  2. 0

    Essayez d'utiliser le MeshDepthMaterial et de rendre cette dans votre shader.

    Je suggère le rendu du flou de passe avec un appareil photo dédié en utilisant les mêmes paramètres que la scène diffuse de la caméra. Puis en ajustant l'appareil photo frustrum que vous pouvez faire à la fois l'écran et la profondeur des effets de flou. Pour une configuration d'écran déplacez le près de frustrum en direction de la caméra et de déplacer l'extrême frustrum en incréments loin de la caméra.

    http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial

    InformationsquelleAutor Eli Peters