如何创建 TreeMap WebGL答案

【问题标题】：How to Create a TreeMap WebGL如何创建 TreeMap WebGL
【发布时间】：2014-01-21 02:33:31
【问题描述】：

我正在尝试使用 webGL 创建树形图，我似乎迷失在数组之间，我不知道出了什么问题。我也不知道如何将名称写入画布。附：每当我使用行 context.fillText(obj2[i][2], width, height);在第二个 for 循环中，不会显示整个画布。

      function initBuffers() {          
        var canvas = document.getElementById("webgl_canvas");
        var context = canvas.getContext("2d");
        var y = [];
        var canvas = document.getElementById("webgl_canvas");
        var canvas_area = canvas.width*canvas.height;
        var obj = ([["Root", "Null", 2],
                    ["Mohab", "Root", 0],
                    ["Tarek", "Root", 3],
                    ["Hany", "Tarek", 0],
                    ["Halim", "Tarek", 2],
                    ["Mahdy", "Tarek", 0],
                    ["Aly", "Halim", 1],
                    ["Osama", "Halim", 0],
                    ["Khaled", "Aly", 0]]);
        var obj2 = obj;
        for(var i=0; i<obj.length; i++){
                obj2[i][0] = obj[i][0];
                obj2[i][1] = obj[i][1];
                obj2[i][2] = parseInt(obj[i][2], 10);
        }
        var width = canvas.width;
        var height = canvas.height;
        //alert(canvas.length/obj[i][2]);
        for(var i=0; i<obj2.length; i++){
            for(var j=0; j<obj2[i][2]; j++){
                    if(width>=height){
                        y.push(width/obj2[i][2]);
                        y.push(0);
                        y.push(0);
                        y.push(width/obj2[i][2]);
                        y.push(height);
                        y.push(0);
                        width = width/obj[i][2];
                        }
                    else{
                        y.push(0);
                        y.push(height/obj2[i][2]);
                        y.push(0);

                        y.push(width);
                        y.push(height/obj2[i][2]);
                        y.push(0);
                        height = height/obj[i][2];
                    }
            }
        }
        alert(y);

        pointsBuffer1 = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer1);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(y), gl.STATIC_DRAW);

        pointsBuffer1.itemSize = 3;
        pointsBuffer1.numItems = y.length/3;
    }

【问题讨论】：

数组包含[节点名称，节点父节点，子节点数]

标签： javascript text canvas webgl

【解决方案1】：

WebGL 没有fillText 函数。

当您调用 canvas.getContext 时，您可以选择 2 个 API 之一。 "2d" 或 "experimental-webgl"。一旦你选择了一个，canvas 就只能使用那个 API 而不能使用另一个。

对于 WebGL，没有文本功能。您必须通过以下方法之一编写自己的

使用文本填充纹理（使用另一个带有 2D API 的屏幕外画布将文本绘制到其中，然后使用 texImage2D 将结果复制到 WebGL 纹理中）。然后渲染四边形以显示这些纹理。
制作字体纹理将所有字体字符。然后为每个字符绘制一个多边形，设置 UV 以从字体纹理中选择一个字符。
创建文本网格。

否则，如果您不需要将文本与 3D 场景一起进行 z 缓冲/排序，则可以使用以下方法之一：

制作 2 个画布，将它们与 CSS 重叠，使后面的使用 WebGL API，使前面的具有 2D API。通过正确的数学运算，您可以在 2D 画布中绘制文本以匹配 WebGL 画布中的 3D。
使用 WebGL 和一堆 div 为您的文本制作 1 个画布。使用 CSS，您可以使 div 出现在画布上方并将它们放置在需要的位置。

【讨论】：

【解决方案2】：

HTML 画布支持两种不同的 API：

“2d”：位图的一个
“webgl”：硬件加速的

将这些参数之一提供给getContext() 会返回相应的上下文。这两个上下文实现了不同的 API，您既不能混合调用（在 webgl 上下文中调用像 fillText() 这样的 2D 函数），也不能同时显示两个绘图上下文。

您偶然发现了 WebGL 的主要令人失望的地方（至少对于我的用例而言）——不支持文本。使用纹理（如在 Pixie 库中所做的那样）或三角化（如在 three.js 中所做的那样）。

【讨论】：