月度归档：2017年10月

Processing 播放透明通道视频

发表评论

1.前言

Processing 是一种基于 Java 且简化了语法的编程语言，拥有丰富的第三方库，开发者也能非常容易的扩展开发出满足自己独特需求的库。因此在一些交互场景项目中，Processing 通常是我首选的工具。

2.需求

实际项目中，往往需要加入一些效果好的动效。

比如在原来的背景上，加入一个酷炫的动画。通常可以使用 gif 图来解决，但有时 gif 图会出现锯齿，效果不理想，又或者需要加入声音，那么就只能采用带透明通道的视频来解决了。

假设现在的需求如下：在原来的视频之上叠加一个类似摄像机在录制的一个动画，如下图：

3.分析

正常情况下，两个相同分辨率的视频叠加处理如下：

import processing.video.*;

Movie v1, v2;

void setup() {
  size(640, 480);
  v1 = new Movie(this, "1.mov");
  v1.loop();
  v2 = new Movie(this, "2.mov");
  v2.loop();
}

void draw() {
  background(255);
  image(v1, 0, 0, width, height);
  image(v2, 0, 0, width, height);
}

void movieEvent(Movie m) {
  m.read();
}

但是这样 v2 会直接把 v1 覆盖掉，透明通道并没有生效。效果如下：

正确处理透明通道代码如下：

import processing.video.*;

Movie v1, v2;

void setup() {
  size(640, 480, P2D);
  //如果需要全屏的话, 把 size(640, 480, P2D) 换成 fullScreen(P2D) 即可
  //fullScreen(P2D);
  v1 = new Movie(this, "1.mov");
  v1.loop();
  v2 = new Movie(this, "2.mov");
  v2.loop();
}

void draw() {
  background(255);
  image(v1, 0, 0, width, height);
  image(v2, 0, 0, width, height);
}

void movieEvent(Movie m) {
  m.read();
}

相信你已经看出来了，关键就在于有没有 P2D，但实际上如果把 P2D 改成 P3D 也是可以的。而缺省值则代表 JAVA2D，这个是不支持透明通道视频的。

附：

size(width, height, renderer)
fullScreen(renderer)

Parameters
renderer	String: the renderer to use, e.g. P2D, P3D, JAVA2D (default)
THE END