javascript - three.js - 用于 ipad 的管几何结构上的 Canvas 纹理

Question

我有一个管几何体的 3d 模型。生产端有18000个坐标。我每 9 个坐标取一次，以便实际绘制 9000 个坐标来构建管几何结构。我必须只使用 CanvasRenderer。

现在，当我在 WebGLRenderer 中使用 vertexColors: THREE.VertexColors 时，模型会在每个面上显示不同的颜色。当我将其更改为 CanvasRenderer 时，模型仅变为白色。即使我更改了 vertexColors: THREE.FaceColors，结果也是一样的。

请在下面找到 jsfiddle 的链接和我之前的链接，其中 mrdoob 向 CanvasRenderer 添加了对 material.vertexColors = THREE.FaceColors 的支持。

support for vertex color in canvas rendering

tube in canvas rendering

请在图像下方找到根据值应用颜色的方法。

如图所示，每个坐标有 12 个不同 Angular 12 个值。所以我创建了一个半径段为 12 的管。然后我将这些值存储到 JSON 文件中，但是由于有 18000 个点，文件变得很重。即使我正在绘制 2000 点，也需要太多时间。对于 2000 个段，每个段有 12 个面，一个 pipe 上有 24000 个面。

请在下面找到根据参数值应用颜色的编程逻辑。

//获取资源值并应用颜色 变量 lblSeg=0；变量 pntId；变量d=0； var faceLength=tube.faces.length; var degrees = [ '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330' ]; var faces = tube.faces; var degreeCntr=0; var degreeProp; //控制台日志(面孔)； var res30=0,res60=0,res90=0,res120=0,res150=0,res180=0,res210=0,res240=0,res270=0,res300=0,res330=0; 可变资源； var resDegree; 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++;                  
            }
        }

此逻辑需要太多时间来渲染模型，并且模型变得太重，我们无法执行其他操作。 android 上的 FPS 下降到 2-3 FPS。实际上我必须在 iPad 上渲染这个模型，所以只能使用 Canvas 渲染器。

那么，我该如何让这个模型在 iPad 上加载更轻并顺畅运行呢？还有其他方法可以在每张脸上涂上颜色吗？如果可以应用 Canvas 贴图作为纹理来使模型更轻，我如何使用基于值的所有颜色构建该贴图？

更新: 将库版本更改为 r53 后，vertexColors: THREE.FaceColors 和 face.color.setRGB( Math.random(), Math.random(), Math.random())，模型在 Canvas 渲染上为每个面显示随机颜色。

所以现在的问题是根据要求(通过 Canvas 贴图或任何可行的解决方案)应用颜色，并使模型更轻，以便在 iPad 上顺利加载它。

Answer 1

我相信这会给你带来更好的性能 + 如果你能想出一些自动计算每个 Angular 偏移的颜色的方法，你可以直接设置十六进制颜色:

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

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

}

正如我在之前的消息中向您解释的那样 - three.js - text next to line ，如果您尝试渲染如此多的面孔，则使用 Canvas 纹理只会增加 fps 的负载。

如果你真的想在 canvas 渲染器上渲染 24,000 张脸，并且仍然希望它在 iPad 上显示良好——你疯了!))

这是我目前唯一能想到的解决方案:

1) 将您的试管设置为仅 1 段。

2) 创建 12 个 Canvas 元素(对于每个半径段)，宽度等于您的管长度(参见我上面的链接)。

3) 现在假设您要在每个 Canvas 内创建 2000 个片段。因此，您将 Canvas 长度除以 2000，并为该除法的每个部分设置计算颜色!!! (就像 Stats() FPS 条显示它是条一样，但您要为每个条设置不同的颜色)。

4) 然后你只需将你的彩色条形 Canvas 纹理应用到你的 12 个半径段中的每一个，你就可以开始了!!

这样你只会得到初始页面加载(计算它们 24,000 个彩色条)并且你的整个 pipe 只有 12 个面孔!!!

现在，我知道你的下一个问题将是:我如何选择我的脸来显示带有标签文本的台词？

嗯，很简单!只需获取当前面孔(12 张中的 1 张)选择位置坐标并将它们转换回您的 JSON，就像您处理 24,000 张面孔一样；)

希望对您有所帮助!