编程知识 cdmana.com

javascript播放带透明通道的mp4动画

    随着互联网的发展,动画效果也在一直更新,从刚开始的flsh动画,cocos骨骼动画,到YY开源的svga动画。最近1年来,带有透明通道的mp4动画被使用的极为广泛,对于app端。github上有开源的AlphaPlayer可以使用,但是对于web端,相关的资料很少。为了解决这个问题想了很多办法,提出了使用webm格式。但是最终还是要实现播放mp4格式。

    播放mp4格式的透明动画,需要什么呢。首先,对于web前端来说,webgl应该大家都很少介绍到,更不要说着色器了(shader)和OpenGL ES的语法了。放弃了好几次,最后看到一个帖子,可以用THREEJS来进行。先上一个图

    

 

   可以看到素材中左边部分使用RGB通道存储了原透明视频的Alpha值,右边部分使用RGB通道存储了原透明视频的RGB值,然后在端上通过OpenGL重新将每个像素点的Alpha值和RGB值进行组合,重新得到ARGB视频画面,实现透明视频的动画效果。

  在web端,具体实现。

  1.有个video播放器,播放mp4动画

  2.使用threejs和openel把画面重绘到一个容器里。

  

 1 var lastUpdate;
 2 var container;
 3 var camera, scene, renderer;
 4 var uniforms;
 5 
 6 function init() {
 7 
 8   container = document.getElementById('container');
 9 camera = new THREE.Camera();
10 camera.position.z = 1;
11 scene = new THREE.Scene();
12 
13 var video = document.getElementById('video');
14 video.src = "https://devimage.91banban.com/topcard.mp4";
15  video.play();
16 video.onended = () => {
17  video.play();
18  }
19 videoTexture = new THREE.VideoTexture(video);
20 videoTexture.minFilter = THREE.LinearFilter;
21 videoTexture.magFilter = THREE.LinearFilter;
22 videoTexture.format = THREE.RGBAFormat;
23 
24 // shader stuff
25 uniforms = {
26 time: { type: "f", value: 1.0 },
27 texture: { type: "sampler2D", value: videoTexture }
28  };
29 var material = new THREE.ShaderMaterial({
30  uniforms: uniforms,
31  vertexShader: `varying vec2 vUv;
32 void main() {
33 vUv = uv;
34 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
35  }`,
36  fragmentShader: `#ifdef GL_ES
37 precision highp float;
38  #endif
39 
40 uniform float time;
41  uniform sampler2D texture;
42  varying vec2 vUv;
43 
44 void main( void ) {
45 gl_FragColor = vec4(
46 texture2D(texture, vec2(0.5+vUv.x/2., vUv.y)).rgb,
47 texture2D(texture, vec2(vUv.x/2., vUv.y)).r
48  );
49  }`,
50 transparent: true
51  });
52 lastUpdate = new Date().getTime();
53 var geometry = new THREE.PlaneBufferGeometry(2, 2);
54 var mesh = new THREE.Mesh(geometry, material);
55 mesh.scale.setScalar(0.8);
56  scene.add(mesh);
57 renderer = new THREE.WebGLRenderer({ alpha: true });
58 renderer.setPixelRatio(window.devicePixelRatio / 1);
59 
60  container.appendChild(renderer.domElement);
61 
62 document.getElementById('play-button').addEventListener('click', e => { video.play(); });
63 renderer.setSize(1000, 1100);
64 this.animate();
65 }
66 
67 function animate() {
68 var currentTime = new Date().getTime()
69 var timeSinceLastUpdate = currentTime - lastUpdate;
70 lastUpdate = currentTime;
71  requestAnimationFrame(animate);
72  render(timeSinceLastUpdate);
73 
74 }
75 function render(timeDelta) {
76 uniforms.time.value += (timeDelta ? timeDelta / 1000 : 0.05);
77  renderer.render(scene, camera);
78 }
79 
80 init();

最终实现的效果图

 

 

    

版权声明
本文为[inspirer]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/inspirer/p/13964642.html

Scroll to Top