公司的一个开源VR项目,现在已经实现了360度视频播放,目前准备实现180度视频播放,webgl实在是不精通,求懂的人给看一下。
下面的代码是播放360度视频的代码, 目前要做180度的,180度视频内容是左右的, 每一帧要处理两次,每次处理要遮挡住一边, 然后webgl畸变处理另外一边。
texSubImage2D和texCopyImage2D已经试过了,能成功,但是内存拷贝太占系统资源, 我们这个是播放4K影片的,用不了。
代码如下
webGL.gl = canvas.getContext("webgl");
/* video 是加载的一个本地视频流 */
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video);
/**
* Drawing the scene
*/
drawOneEye: function(eye) {
webGL.gl.useProgram(shader.program);
webGL.gl.bindBuffer(webGL.gl.ARRAY_BUFFER, positionsBuffer);
webGL.gl.vertexAttribPointer(shader.attributes['aVertexPosition'], 2, webGL.gl.FLOAT, false, 0, 0);
// Specify the texture to map onto the faces.
webGL.gl.activeTexture(webGL.gl.TEXTURE0);
webGL.gl.bindTexture(webGL.gl.TEXTURE_2D, texture);
webGL.gl.uniform1i(shader.uniforms['uSampler'], 0);
var projectionInverse = mat4.create();
mat4.invert(projectionInverse, eye.projectionMatrix);
var inv = mat4.create();
mat4.multiply(inv, rotation, projectionInverse);
webGL.gl.uniformMatrix4fv(shader.uniforms['proj_inv'], false, inv);
// Draw
webGL.gl.bindBuffer(webGL.gl.ELEMENT_ARRAY_BUFFER, verticesIndexBuffer);
webGL.gl.drawElements(webGL.gl.TRIANGLES, 6, webGL.gl.UNSIGNED_SHORT, 0);
},