weixin_39533742
weixin_39533742
2020-11-21 00:05

Differences in rendering when using plain three.js

We switched our rendering pipeline to use that lib and we are getting great results, so big thank you!

The textures of materials are looking so much sharper than with plain three.js but the scene is also darker (with same light intensity and positions of course) and the colours seem to have a higher contrast. We wondering if there are some settings that are set by default when using a RenderPass for main scene or what is the reason for that? I've seen there is a BrightnessContrastEffect that can do the trick but wanted to check before using it.

Plain three.js:

Screen Shot 2020-04-08 at 14 56 20

With postprocessing:

Screen Shot 2020-04-08 at 14 56 34

Then my second question is about changing some material properties, for example I want to set materials to THREE.DoubleSide but seems to have no effect, the scene comes out with THREE.FrontSide no matter what:


setMaterialSide (side) {
    traverseMaterials(this.root, material => {
      material.side = side
      material.needsUpdate = true
    })
  }

setMaterialSide(THREE.DoubleSide)

Is there something to do in order to update that change?

Thanks

该提问来源于开源项目:vanruesc/postprocessing

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • weixin_39522927 weixin_39522927 5月前

    'toneMapped' is not a property of this material

    That warning can be ignored. Fullscreen materials disable the toneMapped flag to prevent newer versions of three from injecting some unnecessary shader code.

    We are running an older version of three.js (r107) because switching to latest is too disruptive at the moment

    I see. In this case postprocessing won't be able to handle gamma correction automatically and you will probably need to use the GammaCorrectionEffect to fix the visuals:

    js
    const gammaCorrectionEffect = new GammaCorrectionEffect({ gamma: 2.2 });
    const effectPass = new EffectPass(camera, gammaCorrectionEffect);
    effectPass.encodeOutput = false; // Prevent potential bugs.
    

    This, however, depends on your rendering pipeline: did you previously use WebGLRenderer.gammaInput and WebGLRenderer.gammaOutput?

    点赞 评论 复制链接分享
  • weixin_39533742 weixin_39533742 5月前

    spot on, this completely solves the issue! Thanks a bunch

    点赞 评论 复制链接分享
  • weixin_39637646 weixin_39637646 5月前

    I guess this relates with this pull request: https://github.com/mrdoob/three.js/pull/19129 And also this was fixed in three r116 ✨

    点赞 评论 复制链接分享
  • weixin_39522927 weixin_39522927 5月前

    Postprocessing doesn't change your models or materials in any way. The main role of the RenderPass is to produce the same result as WebgLRender.render(scene, camera). The actual postprocessing happens after that.

    Did you recently upgrade to a newer version of three? Maybe the gamma correction / output encoding changes are the reason why the colors suddenly appear darker. I might be wrong, but the model in the first screenshot also doesn't look textured to me.

    Brightness and contrast should preferably be tuned by adjusting colors, textures, lights and tone mapping settings in the first render pass where you still have the full color precision. I recommend using the BrightnessContrastEffect for things like final artistic tuning and end user settings.

    Then my second question is about changing some material properties, for example I want to set materials to THREE.DoubleSide but seems to have no effect, the scene comes out with THREE.FrontSide no matter what

    This shouldn't be a problem since postprocessing doesn't touch your materials. For reference, see this example (App.js#98-107). If you provide a minimal example that reproduces the issue, I'll take a look.

    点赞 评论 复制链接分享
  • weixin_39533742 weixin_39533742 5月前

    Thanks for the quick response. Material side is ok, the issue was that the DAT.gui was changing my value to a string, hence it wasn't taken in consideration.

    We are running an older version of three.js (r107) because switching to latest is too disruptive at the moment with the pointcloud library we are using and other components of the app. You mentioned tone mapping and I see some warnings when loading the model when using postprocessing: 'toneMapped' is not a property of this material. I'm aware the current version is supposed to be used with three r115 but since it's working we can live with it for the time being.

    点赞 评论 复制链接分享

相关推荐