使用SVG做模型贴图的思路

用户3158888

发布于 2022-03-22 14:12:10

8950

发布于 2022-03-22 14:12:10

文章被收录于专栏：计算机图形学前端可视化 WebGL计算机图形学前端可视化 WebGL

大多数情况下，三维模型使用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绘制，也可以得到高清的纹理贴图效果。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-11-20，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas

svg

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

canvas

svg

登录后参与评论

0 条评论

热度