Three.js - сглаживание, рендеринг, fxaa - PullRequest
Новая
       90

Three.js - сглаживание, рендеринг, fxaa

1 голос
/ 17 октября 2019

У меня есть проект three.js с 3d-моделями, грунтом и сеткой. 3d-модели обводятся с помощью outlinePass (https://threejs.org/examples/?q=outl#webgl_postprocessing_outline).

Я могу перемещать объекты с помощью Transformcontrol (https://threejs.org/examples/?q=transf#misc_controls_transform), и я могу изменить положение моей камеры с помощью Orbitcontrols (https://threejs.org/examples/?q=orbit#misc_controls_orbit)

Проблема: графика выглядит отчасти плохо, вот некоторые скриншоты: https://imgur.com/gallery/3FrZt3s

Я не знаю, какие настройки мне следует использовать здесь: 

    renderer = new THREE.WebGLRenderer();//{ antialias: true } ); With antialiasing or without?
                                 //antialiasing is only needed when not using fxaa, right??
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            renderer.physicallyCorrectLights = true;

    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
    camera.addEventListener( 'change', render ); //Is this necessary? Seems like it has no use

FXAAВероятно, это необходимо для outlinePass (также в приведенном выше примере outlinePass). 

    composer = new EffectComposer( renderer );

            var renderPass = new RenderPass( scene, camera );
            composer.addPass( renderPass );

            effectFXAA = new ShaderPass( FXAAShader );
            effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
            effectFXAA.renderToScreen = true;
            composer.addPass( effectFXAA );   

            orbitControls = new OrbitControls( camera, renderer.domElement );
            orbitControls.update();
            orbitControls.addEventListener( 'change', render );

    function render(){
    renderer.render(scene, camera);
    //composer.render(); // don't know if needed
    }

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

1 Ответ

2 голосов
/ 17 октября 2019

При использовании постобработки с WebGL 1 вы должны использовать FXAA для сглаживания. Передача { antialias: true } в true при создании WebGLRenderer активирует MSAA, но только при рендеринге в кадровый буфер по умолчанию (непосредственно на экран).

В любом случае вы настраиваете пропуск FXAA следующим образом: 

effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
effectFXAA.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );
composer.addPass( effectFXAA );

Вы должны чтить pixelRatio. Кроме того, установка renderToScreen в true больше не требуется. Последний проход в цепочке постобработки теперь автоматически отображается на экране.

При использовании EffectComposer вы не вызываете renderer.render(scene, camera);. Вместо этого вы должны использовать composer.render();.

camera.addEventListener( 'change', render ); также можно удалить. Я не уверен, где вы видели это, но это не имеет никакого эффекта.

three.js R109

...