admin管理员组文章数量:1326317
I have a three.js project with 3d-models, a ground and a grid in it. The 3d-models getting outlined with outlinePass (/?q=outl#webgl_postprocessing_outline).
I am able to move the objects with Transformcontrol (/?q=transf#misc_controls_transform) and i can change my camera position with Orbitcontrols (/?q=orbit#misc_controls_orbit)
The problem: The graphics seem kind of badly rendered, here some screenshots: .jpg
I don't really know which settings i should use here:
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 is probably necessary for outlinePass (also in the outlinePass-example linked above).
poser = new EffectComposer( renderer );
var renderPass = new RenderPass( scene, camera );
poser.addPass( renderPass );
effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
effectFXAA.renderToScreen = true;
poser.addPass( effectFXAA );
orbitControls = new OrbitControls( camera, renderer.domElement );
orbitControls.update();
orbitControls.addEventListener( 'change', render );
function render(){
renderer.render(scene, camera);
//poser.render(); // don't know if needed
}
So i have to say, i have not really a clue how i can solve the rendering issue and which settings i have to set to make the most out of my project. I'm happy for every hint and answers and maybe i can put these answers together and solve the issue.
I have a three.js project with 3d-models, a ground and a grid in it. The 3d-models getting outlined with outlinePass (https://threejs/examples/?q=outl#webgl_postprocessing_outline).
I am able to move the objects with Transformcontrol (https://threejs/examples/?q=transf#misc_controls_transform) and i can change my camera position with Orbitcontrols (https://threejs/examples/?q=orbit#misc_controls_orbit)
The problem: The graphics seem kind of badly rendered, here some screenshots: https://i.sstatic/QxjrZ.jpg
I don't really know which settings i should use here:
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 is probably necessary for outlinePass (also in the outlinePass-example linked above).
poser = new EffectComposer( renderer );
var renderPass = new RenderPass( scene, camera );
poser.addPass( renderPass );
effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
effectFXAA.renderToScreen = true;
poser.addPass( effectFXAA );
orbitControls = new OrbitControls( camera, renderer.domElement );
orbitControls.update();
orbitControls.addEventListener( 'change', render );
function render(){
renderer.render(scene, camera);
//poser.render(); // don't know if needed
}
So i have to say, i have not really a clue how i can solve the rendering issue and which settings i have to set to make the most out of my project. I'm happy for every hint and answers and maybe i can put these answers together and solve the issue.
Share Improve this question asked Oct 17, 2019 at 10:19 derseitzerderseitzer 1591 silver badge9 bronze badges1 Answer
Reset to default 7When using post-processing with WebGL 1, you have to use FXAA for antialiasing. Passing { antialias: true }
to true
when creating WebGLRenderer
activates MSAA but only if you render to the default framebuffer (directly to screen).
In any event, you configure the FXAA pass like so:
effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
effectFXAA.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );
poser.addPass( effectFXAA );
You have to honor the pixelRatio
. Besides, setting renderToScreen
to true
is not necessary anymore. The last pass in the post-processing chain is automatically rendered to screen now.
When using EffectComposer
, you do not call renderer.render(scene, camera);
. You have to use poser.render();
instead.
camera.addEventListener( 'change', render );
can also be deleted. I'm not sure where you seen this but it has no effect.
three.js R109
本文标签: javascriptThreejsantialiasingrenderingfxaaStack Overflow
版权声明:本文标题:javascript - Three.js - antialiasing, rendering, fxaa - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204709a2432600.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论