Как создать TreeMap WebGL

Question

Я пытаюсь создать treemap с помощью webGL, я, кажется, потерялся между сундуками, и я не могу понять, что не так. Я также не знаю, как записать имена на холст. P.S. всякий раз, когда я использую строку context.fillText (obj2 [i] [2], ширина, высота); внутри второго цикла, весь холст не отображается.

 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 не имеет функции fillText.

Когда вы позвоните по номеру canvas.getContext, вы можете выбрать один из 2 API. "2d" или "experimental-webgl". Когда вы выбираете тот, который может использовать только этот API, а не другой.

Для WebGL нет текстовых функций. Вы должны написать свой собственный одним из следующих способов

1. Сделать текстуры, заполненные текстом (используйте другой закадровый холст с 2D API для рисования текста в и затем скопировать результат в WebGL текстуры с texImage2D). Затем отрисуйте квадратики для отображения этих текстур.

2. Сделать шрифтную текстуру будут все символы шрифта. Затем нарисуйте многоугольник для каждого символа с установленными UVs, чтобы выбрать один символ из вашей текстуры шрифта.

3. Создание сетки текста.

В противном случае, если вам не нужен текст в г-буфер/сортировать с 3D сцены, которую вы можете использовать один из этих методов:

1. Сделать 2 холсты, перекрывание их с помощью CSS, сделайте обратную, используйте API WebGL и сделайте переднюю панель 2D API. Выполняя правильную математику, вы можете нарисовать текст в 2D-холсте в соответствии с 3D в холсте WebGL.

2. Сделайте 1 полотно с WebGL и кучей divs для вашего текста. Используя CSS, вы можете сделать divs выше над холстом и поместить их там, где хотите.

Answer 2

HTML, холст поддерживает два различных API:

• "2d": к растровая один
• "WebGL": аппаратно-ускоренный один

Предоставление ни один из эти параметры до getContext() возвращают соответствующий контекст. Эти два контекста реализуют разные API, и вы не можете смешивать вызовы (вызывая функцию 2D, например fillText(), в контексте webgl), и вы не можете одновременно отображать оба контекста рисования.

Вы наткнулись на главный скрыватель WebGL (по крайней мере, для моих случаев использования) - без текстовой поддержки. Либо используйте текстуры (как это сделано в библиотеке Pixie), либо триангулирование (как это сделано в файле three.js).