如何創建一個TreeMap WebGL

我想你使用webGL創建一個樹形圖，我似乎失去了arrrays之間，我無法弄清楚什麼是錯的。我也不知道如何將名稱寫入畫布。 P.S.每當我使用行context.fillText（obj2 [i] [2]，寬度，高度）;在第二個for循環中，整個畫布不顯示。如何創建一個TreeMap WebGL

 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; 
    }

來源

2014-01-21 user3124149

數組包含[節點名稱，節點父節點，子節點數] – user3124149

WebGL沒有fillText函數。

當您撥打canvas.getContext時，您可以選擇2個API中的一個。 "2d"或"experimental-webgl"。一旦你選擇一個畫布只能使用該API而不是另一個。

對於WebGL，沒有文本功能。您可以通過以下方法

製作紋理填充文本的一個寫你自己的（使用另一個屏幕外的畫布與2D API繪製文本，然後將結果複製到WebGL的紋理texImage2D）。然後渲染四邊形以顯示這些紋理。
製作字體紋理會將所有字體字符。然後爲設置了UV的每個角色繪製一個多邊形，以從您的字體紋理中選擇一個字符。
創建文本網格。

否則，如果您不需要文本Z緩存/排序與3D場景，您可以使用以下方法之一：

讓2個畫布，重疊它們與CSS，讓後面的人使用WebGL API，並讓前面的人有一個2D API。做正確的數學運算可以在2D畫布中繪製文本以匹配WebGL畫布中的3D。
使用WebGL製作1個畫布，併爲您的文本製作一堆div。使用CSS，您可以使div出現在畫布上方並將它們放在需要的位置。

來源

2014-01-22 04:27:52 gman

的HTML畫布支持兩種不同的API：

「2D」：該位圖一個
「webgl的」：在硬件加速的一個

提供了任一個這些參數getContext()返回相應的上下文。這兩個上下文實現不同的API，您既不能混合調用（在webgl上下文中調用諸如fillText()的2D函數），也不能同時顯示兩個繪圖上下文。

你已經偶然發現了WebGL的主要失望者（至少對於我的用例） - 沒有文字支持。使用紋理（如Pixie庫中所做的）或三角化（如在three.js中完成）。

來源

2014-01-21 11:11:21 virtualnobi

如何創建一個TreeMap WebGL

回答

相關問題