javascript - Bloom 和 Antialiasing 导致 Three.js 渲染中的条带
问题描述
我正在尝试为我的场景添加发光效果。据我所知,最好的方法是使用 EffectComposer 的布隆过滤器。不幸的是,使用 EffectComposer 否定了渲染器附带的漂亮的抗锯齿。我添加了一个 SSAARenderPass,但即使将 unbiased 设置为 true,并且将 sampleLevel 设置为 32,它也会导致条带化。请参见下面的附图。
我遇到了处理类似问题的讨论:https ://discourse.threejs.org/t/effect-composer-gamma-output-difference/12039/23 ,我相信我通过显式创建 RenderTarget 集成了讨论的解决方案对于类型设置为 THREE.FloatType 的 EffectComposer。这肯定有帮助,但我仍然有一些非常明显的条带。
如何在没有锯齿或条带的情况下获得发光效果并保持干净的渲染?
const pixelRatio = renderer.getPixelRatio();
const renderScene = new RenderPass( scene, camera );
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.threshold = 0.9;
bloomPass.strength = 1.5;
bloomPass.radius = 0.15;
var ssaaRenderPass = new SSAARenderPass( scene, camera );
ssaaRenderPass.sampleLevel = 32;
ssaaRenderPass.unbiased = true;
var adaptToneMappingPass = new AdaptiveToneMappingPass(true, 256);
var gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );
var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth * pixelRatio, window.innerHeight * pixelRatio,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false,
type: THREE.FloatType
});
renderTarget.texture.name = 'EffectComposer.rt1';
composer = new EffectComposer(renderer, renderTarget);
composer.addPass(renderScene);
composer.addPass(ssaaRenderPass); //Seems to be better than fxaa but has terrible banding
composer.addPass(adaptToneMappingPass);
composer.addPass(bloomPass);
composer.addPass(gammaCorrectionPass);
解决方案
我相信您遇到了这个演示解决的确切问题。当unbiased = false
您看到色带时:
但是当 时unbiased = true
,条带是固定的:
通过设置应该是一个简单的修复ssaaRenderPass.unbiased = true;
推荐阅读
- r - 根据其他向量的值,概率在 R 中生成随机向量
- operator-overloading - 推导出没有模板的冲突类型
- pip - 没有找到 pprint 的匹配分布
- git - Git pull 要求我写合并消息 - 拉之前没有提交
- jenkins - 如何将变量从远程 ssh 连接传递到 groovy 脚本中的其他阶段
- visual-studio-2017 - Windows 服务未显示
- javascript - 在两个方向上重叠元素
- html - 背景图像未在样式化组件中显示
- cluster-analysis - 如何在多个嵌入身份上使用 FaceNet 和 DBSCAN?
- asp.net-core - .NET Core3.0 ASP.NET Web AP 仅在部署到 IIS 时在控制器操作上获得 404