大多数状况下，三维模型应用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会应用压缩贴图来进步渲染效率和较少GPU压力。

明天提供一种新的思路，应用SVG作为模型的贴图，能够达到动静调整图片精度的成果。

应用svg作为贴图的思路，有两种。

间接作为贴图

间接应用贴图，其实和png jpeg的图片没有多少差异，加载的贴图成果，最终也会比 较含糊。 大抵代码如下：

           var cube2 = new mono.Cube(105 * 10,1094 * 10,1);           cube2.setStyle('m.color','orange');           cube2.setStyle('front.m.texture.image','front01.svg');           cube2.p(-1000,0,0)           box.add(cube2);

最终成果如下图右边对象所示：

通过canvas 动静生成贴图

从下面咱们能够看出，间接应用svg作为贴图资源，成果是位图没太大区别，而svg的矢量图放大不失真的劣势也失去了。
其实还有另外一种形式，就是应用canvas绘制svg，同时能够动静的调整绘制时候的缩放比例。 因为svg在缩放的时候不会失真，因而能够失去较大尺寸而且又高清的图片。
代码如下所示：

let image = new Image();                        image.onload = function() {                console.log(image.width,image.height)                let can = document.createElement('canvas');                let scale = 10;                can.width = image.width * scale;                can.height = image.height * scale;                let ctx = can.getContext('2d');                ctx.drawImage(image,0,0,can.width,can.height);                var cube = new mono.Cube(can.width,can.height,1);                cube.setStyle('m.color','orange');                cube.setStyle('front.m.texture.image',can.toDataURL());                box.add(cube);            }            image.src = 'front01.svg';

下面的先应用image对象加载svg图片，而后把svg图片绘制到canvas下面，留神绘制的时候放大的倍数是10. （let scale = 10）。
最初失去的成果如下图左边对象所示：

能够看到达到了高清的成果。

拓展思路

1. 能够依据镜头间隔动静扭转绘制的scale级别，达到lod的目标。
2. svg 图片自身还反对动静批改属性，比方灯的色彩等，能够达到监控状态的扭转的目标。

拓展思路，如果读者有趣味，能够点赞，后续接着写。

总结

应用svg 图片，能够不必做高清的位图，联合canvas绘制，也能够失去高清的纹理贴图成果。

如果对可视化感兴趣，能够和我交换，微信541002349。 关注公号“ITMan彪叔” 能够及时收到更多有价值的文章。