Three.js: наложение CSS Renderer не работает при использовании шейдера постобработки (EffectsComposer)

У меня есть сцена с двумя рендерерами одинакового размера, расположенными друг над другом и использующими одну и ту же перспективную камеру, например:

var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();

var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();

            //animate loop

    renderer.render(scene, camera);
    cssRenderer.render(cssScene, camera);

Объекты CSS можно размещать непосредственно над объектами в сцене WebGL, просто ссылаясь на их позиции и устанавливая положение объектов CSS.

Однако, когда я добавляю этот эффект:

var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);

И вместо этого вызовите композитор для рендеринга вот так composer.render();

Мои объекты CSS больше не размещаются правильно.

Перспектива отключена, так как масштабирование будет перемещать объекты CSS, в то время как объекты WebGL сохраняют свои позиции.

Есть идеи, почему дополнительные проходы шейдера могут изменить перспективу в рендеринге WebGL, что приводит к тому, что объекты CSS не остаются правильно выровненными и скользят?


camera three.js renderer perspectivecamera webkit-perspective
person mattdlockyer    schedule 18.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, я понял, что, несмотря на то, что только композитор вызывает рендеринг, исходный рендерер также должен сбросить свой размер в любом методе изменения размера, который у вас есть.

Композитор основан на оригинальном рендерере, и я закомментировал изменение размера этого объекта и изменил размер только композитора.

Это то, что я, должно быть, упустил из виду, надеюсь, это поможет другим!

camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);
person mattdlockyer    schedule 22.01.2014