色键材质(过滤背景色)

色键 (ChromaKey) 材质在 Video 材质之上添加了过滤了背景色的功能，支持基本的视频材质UV以下属性：

属性	类型	描述
baseMap	VideoTexture	视频贴图
baseColor	Color	基础颜色
rectClip	Vector4	上下左右裁剪区域

另外，ChromaKeyMaterial 还提供背景色过滤功能:

属性	描述
keyColor	背景关键色
colorCutoff	镂空强度
colorFeathering	颜色羽化系数
maskFeathering	边缘羽化系数
sharpening	边缘锐化系数
despoil	环境光削弱系数
despoilLuminanceAdd	削弱后补光强度

用法

import {ChromaKeyMaterial, VideoTexture} from '@orillusion/media-extention'

// 创建视频纹理
let videoTexture = new VideoTexture();
await videoTexture.load('path/to/video')
// 创建视频材质
let mat = new ChromaKeyMaterial();
mat.baseMap = videoTexture;
// 设置过滤绿色
mat.keyColor = new Color(0.0, 1.0, 0.0, 0.0)
mat.colorCutoff = 0.2

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Vector3, Scene3D, Object3D, Camera3D, View3D, MeshRenderer, HoverCameraController, PlaneGeometry, Color } from '@orillusion/core';
import { VideoTexture, ChromaKeyMaterial } from '@orillusion/media-extention';
import * as dat from 'dat.gui';

await Engine3D.init();
let scene = new Scene3D();
let camera = new Object3D();
scene.addChild(camera);
let mainCamera = camera.addComponent(Camera3D);
mainCamera.perspective(60, Engine3D.aspect, 0.1, 10000.0);
let hc = camera.addComponent(HoverCameraController);
hc.setCamera(0, 0, 2);

// create a video texture
let videoTexture = new VideoTexture();
await videoTexture.load('https://cdn.orillusion.com/videos/chromakey.webm');
// create a chromakey material
let mat = new ChromaKeyMaterial();
mat.baseMap = videoTexture;

// set target color to filter the background
mat.keyColor = new Color(0, 1, 0, 0);
mat.colorCutoff = 0.06;
mat.colorFeathering = 0.25;

// create a 2D plane to play the video
let planeObj = new Object3D();
let mr = planeObj.addComponent(MeshRenderer);
mr.geometry = new PlaneGeometry(2, 2, 10, 10, Vector3.Z_AXIS);
mr.material = mat;
scene.addChild(planeObj);

let view = new View3D();
view.scene = scene;
view.camera = mainCamera;
// start render
Engine3D.startRenderView(view);

let gui = new dat.GUI();
let f = gui.addFolder('ChromaKey');
f.addColor({ keyColor: [0, 255, 0] }, 'keyColor').onChange((v) => {
    mat.keyColor = new Color(v[0] / 255, v[1] / 255, v[2] / 255);
});
f.add(mat, 'colorCutoff', 0, 1, 0.01);
f.add(mat, 'colorFeathering', 0, 1, 0.01);
f.add(mat, 'maskFeathering', 0, 1, 0.01);
f.add(mat, 'sharpening', 0, 1, 0.01);
f.add(mat, 'despoil', 0, 1, 0.01);
f.add(mat, 'despoilLuminanceAdd', 0, 1, 0.01);
f.open();