-
-
Notifications
You must be signed in to change notification settings - Fork 35.5k
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.
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
WebGPURenderer: Apply fog before tonemapping and encoding #27850
Conversation
I created an example of how we can solve this in TSL without needing a transparent background. // render scene pass ( the same of css )
const scenePass = pass( scene, camera );
const scenePassViewZ = scenePass.getViewZNode();
// background color
const backgroundColor = color( 0x0066ff );
// get fog factor from scene pass context
// equivalent to: scene.fog = new THREE.Fog( 0x0066ff, 2.5, 4 );
const fogFactor = rangeFog( backgroundColor, 2.5, 4 ).context( { viewZ: scenePassViewZ } );
// tone mapping scene pass
const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping );
// mix fog from fog factor and background color
const compose = fogFactor.mix( scenePassTM, backgroundColor );
postProcessing = new PostProcessing( renderer );
postProcessing.outputNode = compose; |
@@ -91,14 +92,29 @@ class PassNode extends TempNode { | |||
|
|||
} | |||
|
|||
getViewZNode() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we can do these just as getters? I.e. something like get viewZ()
, get depth()
instead of getViewZNode()
, getDepthNode()
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's a good idea move to getters, I just will add *Node
suffix.
@@ -180,5 +181,8 @@ class ToneMappingNode extends TempNode { | |||
export default ToneMappingNode; | |||
|
|||
export const toneMapping = ( mapping, exposure, color ) => nodeObject( new ToneMappingNode( mapping, nodeObject( exposure ), nodeObject( color ) ) ); | |||
export const toneMappingExposure = rendererReference( 'toneMappingExposure', 'float' ); | |||
|
|||
addNodeElement( 'toneMapping', ( color, mapping, exposure ) => toneMapping( mapping, exposure, color ) ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this may be quite confusing...
Sounds good yep! |
Related: #26857
@mrdoob Do you think we can advance this implementation in
WebGPURenderer
? it seems important to add transmission in this architecture.