diff --git a/addons/xterm-addon-webgl/src/GlyphRenderer.ts b/addons/xterm-addon-webgl/src/GlyphRenderer.ts index 6c8df65c68..5d3fb9ac73 100644 --- a/addons/xterm-addon-webgl/src/GlyphRenderer.ts +++ b/addons/xterm-addon-webgl/src/GlyphRenderer.ts @@ -130,7 +130,7 @@ export class GlyphRenderer extends Disposable { gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0); // Setup the unit quad element array buffer, this points to indices in - // unitQuadVertuces to allow is to draw 2 triangles from the vertices + // unitQuadVertices to allow is to draw 2 triangles from the vertices const unitQuadElementIndices = new Uint8Array([0, 1, 3, 0, 2, 3]); const elementIndicesBuffer = gl.createBuffer(); this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer))); diff --git a/addons/xterm-addon-webgl/src/RectangleRenderer.ts b/addons/xterm-addon-webgl/src/RectangleRenderer.ts index acaea56a7d..ef08fb7c2c 100644 --- a/addons/xterm-addon-webgl/src/RectangleRenderer.ts +++ b/addons/xterm-addon-webgl/src/RectangleRenderer.ts @@ -28,12 +28,11 @@ layout (location = ${VertexAttribLocations.COLOR}) in vec4 a_color; layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad; uniform mat4 u_projection; -uniform vec2 u_resolution; out vec4 v_color; void main() { - vec2 zeroToOne = (a_position + (a_unitquad * a_size)) / u_resolution; + vec2 zeroToOne = a_position + (a_unitquad * a_size); gl_Position = u_projection * vec4(zeroToOne, 0.0, 1.0); v_color = a_color; }`; @@ -75,7 +74,6 @@ export class RectangleRenderer extends Disposable { private _program: WebGLProgram; private _vertexArrayObject: IWebGLVertexArrayObject; - private _resolutionLocation: WebGLUniformLocation; private _attributesBuffer: WebGLBuffer; private _projectionLocation: WebGLUniformLocation; private _bgFloat!: Float32Array; @@ -99,7 +97,6 @@ export class RectangleRenderer extends Disposable { this.register(toDisposable(() => gl.deleteProgram(this._program))); // Uniform locations - this._resolutionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_resolution')); this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection')); // Create and set the vertex array object @@ -116,7 +113,7 @@ export class RectangleRenderer extends Disposable { gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0); // Setup the unit quad element array buffer, this points to indices in - // unitQuadVertuces to allow is to draw 2 triangles from the vertices + // unitQuadVertices to allow is to draw 2 triangles from the vertices const unitQuadElementIndices = new Uint8Array([0, 1, 3, 0, 2, 3]); const elementIndicesBuffer = gl.createBuffer(); this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer))); @@ -148,7 +145,6 @@ export class RectangleRenderer extends Disposable { gl.bindVertexArray(this._vertexArrayObject); gl.uniformMatrix4fv(this._projectionLocation, false, PROJECTION_MATRIX); - gl.uniform2f(this._resolutionLocation, gl.canvas.width, gl.canvas.height); // Bind attributes buffer and draw gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer); @@ -165,6 +161,10 @@ export class RectangleRenderer extends Disposable { this._updateViewportRectangle(); } + public setDimensions(dimensions: IRenderDimensions): void { + this._dimensions = dimensions; + } + private _updateCachedColors(): void { this._bgFloat = this._colorToFloat32Array(this._colors.background); } @@ -276,10 +276,10 @@ export class RectangleRenderer extends Disposable { } private _addRectangle(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, r: number, g: number, b: number, a: number): void { - array[offset ] = x1; - array[offset + 1] = y1; - array[offset + 2] = width; - array[offset + 3] = height; + array[offset ] = x1 / this._dimensions.scaledCanvasWidth; + array[offset + 1] = y1 / this._dimensions.scaledCanvasHeight; + array[offset + 2] = width / this._dimensions.scaledCanvasWidth; + array[offset + 3] = height / this._dimensions.scaledCanvasHeight; array[offset + 4] = r; array[offset + 5] = g; array[offset + 6] = b; @@ -287,10 +287,10 @@ export class RectangleRenderer extends Disposable { } private _addRectangleFloat(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, color: Float32Array): void { - array[offset ] = x1; - array[offset + 1] = y1; - array[offset + 2] = width; - array[offset + 3] = height; + array[offset ] = x1 / this._dimensions.scaledCanvasWidth; + array[offset + 1] = y1 / this._dimensions.scaledCanvasHeight; + array[offset + 2] = width / this._dimensions.scaledCanvasWidth; + array[offset + 3] = height / this._dimensions.scaledCanvasHeight; array[offset + 4] = color[0]; array[offset + 5] = color[1]; array[offset + 6] = color[2]; diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index 81817a80b2..43de1c98b2 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -182,6 +182,7 @@ export class WebglRenderer extends Disposable implements IRenderer { this._core.screenElement!.style.width = `${this.dimensions.canvasWidth}px`; this._core.screenElement!.style.height = `${this.dimensions.canvasHeight}px`; + this._rectangleRenderer.setDimensions(this.dimensions); this._rectangleRenderer.onResize(); this._glyphRenderer.setDimensions(this.dimensions); this._glyphRenderer.onResize(); @@ -622,11 +623,11 @@ export class WebglRenderer extends Disposable implements IRenderer { } private _setCanvasDevicePixelDimensions(width: number, height: number): void { - if (this.dimensions.scaledCanvasWidth === width && this.dimensions.scaledCanvasHeight === height) { + if (this._canvas.width === width && this._canvas.height === height) { return; } - this.dimensions.scaledCanvasWidth = width; - this.dimensions.scaledCanvasHeight = height; + // While the actual canvas size has changed, keep scaledCanvasWidth/Height as the value before + // the change as it's an exact multiple of the cell sizes. this._canvas.width = width; this._canvas.height = height; this._requestRedrawViewport();