How to Create a TreeMap WebGL

Question

I am trying yo create a treemap using webGL, I seem to be lost in between arrrays and I can't figure out what is wrong. I also don't know how to write the names to the canvas. P.S. whenever I use the line context.fillText(obj2[i][2], width, height); inside the second for loop, the entire canvas does not get displayed.

      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

WebGL has no fillText function.

When you call canvas.getContext you can choose one of 2 APIs. "2d" or "experimental-webgl". Once you pick one that canvas can only use that API and not the other.

For WebGL there are no text functions. You have to write your own by one of the following methods

1. Make textures filled with text (use another offscreen canvas with a 2D API to draw text into and then copy the result into a WebGL texture with texImage2D). Then render quads to show those textures.

2. Make a font texture will all the font characters. Then draw a polygon for each character with the UVs set to select one character from your font texture.

3. Create meshes of text.

Otherwise if you don't need the text to z-buffer/sort with the 3D scene you can use one of these methods:

1. Make 2 canvases, overlap them with CSS, make the back one use the WebGL API and make the front one have a 2D API. Doing the correct math you can draw the text in the 2D canvas to match the 3D in the WebGL canvas.

2. Make 1 canvas with WebGL and a bunch of divs for your text. Using CSS you can make the divs appear above the canvas and position them where want.

Answer 2

The HTML canvas supports two different APIs:

• "2d": the bitmapped one
• "webgl": the hardware-accelerated one

Providing either one of these parameters to getContext() returns the respective context. These two contexts implement different APIs, and you can neither mix calls (calling a 2D function like fillText() on a webgl context) nor can you show both drawing contexts at once.

You've stumbled across the main disappointer of WebGL (at least for my use cases) - no text support. Either use textures (as done in the Pixie library) or triangulization (as done in three.js).