Orillusion色键材质(过滤背景色)
色键 (ChromaKey) 材质在 Video 材质之上添加了过滤了背景色的功能，支持基本的视频材质UV以下属性：
| 属性 | 描述 |
|---|---|
| baseColor | 基础颜色 |
| uv_offsetX | x方向位移 |
| uv_offsetY | y方向位移 |
| uv_scaleX | x方向缩放 |
| uv_scaleY | y方向缩放 |
| 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.2import {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.2ts
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)
console.log(mat)
let GUIHelp = new dat.GUI()
GUIHelp.addFolder('ChromaKek')
GUIHelp.addColor({ color: [0, 255, 0] }, 'color').onChange((v) => {
mat.keyColor = new Color(0, 1, 0).copyFromArray(v)
})
GUIHelp.add(mat, 'colorCutoff', 0, 1, 0.01)
GUIHelp.add(mat, 'colorFeathering', 0, 1, 0.01)
GUIHelp.add(mat, 'sharpening', 0, 1, 0.01)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)
console.log(mat)
let GUIHelp = new dat.GUI()
GUIHelp.addFolder('ChromaKek')
GUIHelp.addColor({ color: [0, 255, 0] }, 'color').onChange((v) => {
mat.keyColor = new Color(0, 1, 0).copyFromArray(v)
})
GUIHelp.add(mat, 'colorCutoff', 0, 1, 0.01)
GUIHelp.add(mat, 'colorFeathering', 0, 1, 0.01)
GUIHelp.add(mat, 'sharpening', 0, 1, 0.01)