gltf模型带透明贴图的显示问题

带透明贴图的三维模型，会涉及到在显示时，根据图片上的透明度，来显示不规则的形状，图片在制作三维模型时，导入的是规则形状，长方形或者正方形，如不对透明度进行处理时，显示的结果是不正确的，例如下边树木的三维模型设置：

通过模型的处理软件，设置材质（material）的属性，能够使模型在引擎中显示时，将透明的位置不显示，从而达到正确的显示方式：

具体的操作方式参见之前公众号文章：Blender导出带透明贴图的gltf模型

在实际的操作中，拥有多张贴图的三维模型，一张一张贴图修改属性信息会比较慢，可以使用Blender中的python脚本进行批量修改，参见公众号文章：Blender脚本开发，附：如何修改一个模型里的所有材质的属性（material）的python代码：
//bpy.data为场景中的模型数据
materials = bpy.data.materials
for (k1,v1) in materials.items():
v1.blend_method = ‘BLEND’

按照此方式设置导出的三维模型，将材质都设置成了BLEND属性，当模型中的材质有透明通道（例如png格式），在three.js或者cesium中显示时，会存在和背景混合的问题，模型显示会穿透背景，如下图：

不带透明通道的材质，例如jpg格式，就能避免这样的问题，所以，在模型的贴图设置时，可以根据不同情况，设置不同的属性，在gltf模型格式说明中，也可以将模型的透明属性设置成mask，这样同样能够避免这样的问题。
附gltf模型材质参数设置说明（blend和mask）：
MASK - The rendered output is either fully opaque or fully transparent depending on the alpha value and the specified alpha cutoff value; the exact appearance of the edges MAY be subject to implementation-specific techniques such as “Alpha-to-Coverage”.
BLEND - The rendered output is combined with the background using the “over” operator as described in Compositing digital images.

gltf模型带透明贴图的显示问题相关推荐

Blender导出带透明贴图的gltf模型
在Blender2.8版本以后,直接导出带透明贴图的模型为gltf,会导致模型的贴图,在展示平台中变成不透明的效果. 在https://gltf-viewer.donmccurdy.com/中的效果( ...
three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
SuperMap webgl 中使用的gltf模型制作方法
当我们使用Cesium开发KML+GLTF模型表示动态的运动轨迹的时候总会用到gltf格式的模型,但是一般官方的模型库总是只有几个,不能够满足使用,这里整理了一套从数据下载到使用的全家桶套餐供各位看官 ...
草图大师sketchup的模型加载到cesium里显示带贴图
草图大师sketchup的模型加载到cesium里显示带贴图前言一.sketchUp导出obj格式二.在Blender中转换数据 1.导入数据 2.调整尺寸和视图三.cesium中加载总结 ...
threejs 导入gltf模型并添加Sprite标注，在vue结合websocket实时更新贴图的信息
效果展示: 1. 导入依赖 import * as THREE from 'three'import {GLTFLoader} from 'three/examples/jsm/loaders/GLT ...
vue-3d-model 对三维模型(.fbx.gltff.obj等)的展示，三维模型展示透明贴图以及双面贴图显示
声明: 原文地址:vue集成vue-3d-model预览模型 - 简书该组件是基于Three3d开发由于对有透明贴图或者双面贴图的模型文件不友好不能正常展示会出现如下效果明显的透明贴图显示双 ...
3dmax导出glb格式_3dmax模型透明贴图的制作方法及注意要点
点击上面"3dmax自学"关注我们! 3dmax模型透明贴图的制作方法及注意要点制作透明贴图一般有两种方法:一种直接贴带透明通道的图片,如PNG.TGA等格式的图片.另一种是使用 ...
Unity-Live2d(模型与贴图建立联系，渲染，显示图片）
Unity-Live2d 概述::这是我学习Unity中Live2d的相关操作的一个笔记,欢迎各位同好和大牛的指点.(参考siki学院出的视频学的) 模型与贴图建立联系首先我们得得到模型,在上一个博 ...
.Net C# 发送带背景图html邮件（解决Outlook不显示背景图问题）
发送带背景图html邮件(解决Outlook不显示背景图问题) (二)示例背景图 (三)示例定义好的html邮件图 (四)html代码 (五)C#邮件发送代码(示例:控制台应用程序) 1.考虑兼容性问 ...

gltf模型带透明贴图的显示问题

gltf模型带透明贴图的显示问题相关推荐

最新文章

热门文章