编程知识 cdmana.com

JavaScript plays MP4 animation with transparent channel

     With the development of the Internet , Animation effects are constantly updated , From the beginning flsh Animation ,cocos Skeletal animation , To YY Open source svga Animation . lately 1 Over the years , With transparent channels mp4 Animation is widely used , about app End .github Open source AlphaPlayer have access to , But for web End , There is little information about it . There are many ways to solve this problem , Proposed the use of webm Format . But in the end, it's time to play mp4 Format .

     Play mp4 Transparent animation of format , What do you need . First , about web Front end ,webgl We should seldom introduce , Let alone shaders (shader) and OpenGL ES Grammar. . Gave up several times , Finally, I saw a post , It can be used THREEJS To carry out . Let's start with a picture

    

 

    You can see that the left part of the material uses RGB The channel stores the original transparent video Alpha value , The right part uses RGB The channel stores the original transparent video RGB value , And then on the end through OpenGL Re put each pixel's Alpha Values and RGB Values to combine , Get... Again ARGB Video footage , Realize the animation effect of transparent video .

   stay web End , Concrete realization .

  1. There is one video player , Play mp4 Animation

  2. Use threejs and openel Redraw the picture into a container .

  

 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();

Final effect drawing

 

 

    

版权声明
本文为[inspirer]所创,转载请带上原文链接,感谢

Scroll to Top