首页 > 编程语言 >微信小程序XR黑色背景视频透明效果(一)

微信小程序XR黑色背景视频透明效果(一)

时间:2024-11-05 13:57:29浏览次数:1  
标签:视频 1.0 baseColor 微信 xrFrameSystem uniform vec4 highp XR

去除黑色背景主要依赖于effect="removeBlack",其中removeBlack为官方demo写的规则,代码如下

const xrFrameSystem = wx.getXrFrameSystem();

xrFrameSystem.registerEffect('removeBlack', scene => scene.createEffect({
  name: "removeBlack",
  images: [{
    key: 'u_videoMap',
    default: 'white',
    macro: 'WX_USE_VIDEOMAP'
  }],
  defaultRenderQueue: 2000,
  passes: [{
    "renderStates": {
      cullOn: false,
      blendOn: true,
      blendSrc: xrFrameSystem.EBlendFactor.SRC_ALPHA,
      blendDst: xrFrameSystem.EBlendFactor.ONE_MINUS_SRC_ALPHA,
      cullFace: xrFrameSystem.ECullMode.BACK,
    },
    lightMode: "ForwardBase",
    useMaterialRenderStates: true,
    shaders: [0, 1]
  }],
  shaders: [
`#version 100

uniform highp mat4 u_view;
uniform highp mat4 u_viewInverse;
uniform highp mat4 u_vp;
uniform highp mat4 u_projection;
uniform highp mat4 u_world;

attribute vec3 a_position;
attribute highp vec2 a_texCoord;

varying highp vec2 v_UV;

void main()
{
  v_UV = a_texCoord;
  vec4 worldPosition = u_world * vec4(a_position, 1.0);
  gl_Position = u_projection * u_view * worldPosition;
  }`,
`#version 100

precision mediump float;
precision highp int;
varying highp vec2 v_UV;

#ifdef WX_USE_VIDEOMAP
  uniform sampler2D u_videoMap;
#endif

void main()
{
#ifdef WX_USE_VIDEOMAP
  vec4 baseColor = texture2D(u_videoMap, v_UV);
#else
  vec4 baseColor = vec4(1.0, 1.0, 1.0, 1.0);
#endif
  float rgbSum = baseColor.r + baseColor.g + baseColor.b;
  // 设定阈值避免异常情况
  if (rgbSum < 0.1) {
    gl_FragData[0] = vec4(1.0, 1.0, 1.0, 0.0);
  } else {
    gl_FragData[0] = vec4(pow(baseColor.rgb, vec3(2.2)), 1.0);
  }
}
`],
}));

 

再进行规则引入

import '../../xr-custom/assets/effect-removeBlack';
<xr-scene ar-system="modes:Marker" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="video-texture" asset-id="test3"  options="autoPlay:true,loop:true" src="https://cdn.apix.cn/G9Go8gsfiSUZ2PkmxbEiHD2W1M5epwmE.mp4" />
   
    <xr-asset-material asset-id="removeBlack-mat3" effect="removeBlack"/>
  </xr-assets>

  <xr-node>
      <xr-ar-tracker mode="Marker" bind:ar-tracker-switch="handleTrackerSwitch" src="https://img.apix.cn/chishui2.png">
      <xr-mesh node-id="video-item2" geometry="plane"  material="removeBlack-mat3" uniforms="u_videoMap: video-test3" states="renderQueue:3000" position="0 0 0"  rotation="90 180 0"/>

    </xr-ar-tracker>
    <xr-camera id="camera" background="ar" is-ar-camera  />
  </xr-node>
</xr-scene>

 

标签:视频,1.0,baseColor,微信,xrFrameSystem,uniform,vec4,highp,XR
From: https://www.cnblogs.com/besehen/p/18527727

相关文章

  • H5登录界面输入账号密码,在ios苹果微信手机上输入框上下闪烁问题
    场景描述:H5登录界面输入账号密码,在ios苹果微信手机上输入框上下闪烁问题苹果手机的浏览器就有了自动填充密码的功能,具体来说就是一个手机号密码登录的页面,ios识别到当前页面有密码输入框,所以触发了自动填充密码的功能。解决办法:在2个输入框中间加个隐藏输入框核心代码:<inpu......
  • 微信小程序 thinkphp/laravel小型酒店宾馆管理系统_71z0e
    文章目录项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取项目介绍本文工作研究的主要内容是如何实现酒店信息管理,和酒店各种信息的系统化、规范化和自动化。在设计系统时,分别设......
  • 一学就会!微信自动回复设置方便快捷!
    在忙碌时,如何高效地处理信息成为许多人面临的挑战。今天,就给大家分享一个微信管理系统,通过它的机器人功能,可以让你轻松应对信息的洪流,即使在最忙的时候也不必担心错过重要的消息。1、自动通过好友当有新的好友请求时,系统会根据你的设置自动通过这些请求,这样你就不必每次都手......
  • TaTa_0.0.6,视频图片4K修复工具,模糊一键变高清
    这款神奇的工具就是TaTa!它采用的是开源模型Real-ESRGAN-ncnn-vulkan技术,专门用于图像清晰化处理。无论你的原始图片有多么模糊,只需轻轻一点,它就能让你的图像瞬间变得清晰无比,甚至能够达到4K的画质!当然,他也有修复视频和其他功能适用的系统:windows系统下载好软件后,解压安......
  • Vue3 iOS微信JSSDK授权签名错误及图片选择兼容
    iOS微信JSSDK授权签名错误及图片选择兼容一、项目概述二、iOS签名错误invalidsignature三、iOS选择图片转载请注明出处:https://blog.csdn.net/hx7013/article/details/143502680一、项目概述Vue3+Vite+Vue-Router4+JS-SDK1.6由于之前开发调试都是在......
  • 基于大数据 Python短视频推荐系统(源码+LW+部署讲解+数据库+ppt)
    !!!!!!!!!选题不知道怎么选不清楚自己适合做哪块内容都可以免费来问我避免后期給自己答辩找麻烦增加难度(部分学校只有一次答辩机会没弄好就延迟毕业了)会持续一直更新下去有问必答一键收藏关注不迷路源码获取:https://pan.baidu.com/s/1aRpOv3f2sdtVYOogQjb8jg?pwd=jf1d提取码:......
  • 大华乐橙设备私有平台EasyCVR视频设备轨迹回放平台支持哪些摄像机?摄像机如何选型?
    在现代安全监控系统中,视频监控设备扮演着至关重要的角色。视频设备轨迹回放平台EasyCVR以其卓越的兼容性和灵活性,支持接入多种品牌和类型的摄像机。这不仅为用户提供了广泛的选择空间,也使得视频监控系统的构建和管理变得更加高效和便捷。本文将详细介绍EasyCVR平台支持的摄像机类......
  • 视频多功能助手,智能去重去水印一键剪辑
    软件介绍:视频一键搬运软件,支持全平台去水印,各种去重方法。新手直接使用,操作方便,流量天花板部分功能:全平台去水印多平台搬运去重专项+随机2.1专项+移动溶图专项+随机扫光专项+随机镜头视频特效智能抽帧智能锐化黑白视频智能降噪智能模糊智能边框智能调色镜......
  • 视频多功能助手,智能去重去水印一键剪辑
    软件介绍:视频一键搬运软件,支持全平台去水印,各种去重方法。新手直接使用,操作方便,流量天花板部分功能:全平台去水印多平台搬运去重专项+随机2.1专项+移动溶图专项+随机扫光专项+随机镜头视频特效智能抽帧智能锐化黑白视频智能降噪智能模糊智能边框智能调色镜......
  • 视频多功能助手,智能去重去水印一键剪辑
    软件介绍:视频一键搬运软件,支持全平台去水印,各种去重方法。新手直接使用,操作方便,流量天花板部分功能:全平台去水印多平台搬运去重专项+随机2.1专项+移动溶图专项+随机扫光专项+随机镜头视频特效智能抽帧智能锐化黑白视频智能降噪智能模糊智能边框智能调色镜......