Skip to content

Commit a3321a6

Browse files
LabhanshAgrawalLabhanshAgrawal
committed
webgl
1 parent 2d2db01 commit a3321a6

File tree

3 files changed

+46
-40
lines changed

3 files changed

+46
-40
lines changed

‎addons/xterm-addon-webgl/src/GlyphRenderer.ts‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const CELL_POSITION_INDICES = 2;
8484

8585
// Work variables to avoid garbage collection
8686
let $i = 0;
87+
let $j = 0;
8788
let $glyph: IRasterizedGlyph | undefined = undefined;
8889
let $glyphs: IRasterizedGlyph[] | undefined = undefined;
8990
let $leftCellPadding = 0;
@@ -241,40 +242,44 @@ export class GlyphRenderer extends Disposable {
241242
} else {
242243
$glyphs = this._atlas.getRasterizedGlyph(code, bg, fg, ext);
243244
}
244-
$glyph = $glyphs[0];
245-
246-
$leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);
247-
if (bg !== lastBg && $glyph.offset.x > $leftCellPadding) {
248-
$clippedPixels = $glyph.offset.x - $leftCellPadding;
249-
// a_origin
250-
array[$i ] = -($glyph.offset.x - $clippedPixels) + this._dimensions.device.char.left;
251-
array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
252-
// a_size
253-
array[$i + 2] = ($glyph.size.x - $clippedPixels) / this._dimensions.device.canvas.width;
254-
array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
255-
// a_texpage
256-
array[$i + 4] = $glyph.texturePage;
257-
// a_texcoord
258-
array[$i + 5] = $glyph.texturePositionClipSpace.x + $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
259-
array[$i + 6] = $glyph.texturePositionClipSpace.y;
260-
// a_texsize
261-
array[$i + 7] = $glyph.sizeClipSpace.x - $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
262-
array[$i + 8] = $glyph.sizeClipSpace.y;
263-
} else {
264-
// a_origin
265-
array[$i ] = -$glyph.offset.x + this._dimensions.device.char.left;
266-
array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
267-
// a_size
268-
array[$i + 2] = $glyph.size.x / this._dimensions.device.canvas.width;
269-
array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
270-
// a_texpage
271-
array[$i + 4] = $glyph.texturePage;
272-
// a_texcoord
273-
array[$i + 5] = $glyph.texturePositionClipSpace.x;
274-
array[$i + 6] = $glyph.texturePositionClipSpace.y;
275-
// a_texsize
276-
array[$i + 7] = $glyph.sizeClipSpace.x;
277-
array[$i + 8] = $glyph.sizeClipSpace.y;
245+
246+
for ($j = 0; $j < $glyphs.length; $j++) {
247+
$i = (y * this._terminal.cols + x + $j) * INDICES_PER_CELL;
248+
$glyph = $glyphs[$j];
249+
250+
$leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);
251+
if (bg !== lastBg && $glyph.offset.x > $leftCellPadding) {
252+
$clippedPixels = $glyph.offset.x - $leftCellPadding;
253+
// a_origin
254+
array[$i ] = -($glyph.offset.x - $clippedPixels) + this._dimensions.device.char.left;
255+
array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
256+
// a_size
257+
array[$i + 2] = ($glyph.size.x - $clippedPixels) / this._dimensions.device.canvas.width;
258+
array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
259+
// a_texpage
260+
array[$i + 4] = $glyph.texturePage;
261+
// a_texcoord
262+
array[$i + 5] = $glyph.texturePositionClipSpace.x + $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
263+
array[$i + 6] = $glyph.texturePositionClipSpace.y;
264+
// a_texsize
265+
array[$i + 7] = $glyph.sizeClipSpace.x - $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
266+
array[$i + 8] = $glyph.sizeClipSpace.y;
267+
} else {
268+
// a_origin
269+
array[$i ] = -$glyph.offset.x + this._dimensions.device.char.left;
270+
array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
271+
// a_size
272+
array[$i + 2] = $glyph.size.x / this._dimensions.device.canvas.width;
273+
array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
274+
// a_texpage
275+
array[$i + 4] = $glyph.texturePage;
276+
// a_texcoord
277+
array[$i + 5] = $glyph.texturePositionClipSpace.x;
278+
array[$i + 6] = $glyph.texturePositionClipSpace.y;
279+
// a_texsize
280+
array[$i + 7] = $glyph.sizeClipSpace.x;
281+
array[$i + 8] = $glyph.sizeClipSpace.y;
282+
}
278283
}
279284
// a_cellpos only changes on resize
280285
}

‎addons/xterm-addon-webgl/src/WebglRenderer.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
366366
let i: number;
367367
let x: number;
368368
let j: number;
369+
let k: number;
369370
start = clamp(start, terminal.rows - 1, 0);
370371
end = clamp(end, terminal.rows - 1, 0);
371372
for (y = start; y <= end; y++) {
@@ -434,22 +435,22 @@ export class WebglRenderer extends Disposable implements IRenderer {
434435
this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
435436
this._model.cells[i + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
436437

437-
this._glyphRenderer!.updateCell(x, y, code, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, chars, lastBg);
438-
439438
if (isJoined) {
440439
// Restore work cell
441440
cell = this._workCell;
442441

443442
// Null out non-first cells
444-
for (x++; x < lastCharX; x++) {
445-
j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
446-
this._glyphRenderer!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0);
443+
for (k = x + 1; k < lastCharX; k++) {
444+
j = ((y * terminal.cols) + k) * RENDER_MODEL_INDICIES_PER_CELL;
445+
this._glyphRenderer!.updateCell(k, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0);
447446
this._model.cells[j] = NULL_CELL_CODE;
448447
this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
449448
this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
450449
this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
451450
}
452451
}
452+
this._glyphRenderer!.updateCell(x, y, code, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, chars, lastBg);
453+
x = lastCharX;
453454
}
454455
}
455456
this._rectangleRenderer!.updateBackgrounds(this._model);

‎src/browser/renderer/shared/TextureAtlas.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -685,7 +685,7 @@ export class TextureAtlas implements ITextureAtlas {
685685
// split the image into multiple images to fit into the texture
686686
const images: ImageData[] = [];
687687
if (this._tmpCanvas.width > this._textureSize) {
688-
const step = this._textureSize-(2*padding);
688+
const step = this._config.deviceCellWidth;
689689

690690
const fullImageData = this._tmpCtx.getImageData(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
691691
if (!this._config.allowTransparency) {

0 commit comments

Comments
 (0)