微信小程序xr-frame后处理

news2024/10/1 9:49:30

前言:什么是后处理?(详见:ThreeJS 后处理 - 掘金 (juejin.cn))

后处理就是对WebGLRenderer.render(scene, camera)的渲染2D图片进行处理。可以把多个后处理进行组合,按照顺序执行,每个处理过程,被称为Pass

(详见:Three.js post-processing(后处理))

常见方法:详见ThreeJS 后处理 - 掘金

小程序用法:(详见:后处理)

1.后处理可以用两种方式实现:

1).xr-asset-post-process标签,后处理的参数在data属性传入:

<xr-asset-post-process asset-id="blur" type="blur" is-hdr data="radius:10" />

2).代码创建,后处理的参数在data中传入:

2.在相机的post-process属性中关联id:

<xr-camera
  ......
  post-process="blur vignette"
/>

可以传入多个后处理

3.后处理目前只开放了内置的几种效果:(详见:微信开放文档)

scene.assets.addAsset('post-process', 'vignette', scene.createPostProcess({
  type: 'vignette',
  isHDR: false,
  data: {
    intensity: 0,
    smoothness: 2,
    color: [0 0 0 1]
  }
}));
  •  blur:高斯模糊,效果好但是在radius较大时性能开销较高,快速近似方法见fastblur
参数类型默认值说明效果
radiusnumber5模糊半径
radius:64

  • fastblur:也是高斯模糊,但是更快速的近似版本
参数类型默认值说明效果
radiusnumber5模糊半径时间稳定性高,但效果没有blur好,适用于需要不断变更radius的场景
  • bloom:泛光,建议开启is-hdr使用。
参数类型默认值说明效果
thresholdnumber0.5阈值
radius=64,intensity=2,其他默认:
softThresholdnumber0软阈值
radiusnumber20半径
intensitynumber2亮度
  •  tone:色调映射,ACES曲线,一般配合hdr使用。

1)效果:

效果

 

  •  vignette:渐晕。
参数类型默认值说明效果
centernumber[][0.5,0.5]半径
color=[1,0,0,1],smoothness=2,其他默认:
colornumber[][0,0,0,1]颜色
intensitynumber1亮度
smoothnessnumber1边缘柔化
roundnessnumber1圆度
roundednumber0/1强制为圆形
  •  fxaa:快速抗锯齿。

1)效果:

效果

 

修改参数

有时候我们想修改后处理资源的参数来调整效果,有两种方式可以实现:一个最常用的方法就是在代码中拿到资源引用后修改:

1)在代码中修改

const blur = scene.assets.getAssets('post-process', 'blur');
blur.data.radius = 20;

2)帧动画

另一种方法是使用帧动画,指定某帧的属性为后处理资源:

qu

{
  "keyframe": {
    "blur": {
      "0": {
        "asset-post-process.assetData.radius": 10
      },
      "100": {
        "asset-post-process.assetData.radius": 64
      }
    }
  },
  "animation": {
    "parent": {
      "keyframe": "blur",
      "duration": 4,
      "ease": "linear",
      "loop": -1
    }
  }
}

整体代码以及效果(来源:微信开放文档)

  • 父组件wxml部分

  <xr-gltf-postprocessing
    disable-scroll
    id="main-frame"
    width="{{renderWidth}}"
    height="{{renderHeight}}"
    style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"

    type="{{type}}"
    blurRadius="{{blurRadius}}"
    bloomRadius="{{bloomRadius}}"
    bloomIntensity="{{bloomIntensity}}"
    bloomThreshold="{{bloomThreshold}}"
    vignetteIntensity="{{vignetteIntensity}}"
    vignetteSmoothness="{{vignetteSmoothness}}"
    vignetteRoundness="{{vignetteRoundness}}"
    fxaaEnabled="{{fxaaEnabled}}"
    bind:assetsProgress="handleProgress"
    bind:assetsLoaded="handleLoaded"
    loaded="{{loaded}}"
  />
  <view wx:if="{{!loaded}}" style="position: absolute;display: flex; justify-content: center; align-items: center; left: 0;top: 0;width: {{width}}px;height: {{height}}px;background-color: #6aa; text-align: center;line-height: 24px;">
    <text style="color: white;font-size: 18px;">{{progressInfo}}</text>
  </view>
  <view class="form-entry">
    <view class="form-entry-title">后处理类型</view>
    <radio-group name="pp-type" bindchange="changeType">
      <label class="radio-item"><radio value="blur" checked/>模糊</label>
      <label class="radio-item"><radio value="vignette"/>渐晕</label>
      <label class="radio-item"><radio value="bloom"/>泛光</label>
      <label class="radio-item"><radio value="fxaa"/>抗锯齿</label>
    </radio-group>
  </view>
  <!-- <view class="divider"></view> -->
  <view wx:if="{{type == 0}}" class="form-entry">
    <view class="form-entry-title">模糊半径</view>
    <slider bindchange="changeBlurRadius" value="{{blurRadius}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕强度</view>
    <slider bindchange="changeVignetteIntensity" value="{{vignetteIntensity}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕平滑</view>
    <slider bindchange="changeVignetteSmoothness" value="{{vignetteSmoothness}}" min="{{0}}" max="{{8}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 2}}" class="form-entry">
    <view class="form-entry-title">渐晕圆度</view>
    <slider bindchange="changeVignetteRoundness" value="{{vignetteRoundness}}"  min="{{0}}" max="{{1}}" step="{{0.1}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光半径</view>
    <slider bindchange="changeBloomRadius" value="{{bloomRadius}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光强度</view>
    <slider bindchange="changeBloomIntensity" max="5" value="2" step="0.1" value="{{bloomIntensity}}"></slider>
  </view>
  <view wx:if="{{type == 1}}" class="form-entry">
    <view class="form-entry-title">泛光阈值</view>
    <slider bindchange="changeBloomThreshold" max="2" value="0.5" step="0.1" value="{{bloomThreshold}}"></slider>
  </view>
  <view wx:if="{{type == 3}}" class="form-entry">
    <view class="form-entry-title">开启FXAA</view>
    <switch checked="{{fxaaEnabled}}" bindchange="switchFXAA"/>
  </view>

父组件js部分

Page({
  data: {
    xmlCode: '',
    type: 0,
    
    blurRadius: 16,
    bloomRadius: 16,
    bloomIntensity: 2,
    bloomThreshold: 0.5,
    vignetteIntensity: 1,
    vignetteSmoothness: 2,
    vignetteRoundness: 1,
    fxaaEnabled: false
  },
  handleProgress: function({detail}) {
    this.setData({progressInfo: `${~~(detail.progress * 100)} %\n\n${detail.asset.assetId}(${detail.asset.type}): ${detail.asset.src}`});
  },
  handleLoaded: function({detail}) {
    this.setData({loaded: true});
  },
  changeType(e) {
    const type = e.detail.value;
    if (type === "blur") {
      this.setData({
        type: 0
      });
    } else if (type === "bloom") {
      this.setData({
        type: 1
      });
    } else if (type === "vignette") {
      this.setData({
        type: 2
      });
    } else if (type === "fxaa") {
      this.setData({
        type: 3
      });
    }
  },
  changeBlurRadius(e) {
    this.setData({
      blurRadius: e.detail.value
    });
  },
  changeBloomRadius(e) {
    this.setData({
      bloomRadius: e.detail.value
    });
  },
  changeBloomIntensity(e) {
    this.setData({
      bloomIntensity: e.detail.value
    });
  },
  changeBloomThreshold(e) {
    this.setData({
      bloomThreshold: e.detail.value
    });
  },
  changeVignetteIntensity(e) {
    this.setData({
      vignetteIntensity: e.detail.value
    });
  },
  changeVignetteSmoothness(e) {
    this.setData({
      vignetteSmoothness: e.detail.value
    });
  },
  changeVignetteRoundness(e) {
    this.setData({
      vignetteRoundness: e.detail.value
    });
  },
  switchFXAA(e) {
    this.setData({
      fxaaEnabled: !this.data.fxaaEnabled
    });
  }
});

  • 父组件json部分
{
  "usingComponents": {
    "xr-gltf-postprocessing": "../../../components/xr-basic-postprocessing/index"
  },
  "disableScroll": true
}

子组件wxml部分

<xr-scene id="xr-scene" bind:ready="handleReady" bind:tick="handleTick">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load
      type="env-data" asset-id="env1" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/env-test.bin"
    />
    <xr-asset-load type="gltf" asset-id="night_car_landscape" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/night_car_landscape.glb" />
    <xr-asset-load type="gltf" asset-id="bedroom" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/bedroom.glb" />
  </xr-assets>
  <xr-env env-data="{{env}}" />
  <xr-node>
    <xr-node node-id="camera-target" position="0 0 0"></xr-node>
    <xr-node layer="1">
      <xr-asset-post-process asset-id="bloom1" type="bloom" is-hdr data="radius: {{bloomRadius_0}}, intensity: {{bloomIntensity}}, threshold: {{bloomThreshold}}, softThreshold: 0.8"/>
      <xr-asset-post-process asset-id="bloom2" type="bloom" is-hdr data="radius: {{bloomRadius_1}}, intensity: {{bloomIntensity}}, threshold: {{bloomThreshold}}, softThreshold: 0.8"/>
      <xr-gltf node-id="gltf_1" position="0 0 0" rotation="0 0 0" scale="0.01 0.01 0.01" model="night_car_landscape"></xr-gltf>
    </xr-node>
    <xr-node layer="2">
      <xr-asset-post-process asset-id="blur" type="blur" data="radius: {{blurRadius}}"/>
      <xr-asset-post-process asset-id="vignette" type="vignette" data="color:1 0 0 1,intensity:{{vignetteIntensity}},smoothness:{{vignetteSmoothness}},roundness:{{vignetteRoundness}}"/>
      <xr-gltf node-id="gltf_2" position="0.5 -1 -2" rotation="0 0 0" scale="1 1 1" model="bedroom"></xr-gltf>
    </xr-node>
    <xr-node layer="3">
      <!-- xr-basic -->
      <xr-asset-post-process asset-id="fxaa" type="fxaa"/>
      <xr-asset-material asset-id="standard-mat" effect="standard" />
      <xr-mesh node-id="mesh-plane" position="0 -0.02 -4" rotation="0 0 0" scale="5 1 5" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0.48 0.78 0.64 1" receive-shadow></xr-mesh>
      <xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 -3.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" cast-shadow></xr-mesh>
      <xr-mesh node-id="mesh-sphere" position="0 1.25 -5" scale="1.25 1.25 1.25" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:0.937 0.176 0.368 1" cast-shadow></xr-mesh>
      <xr-mesh node-id="mesh-cylinder" position="1 0.7 -3.5" scale="1 0.7 1" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 0.776 0.364 1" cast-shadow></xr-mesh>
    </xr-node>
    <xr-camera
      id="camera" node-id="camera" position="0 0 {{cameraPosition}}" clear-color="{{clearColor}}"
      near="0.1"
      far="2000"
      target="{{cameraTarget}}" background="{{background}}" camera-orbit-control=""
      cull-mask="{{cullMask}}"
      post-process="{{pp}}"
    ></xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="{{aIntensity}}" />
    <xr-light type="directional" rotation="40 180 0" color="1 1 1" intensity="{{dIntensity}}" />
  </xr-node>
</xr-scene>

子组件js部分

const blurData = {
  cullMask: 0b101,
  aIntensity: 1,
  dIntensity: 2,
  env: "",
  background: "default",
  cameraPosition: 1.3,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",

  pp: "blur",
  // blurRadius: 0
};

const bloomData = {
  cullMask: 0b11,
  aIntensity: 0,
  dIntensity: 0,
  env: "",
  background: "default",
  cameraPosition: 10,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",

  pp: "bloom2",
  // bloomRadius_0: 0,
  // bloomRadius_1: 0
};

const fxaaData = {
  cullMask: 0b1001,
  aIntensity: 1,
  dIntensity: 3,
  env: "",
  background: "default",
  cameraPosition: 1,
  clearColor: "0.925 0.925 0.925 1",
  cameraTarget: "mesh-sphere"
};

const vignetteData = {
  cullMask: 0b101,
  aIntensity: 1,
  dIntensity: 2,
  env: "",
  background: "default",
  cameraPosition: 1.3,
  clearColor: "0 0 0 1",
  cameraTarget: "camera-target",
  pp: "vignette",
};

Component({
  properties: {
    type: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal === 0) {
            this.activeBlur();
          } else if (newVal === 1) {
            this.activeBloom();
          } else if (newVal === 2) {
            this.activeVignette();
          } else if (newVal === 3) {
            this.activeFXAA();
          }
        }
      }
    },
    blurRadius: {
      type: Number,
      value: 0
    },
    bloomRadius: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {
        this.setData({
          bloomRadius_0: newVal * 0.2,
          bloomRadius_1: newVal * 0.8
        });
      }
    },
    bloomIntensity: {
      type: Number,
      value: 1,
    },
    bloomThreshold: {
      type: Number,
      value: 0.5,
    },
    vignetteIntensity: {
      type: Number,
      value: 1,
    },
    vignetteSmoothness: {
      type: Number,
      value: 2,
    },
    vignetteRoundness: {
      type: Number,
      value: 1,
    },
    fxaaEnabled: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        this.setData({
          fxaaEnabled: newVal
        });
        if (this.data.type === 3) {
          this.activeFXAA();
        }
      }
    }
  },
  data: {
    loaded: false,
    env: "",
    cullMask: 0,
    background: "default",
    aIntensity: 0,
    dIntensity: 0,
    pp: "",
    cameraPosition: 1,
    cameraTarget: "camera-target",

    //---bloom---
    bloomRadius_0: 0,
    bloomRadius_1: 1,

    //---fxaa---
    fxaaEnabled: false
  },
  lifetimes: {
    attached() {
      console.log('data.a', this.data.a) // expected 123
    }
  },
  methods: {
    handleReady: function({detail}) {
      this.scene = detail.value;
      console.log('scene', detail.value);
      this.activeBlur();
    },
    handleTick: function() {
      // const camera = this.scene.getNodeById("camera");
      // const transform = camera.el._components.transform;
      // if (transform.rotation.y > Math.PI * 0.25) {
      //   transform.rotation.y = Math.PI * 0.25;
      // } else if  (transform.rotation.y < -Math.PI * 0.25) {
      //   transform.rotation.y = -Math.PI * 0.25;
      // }
    },
    handleAssetsProgress: function({detail}) {
      this.triggerEvent('assetsProgress', detail.value);
    },
    handleAssetsLoaded: function({detail}) {
      this.triggerEvent('assetsLoaded', detail.value);
      this.setData({loaded: true});
    },
    activeBlur() {
      this.setData(blurData);
    },
    activeBloom() {
      this.setData(bloomData);
    },
    activeVignette() {
      this.setData(vignetteData);
    },
    activeFXAA() {
      this.setData(fxaaData);
      this.setData({
        pp: this.data.fxaaEnabled ? "fxaa" : ""
      });
    }
  }
})
  • 效果如下:

微信小程序xr-frame后处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/544982.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新-git-gitee代码管理(管理)

git忽略文件失效 git rm -r --cached . //清除缓存 git add . //添加所有文件 git commit -m update .gitignore //提交更新.gitignoregit 提交的一些规范 开发git commit规范&#xff1a; git commit --fix我的问题feat&#xff1a;新功能 fix&#xff1a;BUG…

VMware16安装 CentOS7

目录 VM下载与安装 密钥 CentOS镜像下载 安装过程 问题 win11一点启动就蓝屏重启 系统安装 安装摘要 选择日期 软件选择-> 最小安装 安装位置 网络和主机名 开始安装 用户设置 完成 登录 xshell连接操作 登录成功 VM下载与安装 官网下载地址 下载 VMware Works…

恩智浦正式启动人工智能创新实践平台,为本地生态注入创新动能

中国天津——2023年5月19日——恩智浦半导体&#xff08;NXP Semiconductors N.V.&#xff0c;纳斯达克代码&#xff1a;NXPI&#xff09;今日宣布&#xff0c;设于天津的人工智能应用创新中心二期项目——人工智能创新实践平台&#xff08;以下称“创新实践平台”&#xff09;…

三、IOC容器(3)

一、IOC操作Bean管理&#xff08;外部属性文件&#xff09; 1.直接配置数据库信息 配置德鲁伊连接池引入德鲁伊连接池依赖jar包 <!--配置连接池--> <bean id"dataSource" class"com.alibaba.druid.pool.DruidDataSource"><property name&…

面了一位5年的测试,真的很失望......

最近看了很多简历&#xff0c;很多候选人年限不小&#xff0c;但是做的都是一些非常传统的项目&#xff0c;想着也不能通过简历就直接否定一个人&#xff0c;何况现在大环境越来 越难&#xff0c;大家找工作也不容易&#xff0c;于是就打算见一见。 在沟通中发现&#xff0c;由…

《HTTP权威指南 陈涓 赵振平》读书笔记

目录 第一章 HTTP概述 第二章 URL与资源 第三章 HTTP报文 第四章 连接管理 第一章 HTTP概述 1、POST和PUT的区别 POST&#xff1a;将客户端数据发送到一个服务器网关应用程序PUT&#xff1a;将来自客户端额数据存储到一个命名的的服务器资源中 2、HTTP报文&#xff1a;…

Windows下通过cwRsync备份到服务器服务器之间使用rsync备份传输

Windows下通过cwRsync备份到服务器&服务器之间使用rsync备份传输 Linux服务器配置Rsync服务端1、安装Rsync2、配置rsyncd.conf3、创建目录、密码文件并修改权限4、启动rsync服务 Windows配置cwRsync客户端1、下载并解压cwRsync客户端2、打开cmd&#xff0c;执行同步命令 Wi…

好程序员:一篇文章看懂JavaScript 学习路线!前端自学!

如果你是一名编程初学者&#xff0c;刚刚学完HTML和CSS&#xff0c;那就不得不接触JavaScript。今天&#xff0c;好程序员给大家分享一篇2023最新版&#xff0c;JavaScript学习路线。 1. HTML and CSS 语法、结构、响应式设计、引导 2. JavaScript语言基础 语法、数据、类型、…

Cloud Studio 高阶玩家:强大的 YAML 模板

Cloud Studio 高阶玩家&#xff1a;强大的 YAML 模板 1. 功能简介 编程免不了要写配置文件&#xff0c;怎么写配置也是一门学问。YAML 是专门用来写配置文件的语言&#xff0c;非常简洁和强大。 了解到一些用户在Cloud Studio开发项目的时候&#xff0c;环境上需要依赖一些组…

Java设计模式-策略模式

简介 在软件开发中&#xff0c;设计模式是为了解决常见问题而提供的一套可重用的解决方案。策略模式&#xff08;Strategy Pattern&#xff09;是其中一种常见的设计模式&#xff0c;它属于行为型模式。该模式的核心思想是将不同的算法封装成独立的策略类&#xff0c;使得它们…

软件测试项目测试报告总结

测试计划概念&#xff1a;就在软件测试工作实施之前明确测试对象&#xff0c;并且通过资源、时间、风险、测试范围和预算等方面的综合分析和规划&#xff0c;保证有效的实施软件测试。 需求挖掘的6个方面&#xff1a; 1、输入方面 2、处理方面 3、结果输出方面 4、性能需求…

蓝牙耳机怎么挑选?工程师盘点目前最值得入手的蓝牙耳机

蓝牙耳机已经成为手机标配&#xff0c;各大品牌也陆续加入蓝牙耳机行业&#xff0c;市场十分繁荣。我身为从业人员对整个行业有着深入的了解&#xff0c;考虑到很多朋友还不知道蓝牙耳机怎么挑选&#xff0c;我整理了目前最值得入手的蓝牙耳机&#xff0c;分别是&#xff1a; 1…

保护你的 shell脚本

什么是shell&#xff1f; shell 是一种脚本语言 脚本&#xff1a;本质是一个文件&#xff0c;文件里面存放的是 特定格式的指令&#xff0c;系统可以使用脚本解析器 翻译或解析 指令 并执行&#xff08;它不需要编译&#xff09; shell 既是应用程序 又是一种脚本语言&#xff…

1. python学习环境准备

文章目录 前言本专栏文章旨在记录《Python编程从入门到实践》一书的学习笔记。 一、编程环境二、使用步骤1.修改默认python版本2.终端退出python解释器3.编写.py文件4.运行.py文件 三、Python帮助文档的使用总结 前言 本专栏文章旨在记录《Python编程从入门到实践》一书的学习…

N9305语音芯片在新能源车充电桩上的方案

语音芯片技术作为近年来蓬勃发展的人工智能领域的重要组成部分&#xff0c;正在被广泛运用于诸多领域&#xff0c;并为人类生活带来了很多便利和创新。其中&#xff0c;新能源充电桩的运用就是一个很好的例子。随着电动汽车的普及&#xff0c;充电桩的需求量不断增加。为了提高…

BGP路由选择实验

测试环境拓扑图 每一种规则测试完后记得恢复初始状态&#xff01;&#xff01; 各设备BGP Router_ID为loopback 0的地址。 AR1 配置 [V200R003C00] #sysname AR1 # interface GigabitEthernet0/0/0ip address 10.1.12.1 255.255.255.0 # interface LoopBack0ip address 1.1.…

远程桌面连接怎么使用?

远程桌面连接是一种远程控制计算机的技术&#xff0c;它允许用户通过Internet或局域网远程访问另一台计算机的桌面界面。使用远程桌面连接技术&#xff0c;可以帮助用户在家里或在外出时访问工作计算机&#xff0c;或者在不同的地方协作完成任务。在本文中&#xff0c;我们将介…

k8s 基于MutatingWebhookConfiguration实现node超卖和sidecar注入

k8s 基于MutatingWebhookConfiguration实现node超卖和sidecar注入 源码在:https://github.com/Seaiii/MutatingWebhook我写了几个脚本&#xff0c;可以直接运行。 一、MutatingWebhookConfiguration原理 MutatingWebhookConfiguration 是 Kubernetes 中的一种资源对象&#…

【代码随想录】刷题Day31

1.分发饼干 455. 分发饼干 贪心的思路就是&#xff1a;小的饼干尽量去匹配胃口小的孩子&#xff0c;这样才能实现尽可能多孩子吃到。 那么代码就很好写了&#xff1a; 1.排序g和s&#xff0c;这样方便查找小的数 2.饼干的位置不停遍历&#xff0c;对应我们需要一个ret代表当前…

语义分割mask转json

文章目录 1 mask2json ——代码实现1.1 通过mask获取每个类别对应的灰度值1.2 mask 转 json 2 mask2json ——利用工具转2.1支持数据增强2.2 支持多种格式转换 本文介绍两种语义分割mask转json的方法&#xff1a; 方法1&#xff1a;是参考语义分割mask转json&#xff08;改进版…