会的,目前已有的类型应该可以满足大部分的需求,正在逐步实现剩余的 glTF 扩展类型(Transmission、Sheen、Lights Punctual 马上可以、Draco 在接入)。 如果目前有某一个扩展的比较强烈的需求,可以留言我们优先支持。
xr-frame组件不支持gltf类型的问题,请问后续会扩展支持更多的gltf扩展类型吗?[图片]
2023-02-17试了下,应该是最新的windows工具里面的问题。 可以先使用上一个版本的工具 Windows 64 https://dldir1.qq.com/WechatWebDev/nightly/p-3bd19c2db3a642a0b39af853efaf67f8/0.54.1/wechat_devtools_1.06.2302022_x64.exe Windows 32 https://dldir1.qq.com/WechatWebDev/nightly/p-3bd19c2db3a642a0b39af853efaf67f8/0.54.1/wechat_devtools_1.06.2302022_ia32.exe
为什么xr-frame使用xr-gltf无法渲染模型出现?<xr-asset-load type="gltf" asset-id="damage-helmet" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.glb" /> <xr-gltf node-id="damage-helmet" model="damage-helmet" /> <xr-camera position="0 1.5 4" target="damage-helmet" background="skybox" clear-color="0.4 0.8 0.6 1" camera-orbit-control fov="90" />
2023-02-16工具里面是目前不能测试 AR 能力的,需要于手机环境进行测试。 如果手机遇到这个 log 报错,方便的话,反馈一下具体的手机型号,微信版本以及基础库版本~ 同时,可以测试下 官方案例集 https://github.com/dtysky/xr-frame-demo 里面的 AR 案例是否有一样的问题。
xr-frame中,如何使用ar-system, is-ar-camera?根据文档测试xr-frame时,使用<xr-scene ar-system="modes:Plane" bind:ready="handleReady">; <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera />会报错,提示ar-system只能在wx-mini-program中使用 测试代码如下: <xr-scene ar-system="modes:Plane" bind:ready="handleReady"> <xr-assets bind:loaded="handleAssetsLoaded"> <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" /> <xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" /> </xr-assets> <xr-env env-data="xr-frame-team-workspace-day" /> <xr-light type="ambient" color="1 1 1" intensity="1" /> <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow /> <xr-ar-tracker mode="Plane"> <xr-gltf model="anchor"></xr-gltf> </xr-ar-tracker> <xr-node node-id="setitem" visible="false"> <xr-gltf model="miku" anim-autoplay scale="0.08 0.08 0.08" rotation="0 180 0"/> </xr-node> <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera /> </xr-scene>
2023-02-16默认的材质是会进行面剔除的,会剔除到背面,所以理论上 rotation 旋转 > 0 时,应该就是显示了背面,然后背面被剔除了。 可以手动设置渲染状态,关闭面剔除。 <!-- 添加渲染状态 states="cullOn: false" 去除面剔除 --> <xr-mesh geometry="plane" material="mat" rotation="-90 0 0" uniforms="u_baseColorMap: xxxt" states="cullOn: false" />
小程序,XR-frame, xr-mesh 属性 rotation="90 0 0" 不显示?代码如下,问题在注释中(感谢🙏): <xr-scene ar-system="modes:OSD" > <xr-assets bind:loaded="handleAssetsLoaded"> <xr-asset-material asset-id="mat" effect="simple" uniforms="u_baseColorFactor: 0.8 0.6 0.4 0.7" states="alphaMode:BLEND" /> </xr-assets> <xr-asset-load type="texture" asset-id="xxxt" src="https://x x x.jpeg" /> <xr-node> <xr-ar-tracker mode="OSD" src="https://xxx.jpeg" > <!-- 这里的rotation 第一个值,只能设置为 <= 0 的数值,> 0时就不显示了 --> <!-- 设置为 -90 的话,平面上的字就倒立了 --> <xr-mesh geometry="plane" material="mat" rotation="-90 0 0" uniforms="u_baseColorMap: xxxt" /> </xr-ar-tracker> </xr-node> <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera /> </xr-scene>
2023-02-16实际上这个没有必要这么复杂。 如果只需要平行于屏幕,作为相机子节点即可。 如果需要实现三维世界里面任意一个物体朝向相机可以参考以下代码: WXML代码: <xr-node id="look" position="0 1 -3"> <!-- plane 默认是平行于xy轴的,所以需要进行一个旋转调整 --> <xr-mesh rotation="-90 0 0" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0 0.5 0.5 1"></xr-mesh> </xr-node> <xr-camera id="camera" node-id="camera" position="0 1.6 0" clear-color="0.925 0.925 0.925 1" target="mesh-sphere" camera-orbit-control="" ></xr-camera> JS脚本: methods: { handleReady({detail}) { const xrScene = this.scene = detail.value; console.log('xr-scene', xrScene); this.scene.event.add('tick', this.handleTick.bind(this)); this.lookTrs = this.scene.getElementById('look').getComponent(xrSystem.Transform); this.cameraTrs = this.scene.getElementById('camera').getComponent(xrSystem.Transform); }, handleTick(dt) { if (this.lookTrs) { const quaternion = this.lookTrs.quaternion; // 算出从物体到相机的向量 FACING.set(this.cameraTrs.position).sub(this.lookTrs.position, FACING); Quaternion.lookRotation(FACING, UP, quaternion); } }, }
XR-FRAME Plane时需要视频始终面相相机的lookAt问题?const { XRGLTF, GLTF, Animator, Transform, XRLight, Light, XRMesh, Mesh, XRNode, ARTracker, Vector3, Matrix4, Quaternion, Camera, CameraOrbitControl} = wx.getXrFrameSystem(); ... const obj = scene.createElement(XRMesh, { states: 'cullOn:false', geometry: 'plane', material: "videoTransparentTopByBottom", uniforms: `u_baseColorMap:video-animal`, }); const mesh = obj.getComponent(Transform); const arV4 = Matrix4.lookAt(mesh.position, camera.position, Vector3.Up); let xx = new Vector3(), m4 = new Matrix4(), zz = new Vector3(); const isDeal = arV4.decomposeTransRotMatScale(xx, m4, zz); if(isDeal) { const quat = Quaternion.createFromMatrix4(m4); mesh.quaternion.set(quat); } 需求是需要这个视频始终面向相机 目前,相机移动过程中,arV4一直是不变 请问下lookAt上的使用问题还是decomposeTransRotMatScale上的问题? 解决思路是对的么
2023-02-15有计划的,但目前还没有开始开发。是需要 glTF 里面的 Draco 扩展?还是 Draco 数据的解析函数? 目前准备直接使用内置的客户端能力进行解析,目前这部分小程序还没有涵盖,等合并完毕就会对外暴露。
xr-frame 未来会支持读取draco或meshopt压缩的glb文件吗?https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/tools/cli.htmlhttps://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/gltf/specification.htmlhttps://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/gltf/introduction.html
2023-02-15感觉这里很大概率是 url 设置的时机问题,xr-asset-load 不允许动态改动字段。 如果需要根据 url 动态加载,建议使用脚本 // gltf加载参考脚本 async loadGLTF(gltfList) { const scene = this.scene const gltfModel = await Promise.all(gltfList.map(gltfItem => scene.assets.loadAsset({ type: 'gltf', assetId: 'gltf-' + gltfItem.id, src: gltfItem.url, }))) console.log('glTF asset loaded') this.setData({ gltfLoaded: true }) }
为什么xr-gltf加载不出来glt文件?<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"> <xr-asset-load type="gltf" asset-id="gltf-item" src="{{url}}/scene.glb" /> <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" /> <xr-asset-material asset-id="standard-mat" effect="standard" /> </xr-assets> 代码中为两个glb加载,其中官方文档给出的内容可以顺利加载到本地: [图片] 我自己的云端文件加载内容如下: [图片] 请问为什么加载不出来glb文件
2023-02-15试了下,代码片段我看了下,没有外部的glb。内部的环境数据也是可以的。是window的机器? 可以试下 案例集 https://github.com/dtysky/xr-frame-demo 里面的资源
xr-frame, 为什么我设置内置的环境数据不生效呢?[图片] 基础库是3.30.0, 设置了之后就是不出来, 还有引用外部.glb 3D模型文件的时候, 也渲染不出来, 开发工具是最新版Nightly 1.06.2302092
2023-02-15目前版本不支持直接在材质更改 primitiveType,后续版本应该会对外暴露。 目前版本需要实现的话,可以参考 xr-frame-demo ( https://github.com/dtysky/xr-frame-demo ) 的 高级定制 - Render 定制渲染元素 案例 (建议剥离里面的额外逻辑,实现一个最基本的渲染即可)。 定制一份自定义材质,并于渲染状态处,设定材质渲染的 primitiveType 为 LINE / LINE_STRIP,然后让 sphere 使用这一份自定义材质进行渲染 passes: [{ "renderStates": { primitiveType: xrFrameSystem.EPrimitiveType.LINE_STRIP // ... }, // ... }],
xr-frame, sphere支持wireframe吗?[图片] 需要做一个这样的球体,请问,material是否支持wireframe?或者,有什么方法可以做到这样?谢谢
2023-02-14iOS 应该没有这个问题。 Android 的确存在问题。预计在2月底的客户端版本会修复这个问题。
XR-FRAME 人脸识不能使用前置摄像头?版本库基础库v2.30.0,手机库8.0.32.2300手机端预览情况下,人脸识别不能唤起前置摄像头,后置没问题。 <xr-scene ar-system="modes:Face;camera:Front" bind:ready="handleReady" bind:tick="handleTick"> [图片]
2023-02-14