乐趣区

关于前端:使用SVG做模型贴图的思路

大多数状况下,三维模型应用 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 彪叔”能够及时收到更多有价值的文章。

退出移动版