seriously.js是一个实时的web视频图片threejs合成器-BFW插件库

seriously.js是一个实时的web视频图片threejs合成器

Seriously.js 是一个实时的、基于节点的网络视频合成器。受 After Effects 和 Nuke 等专业软件的启发，Seriously.js 渲染了高质量的视频效果，但允许它们具有动态性和交互性。

seriously.js是一个实时的web视频图片threejs合成器

特征

优化的渲染路径和 GPU 加速高达每秒 60 帧

接受来自不同来源的图像输入：视频、图像、画布、阵列、网络摄像头、Three.js

效果参数接受多种格式，可以监控HTML表单输入

效果节点上的基本 2D 变换（平移、旋转、缩放、倾斜）

用于添加新效果、源和目标的插件架构

从任何节点读取像素阵列

加载AMD / RequireJS

包含的特效效果

累加器

ASCII 文本

漂白旁路

混合

亮度/对比度

频道映射

棋盘生成器

色度键

颜色补充

颜色立方体

颜色发生器

颜色查找表

颜色选择

色温

庄稼

道尔顿化

定向模糊

位移贴图

抖动

边缘检测

浮雕

曝光调整

表达式

推子

假色

快速近似抗锯齿

胶片颗粒

冻结帧

高斯模糊

六角瓷砖

亮点/阴影

色相/饱和度调整

倒置

万花筒

图层

线性转移

亮度键

镜子

夜间视力

光流

全景

像素化

极坐标

波纹

扫描线

棕褐色调

单工噪声

草图

分裂

节流帧率

色调调整

电视故障

活力

小插图

白平衡

要求

WebGL

Seriously.js 需要支持WebGL的浏览器。开发针对 Firefox (4.0+)、Google Chrome (9+)、Internet Explorer (11+) 和 Opera (18+) 并在其中进行了测试。Safari有望在不久的将来支持 WebGL。

即使浏览器可能支持 WebGL，运行它的能力也取决于系统的显卡。Seriously.js 进行了大量优化，因此大多数现代台式机和笔记本电脑应该足够了。较旧的系统运行速度可能较慢，尤其是在使用高分辨率视频时。

移动浏览器对 WebGL 的支持得到了改进。Mobile Firefox、Chrome 和 Safari 有不错的支持，但由于系统资源有限，它们可能比桌面版本慢。

Seriously.js 提供了一种检测浏览器支持并尽可能提供描述性错误消息的方法。

跨域视频和图像

由于 WebGL 的安全限制，Seriously.js 只能处理来自同一域的视频或图像，除非它们带有CORS 标头（crossOrigin）。Firefox、Chrome 和 Opera 支持视频的 CORS，但 Safari 和 Internet Explorer 不支持，并且使用 CORS 提供的视频很少见。因此，目前最好托管您自己的视频文件。

示例代码：

<!DOCTYPE html>
<html>

<head>
    <title>Seriously.js Tutorial</title>
</head>

<body>
    <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" crossOrigin id="colorbars" width="640" height="480" />

    <canvas id="canvas" width="640" height="480"></canvas>
    <!-- page content goes here -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/seriously.js"></script>

    <script src="//repo.bfw.wiki/bfwrepo/js/seriously/effects/seriously.noise.js"></script>

    <script>
        // 声明变量
        var seriously, // 主对象
            colorbars, // 数据源图像节点
            vignette, // 特效节点
            target; // 目标节点
        
        seriously = new Seriously();
        colorbars = seriously.source('#colorbars');
        target = seriously.target('#canvas');
        noise = seriously.effect('noise');
        
        // 按正确顺序连接所有节点
        noise.source = colorbars;
        target.source = noise;
        //渲染结果
        seriously.go();
    </script>
</body>

</html>

特效js集合

seriously.js是一个实时的web视频图片threejs合成器