B2G/gecko/browser/devtools/tilt/TiltVisualizer.jsm
/**
   * Create the combined mesh representing the document visualization by
   * traversing the document & adding a stack for each node that is drawable.
   *
   * @param {Object} aMeshData
   *                 object containing the necessary mesh verts, texcoord etc.
   */
Create the combined mesh representing the document visualization by
traversing the document & adding a stack for each node that is drawable.

@param {Object} aMeshData
object containing the necessary mesh verts, texcoord etc.
Create the combined mesh representing the document visualization by traversing the document & adding a stack for each node that is drawable . @param { Object } aMeshData object containing the necessary mesh verts texcoord etc .
function TVP__setupMesh(aMeshData)
  {
    let renderer = this._renderer;
    TiltUtils.destroyObject(this._meshStacks); this._meshStacks = [];
    TiltUtils.destroyObject(this._meshWireframe); this._meshWireframe = [];
    if (!renderer || !renderer.context) {
      return;
    }
    this._meshData = aMeshData;
    for (let i = 0, len = aMeshData.groups.length; i < len; i++) {
      let group = aMeshData.groups[i];
      this._meshStacks.push({
        vertices: new renderer.VertexBuffer(group.vertices, 3),
        texCoord: new renderer.VertexBuffer(group.texCoord, 2),
        color: new renderer.VertexBuffer(group.color, 3),
        indices: new renderer.IndexBuffer(group.stacksIndices)
      });
      this._meshWireframe.push({
        vertices: this._meshStacks[i].vertices,
        indices: new renderer.IndexBuffer(group.wireframeIndices)
      });
    }
    if (!this._initialSelection) {
      this._initialSelection = true;
      this.highlightNode(this.chromeWindow.InspectorUI.selection);
      if (this._currentSelection === 0) { 
        this._highlight.disabled = true;
      }
    }
    if (!this._initialMeshConfiguration) {
      this._initialMeshConfiguration = true;
      this.transforms.offset[0] = -renderer.width * 0.5;
      this.transforms.offset[1] = -renderer.height * 0.5;
      this.canvas.style.background = TiltVisualizerStyle.canvas.background;
      this._drawVisualization();
      this._redraw = true;
    }
    if ("function" === typeof this._onSetupMesh) {
      this._onSetupMesh();
      this._onSetupMesh = null;
    }
  }
function TVP__setupMesh ( aMeshData ) { let renderer = this . _renderer ; TiltUtils . destroyObject ( this . _meshStacks ) ; this . _meshStacks = [ ] ; TiltUtils . destroyObject ( this . _meshWireframe ) ; this . _meshWireframe = [ ] ; if ( ! renderer || ! renderer . context ) { return ; } this . _meshData = aMeshData ; for ( let i = 0 , len = aMeshData . groups . length ; i < len ; i ++ ) { let group = aMeshData . groups [ i ] ; this . _meshStacks . push ( { vertices : new renderer . VertexBuffer ( group . vertices , 3 ) , texCoord : new renderer . VertexBuffer ( group . texCoord , 2 ) , color : new renderer . VertexBuffer ( group . color , 3 ) , indices : new renderer . IndexBuffer ( group . stacksIndices ) } ) ; this . _meshWireframe . push ( { vertices : this . _meshStacks [ i ] . vertices , indices : new renderer . IndexBuffer ( group . wireframeIndices ) } ) ; } if ( ! this . _initialSelection ) { this . _initialSelection = true ; this . highlightNode ( this . chromeWindow . InspectorUI . selection ) ; if ( this . _currentSelection === 0 ) { this . _highlight . disabled = true ; } } if ( ! this . _initialMeshConfiguration ) { this . _initialMeshConfiguration = true ; this . transforms . offset [ 0 ] = - renderer . width * 0.5 ; this . transforms . offset [ 1 ] = - renderer . height * 0.5 ; this . canvas . style . background = TiltVisualizerStyle . canvas . background ; this . _drawVisualization ( ) ; this . _redraw = true ; } if ( "function" === typeof this . _onSetupMesh ) { this . _onSetupMesh ( ) ; this . _onSetupMesh = null ; } }
Create the combined mesh representing the document visualization by
 traversing the document & adding a stack for each node that is drawable.
Create the combined mesh representing the document visualization by traversing the document & adding a stack for each node that is drawable .
// destroy any previously created mesh // if the renderer was destroyed, don't continue setup // save the mesh data for future use // create a sub-mesh for each group in the mesh data // create the visualization mesh using the vertices, texture coordinates // and indices computed when traversing the document object model // additionally, create a wireframe representation to make the // visualization a bit more pretty // if there's no initial selection made, highlight the required node // if the "html" node is selected // configure the required mesh transformations and background only once // set the necessary mesh offsets // make sure the canvas is opaque now that the initialization is finished