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