How to adjust basic HSB color post-processing in the latest version(r153)?

tp1415926535 · June 7, 2023, 8:28am

In earlier versions, there’s a “webgl_postprocessing_nodes.html” or “webgl_postprocessing_nodes_pass.html” can adjust hue, sataturation, vibrance, brightness. But in the current version, I can’t find the implementation method anymore.
I found that NodePass.js is missing in versions 138 and later through CDN link.

Mugen87 · June 7, 2023, 8:53am

The example used the previous material system that has been removed. However, the new node system provides the same node class that is used for color adjustment operations. It is located in:

github.com

mrdoob/three.js/blob/07bbe50b51122a4336355363e90970dc6c94c2c3/examples/jsm/nodes/display/ColorAdjustmentNode.js

import TempNode from '../core/TempNode.js';
import { dot, mix } from '../math/MathNode.js';
import { add } from '../math/OperatorNode.js';
import { addNodeClass } from '../core/Node.js';
import { addNodeElement, ShaderNode, nodeProxy, float, vec3, mat3 } from '../shadernode/ShaderNode.js';

const saturationNode = new ShaderNode( ( { color, adjustment } ) => {

	return adjustment.mix( luminance( color ), color );

} );

const vibranceNode = new ShaderNode( ( { color, adjustment } ) => {

	const average = add( color.r, color.g, color.b ).div( 3.0 );

	const mx = color.r.max( color.g.max( color.b ) );
	const amt = mx.sub( average ).mul( adjustment ).mul( - 3.0 );

	return mix( color, mx, amt );

This file has been truncated. show original

Unfortunately, there is no example that uses the class yet.

tp1415926535 · June 7, 2023, 10:01am

Thank you for the reminder, but after I added it I don’t know how to start… do you know how to use it?

Topic		Replies	Views
Change overall saturation Questions post-processing	2	2699	October 29, 2019
The colors in my THREE.JS project are messed up after the update Questions fbx-loader , color , gamma	2	1113	September 2, 2022
sRGBEncoding with post-processing Questions post-processing	8	7644	May 16, 2022
When i use post-process, background img is covered Questions post-processing , webgl-renderer	7	2058	May 31, 2017
Gamma and contrast adjustment Questions materials , shaders	7	2725	August 31, 2021

How to adjust basic HSB color post-processing in the latest version(r153)?

Related Topics