Question

我正在尝试使用webGL创建一个树形图，我似乎迷失在arrrays之间，我无法弄清楚出了什么问题。我也不知道如何将名字写入画布。附：每当我使用行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;
    }

Answer 1

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

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

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

你偶然发现了WebGL的主要失望（至少在我的用例中） - 没有文本支持。使用纹理（如在Pixie库中完成）或三角化（在three.js中完成）。

Answer 2

WebGL没有fillText功能。

当您致电canvas.getContext时，您可以选择2个API中的一个。 "2d"或"experimental-webgl"。一旦你选择了一个画布只能使用该API而不是另一个。

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

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

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

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

如何创建TreeMap WebGL

2 个答案: