@itwin/frontend-devtools
Version:
Debug menu and supporting UI widgets
86 lines (83 loc) • 3.52 kB
JavaScript
;
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Effects
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.SaturationConfig = exports.SaturationEffect = void 0;
const core_frontend_1 = require("@itwin/core-frontend");
const parseArgs_1 = require("../tools/parseArgs");
const EffectTools_1 = require("./EffectTools");
/** Adjusts the saturation of colors in a viewport.
* @beta
*/
class SaturationEffect extends EffectTools_1.AddEffectTool {
static toolId = "SaturationEffect";
get effectName() { return "Saturation"; }
get textureCoordFromPosition() { return true; }
get source() {
// rgb <-> hsl conversion routines from https://gamedev.stackexchange.com/questions/59797/glsl-shader-change-hue-saturation-brightness
return {
// Vertex shader simply computes texture coordinate for source pixel.
vertex: `
void effectMain(vec4 pos) {
v_texCoord = textureCoordFromPosition(pos);
}`,
// Fragment shader converts color to HSV, adjusts the saturation, and converts back to RGB.
fragment: `
vec3 rgb2hsv(vec3 c) {
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
vec4 effectMain() {
vec4 color = TEXTURE(u_diffuse, v_texCoord);
color.rgb = rgb2hsv(color.rgb);
color.rgb.y = color.rgb.y * u_saturationMult;
color.rgb = hsv2rgb(color.rgb);
return color;
}`,
};
}
defineEffect(builder) {
builder.addVarying("v_texCoord", core_frontend_1.VaryingType.Vec2);
builder.addUniform({
name: "u_saturationMult",
type: core_frontend_1.UniformType.Float,
bind: (uniform) => uniform.setUniform1f(SaturationConfig.multiplier),
});
}
}
exports.SaturationEffect = SaturationEffect;
/** Configures the [[SaturationEffect]].
* @beta
*/
class SaturationConfig extends core_frontend_1.Tool {
static toolId = "SaturationConfig";
static get minArgs() { return 0; }
static get maxArgs() { return 1; }
/** Multiplier applied to the saturation of each color in the source image. */
static multiplier = 2.0;
async run(multiplier) {
SaturationConfig.multiplier = multiplier ?? 2.0;
(0, EffectTools_1.refreshViewportsForEffect)("fdt Saturation");
return true;
}
async parseAndRun(...input) {
const args = (0, parseArgs_1.parseArgs)(input);
return this.run(args.getFloat("s"));
}
}
exports.SaturationConfig = SaturationConfig;
//# sourceMappingURL=Saturation.js.map