# WxMini-webgl-videoTexture

**Repository Path**: lost2/wx-mini-webgl-video-texture

## Basic Information

- **Project Name**: WxMini-webgl-videoTexture
- **Description**: 通过Threejs实现微信小程序下的视频纹理渲染，并添加orbitControls控制。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-04-19
- **Last Updated**: 2023-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WxMini-webgl-videoTexture

#### 介绍
通过Threejs实现微信小程序下的视频纹理渲染，并添加orbitControls控制。

#### 软件架构
实现实录
1. 通过video组件加载视频
2. 通过2d的Canvas的drawImage方法对视频帧进行绘制
3. 通过2d canvas的句柄获取帧像素
4. 通过3d canvas 作为Threejs的输出渲染器，通过THREE.DataTexture 作为数组纹理进行绘制，ThreeJS在Texture开启needsUpdate时会在下一个周期绘制时会重新调用数组纹理对引用值，我们只需每次更新时更新纹理数据，并仍将texture.needsUpdate 设置为true即可。

此方法虽然实现了，不过长时间渲染，会导致手机发烫，一是可能手机配置低，二是每次视频帧绘制和像素数据时，对内存对更新太过频繁。

解决思路
1、降低帧绘制和帧像素的频率
2、使用压缩过或低分辨率的视频作为视频纹理素材。参考下 下面的参考3


另一种思路 通过canvas 作为纹理贴图，不过好像小程序Canvas和HTMLCanvas不是同一种类型，不确定能否使用。
参考

[TheeJs-miniprogram](https://developers.weixin.qq.com/miniprogram/dev/extended/utils/threejs.html) 

[Canvas](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)

[CanvasTexture](https://segmentfault.com/a/1190000014240356)