使用SVG做模型贴图的思路

简介: 使用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); ¨G0G let image = new Image(); ¨K5K


上面的先使用image对象加载svg图片,然后把svg图片绘制到canvas上面,注意绘制的时候放大的倍数是10.  (let scale = 10)。


最后得到的效果如下图右边对象所示:


微信图片_20220425141321.png

6271001-3433663ea1744871.png


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


拓展思路


  1. 可以根据镜头距离动态改变绘制的scale级别,达到lod的目的。
  2. svg 图片本身还支持动态修改属性,比如灯的颜色等,可以达到监控状态的改变的目的。


拓展思路,如果读者有兴趣,可以点赞,后续接着写。


总结


使用svg 图片,可以不用做高清的位图,结合canvas绘制,也可以得到高清的纹理贴图效果。


相关文章
|
4月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
408 0
|
4月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
83 0
|
6月前
|
计算机视觉 开发者 Python
OpenCV中图像的缩放与旋转讲解及实战演示(附Python源码)
OpenCV中图像的缩放与旋转讲解及实战演示(附Python源码)
156 0
Photoshop怎么实现图片局部马赛克
Photoshop怎么实现图片局部马赛克
94 0
|
存储 异构计算
threejs实战_3d纹理
threejs加载3d纹理
207 0
threejs实战_3d纹理
|
前端开发 JavaScript
threejs实战_canvans纹理
threejs加载canvas纹理
157 0
threejs实战_canvans纹理
|
定位技术
Cesium系列:加载不规则形状出图
Cesium加载不规则形状出图
456 0
|
前端开发
SVG 入门基础(2)形状元素
SVG 入门基础(2)形状元素
133 0
SVG 入门基础(2)形状元素
|
前端开发 JavaScript
使用SVG实现动态分布的圆环发散路径动画
使用SVG实现动态分布的圆环发散路径动画
280 0
|
存储 前端开发 数据可视化
有意思!强大的 SVG 滤镜
有意思!强大的 SVG 滤镜
279 0
有意思!强大的 SVG 滤镜