@realsee/vreo 0.2.0-alpha.5 → 0.2.0-alpha.8

package/README.md

@@ -243,7 +243,7 @@ ReactDOM.render(<App></App>, document.getElementById('app'))
   - `data`: 当前剧本帧类别数据依赖。
 
 > **如何获取剧本数据？**
-> 剧本服务及剧本编辑器公开版本尚在开发中，预计 2022 年 2 月份中旬发布，敬请期待。
+> 剧本服务及剧本编辑器公开版本尚在开发中，敬请期待。
 
 ### 剧本帧说明
 
@@ -353,8 +353,23 @@ type PanoEffectData = {
 
 ```ts
 export type UpdateVRPanoramaData = {
-  panoIndex: number // 点位
-  images: WorkCubeImage // 全景贴图
+  _signature: string // 签名字段
+  allow_hosts: string[] // 域名白名单
+  certificate: string // 签名值
+  expire_at: string // 过期时间
+  // 动态场景
+  dynamic_scene?: {
+    images: { // 切换全景的图片
+      index: number // 对应的全景点位
+      right: string
+      left: string
+      up: string
+      down: string
+      front: string
+      back: string
+    }
+  }
+  [key: string]: any
 }
 ```
 
@@ -442,6 +457,8 @@ export function YourCustomKeyframe(props: CustomVreoKeyframeProps) {
 
 ## 注意事项
 
+### 兼容性
+
 浏览器对视频自动播放有严格的限制（播放行为必须由用户触发），`@realsee/vreo` 内部已经最大限度规避了浏览器对视频自动播放的限制。
 
 但是规避 [微信浏览器中音视频自动播放限制](https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01) 需要调用 [微信 JS-SDK](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) 触发`WeixinJSBridgeReady`事件后才能实现。
@@ -485,6 +502,33 @@ const vreoplayer = new Player(five, {
 
 这样，在微信浏览器或微信小程序 `WebView` 中也能正常使用自动播效果。
 
+### 性能优化
+
+提高播放性能目前有两个策略：降低贴图分辨率和提前预载。
+
+#### 降低图片分辨率
+
+可以设置 `five.imageOptions.size` 来降低渲染引擎的贴图尺寸，这样下载速度会变快且内存占用也会降低。
+你也可以配置 **Vreo** 参数来达到类似的效果：
+
+```ts
+const vreoplayer = new Player(five, { imageOptions: { size: 1024 } })
+```
+
+#### 自动预载
+
+如果网络不稳定，可以提前预载静态资源，这样播放过程中不会卡顿：
+
+```ts
+// 全局预载
+const vreoplayer = new Player(five, { autoPreload: true })
+
+// 针对某一份剧本数据预载
+vreoplayer.load(vreoUnit, 0, true)
+
+```
+
+
 ## API 文档
 
 详细的 API 文档请参考：[Vreo API](https://realsee-developer.github.io/vreo/index.html) 。

package/docs/assets/custom.css

@@ -29,10 +29,10 @@ blockquote p {
 .hljs {
   background-color: transparent;
   font-family: monospace;
-  font-size: 0.75rem;
+  font-size: 0.85rem;
 }
 code {
-  font-size: 12px;
+  font-size: 14px;
   background-color: rgb(96 125 139 / 10%);
 }