Orillusion

Appearance

本页内容

视频材质 ​

该材质继承于 UnLit 材质，同样不计算光照，仅通过视频像素颜色渲染的基础材质，不同的是，可以自动同步视频播放的帧内容，另外，也增加了空间裁剪 (clip) 的设置，可以更自由的进行裁剪。

视频材质支持以下属性：

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

用法 ​

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

// 创建视频纹理
let videoTexture = new VideoTexture();
await videoTexture.load('https://cdn.orillusion.com/videos/bunny.mp4')
// 创建视频材质
let mat = new VideoMaterial();
mat.baseMap = videoTexture;


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
} from "@orillusion/core";

import { VideoTexture,VideoMaterial } 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/bunny.mp4')
    // 创建视频材质
    let mat = new VideoMaterial();
    mat.baseMap = videoTexture;
    mat.roughness = 1;
    mat.debug();

    // 创建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();