10 threejs高性能绘制描边

发布于 2023-08-20 21:22:19

感谢看我的问题。我的场景是eda工业设计软件

我有一个svg输出的二维不规则图形,老板想要他是可以点击且有外轮廓的透明图形,我最开始想这还不简单,怼个edgeGeometry获取几何体外边框然后用一个mesh和一个line实现,然后因为我们的场景需要十万个左右的规模,lineSegment性能开销非常大,我已经转成了instanced一次性绘制也无法解决,帧数只有1-5,非常卡。我该怎么办?
我有看到大神你在webgl下说的十万个扇形的解决方案,但好像类型不太一样,希望指导,感谢。
https://www.icegl.cn/ask/question/52.html

默认的mesh效果:
image.png

使用了透明的mesh+linesegment的效果:
image.png

我是傻逼。。。我关掉ide之后发现很流畅。。。估计是cpu的瓶颈。。。谢谢各位大牛

但我又又又有下一个问题image.png
如何高性能渲染斜纹理,我目前的思路是片元着色器使用斜率计算斜率为-1时上色,不知道是不是常规操作
fragmentShader:`
uniform vec3 color;
void main() {

float slope  = (gl_FragCoord.y / gl_FragCoord.x);
// 如果斜率不为-1就设置为背景色
for (int i = 0; i < 1000; i++) {
    float slope = ((gl_FragCoord.y - float(20*i)) / gl_FragCoord.x);
    if (slope==-1.0) {
        gl_FragColor = vec4(0.0,0.0,0.0,1.0)
    }
}

}
`

查看更多

关注者
0
被浏览
820
Jsonco
Jsonco 图形社区官方人员 2023-08-23
奔驰的蜗牛

又真诚又优秀的一个的问题。哈哈
1.第一个问题看你已经找到答案了,我就不班门弄斧了,实际上instancedx的机理也很简单哈,【通过使用实例化,可以将大量的几何体实例共享相同的顶点数据,从而减少内存消耗并提高渲染性能。】,这和我之前在webgl绘制大量扇形的几个出发点实际上是类似的。提高性能,无非那几个方面,其余的方法都是在这几个点的基础上做的延展。
2.我理解的第二个问题是“如何高性能渲染斜纹理”,所谓的“斜纹理”其实本质还是纹理,只不过在显示上具有一些特质。我们先从理论上分析这个问题的解决方案:
(1)压缩纹理.这个我就不解释了,也是最直接、最有效的办法...
(2)使用Mipmaps。当然这个其实也就是内置多种视角小的纹理数据,这块不是专门针对你这个问题的,是在所有高效加载纹理都会遇到类似的问题。
(3)纹理合并。这个也不是特指你这个场景。
(4)shader优化。这一部分应该是和你的纹理最接近。
我们只看main函数里面的代码,

float slope  = (gl_FragCoord.y / gl_FragCoord.x);
// 如果斜率不为-1就设置为背景色
for (int i = 0; i < 1000; i++) {
    float slope = ((gl_FragCoord.y - float(20*i)) / gl_FragCoord.x);
    if (slope==-1.0) {
        gl_FragColor = vec4(0.0,0.0,0.0,1.0)
    }
}

【1】斜率表示没有问题,一般我们都是y/x,当然x/y也都可以,看实际情况选择应用。
【2】for循环效率比较低,尤其循环次数越多效率会越低。这里我们建议用fract或mod函数去实现重复或复用。
【3】if判断效率也非常低,本身if属于逻辑判断,gpu去做逻辑处理效率也很低,这里做判断建议使用setp或者smoothstep去做判断。

2 个回答
eason
eason 2023-08-24
这家伙很懒,什么也没写!

已经根据冰哥的优化方案得到一个不错的性能表现,十分感谢image.png

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览