[godxkey]视频纹理插件:在3D模型上播放视频【已发布】(优惠中)

新标题:: [godxkey]视频纹理插件:在3D模型上播放视频

原标题:: Cocos Creator 3D 模型上的视频播放器组件类插件【已发布】(优惠中)

商店地址:
需要的朋友可以研究下:
https://store.cocos.com/app/detail/3726

开发环境

  • 引擎版本:Cocos Creator 3.4.0
  • 编程语言:Javascript

引: 视频播放组件, 真的很难整, 此插件算是给大家提供一点思路吧

体验地址(说明)

因为囊中羞涩, 所以放在了免费的 GitHub 上面, 加载速度较慢(三分钟左右)

体验链接不支持在微信端打开(微信屏蔽了),最好在浏览器或者电脑端打开

技术介绍

  1. effect=>material=>视频纹理=>VideoTexture=>渲染到模型上
  2. 支持在 3D 环境下渲染播放视频 (Video.mp4) , 目前视频材质已启用 Instancing 合批
  1. 插件内所有的代码全部有注释, 不加密(目前比较简陋, 不建议商用, 仅供参考研究), 插件内并不包含演示用的那个 Demo
  1. 目前支持四个格式
    Quad + Plane + Box + Sphere

大致效果

7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例s.gif

痛点解决 (支持 3D 渲染视频)

  • 0.自定义 mp4 视频渲染画面的刷新频率(防止过度刷新导致 Cocos 编辑器奔溃)
  • 1.可在编辑内实时预览多个视频
  • 2.可预览多个视频并开启声音
  • 3.支持导入节点时, 自动绑定对应 MeshRenderer 的材质+网格+视频资源
  • 4.导入时自动选中所使用的资源
  • 5.解决多个视频导致的 Cocos 编辑器崩溃的问题
  • 6.支持视频属性在 Cocos 编辑器的面板上, 进行可视化操作
  • 6.1支持简单或者稍多视频属性自由切换
  • 6.2支持视频节点 3D 自旋
  • 6.3支持自动播放视频、循环播放、暂停播放、静音、滑条控制视频速度(最高十倍速)、设置视频音量等属性
  • 6.4支持设置视频的宽高(不建议设置,目前自动适配设置为视频的帧的真实宽高)
  • 6.5支持拖拽 mp4 资源绑定
  • 7.支持使用同域名播放视频(不支持跨域)【此功能未做深入研究,不建议使用】

目前已测试平台

Cocos Creator 编辑器内 H5 微信小游戏 Android原生 iOS原生 抖音小游戏 OPPO小游戏 vivo小游戏
:heavy_check_mark: :heavy_check_mark:

目前仅测试过 H5 的平台, 其它平台暂未支持

使用方法(ps: 能上传的 gif 太小了,压缩后图片像素有些丢失了)

1. 扫描并启用视频播放器插件

2. 导入 Quad,Plane,Box,Sphere 的 3D 视频节点

3. 双击节点, 查看刚刚新建的节点

4. 编辑器内查看 3D 节点自旋效果, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内

5. 关闭节点自旋查看下

注: 下面的两个效果图, 因为 Cocos Store 无法上传超过 1M 的 GIF 图片, 所以压缩了两个版本的(一个 GIF 进行了极限压缩, 所以比较模糊, 另外一个高清的图到后面会有丢失像素)

6. 启用预览视频的功能不启用不播放视频, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内

6. 启用预览视频的功能不启用不播放视频, Alt鼠标左键拖动场景或者用鼠标右键长按在场景编辑器内.gif

7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例

7. 示例预览目前没有地方上传体验链接, 另, 本插件不包含此示例s.gif

补充说明

1. 属性检查器

1.1 视频纹理渲染主要是调用 videogl_effect 这个文件, 如需渲染到其它模型上, 需自定义这个 effect 的内容

1.2 导入视频模型目前仅有两个视频文件有声音(其它的两个去除了声音,因为包体过大了)

video_plane.mp4 和 video_sphere.mp4 的是有声音的

1.3 查看和使用更多的属性

默认采用简单模式(静音+不预览视频+可自行修改)

1.4 不建议频繁更改绑定的视频资源(比较难刷新)

1.5 在编辑器内查看不同的视频(操作)

就是先关闭预览视频, 再多点击其它的节点几次, 然后看到视频底图(那个灰底)后, 绑定其它的视频资源, 然后开启预览, 鼠标右键点击下场景编辑器里面


2. 顶部菜单/开发者/消息列表

🕐如果 Canfind class 'cc.VideoPlayer',请检查项目设置里面是否有开启视频功能
🕑如果运行后看不到 3D 模型和视频, 请检查 Camera 的设置和 Layers 的设置
🕒如需自定义 3D 模型, 请自行绑定 Mesh 和 Materials🎯
🕓本地或者同域名下的视频资源, 建议在编辑器内编辑好后不要再更改, 如果需要切换, 请先关闭组件上的预览, 再选择其它无关节点, 再绑定新资源, 再开启预览
🕔目前编辑器内预览视频渲染效果, 请选中节点后, 按住 Alt 键, 再鼠标左键拖动视角, 或者按住鼠标右键拖动查看 3D 效果🎮

本 GL_PlayVideo 插件的目录结构(内置一些个人思路)

└─cc-video-play-3_x(本插件主目录)
    │  main.js
    │  package.json
    │  sceneJs.js
    ├─other_editor_msgAPI(插件开发2.x到3.x)
    │      compatibleApi.js
    │      editor2D.js
    └─runtime_Ts(运行时显示在编辑器内的目录)
        ├─api_doc_beifen(运行时不显示)
        │      editor.d.ts
        │      fs.d.ts
        │      path.d.ts
        │      wx.d.ts
        ├─before_ts_html(运行时不显示)
        │      NodeOrderSetSiblingIndexZIndex.ts
        │      repeatRotation.ts
        │      test_video_html.html
        ├─icon_res(插件菜单小图标)
        │      icon_box.png
        │      icon_plane.png
        │      icon_quad.png
        │      icon_sphere.png
        └─now_show_sources(运行时显示的目录)
            │
            ├─api_doc(拓展 d.ts 文件)
            │      editor.d.ts
            │      fs.d.ts
            │      path.d.ts
            │      wx.d.ts
            ├─videoPlayRes(渲染视频的底图)
            │  │  video.splash.png
            │  ├─effect_res(渲染视频的 effect 文件)
            │  │      videogl_effect.effect
            │  ├─fbx_folder(3D 模型文件)
            │  │      fbx_primitives.fbx
            │  ├─material_res(视频材质文件)
            │  │      video_material.mtl
            │  ├─sky_cubmap(宇宙天空盒文件)
            │  │      drakeq_back.tga
            │  │      drakeq_bottom.tga
            │  │      drakeq_front.tga
            │  │      drakeq_left.tga
            │  │      drakeq_right.tga
            │  │      drakeq_top.tga
            │  │      sky_cubemap.cubemap
            │  └─video_folder(示例内的视频文件)
            │          video_box.mp4
            │          video_plane.mp4
            │          video_quad.mp4
            │          video_sphere.mp4
            └─videoPlayTs(主要的解析视频的 Ts 代码)
                    GL_PlayVideo.ts

( playVideo 适配 3.x 版本 + 适配 3D 场景)

鸣谢

  • 感谢论坛各位大佬提供的思路
  • (大佬太多,此处不一一列举)

引用参考

  • 官方写在引擎里面的视频播放的思路

版权声明

  • 内部预览的视频文件采集至网络 (不建议商用)
  • 演示的 Demo 模型采集于 kenney.nl (免费)

后续计划 (免费更新)

  • 看大家需求, 如果有需求就把演示的 Demo 更新上去(Demo 包体略大, 目前没上传)
  • 继续优化使用体验
  • 或增或减内容

补充说明

  • 目前展示的视频经过压缩, 所以看起来有点模糊
  • 目前的是Beta版本, 商用的话请大家酌情考虑
  • 暂未做过各种压测和Bug调测, 仅跑通效果
  • 后续功能完善后, 价格也会随之提高,感谢支持
  • 如果有发现bug, 请联系我, 我会尽快修复
  • 感谢各位的支持

购买须知

  • 请各位朋友看后仔细思考, 是否符合您的项目或者研究需求, 谨慎使用
  • 目前内容相对比较少, 后续才会迭代
  • 因为本产品为付费虚拟商品,一经购买成功概不退款,请在购买谨慎确认购买内容。
4赞

目前来说, 做这个的过程中, 我发现视频是最消耗性能的, 期待 Cocos 未来能支持任意播放视频,
本插件演示用的 demo 是用的皮皮大佬的这个改造的, 很赞::
抛射体运动在游戏开发中的实践 | 社区征文 - Creator 3.x - Cocos中文社区

1赞

这里贴一个加载大视频的效果(图片压缩了)::
:upside_down_face:
一百多M, 本来想再加大一点的, 多个一起, Cocos 直接就卡崩溃了 :laughing:,
虽然说我设计的时候遇到这个情况也有, 没想到, 第一次加载百多M的视频, 这么考验性能
PS:
后续抽空会把微信端也支持下, 不过鉴于性能问题, 视频还是越小越好
用于论坛展示_

可以播放网页链接上的视频吗,实视频流媒体解码播放。

感觉价格属实有点高了,可能我比较穷?

请问是播放 URL 的视频吗? 目前只测试过同域名的, 跨域的不行

:joy:
大佬太谦虚了, 如果是面向人数比较多的话, 可能定价低一点好些,
不过我这种非常非常小众的, 可能就寥寥无几的人会使用了, 所以就定的高了点,
而且这个插件, 怎么说呢, 使用价值不怎么高, 支持的平台也比较少,
所以就比较适合一些想在这一块做稍多研究的朋友,
另外确实也花了比较多的心思在这个 3.x 插件里面, 所以就定高了点

大佬 orz

1赞

跨域是另一个问题,服务器通过配置解决就行了。

:smile:
没有服务器的条件, 不过如果服务端配置了的话, 应该是可以的, 因为支持加载视频链接

:joy:
好像讲得不太清晰, 这个地方说的支持四个格式导入是指的菜单栏,

插件内那个 FBX 的那个就是 Cocos 的示例模型,

以下这八种都是可以用来播放视频的
box, capsule, cone, cylinder, plane, quad, sphere, torus

image

喏, 就像这样 :grinning:

(Store 商店和论坛都上传不了太大的 GIF 图片, 这里就简单展示下)

另外, 这个组件是支持播放视频的声音的 =>

在编辑器面板可以开启的 (把简单属性的布尔值设为 false ) !

所以, 大家自定义好 Mesh 和 Effect , 就可以把这个视频搓成你要改造的样子 ! (想象力)

花了几小时自己实现了下,仅供学习,参考自这篇帖子

temp2

仅支持web,原生需要自己接入ffmpeg,然后通过 renderTexture 直接输出到模型上

github

gitee

4赞

:+1: :+1: :+1:
666 优秀呀, 大佬还是强, 请问多个不同的视频处理也是按照这个逻辑处理吗 ?

都可以,本来就是从videoplay转到sprite的

:sweat_smile:
感觉我这个插件有点多余了

刚刚试了下,发现videoplay好像不支持多个视频播放(播放的都是第一个),所以还是不行,web实现要看videoplayer

噢,我说错了,其实是可以的,但是我只使用了数组下标0的element,所以才之前播放的第一个,修改下就可以了

不知道sprite多个为什么会有问题,不过模型可以

:grinning: :+1:
请问每次都需要建一个新的 cc.VideoPlayer 视频节点并绑定好代码吗 ?

对,是需要这样