Skip to content

Commit

Permalink
WebGLRenderer: Use inline tone mapping only when rendering to screen. (
Browse files Browse the repository at this point in the history
…#26371)

* WebGLRenderer: Use inline tone mapping only when rendering to screen.

* Examples: Fix 3Dlut demo.

* Examples: Update screenshots.

* Examples: Update screenshots.

* WebGLRenderer: Fix tone mapping check for WebXR.

* WebGLRenderer: Simplify tone mapping check.
  • Loading branch information
Mugen87 authored Jul 5, 2023
1 parent 4a7c241 commit 2898b20
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 18 deletions.
4 changes: 2 additions & 2 deletions examples/jsm/postprocessing/OutputPass.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
ShaderMaterial,
RawShaderMaterial,
UniformsUtils,
NoToneMapping,
LinearToneMapping,
Expand All @@ -25,7 +25,7 @@ class OutputPass extends Pass {

this.uniforms = UniformsUtils.clone( shader.uniforms );

this.material = new ShaderMaterial( {
this.material = new RawShaderMaterial( {
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
Expand Down
15 changes: 14 additions & 1 deletion examples/jsm/shaders/OutputShader.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import {
ShaderChunk
} from 'three';

const OutputShader = {

uniforms: {
Expand All @@ -8,6 +12,13 @@ const OutputShader = {
},

vertexShader: /* glsl */`
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
Expand All @@ -19,10 +30,12 @@ const OutputShader = {
}`,

fragmentShader: /* glsl */`
precision highp float;
uniform sampler2D tDiffuse;
#include <tonemapping_pars_fragment>
` + ShaderChunk[ 'tonemapping_pars_fragment' ] + ShaderChunk[ 'colorspace_pars_fragment' ] + `
varying vec2 vUv;
Expand Down
Binary file modified examples/screenshots/webgl_postprocessing_3dlut.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_shaders_ocean.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 3 additions & 13 deletions examples/webgl_postprocessing_3dlut.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,10 @@
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { LUTPass } from 'three/addons/postprocessing/LUTPass.js';
import { LUTCubeLoader } from 'three/addons/loaders/LUTCubeLoader.js';
import { LUT3dlLoader } from 'three/addons/loaders/LUT3dlLoader.js';
import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const params = {
Expand Down Expand Up @@ -125,22 +124,13 @@
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
container.appendChild( renderer.domElement );

const target = new THREE.WebGLRenderTarget( {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
colorSpace: THREE.SRGBColorSpace
} );

composer = new EffectComposer( renderer, target );
composer = new EffectComposer( renderer );
composer.setPixelRatio( window.devicePixelRatio );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( new RenderPass( scene, camera ) );
composer.addPass( new ShaderPass( GammaCorrectionShader ) );
composer.addPass( new OutputPass( THREE.ACESFilmicToneMapping ) );

lutPass = new LUTPass();
composer.addPass( lutPass );
Expand Down
13 changes: 12 additions & 1 deletion src/renderers/WebGLRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1629,7 +1629,18 @@ class WebGLRenderer {
const morphTargets = !! geometry.morphAttributes.position;
const morphNormals = !! geometry.morphAttributes.normal;
const morphColors = !! geometry.morphAttributes.color;
const toneMapping = material.toneMapped ? _this.toneMapping : NoToneMapping;

let toneMapping = NoToneMapping;

if ( material.toneMapped ) {

if ( _currentRenderTarget === null || _currentRenderTarget.isXRRenderTarget === true ) {

toneMapping = _this.toneMapping;

}

}

const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color;
const morphTargetsCount = ( morphAttribute !== undefined ) ? morphAttribute.length : 0;
Expand Down
14 changes: 13 additions & 1 deletion src/renderers/webgl/WebGLPrograms.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,18 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
const HAS_ATTRIBUTE_UV2 = !! geometry.attributes.uv2;
const HAS_ATTRIBUTE_UV3 = !! geometry.attributes.uv3;

let toneMapping = NoToneMapping;

if ( material.toneMapped ) {

if ( currentRenderTarget === null || currentRenderTarget.isXRRenderTarget === true ) {

toneMapping = renderer.toneMapping;

}

}

const parameters = {

isWebGL2: IS_WEBGL2,
Expand Down Expand Up @@ -320,7 +332,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
shadowMapEnabled: renderer.shadowMap.enabled && shadows.length > 0,
shadowMapType: renderer.shadowMap.type,

toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping,
toneMapping: toneMapping,
useLegacyLights: renderer.useLegacyLights,

premultipliedAlpha: material.premultipliedAlpha,
Expand Down

0 comments on commit 2898b20

Please sign in to comment.