简体   繁体   English

three.js - ipad管几何上的画布纹理

[英]three.js - canvas texture on tube geometry for ipad

I've a 3d model of a tube geometry. 我有一个管几何的三维模型。 There are 18000 co-ordinates on production side. 生产方面有18000个坐标。 I am taking every 9th co-ordinate so that actually plotting 9000 co-ordinates to build a tube geometry. 我正在采取每9个坐标,以便实际绘制9000个坐标来构建管几何。 I've to use CanvasRenderer only. 我只能使用CanvasRenderer

Now when I use vertexColors: THREE.VertexColors in WebGLRenderer , the model displays different color on each face. 现在,当我在WebGLRenderer使用vertexColors: THREE.VertexColors时,模型在每个面上显示不同的颜色。 When I change it to CanvasRenderer , the model turns into white color only. 当我将其更改为CanvasRenderer ,模型仅变为白色。 Even I change vertexColors: THREE.FaceColors , the result is same. 即使我改变了vertexColors: THREE.FaceColors ,结果也一样。

Please find below the link of jsfiddle and link of my previous where mrdoob added support for material.vertexColors = THREE.FaceColors to CanvasRenderer. 请在下面找到jsfiddle的链接和我以前的链接,其中mrdoob添加了对material.vertexColors = THREE.FaceColors支持到CanvasRenderer。

support for vertex color in canvas rendering 支持画布渲染中的顶点颜色

tube in canvas rendering 在画布渲染管

Please find below the image to apply colors based on values. 请在下面找到图像以根据值应用颜色。 参数值

As shown in the image there are 12 values at 12 different degrees for every co-ordinate. 如图所示,对于每个坐标,有12个不同程度的值。 So I've created a tube with radius segment of 12. Then I've stored these values into JSON file but as there 18000 points, the file becomes to heavy. 所以我创建了一个半径为12的管子。然后我将这些值存储到JSON文件中,但是当有18000个点时,文件变得很重。 Even though I am plotting 2000 points it takes too much time. 即使我正在绘制2000点,也需要花费太多时间。 For 2000 segments and each segment has 12 faces, there are 24000 faces on a tube. 对于2000个区段,每个区段有12个面,管上有24000个面。

Please find below the programming logic to apply color based on value of a parameter. 请在下面找到编程逻辑,以根据参数值应用颜色。

// get res values & apply color var lblSeg=0; //获取res值并应用颜色var lblSeg = 0; var pntId; var pntId; var d=0; var d = 0; var faceLength=tube.faces.length; var faceLength = tube.faces.length; var degrees = [ '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330' ]; var degrees = ['30','60','90','120','150','180','210','240','270','300','330']; var faces = tube.faces; var faces = tube.faces; var degreeCntr=0; var degreeCntr = 0; var degreeProp; var degreeProp; //console.log(faces); //console.log(faces); var res30=0,res60=0,res90=0,res120=0,res150=0,res180=0,res210=0,res240=0,res270=0,res300=0,res330=0; var res30 = 0,res60 = 0,res90 = 0,res120 = 0,res150 = 0,res180 = 0,res210 = 0,res240 = 0,res270 = 0,res300 = 0,res330 = 0; var res; var res; var resDegree; var resDegree; var pnt=0; var pnt = 0;

                // fetching json data of resistivity values at different degree as                                                          //shown in the image
        var result = getResValue(); 


        for(var k=0; k<faceLength; k++){
            resDegree = degrees[degreeCntr];
            degreeProp = "r"+resDegree;

            res = result.resistivity[pnt][degreeProp];
            objects.push(result.resistivity[pnt]);              

            f = faces[k];               

            color = new THREE.Color( 0xffffff );

            if(res<5){                      
                color.setRGB( 197/255, 217/255, 241/255);
            }

            else if(res>=5 && res<50){                                                                          
                color.setRGB( 141/255, 180/255, 226/255);
            }

            else if(res>=50 && res<100){                                
                color.setRGB( 83/255, 141/255, 213/255);
            }

            else if(res>=100 && res<200){                               
                color.setRGB( 22, 54, 92);
            }

            else if(res>=200 && res<300){                           
                color.setRGB( 15/255,36/255,62/255);
            }

            else if(res>=300 && res<400){                               
                color.setRGB( 220/255, 230/255, 241/255);
            }

            else if(res>=400 && res<700){                               
                color.setRGB( 184/255, 204/255, 228/255);
            }

            else if(res>=700 && res<1200){                              
                color.setRGB( 149/255, 179/255, 215/255);
            }

            else if(res>=1200 && res<1500){                             
                color.setRGB( 54/255, 96/255, 146/255);
            }

            else if(res>=1700 && res<1800){                             
                color.setRGB( 36/255, 84/255, 98/255);
            }

            else if(res>1900){                              
                color.setRGB( 128/255, 128/255, 128/255);
            }

            for(var j=0;j<4;j++)
            {                   
                tube.vertices.push(f.centroid);
                vertexIndex = f[ faceIndices[ j ] ];    
                p = tube.vertices[ vertexIndex ];                   
                f.vertexColors[ j ] = color;                    
            }

            degreeCntr++;
            if(degreeCntr==10){
                degreeCntr=0;
            }
            if(k%12==0 && k!=0){
                pnt++;                  
            }
        }

This logic takes too much time to render the model and the model becomes too heavy and we can't perform other operations. 这个逻辑花费了太多时间来渲染模型,模型变得太重,我们无法执行其他操作。 The FPS on android drops at 2-3 FPS. Android上的FPS降至2-3 FPS。 Actually I've to render this model on iPad so have to use canvas renderer only. 其实我要在iPad上渲染这个模型,所以只能使用canvas渲染器。

So, how do I make this model lighter to load and works smoothly on iPad ? 那么,如何让这款机型更轻巧,在iPad上运行顺畅呢? and is there any other way to apply colors on every face ? 还有其他方法可以在每张脸上涂上颜色吗? If canvas map as texture can be applied to make the model lighter, how do I build that map with all the colors based on value ? 如果可以应用画布贴图作为纹理使模型更亮,那么如何使用基于值的所有颜色构建该贴图?

Update: After changing library version to r53, vertexColors: THREE.FaceColors and face.color.setRGB( Math.random(), Math.random(), Math.random()) , the model displays random color for each face on canvas rendering. 更新:将库版本更改为r53, vertexColors: THREE.FaceColorsface.color.setRGB( Math.random(), Math.random(), Math.random()) ,模型在画布上为每个面显示随机颜色渲染。

So now the issue is applying colors as per requirements (either by canvas map or any feasible solution) and to make the model lighter to load it smoothly on iPad. 所以现在的问题是根据要求应用颜色(通过画布地图或任何可行的解决方案),并使模型更轻,以便在iPad上平滑加载。

I believe this will give you a little bit better performance + if you could come up with some automated method of calculating colors for each angle offset, that you could set hex color directly: 我相信这会给你带来更好的性能+如果你能想出一些计算每个角度偏移的颜色的自动方法,你可以直接设置十六进制颜色:

for ( var i = 0; i < tube.faces.length; i ++ ) {

    tube.faces[ i ].color.setHex( Math.random() * 0xffffff );

}

As I explained to you in the previous message - three.js - text next to line , using canvas textures will only increase load to you fps if you'll attempt to render so many faces. 正如我在上一条消息中解释的那样 - three.js - 文本旁边的文字 ,如果你试图渲染这么多面孔,使用画布纹理只会增加你fps的负荷。

If you really want to render 24,000 faces on canvas renderer and still hope that it gonna show up good on an iPad – you are out of your mind!)) 如果你真的想在画布渲染器上渲染24,000个面孔并且仍然希望它能在iPad上显示出来 - 那么你就不在乎了!))

Here is the only solution that I can think of for now: 这是我现在能想到的唯一解决方案:

1) Set your tube to only 1 segment. 1)将您的管设置为仅1段。

2) Create 12 canvas elements (for every radius segment) with Width equal to your tube length (see my link above). 2)创建12个画布元素(对于每个半径段),宽度等于管长度(参见上面的链接)。

3) Now imagine that your 2000 segments you are going to create inside of each canvas. 3)现在想象一下你要在每个画布内创建的2000个片段。 So, you divide your canvas length by 2000 and for every one of the portion of this division you set your calculated color!!! 因此,您将画布长度除以2000,并为此分区的每个部分设置您计算的颜色! (Just like the Stats() FPS bar shows it's bar, but you are going to have each bar different color). (就像Stats()FPS栏显示它的栏一样,但你会得到每个栏不同的颜色)。

4) Then you just apply your colored-bars-canvas-texture to each one of your 12 radius segments and you are good to go!! 4)然后你只需将你的彩色条纹帆布纹理应用到你的12个半径段中的每一个,你就可以去!

This way you'll only get initial page load (calculating 'em 24,000 colored-bars) and YOUR WHOLE TUBE ONLY GONNA BE 12 FACES!!! 这样你只能获得初始页面加载(计算'24,000个彩色条)和你的整个管只有GONNA 12个面!

Now, I know your next question is going to be: How I'll pick my faces to show my lines with tag text? 现在,我知道你的下一个问题是:我将如何选择我的面孔以显示带有标签文字的线条?

Well, very simple! 好吧,很简单! Just take current face (1 of 12) pick position coordinates and translate them back to your JSON, just the same way you would do with 24,000 faces;) 只需取当前面(12个中的1个)选择位置坐标并将它们转换回您的JSON,就像使用24,000个面部一样;)

Hope that helps! 希望有所帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM