dtysky / xr-frame-demo

Demos for xr-frame system in wx-mini-program.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

xr-frame-demo

微信小程序xr-frame系统的示例集。

准备工作

目前需要下载最新的Nightly版本工具,最新的客户端(安卓8.0.29,iOS8.0.29),以及基础库(2.27.1)。

直接体验

二维码以及部分样例的扫描图片详见:官方文档-示例

demo.mp4

快速索引

基础能力

基础案例 PBR材质下渲染的内置图形。

透明画布 使用透明画布能力,透出背景。

灯光案例 多种灯光作用下的四个白色图形。

动画案例 keyframe 动画案例。

视频案例 视频纹理,正式版本预计基础库 v2.32.0 及以上支持。

交互案例 简单的拖拽图形旋转移动案例。

显示与图层案例 控制节点树的显示案例。

动态节点案例 通过 xr-shadow 节点,来动态在其下添加节点,以及用代码加载资源。

渲染目标案例 使用 xr-asset-render-texture 生成渲染目标。

粒子系统 使用xr-particle,控制粒子系统的显示。

后处理系统 展示了内置的几种后处理效果。

全局环境数据与局部环境数据 动态更改 xr-mesh 局部环境数据的案例。

AR 能力

相机渲染案例 AR相机与glTF一同渲染的基础案例。

平面识别案例 基础的平面识别案例。

平面识别叠加Marker案例 平面识别叠加Marker案例

相机旋转案例 threeDof,用于在不需要SLAM的场景,支持手持相机旋转,兼容性较好。

2DMarker案例 2DMarker识别案例。

OSDMarker案例 OSDMarker识别案例。

人脸案例 人脸识别案例。

人手案例 人手识别案例。

人体案例 人体识别案例。

物理 能力

射击积木案例 射击积木案例

投球入筐案例 投球入筐案例

glTF 能力

金属头盔案例 包含完整MetalRougnessMap、EmissiveMap、NormalMap、OcclusionTexture 以及各类因子的 glTF 模型案例。

动画案例 包含 glTF 动画,以及 keyframe 动画协作的案例

加载与多光源案例 组件和页面通信实现资源加载时覆盖加载界面,以及多个动画光源案例。

morph案例 morph targets的使用。

无光照案例 应用 KHR_materials_unlit 扩展的 glTF 案例。

扩展 - 压缩纹理

扩展 - KHR_texture_transform 贴图矩阵变换案例 应用 KHR_texture_transform 扩展的 glTF 案例,glTF 贴图矩阵变换支持(需基础库2.31.0)。

扩展 - KHR_materials_pbrSpecularGlossiness 高光光泽度案例

扩展 - KHR_materials_sheen 布料与织物材质的模拟案例 glTF Sheen 扩展,主要用于布料与织物材质的模拟。基础库 2.32.1 支持。

扩展 - KHR_lights_punctual

高级定制

定制组件和元素 定制组件和元素并使用。

定制渲染资源 定制Effect和Geometry并使用。

通用功能模版

小程序混合通信 通过小程序按钮事件,传递速度变量到 xr-frame 组件通信的案例。

Controller 第一人称漫游 第一人称相机控制器。

Loading 动态资源加载与使用 点击按钮进行对应资源的加载与使用。

Tracker 动态多Tracker切换 点击按钮,对应不同识别效果 Marker 的添加与删除。

AR 模型摆放与手势控制 点击屏幕摆放,然后单指拖动屏幕进行旋转,双指拖动进行放大缩小。

AR 面向屏幕的面片与模型 通过脚本控制的,四个方向各有一个面向屏幕的物体。

AR 平面模式下的 UI 面板 AR环境下,简单的UI面板

Effect 模型切换为Toon渲染(自定义多pass)

Geometry 定制每帧变化的Geometry

glTF 模型更换贴图 加载 glTF 模型,调整 glTF 的材质的贴图

glTF 模型动画(脚本、骨骼)

glTF 模型更改渲染状态,glTF设为遮挡模型 使用模型做遮挡剔除,让该模型剔除其他物体

glTF 添加模型内UV动画

Touch 点选物体与动画控制

序列帧动画(雪碧图、GIF) 使用自定义材质实现的序列帧动画案例。

截屏与分享 通过分享系统截屏分享

过滤黑色背景视频 通过自定义材质,过滤掉视频黑色部分的案例。

AR典型案例

扫描图片模型透视案例 基于 Stencil裁剪 实现的基本模型透视效果案例。

传送门效果案例 基于平面识别与模版剔除实现的基本传送门效果案例。

平面视频案例 基于 2DMarker 实现,扫描工卡照片显示对应的生活场景。

扫描物体查看信息 基于 OSD 实现的扫描 广州塔 或 虎年公仔,识别成功后会在物体右上角加上信息提示。

扫描人脸穿戴 基于 人脸识别 的穿戴。

微信球案例 扫描手握着的微信纪念球,会显示三维纪念球,点击三维纪念球会播放动画。

扫描还原案例

扫描渲染案例 根据三维重建模型与扫描全景图还原的案例,仅使用IBL作为光源,可切换天空盒。

卡 其 脱 离 太 xr-frame团队的办公区和成员三维重建,以及与小程序音频系统、2dview协作的例子。

产品级案例

边缘迷走 AR文字互动游戏。

■■■■ ■■■■■■■■■■■■■■■■

版权

实例中用到的所有资源:

https://sketchfab.com/3d-models/borboleta-azul-butterfly-ab9192b6bc8f49e3baed63e984c7073a
https://sketchfab.com/3d-models/just-a-girl-b2359160a4f54e76b5ae427a55d9594d
https://sketchfab.com/3d-models/metal-table-60f8c279c7b64fce8241220178e543ec
https://sketchfab.com/3d-models/fiesta-tea-8bde490c80444157b4545471d067423c
https://sketchfab.com/3d-models/ship-in-clouds-c475323dc7f24e26ba2009c08c8e1941
https://sketchfab.com/3d-models/cloud-station-26f81b24d83441ba88c7e80a52adbaaf
https://sketchfab.com/3d-models/shiteyanyo-hatsune-miku-0f4029ba805c4751933bba24dc72dd24
https://sketchfab.com/3d-models/miku-8b8028fa527549629b620752517812ac
https://sketchfab.com/3d-models/pokemon-frlg-loreleis-arena-ce7397e95ec9458b8df3c1453e4d0b82
https://sketchfab.com/3d-models/10th-attract-genderless-attraction-fc5548bb511e45748c393184ecbad26b
https://sketchfab.com/3d-models/camera-limits-demo-van-gogh-bedroom-in-arles-daefab319a584e559443e39ff05e84fa
https://sketchfab.com/3d-models/night-car-landscape-be4011aeb09740948bf30d33936c875b
https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4
http://www.alexandre-pestana.com/pbr-textures-sponza/
https://sketchfab.com/3d-models/jokers-mask-persona-5-81669910c0b74f41a3a58febfd514794

About

Demos for xr-frame system in wx-mini-program.

License:MIT License


Languages

Language:JavaScript 85.4%Language:TypeScript 14.6%