- 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-13 - XR-FRAME如何在相机前固定渲染mesh?在相机移动的情况下?
尝试用外层view组件但是回呗xrframe直接覆盖,那么在XR-FRAME中该如何实现相机移动的过程中始终处于相机固定位置 用于制作轮盘,方向键
2023-02-09 - 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