public render()

in web/src/app/timeline/canvas/timeline_gl_row_renderer.ts [283:460]


  public render(
    canvasPixelRatio: number,
    rect: GLRect,
    timelineSelected: boolean,
    timelineHighlighted: boolean,
    timelineHighightedByParent: boolean,
  ) {
    this.ignoreGLContextLostException(() => {
      const gl = this.gl;
      const timelineHeight =
        TIMELINE_ITEM_HEIGHTS[this.timeline.layer] * canvasPixelRatio;

      // clear buffer
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(rect.left, rect.bottom, rect.width, rect.height);
      gl.clearColor(
        ...this.getBackgroundFillColor(
          this.timeline.layer,
          timelineSelected,
          timelineHighlighted,
          timelineHighightedByParent,
        ),
      );
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
      gl.viewport(rect.left, rect.bottom, rect.width, rect.height);
      gl.enable(gl.BLEND);
      gl.disable(gl.DEPTH_TEST);
      gl.depthMask(false);

      // Draw border lines
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
      gl.useProgram(this.sharedResources.borderShaderProgram);
      gl.bindVertexArray(this.sharedResources.vaoRectangle);
      gl.bindBufferBase(
        gl.UNIFORM_BUFFER,
        0,
        this.sharedResources.uboViewState,
      );
      gl.uniform1f(
        gl.getUniformLocation(
          this.sharedResources.borderShaderProgram,
          'timelineHeight',
        ),
        timelineHeight,
      );
      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0);

      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

      // Draw revision rectangles
      const TIME_BUFFER_LOCATION = 1;
      const META_BUFFER_LOCATION = 2;
      const REVISION_INDEX_BUFFER_LOCATION = 3;
      gl.useProgram(this.sharedResources.revisionShaderProgram);
      gl.bindVertexArray(this.sharedResources.vaoRectangle);

      gl.bindBuffer(gl.ARRAY_BUFFER, this.revisionTimeBuffer);
      gl.enableVertexAttribArray(TIME_BUFFER_LOCATION);
      gl.vertexAttribPointer(TIME_BUFFER_LOCATION, 2, gl.FLOAT, false, 0, 0);
      gl.vertexAttribDivisor(TIME_BUFFER_LOCATION, 1);

      gl.bindBuffer(gl.ARRAY_BUFFER, this.revisionMetaBuffer);
      gl.enableVertexAttribArray(META_BUFFER_LOCATION);
      gl.vertexAttribPointer(META_BUFFER_LOCATION, 2, gl.FLOAT, false, 0, 0);
      gl.vertexAttribDivisor(META_BUFFER_LOCATION, 1);

      gl.bindBuffer(gl.ARRAY_BUFFER, this.revisionIntMetaBuffer);
      gl.enableVertexAttribArray(REVISION_INDEX_BUFFER_LOCATION);
      gl.vertexAttribIPointer(REVISION_INDEX_BUFFER_LOCATION, 2, gl.INT, 0, 0);
      gl.vertexAttribDivisor(REVISION_INDEX_BUFFER_LOCATION, 1);

      gl.uniform1i(
        gl.getUniformLocation(
          this.sharedResources.revisionShaderProgram,
          'numberTexture',
        ),
        0,
      );
      gl.uniform1i(
        gl.getUniformLocation(
          this.sharedResources.revisionShaderProgram,
          'revisionColorPalette',
        ),
        2,
      );
      gl.uniform1f(
        gl.getUniformLocation(
          this.sharedResources.revisionShaderProgram,
          'revisionStateCount',
        ),
        revisionStates.length,
      );
      gl.uniform1f(
        gl.getUniformLocation(
          this.sharedResources.revisionShaderProgram,
          'timelineHeight',
        ),
        timelineHeight,
      );
      gl.uniform1f(
        gl.getUniformLocation(
          this.sharedResources.revisionShaderProgram,
          'devicePixelRatio',
        ),
        window.devicePixelRatio,
      );

      gl.bindBufferBase(
        gl.UNIFORM_BUFFER,
        0,
        this.sharedResources.uboViewState,
      );

      gl.drawElementsInstanced(
        gl.TRIANGLES,
        6,
        gl.UNSIGNED_BYTE,
        0,
        this.timeline.revisions.length,
      );
      gl.bindVertexArray(null);

      // Draw event rectangles
      gl.enable(gl.DEPTH_TEST);
      gl.depthMask(true);
      const EVENT_BUFFER_LOCATION = 1;
      const EVENT_META_BUFFER_LOCATION = 2;
      gl.useProgram(this.sharedResources.eventShaderProgram);
      gl.bindVertexArray(this.sharedResources.vaoRectangle);

      gl.bindBuffer(gl.ARRAY_BUFFER, this.eventBuffer);
      gl.enableVertexAttribArray(EVENT_BUFFER_LOCATION);
      gl.vertexAttribPointer(EVENT_BUFFER_LOCATION, 3, gl.FLOAT, false, 0, 0);
      gl.vertexAttribDivisor(EVENT_BUFFER_LOCATION, 1);

      gl.bindBuffer(gl.ARRAY_BUFFER, this.eventIntMetaBuffer);
      gl.enableVertexAttribArray(EVENT_META_BUFFER_LOCATION);
      gl.vertexAttribIPointer(EVENT_META_BUFFER_LOCATION, 1, gl.INT, 0, 0);
      gl.vertexAttribDivisor(EVENT_META_BUFFER_LOCATION, 1);

      gl.uniform1i(
        gl.getUniformLocation(
          this.sharedResources.eventShaderProgram,
          'colorPaletteTexture',
        ),
        1,
      );
      gl.uniform1i(
        gl.getUniformLocation(
          this.sharedResources.eventShaderProgram,
          'logSeverityColorPaletteTexture',
        ),
        3,
      );
      gl.uniform1f(
        gl.getUniformLocation(
          this.sharedResources.eventShaderProgram,
          'timelineHeight',
        ),
        timelineHeight,
      );

      gl.bindBufferBase(
        gl.UNIFORM_BUFFER,
        0,
        this.sharedResources.uboViewState,
      );

      gl.drawElementsInstanced(
        gl.TRIANGLES,
        6,
        gl.UNSIGNED_BYTE,
        0,
        this.timeline.events.length,
      );
      gl.bindVertexArray(null);
    });
  }