大多数情况下,三维模型使用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)。 最后得到的效果如下图右边对象所示:
可以看到达到了高清的效果。
拓展思路
- 可以根据镜头距离动态改变绘制的scale级别,达到lod的目的。
- svg 图片本身还支持动态修改属性,比如灯的颜色等,可以达到监控状态的改变的目的。
拓展思路,如果读者有兴趣,可以点赞,后续接着写。
总结
使用svg 图片,可以不用做高清的位图,结合canvas绘制,也可以得到高清的纹理贴图效果。
如果对可视化感兴趣,可以和我交流,微信541002349。 关注公号“ITMan彪叔” 可以及时收到更多有价值的文章。