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.

StandardNodeMaterial's roughness does not work with environment from ReflectorNode

See original GitHub issue
Description of the problem

I’m trying to add a ground to display some rough reflections of the objects.

I add a mirror ground to examples/webgl_materials_nodes.html, like that in examples/webgl_mirror_nodes.html:

var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );

// reflector/mirror plane
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );

var mirror = new THREE.ReflectorNode( groundMirror );

let groundMirrorMaterial = new THREE.StandardNodeMaterial();
groundMirrorMaterial.environment = mirror;
var roughness = new THREE.FloatNode( 0.2 );
groundMirrorMaterial.roughness = roughness;

var mirrorMesh = new THREE.Mesh( planeGeo, groundMirrorMaterial );
groundMirror.add( mirrorMesh );
groundMirror.rotateX( - Math.PI / 2 );
scene.add( groundMirror );

But the reflections are not affected by groundMirrorMaterial.roughness.

With groundMirrorMaterial.environment = new THREE.CubeTextureNode(cubemap);, a normal env map: screenshot from 2018-08-16 17-07-46

With groundMirrorMaterial.environment = mirror;, same roughness value:

screenshot from 2018-08-16 17-08-31

Maybe it’s similiar to #14709 .

Three.js version
  • Dev
  • r95
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7

github_iconTop GitHub Comments

3reactions
sunagcommented, Aug 18, 2018

@sunag Sorry I didn’t quite understand the question.

Sorry too do not make me understand.

I already make ReflectorNode work with roughness which is the basis of issue, but the quality of blur is bad, PMREM for example create a good environment irradiance cube what is not happening here and maybe I will have to modify the shader if MaxMipLevel is not work with planar reflection like (see in roughness = 0 still remains slightly blurred). BlurNode could be a alternative to avoid mipmaps to blur but I think it is going to need many steps to irradiance, would not be good.

Code work but is not ready. https://rawgit.com/sunag/three.js/dev-mirror-roughness/examples/webgl_mirror_nodes.html

In short, it is possible fix this issue for now with this code but this will require more work to obtain good quality.

2reactions
Mugen87commented, Sep 5, 2022

Closing since this issue is related to the old node material which has been removed with r138.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Roughness not working in my nodes - Questions - Babylon.js
Basically, I tried to add a roughness map to control what parts are more or less reflective, but everything seems too shiny for...
Read more >
MeshStandardMaterial#roughness – three.js docs
A standard physically based material, using Metallic-Roughness workflow. Physically based rendering (PBR) has recently become the standard in many 3D ...
Read more >
Using the Roughness attribute with a Reflection [Video Tutorial]
In this video you will be introduced to the Roughness attribute and how it will affect the glossiness of a reflection. Adding Roughness...
Read more >
Roughness Parameter - Keyshot Manual
The Roughness parameter is another setting that will be found on multiple material types in KeyShot. This is a slider that will add...
Read more >
Manipulating the Solution Environment to Control the Surface ...
Atomic force microscopy (AFM) was used to measure the average roughness (Ra) ... Elastin-like polypeptides (ELP) are biologically compatible polymers that ...
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