Use the Image Filter BJS Control to "colorize" an image that will become a PBR metallic texture

Questions
5

Here is a simple example reusing babylonjs image processing post process and the controls project:

import { Engine } from "@babylonjs/core/Engines/engine";
import { ImageFilter } from "@babylonjs/controls/dist/src/imageFilter";
import { ImageProcessingPostProcess } from "@babylonjs/core/PostProcesses/imageProcessingPostProcess";

import "@babylonjs/core/Loading/loadingScreen";

import { ColorCurves } from "@babylonjs/core/Materials/colorCurves";

// Find our elements
const mainCanvas = document.getElementById("renderCanvas") as HTMLCanvasElement;

// By default Image Filter only creates a thin engine but here as we want to use
// post processes, we need to use our full engine
const engine = new Engine(mainCanvas);

engine.loadingScreen.loadingUIText = "Loading a Big Gif... Don't leave now :'("
engine.loadingScreen.displayLoadingUI();

const customFilter = new ImageFilter(engine);

// Create the Image Processing post process
const imageProcessingPostProcess = new ImageProcessingPostProcess("process", 1, undefined, undefined, engine);
imageProcessingPostProcess.fromLinearSpace = false;

// Color curves
const curves = new ColorCurves();
curves.globalHue = 100;
curves.globalSaturation = 50;
curves.globalDensity = 100;

// Setup our ColorGrading effect
imageProcessingPostProcess.imageProcessingConfiguration.colorCurves = curves;
imageProcessingPostProcess.imageProcessingConfiguration.colorCurvesEnabled = true;

customFilter.filter("https://www.babylonjs.com/assets/Layer0_0.png", imageProcessingPostProcess).then(() => {
    engine.loadingScreen.hideLoadingUI();
});

The dependencies in package.json are simply:

        "@babylonjs/controls": "^1.0.0-alpha.20",
        "@babylonjs/core": "^4.2.0-alpha.10",

Hope that helps

1 Like