- xr-frame框架中,如何才能获取摄像头原始数据截图?
xr-frame框架中,如何才能获取摄像头原始数据截图 在开发过程中,需要获取原摄像头截图数据,目前看不能在同一个view中新增一个camera组件,在xr-frame框架下,也没有找到可以导出摄像头原始截图数据的办法,目前有这个实际需求,请问目前有办法可以做到在xr-frame框架中,截图原始视频并且导出的办法吗?
2023-04-11 - xr-frame 上同层有个悬浮按钮,点击后如何和xr-frame通讯,从而调用分享系统?
[图片]xr-frame 上同层有个悬浮按钮,点击后如何和xr-frame通讯,从而调用分享系统scene.share.captureToFriends() 事件
2023-11-21 - 微信小程序的xr-frame加载的模型可设置缩放范围吗?
<xr-scene id="xr-scene" ar-system bind:ready="handleReady" bind:ar-ready="handleARReady" bind:ar-error="handleARError"> <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"> <xr-asset-load type="gltf" asset-id="gltf-table" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" /> </xr-assets> <xr-env env-data="gz-haixinsha"/> <xr-node> <xr-node node-id="camera-target" position="0 0 0"></xr-node> <xr-node node-id="table-wrap" position="0 0 0"> <xr-gltf node-id="mesh-gltf-table" model="gltf-table" anim-autoplay position="0 -1 0" rotation="0 180 0" scale="0.08 0.08 0.08" /> </xr-node> <xr-camera position="2 1 2" clear-color="0.925 0.925 0.925 1" background="ar" target="camera-target" camera-orbit-control="" /> </xr-node> <xr-node node-id="lights"> <xr-light type="ambient" color="1 1 1" intensity="0.2" /> <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="2" /> </xr-node> </xr-scene> 当前加载的模型可以控制缩放大小吗?目前缩放到很小模型就看不到了 [图片]
2023-12-01 - 震惊! xr-frame shadowCalculation 这个方法怎么报错呀?
我已经设置接受阴影,compileShaderError: ERROR: 0:29: 'shadowCalculation' : no matching overloaded function found 怎么用?谁来告诉我,换句话,我怎么实现一个透明可接收阴影的材质?
2023-05-29 - xr-frame 目标:模型内具体节点添加点击事件
以下代码可以在官方示例的“混合通信、资源加载、互动---Touch点选物体与动画控制”中 测试 模型整体和模型内部节点不能同时配置轮廓、点击事件 const ANode = myModel.getComponent("gltf").getInternalNodeByName("mixamorig:LeftHandIndex1") 给Anode 添加轮廓、事件 用CubeShape 配置size 。 autoFit 和 meshShape 大概率有bug(底层无法计算出轮廓,后续可能会修),可以测一下,能画出轮廓线 表示可用 const xrFrameSystem = wx.getXrFrameSystem(); ANode.addComponent(xrFramesystem.Cubeshape,size: [30,30,30]}) Anode.addComponent(xrFrameSystem.shapeGizmos); Anode.event.add(touch-shape",asdf) function asdf(e) { console.log("asdf", e) }
2023-12-07 - 抛砖引玉,小程序xr-frame渲染GLTF模型专用在线编辑器来了
官方GLTF模型编辑器迟迟不见动静,为了提高开发效率,基于GLTF2.0文档规范,制作了在线板GLTF模型编辑器,不多说,直接上图 [图片] [图片] [图片] [图片][图片] 体验地址:https://www.euyu.com,免费使用。静态网站,模型数据可以不上传到云端在浏览器本地处理。 2024.03.04 更新 优化了模型选择,通过鼠标点选模型后,选中部分外轮廓高亮,同时左边节点树中对应节点自动选中。 [图片] 2024.03.24 更新 网站迁徙完成,固定访问网站为https://www.euyu.com 2024.05.05 更新 [图片] 利用5.1假期实现了编辑中撤销和重做功能。
05-05 - 请问 xr-frame 里如何获取当前mesh的材质贴图offset?
请问 xr-frame 里如何获取当前mesh的材质贴图offset?想做个像threejs贴图offset 循环位移的效果动画。 https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame/
2023-09-14 - xr-frame中渲染透明视频
渲染透明视频可以通过将透明视频通道转换为灰度图的方式,利用uv将透明叠加到视频上。shader处理如下: vec4 color = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5,vTextureCoord.y)); vec4 colora = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5 + 0.5,vTextureCoord.y)); vec4 baseColor = vec4(color.xyz,colora.x); gl_FragData[0] = baseColor; 具体代码: const xrFrameSystem = wx.getXrFrameSystem(); function createVideoTsbsEffect(scene) { return scene.createEffect( { "name": "video-tsbs", "properties": [ { "key": "u_baseColorFactor", "type": 3, "default": [1, 1, 1, 0] } ], "images": [{ "key": "u_baseColorMap", "default": "white", "macro": "WX_USE_BASECOLORMAP" }], "defaultRenderQueue": 3000, "passes": [ { "renderStates": { "cullOn": true, "blendOn": true, "depthWrite": true, "cullFace": 2 }, "lightMode": "ForwardBase", "useMaterialRenderStates": true, "shaders": [0, 1] }], "shaders": [ `#version 100 precision highp float; attribute vec3 a_position; attribute vec2 a_texCoord; uniform mat4 u_projection; uniform mat4 u_world; uniform mat4 u_view; varying highp vec2 vTextureCoord; void main() { vTextureCoord = a_texCoord; gl_Position = u_projection * u_view * u_world * vec4(a_position,1.0); }`, `#version 100 precision highp float; uniform highp vec4 u_baseColorFactor; #ifdef WX_USE_BASECOLORMAP uniform sampler2D u_baseColorMap; #endif varying highp vec2 vTextureCoord; void main() { #ifdef WX_USE_BASECOLORMAP vec4 color = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5,vTextureCoord.y)); vec4 colora = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5 + 0.5,vTextureCoord.y)); vec4 baseColor = vec4(color.xyz,colora.x); #else vec4 baseColor = u_baseColorFactor; #endif gl_FragData[0] = baseColor; } `] } ) } xrFrameSystem.registerEffect("video-tsbs", createVideoTsbsEffect); wxml: <xr-scene bind:ready="handleReady"> <xr-assets> <xr-asset-load type="texture" asset-id="waifu" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/waifu.png" /> <xr-asset-load type="video-texture" asset-id="test" src="https://demo.uality.cn/output-lr.mp4" options="autoPlay:true,loop:true" /> <xr-asset-material asset-id="video-tsbs-mat" effect="video-tsbs" uniforms="u_baseColorMap:video-test" /> </xr-assets> <xr-mesh node-id="cube" geometry="cube" material="video-tsbs-mat" /> <xr-camera clear-color="0.4 0.8 0.6 1" position="0 1 4" target="cube" camera-orbit-control /> </xr-scene> 视频生成: 通过ffmpeg生成将带有透明通道的mov格式视频转换为左(rgb通道信息)右(alpha通道信息)的MP4视频。 ffmpeg -i input.mov -vf "split [a], pad=iw*2:ih [b], [a] alphaextract, [b] overlay=w" -y output-lr.mp4 也可以用百度小程序“AFX透明视频”带的工具制作。(左右的话,直接修改shader的偏移就可以了) 转换出来的视频结果如下图: [图片]
2023-04-07 - 如何使用小程序的AR能力?
目前官方提供小程序基础能力,开发者可以接入第三方引擎,完成小程序AR效果开发。 微信相关的基础能力供参考: -摄像头组件(用户授权下,可获取视频帧数据): https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.html -WebGL画布: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html -完整示例代码: https://developers.weixin.qq.com/s/ElC24AmF729W -传感器: https://developers.weixin.qq.com/miniprogram/dev/api/device/compass/wx.onCompassChange.html#accuracy%20%E5%9C%A8%20iOS/Android%20%E7%9A%84%E5%B7%AE%E5%BC%82 -陀螺仪: https://developers.weixin.qq.com/miniprogram/dev/api/device/gyroscope/wx.startGyroscope.html https://developers.weixin.qq.com/miniprogram/dev/api/wx.onGyroscopeChange.html 欢迎开发者/开发平台进驻微信服务平台,成为服务商、提供插件,供更多服务商和品牌合作伙伴了解、联系你们。具体请参考:https://developers.weixin.qq.com/community/develop/doc/000e2ed8e44e98b1916884aa351008 开发者也可以多关注官方微信号"微信公开课"等解读:https://mp.weixin.qq.com/s/4_p2bAcp3OkTQizceFvMkQ
2019-10-09