The idea of using SVG as model texture

In most cases, 3D models use PNG and JPG as the textures of the model. Of course, for performance optimization, compressed textures are sometimes used to improve rendering efficiency and reduce GPU pressure.

Today, a new idea is provided. Using SVG as a model map can achieve the effect of dynamically adjusting the accuracy of the picture.

There are two ways to use svg as a texture.

Directly as a texture

Using the texture directly, in fact, there is not much difference from the png jpeg picture, and the loaded texture effect will be blurry in the end. The approximate code is as follows:

           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);

The final effect is as shown in the left object in the following figure:

Generate textures dynamically through canvas

From the above, we can see that using svg directly as a texture resource has the effect that the bitmap is not much different, and the advantage of svg's vector magnification without distortion is also lost.
In fact, there is another way, which is to use canvas to draw svg, and at the same time, you can dynamically adjust the zoom ratio when drawing. Since the svg will not be distorted when zooming, you can get larger and high-definition pictures.
The code is as follows:

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';

The above first uses the image object to load the svg picture, and then draws the svg picture onto the canvas. Note that the magnification is 10 when drawing (let scale = 10).
The final result is shown in the object on the right side of the figure below:

It can be seen that the high-definition effect has been achieved.

Expand your mind

1. The scale level drawn can be dynamically changed according to the lens distance to achieve the purpose of lod.
2. The svg picture itself also supports dynamic modification of attributes, such as the color of the light, etc., which can achieve the purpose of monitoring the status change.

Expand your thinking. If the reader is interested, you can like it and continue to write.

Summarize

Using svg pictures, you can get high-definition texture mapping effects without making high-definition bitmaps, combined with canvas drawing.

If you are interested in visualization, you can communicate with me on WeChat 541002349. Pay attention to the public account "ITMan Biaoshu" to receive more valuable articles in time.