Skip to content

ShadersChunk: Only use clearcoat chunks when clearcoat > 0 #22405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 24, 2021
Merged

ShadersChunk: Only use clearcoat chunks when clearcoat > 0 #22405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d5ab6b
ShadersChunk: Only use clearcoat chunks when clearcoat > 0
mrdoob Aug 24, 2021
43d1f46
WebGLProgram: Removed clearcoat checks.
mrdoob Aug 24, 2021
3be7ab3
WebGLMaterials: Only update clearcoat uniforms when material.clearcoa…
mrdoob Aug 24, 2021
d688921
WebGLProgram: Add clearcoat checks again.
mrdoob Aug 24, 2021
32641da
WebGLProgram: Added commented out convenience log.
mrdoob Aug 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/materials/MeshPhysicalMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import * as MathUtils from '../math/MathUtils.js';

class MeshPhysicalMaterial extends MeshStandardMaterial {

#clearcoat = 0;
#transmission = 0;

constructor( parameters ) {
Expand All @@ -49,7 +50,6 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {

this.type = 'MeshPhysicalMaterial';

this.clearcoat = 0.0;
this.clearcoatMap = null;
this.clearcoatRoughness = 0.0;
this.clearcoatRoughnessMap = null;
Expand Down Expand Up @@ -90,6 +90,24 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {

}

get clearcoat() {

return this.#clearcoat;

}

set clearcoat( value ) {

if ( this.#clearcoat > 0 !== value > 0 ) {

this.version ++;

}

this.#clearcoat = value;

}

get transmission() {

return this.#transmission;
Expand Down
2 changes: 1 addition & 1 deletion src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_begin.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default /* glsl */`
#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

vec3 clearcoatNormal = geometryNormal;

Expand Down
2 changes: 1 addition & 1 deletion src/renderers/shaders/ShaderChunk/common.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ struct GeometricContext {
vec3 position;
vec3 normal;
vec3 viewDir;
#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT
vec3 clearcoatNormal;
#endif
};
Expand Down
2 changes: 1 addition & 1 deletion src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ geometry.position = - vViewPosition;
geometry.normal = normal;
geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition );

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

geometry.clearcoatNormal = clearcoatNormal;

Expand Down
2 changes: 1 addition & 1 deletion src/renderers/shaders/ShaderChunk/lights_fragment_maps.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default /* glsl */`

radiance += getIBLRadiance( geometry.viewDir, geometry.normal, material.roughness );

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

clearcoatRadiance += getIBLRadiance( geometry.viewDir, geometry.clearcoatNormal, material.clearcoatRoughness );

Expand Down
2 changes: 1 addition & 1 deletion src/renderers/shaders/ShaderChunk/lights_physical_fragment.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ material.roughness = min( material.roughness, 1.0 );

#endif

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

material.clearcoat = clearcoat;
material.clearcoatRoughness = clearcoatRoughness;
Expand Down
6 changes: 3 additions & 3 deletions src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ struct PhysicalMaterial {
vec3 specularColor;
float specularF90;

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT
float clearcoat;
float clearcoatRoughness;
vec3 clearcoatF0;
Expand Down Expand Up @@ -120,7 +120,7 @@ void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricC

vec3 irradiance = dotNL * directLight.color;

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

float dotNLcc = saturate( dot( geometry.clearcoatNormal, directLight.direction ) );

Expand Down Expand Up @@ -151,7 +151,7 @@ void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricCo

void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradiance, const in vec3 clearcoatRadiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

clearcoatSpecular += clearcoatRadiance * EnvironmentBRDF( geometry.clearcoatNormal, geometry.viewDir, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness );

Expand Down
5 changes: 2 additions & 3 deletions src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ export default /* glsl */`

#ifdef PHYSICAL
#define IOR
#define CLEARCOAT
#define SPECULAR
#endif

Expand All @@ -30,7 +29,7 @@ uniform float opacity;
#endif
#endif

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT
uniform float clearcoat;
uniform float clearcoatRoughness;
#endif
Expand Down Expand Up @@ -107,7 +106,7 @@ void main() {

vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;

#ifdef CLEARCOAT
#ifdef USE_CLEARCOAT

float dotNVcc = saturate( dot( geometry.clearcoatNormal, geometry.viewDir ) );

Expand Down
32 changes: 18 additions & 14 deletions src/renderers/webgl/WebGLMaterials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,31 +580,35 @@ function WebGLMaterials( properties ) {

uniforms.ior.value = material.ior; // also part of uniforms common

uniforms.clearcoat.value = material.clearcoat;
uniforms.clearcoatRoughness.value = material.clearcoatRoughness;

if ( material.sheenTint ) uniforms.sheenTint.value.copy( material.sheenTint );

if ( material.clearcoatMap ) {
if ( material.clearcoat > 0 ) {

uniforms.clearcoatMap.value = material.clearcoatMap;
uniforms.clearcoat.value = material.clearcoat;
uniforms.clearcoatRoughness.value = material.clearcoatRoughness;

}
if ( material.clearcoatMap ) {

if ( material.clearcoatRoughnessMap ) {
uniforms.clearcoatMap.value = material.clearcoatMap;

uniforms.clearcoatRoughnessMap.value = material.clearcoatRoughnessMap;
}

}
if ( material.clearcoatRoughnessMap ) {

uniforms.clearcoatRoughnessMap.value = material.clearcoatRoughnessMap;

}

if ( material.clearcoatNormalMap ) {

if ( material.clearcoatNormalMap ) {
uniforms.clearcoatNormalScale.value.copy( material.clearcoatNormalScale );
uniforms.clearcoatNormalMap.value = material.clearcoatNormalMap;

uniforms.clearcoatNormalScale.value.copy( material.clearcoatNormalScale );
uniforms.clearcoatNormalMap.value = material.clearcoatNormalMap;
if ( material.side === BackSide ) {

if ( material.side === BackSide ) {
uniforms.clearcoatNormalScale.value.negate();

uniforms.clearcoatNormalScale.value.negate();
}

}

Expand Down
10 changes: 10 additions & 0 deletions src/renderers/webgl/WebGLProgram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,9 @@ function generateEnvMapBlendingDefine( parameters ) {

function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {

// TODO Send this event to Three.js DevTools
// console.log( 'WebGLProgram', cacheKey );

const gl = renderer.getContext();

const defines = parameters.defines;
Expand Down Expand Up @@ -470,13 +473,17 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',

parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',

parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.specularIntensityMap ? '#define USE_SPECULARINTENSITYMAP' : '',
parameters.specularTintMap ? '#define USE_SPECULARTINTMAP' : '',

parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
parameters.alphaMap ? '#define USE_ALPHAMAP' : '',

parameters.transmission ? '#define USE_TRANSMISSION' : '',
parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
parameters.thicknessMap ? '#define USE_THICKNESSMAP' : '',
Expand Down Expand Up @@ -611,9 +618,12 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
parameters.normalMap ? '#define USE_NORMALMAP' : '',
( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',

parameters.clearcoat ? '#define USE_CLEARCOAT' : '',
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',

parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.specularIntensityMap ? '#define USE_SPECULARINTENSITYMAP' : '',
parameters.specularTintMap ? '#define USE_SPECULARTINTMAP' : '',
Expand Down
15 changes: 11 additions & 4 deletions src/renderers/webgl/WebGLPrograms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
'precision', 'isWebGL2', 'supportsVertexTextures', 'outputEncoding', 'instancing', 'instancingColor',
'map', 'mapEncoding', 'matcap', 'matcapEncoding', 'envMap', 'envMapMode', 'envMapEncoding', 'envMapCubeUV',
'lightMap', 'lightMapEncoding', 'aoMap', 'emissiveMap', 'emissiveMapEncoding', 'bumpMap', 'normalMap',
'objectSpaceNormalMap', 'tangentSpaceNormalMap', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap', 'displacementMap',
'objectSpaceNormalMap', 'tangentSpaceNormalMap',
'clearcoat', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap',
'displacementMap',
'specularMap', 'specularIntensityMap', 'specularTintMap', 'specularTintMapEncoding', 'roughnessMap', 'metalnessMap', 'gradientMap',
'alphaMap', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
Expand Down Expand Up @@ -152,6 +154,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities

const currentRenderTarget = renderer.getRenderTarget();

const useClearcoat = material.clearcoat > 0;

const parameters = {

isWebGL2: isWebGL2,
Expand Down Expand Up @@ -190,9 +194,12 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
normalMap: !! material.normalMap,
objectSpaceNormalMap: material.normalMapType === ObjectSpaceNormalMap,
tangentSpaceNormalMap: material.normalMapType === TangentSpaceNormalMap,
clearcoatMap: !! material.clearcoatMap,
clearcoatRoughnessMap: !! material.clearcoatRoughnessMap,
clearcoatNormalMap: !! material.clearcoatNormalMap,

clearcoat: useClearcoat,
clearcoatMap: useClearcoat && !! material.clearcoatMap,
clearcoatRoughnessMap: useClearcoat && !! material.clearcoatRoughnessMap,
clearcoatNormalMap: useClearcoat && !! material.clearcoatNormalMap,
Comment on lines +198 to +201
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WestLangley Should we do something like this for transmission too? If so... what parameters depend on material.transmision > 0?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

transmission: <float>,
transmissionMap: new THREE.Texture( <Image> ),

thickness: <float>,
thicknessMap: new THREE.Texture( <Image> ),
attenuationDistance: <float>,
attenuationTint: <Color>,

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent! I'll do that on my next PR.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But actually, transmission and volume are separate extensions. The last four are for volume.

Copy link
Owner Author

@mrdoob mrdoob Aug 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! But... in the context of our shader chunks, do thickness and attenuation affect the material if transmission is 0?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related: You can do something like this for sheenTint too, so the version will be incremented when sheenTint is changed from black to not-black.

Would love to see that. That would make the physical exclusive properties more consistent.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So then the logic would be like this?

if ( transmision > 0 ) {

    transmission: <float>
    transmissionMap: new THREE.Texture( <Image> )

    if ( thickness > 0 ) {

        thickness: <float>
        thicknessMap: new THREE.Texture( <Image> )
        attenuationDistance: <float>
        attenuationTint: <Color>

    }

}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, something like that.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be USE_TRANSMISSION and USE_VOLUME.

It is up to you if USE_TRANSMISSION is used to mean "transmission_without_volume" -- a.k.a. thin surface only.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! But... in the context of our shader chunks, do thickness and attenuation affect the material if transmission is 0?

No.


displacementMap: !! material.displacementMap,
roughnessMap: !! material.roughnessMap,
metalnessMap: !! material.metalnessMap,
Expand Down