question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Differences in rendering when using plain three.js

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
upisfreecommented, May 4, 2020

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

1reaction
leefsmpcommented, Apr 8, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chapter 4. Graphics and Rendering in Three.js - O'Reilly
Each mesh object contains a different geometry type, with a reference texture map displaying how texture coordinates are generated for each. The texture...
Read more >
Photorealistic render comparison, why does three.js look so ...
They both use Filmic Tonemapping (ACES for three.js) and sRGB as output encoding. The materials are the same (PBR) and the maps are...
Read more >
Three.js Fundamentals
Three.js is often confused with WebGL since more often than not, but not always, three.js uses WebGL to draw 3D. WebGL is a...
Read more >
Three.js Tutorial – How to Render 3D Objects in the Browser
Three.js uses WebGL under the hood to render 3D graphics. We could use plain WebGL, but it's very complex and rather low level....
Read more >
Three.js render white part of plain geometry - Stack Overflow
Another way to do this is to use an alpha channel on your texture. You can do this with Gimp or Photoshop. You...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found