将videojs 视频绘制到canvas上

 文章转载自 嘿嘿嘿https://blog.youkuaiyun.com/qq_37540004/article/details/90750529

原理
1.原理其实很简单,做过全景图的同学都知道,球模型+全景图片贴图。 全景视频/全景直播就是 球模型+全景视频素材 。


2.至于播放器样式,可以自己用Js+Dom自定义,或者更改videojs(别的播放器插件也行)的样式 即便你是用原生video也是可行的 threejs官方demo就是原生video标签。


3.本demo就是拿着threejs的demo改的


4.demo中videojs生成的全屏按钮点击的时候只会全屏videojs的dom 全景视频/直播是渲染在canvas上的,如果有全屏的需求,要改写这里的逻辑,让它全屏body(或者让video和canvas在一个盒子中,全屏这个盒子) 隐藏不需要的部分,或者全屏canvas,但是全屏canvas就要你把控制条部分重写了,不然全屏的没控制条


5.移动端的时候将mousedown、mousemove、mouseup改成对应的touch事件就好了,video设置成x5-playsinline="“playsinline=”“webkit-playsinline=”" 避免全屏播放 导致canvas无法渲染video


6.如果使用videojs,canvas的绘制要在视频加载完之后,监听videojs的 可播放事件 (不了解videojs的api 没测试好 不太确定)或者使用原生video标签


7.测试QQ 微信内置浏览器可行,UC内置不可使用该方法渲染 UC的video看着像新开一层webview播放的 导致自己页面上的video实际并没有播放 看着像 不确定
 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - equirectangular video panorama</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
        />
        <style>
            body {
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px;
                width: 100%;
                color: #ffffff;
                padding: 5px;
                font-family: Monospace;
                font-size: 13px;
                font-weight: bold;
                text-align: center;
            }

            a {
                color: #ffffff;
            }
            #my-video {
                position: fixed;
                z-index: 99999;
                top: 0;
                left: 0;
            }
        </style>
        <link
            href="https://vjs.zencdn.net/7.5.4/video-js.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <div id="container"></div>
        <!-- 可以通过样式把video的控制层放到你想放的位置  或者 通过js自己去写一些控制方法 -->
        <video
            id="my-video"
            class="video-js"
            controls
            preload="auto"
            autoplay
            width="640"
            loop
            height="264"
            poster="MY_VIDEO_POSTER.jpg"
            data-setup="{}"
            crossorigin="anonymous"
        >
        <!-- 直播源是网友提供的 如有侵权 麻烦告知 这就删除  如果播放视频 把这里换成全景视频的链接就行了 -->
            <source
                src="http://i3.vzan.cc/clip/85191/1038133875/E97998EBA355633F.m3u8"
            />
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider
                upgrading to a web browser that
                <a
                    href="https://videojs.com/html5-video-support/"
                    target="_blank"
                    >supports HTML5 video</a
                >
            </p>
        </video>
        <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
        <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

        <script>
            // videojs('#my-video', {
            //     controls: true,
            //     autoplay: true,
            //     preload: 'auto'
            // })
            var camera, scene, renderer

            var isUserInteracting = false,
                lon = 0,
                lat = 0,
                phi = 0,
                theta = 0,
                distance = 50,
                onPointerDownPointerX = 0,
                onPointerDownPointerY = 0,
                onPointerDownLon = 0,
                onPointerDownLat = 0

            init()
            animate()

            function init() {
                var container, mesh

                container = document.getElementById('container')

                camera = new THREE.PerspectiveCamera(
                    75,
                    window.innerWidth / window.innerHeight,
                    1,
                    1100
                )
                camera.target = new THREE.Vector3(0, 0, 0)

                scene = new THREE.Scene()

                var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
                // invert the geometry on the x-axis so that all of the faces point inward
                geometry.scale(-1, 1, 1)

                // var video = document.createElement('video')
                // video.crossOrigin = '*'
                // video.width = 640
                // video.height = 360
                // video.loop = true
                // video.muted = true
                // video.src =
                //     'http://223.110.242.130:6610/gitv/live1/G_CCTV-1-HQ/1.m3u8'
                // video.setAttribute('webkit-playsinline', 'webkit-playsinline')
                // video.play()

                var texture = new THREE.VideoTexture(
                    document.querySelector('#my-video')
                )
                var material = new THREE.MeshBasicMaterial({ map: texture })

                mesh = new THREE.Mesh(geometry, material)

                scene.add(mesh)

                renderer = new THREE.WebGLRenderer()
                renderer.setPixelRatio(window.devicePixelRatio)
                renderer.setSize(window.innerWidth, window.innerHeight)
                container.appendChild(renderer.domElement)

                document.addEventListener(
                    'mousedown',
                    onDocumentMouseDown,
                    false
                )
                document.addEventListener(
                    'mousemove',
                    onDocumentMouseMove,
                    false
                )
                document.addEventListener('mouseup', onDocumentMouseUp, false)
                document.addEventListener('wheel', onDocumentMouseWheel, false)

                //

                window.addEventListener('resize', onWindowResize, false)
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight
                camera.updateProjectionMatrix()

                renderer.setSize(window.innerWidth, window.innerHeight)
            }

            function onDocumentMouseDown(event) {
                event.preventDefault()

                isUserInteracting = true

                onPointerDownPointerX = event.clientX
                onPointerDownPointerY = event.clientY

                onPointerDownLon = lon
                onPointerDownLat = lat
            }

            function onDocumentMouseMove(event) {
                if (isUserInteracting === true) {
                    lon =
                        (onPointerDownPointerX - event.clientX) * 0.1 +
                        onPointerDownLon
                    lat =
                        (event.clientY - onPointerDownPointerY) * 0.1 +
                        onPointerDownLat
                }
            }

            function onDocumentMouseUp() {
                isUserInteracting = false
            }

            function onDocumentMouseWheel(event) {
                distance += event.deltaY * 0.05

                distance = THREE.Math.clamp(distance, 1, 50)
            }

            function animate() {
                requestAnimationFrame(animate)
                update()
            }

            function update() {
                lat = Math.max(-85, Math.min(85, lat))
                phi = THREE.Math.degToRad(90 - lat)
                theta = THREE.Math.degToRad(lon)

                camera.position.x = distance * Math.sin(phi) * Math.cos(theta)
                camera.position.y = distance * Math.cos(phi)
                camera.position.z = distance * Math.sin(phi) * Math.sin(theta)

                camera.lookAt(camera.target)

                renderer.render(scene, camera)
            }
        </script>
    </body>
</html>

 

<think>我们讨论的是Three.js中的WebGLRenderer。在Three.js中,WebGLRenderer是一个核心类,它负责利用WebGL API将3D场景渲染到HTML5的Canvas元素上。下面我将详细解释这个过程。 ### 理解WebGLRenderer 1. **WebGL基础**: - WebGL是一种基于OpenGL ES 2.0的JavaScript API,允许在浏览器中渲染交互式3D和2D图形,而无需使用插件。 - 它直接在HTML5 Canvas元素上绘制图形,使用GPU加速。 2. **Three.js中的WebGLRenderer**: - Three.js的WebGLRenderer类封装了WebGL的底层细节,提供了更简单的API来渲染3D场景。 - 它接收两个主要输入:场景(Scene)和相机(Camera)。场景包含所有要渲染的对象(如网格、灯光等),相机定义了从哪个视角和投影方式来渲染场景。 3. **渲染过程**: - 当调用`renderer.render(scene, camera)`时,渲染器会执行以下步骤: a. 根据相机的参数(如位置、朝向、投影类型等)计算视图矩阵和投影矩阵。 b. 遍历场景中的每个对象,确定哪些对象在相机的视锥体内(可见)。 c. 对于每个可见的对象,根据其几何体(Geometry)和材质(Material)创建着色器程序(Shader Program)。 d. 将对象的顶点数据、材质属性、光照信息等传递给GPU。 e. GPU执行顶点着色器和片元着色器,最终将像素绘制Canvas上。 4. **Canvas元素**: - WebGLRenderer在初始化时会创建一个Canvas元素(除非你指定一个已存在的Canvas)。 - 这个Canvas被添加到DOM中(通常通过`document.body.appendChild(renderer.domElement)`),这样就能在网页上看到渲染结果。 ### 代码示例 下面是一个简单的示例,展示如何创建WebGLRenderer并将其Canvas添加到DOM: ```javascript // 创建渲染器实例,可以传递一些选项,比如抗锯齿 const renderer = new THREE.WebGLRenderer({ antialias: true }); // 设置渲染器的尺寸(这里设置为整个窗口大小) renderer.setSize(window.innerWidth, window.innerHeight); // 将渲染器的Canvas(domElement)添加到body中 document.body.appendChild(renderer.domElement); // 创建场景和相机(此处省略) // ... // 渲染场景 renderer.render(scene, camera); ``` ### 关键点 - `renderer.domElement`:这是渲染器创建的Canvas元素。所有的3D图形都将绘制在这个Canvas上。 - `setSize(width, height)`:设置Canvas的尺寸,同时设置WebGL的视口(viewport)大小。 - 渲染循环:通常我们会使用`requestAnimationFrame`或Three.js提供的`setAnimationLoop`(如示例代码中)来持续渲染,以创建动画效果。 ### 为什么使用WebGLRenderer? - **抽象底层复杂性**:WebGL本身非常底层,需要编写大量代码(如着色器程序、缓冲区管理)。Three.js通过WebGLRenderer类封装了这些细节。 - **跨浏览器兼容**:处理不同浏览器对WebGL的支持和差异。 - **性能优化**:自动进行批处理、状态排序等优化。 ### 总结 WebGLRenderer是Three.js的核心渲染器,它利用WebGL技术将3D场景(Scene)通过相机(Camera)的视角渲染到Canvas元素上。开发者无需直接操作WebGL API,而是通过Three.js提供的更高级API来创建和控制3D图形。 §§相关问题§§: 1. Three.js中除了WebGLRenderer,还有哪些渲染器?它们分别适用于什么场景? 2. 如何配置WebGLRenderer以启用阴影效果? 3. WebGLRenderer的初始化选项(如antialias, alpha)有哪些,它们的作用是什么? 4. 在Three.js中,如何实现离屏渲染(Offscreen Rendering)?</think>### 理解 WebGLRenderer 将 3D 场景绘制Canvas 上 在 Three.js 中,`WebGLRenderer` 是连接 3D 场景和浏览器显示的核心组件,它通过以下过程将三维场景渲染到二维 Canvas 上: #### 1. **渲染流程概述** ```mermaid graph LR A[3D场景 Scene] --> B[相机 Camera] B --> C[WebGLRenderer] C --> D[Canvas 元素] D --> E[浏览器显示] ``` #### 2. **详细工作流程** 1. **场景图遍历**: - 从场景根节点开始,递归遍历所有对象(网格、灯光、辅助对象等) - 收集所有需要渲染的几何体和材质信息 2. **着色器编译**: - 根据材质类型自动生成顶点着色器和片元着色器 - 将着色器编译为 GPU 可执行的程序 3. **矩阵计算**: - 计算模型矩阵(物体位置/旋转/缩放) - 计算视图矩阵(相机位置和方向) - 计算投影矩阵(透视/正交投影) 4. **GPU 数据传输**: ```javascript // 伪代码示例:GPU 数据传递 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0); ``` 5. **光栅化与绘制**: - 将 3D 几何体转换为屏幕上的像素 - 执行深度测试、混合等操作 - 最终输出到 Canvas 的帧缓冲区 #### 3. **代码层面解释** 当执行 `renderer.render(scene, camera)` 时: ```javascript // 实际发生的底层操作(简化版) function render() { // 1. 清除画布 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // 2. 更新相机矩阵 camera.updateMatrixWorld(); renderer.state.currentCamera = camera; // 3. 渲染场景图 renderScene(scene, camera); // 4. 实际绘制调用 for (const object of visibleObjects) { gl.drawElements(gl.TRIANGLES, object.count, gl.UNSIGNED_SHORT, 0); } } ``` #### 4. **关键概念解释** | 概念 | 作用 | 对应代码 | |------|------|----------| | **帧缓冲区** | 存储渲染结果的临时内存区域 | `gl.bindFramebuffer()` | | **顶点着色器** | 处理顶点位置变换 | `material.vertexShader` | | **片元着色器** | 计算像素最终颜色 | `material.fragmentShader` | | **深度缓冲区** | 管理像素深度信息(Z-buffer) | `gl.enable(gl.DEPTH_TEST)` | | **投影矩阵** | 将3D坐标映射到2D屏幕 | `camera.projectionMatrix` | #### 5. **可视化理解** 想象一个虚拟摄影棚: - **场景 (Scene)** = 摄影棚布景(物体、灯光、背景) - **相机 (Camera)** = 摄像机的位置和镜头参数 - **WebGLRenderer** = 摄影团队(导演、灯光师、特效师) - **Canvas** = 最终拍摄的电影画面 #### 6. **性能优化机制** WebGLRenderer 内部包含智能优化: 1. 自动批处理相同材质的物体 2. 视锥体裁剪(Frustum Culling) 3. 状态排序(减少GPU状态切换) 4. 自动LOD(Level of Detail)管理 ### 实际应用示例 ```javascript // 创建离屏渲染目标 const renderTarget = new THREE.WebGLRenderTarget(512, 512); renderer.setRenderTarget(renderTarget); renderer.render(scene, camera); renderer.setRenderTarget(null); // 现在renderTarget.texture包含渲染结果 const video = document.createElement('video'); video.srcObject = renderTarget.texture; ``` ### 总结 WebGLRenderer 本质上是 Three.js 的渲染引擎,它: 1. 将 JavaScript 对象描述的 3D 场景转化为 WebGL 底层指令 2. 管理 GPU 资源(缓冲区、纹理、着色器程序) 3. 处理投影变换和光栅化过程 4. 最终将计算结果输出到 Canvas 的像素缓冲区 这种设计使得开发者无需直接操作复杂的 WebGL API,就能高效创建 3D 图形应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值