月度归档: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