Skip to content
本页内容

色键材质(过滤背景色)

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

属性描述
baseColor基础颜色
uv_offsetXx方向位移
uv_offsetYy方向位移
uv_scaleXx方向缩放
uv_scaleYy方向缩放
clip_left左方裁剪
clip_top上方裁剪
clip_right右方裁剪
clip_bottom下方裁剪

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

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

用法

ts
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


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import {
    Engine3D, Vector3, Scene3D, Object3D, Camera3D, ForwardRenderJob, MeshRenderer, HoverCameraController, PlaneGeometry, GUIHelp, Color
} from "@orillusion/core";

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

async function demo() {
    await Engine3D.init();
    GUIHelp.init();
    let scene = new Scene3D();
    let camera = new Object3D();
    scene.addChild(camera)
    let mainCamera = camera.addComponent(Camera3D);
    mainCamera.perspective(60, window.innerWidth / window.innerHeight, 0.1, 10000.0);
    let hc = camera.addComponent(HoverCameraController);
    hc.setCamera(0, 0, 2);

    // 创建视频纹理
    let videoTexture = new VideoTexture();
    await videoTexture.load('https://cdn.orillusion.com/videos/chromakey.webm')
    // 创建视频(背景过滤)材质
    let mat = new ChromaKeyMaterial();
    mat.baseMap = videoTexture;
    mat.roughness = 1;
    mat.debug();
    // 设置过滤
    mat.keyColor = new Color(0,1,0,0)
    mat.colorCutoff = 0.06
    mat.colorFeathering = 0.25

    // 创建2D平面
    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 renderJob = new ForwardRenderJob(scene);
    Engine3D.startRender(renderJob);
}

demo();