使用SVG做模型貼圖的思路

netcy發表於2021-11-21

大多數情況下,三維模型使用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);

最終效果如下圖左邊物件所示:

6271001-f78d6f7f48f2b3f2.png

通過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)。
最後得到的效果如下圖右邊物件所示:

6271001-3433663ea1744871.png

可以看到達到了高清的效果。

擴充思路

  1. 可以根據鏡頭距離動態改變繪製的scale級別,達到lod的目的。
  2. svg 圖片本身還支援動態修改屬性,比如燈的顏色等,可以達到監控狀態的改變的目的。

擴充思路,如果讀者有興趣,可以點贊,後續接著寫。

總結

使用svg 圖片,可以不用做高清的點陣圖,結合canvas繪製,也可以得到高清的紋理貼圖效果。

如果對視覺化感興趣,可以和我交流,微信541002349。 關注公號“ITMan彪叔” 可以及時收到更多有價值的文章。

相關文章