andras/sdf-2d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Avoid triggering reflow on canvasSize querying

Browse source
This commit is contained in:
schmelczerandras 2020-10-25 15:56:20 +01:00
parent 582a0cea08
commit 3fb6cc0411
9 changed files with 116 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/graphics/graphics-library/frame-buffer/default-frame-buffer.ts
View file

@ -1,16 +1,17 @@
import { ReadonlyVec2 } from 'gl-matrix';
import { UniversalRenderingContext } from '../universal-rendering-context';
import { FrameBuffer } from './frame-buffer';
/** @internal */
export class DefaultFrameBuffer extends FrameBuffer {
constructor(gl: UniversalRenderingContext) {
constructor(gl: UniversalRenderingContext, canvasSize: ReadonlyVec2) {
super(gl);
this.frameBuffer = null;
this.setSize();
this.setSize(canvasSize);
}
public setSize(): boolean {
const hasChanged = super.setSize();
public setSize(canvasSize: ReadonlyVec2): boolean {
const hasChanged = super.setSize(canvasSize);
if (hasChanged) {
this.gl.canvas.width = this.size.x;

11
src/graphics/graphics-library/frame-buffer/frame-buffer.ts
View file

@ -1,4 +1,4 @@
import { vec2 } from 'gl-matrix';
import { ReadonlyVec2, vec2 } from 'gl-matrix';
import { Texture } from '../texture/texture';
import { UniversalRenderingContext } from '../universal-rendering-context';
@ -26,15 +26,12 @@ export abstract class FrameBuffer {
this.gl.deleteFramebuffer(this.frameBuffer);
}
public setSize(): boolean {
public setSize(canvasSize: ReadonlyVec2): boolean {
const realToCssPixels =
(this.enableHighDpiRendering ? devicePixelRatio : 1) * this.renderScale;
const canvasWidth = (this.gl.canvas as HTMLCanvasElement).clientWidth;
const canvasHeight = (this.gl.canvas as HTMLCanvasElement).clientHeight;
const displayWidth = Math.floor(canvasWidth * realToCssPixels);
const displayHeight = Math.floor(canvasHeight * realToCssPixels);
const displayWidth = Math.floor(canvasSize.x * realToCssPixels);
const displayHeight = Math.floor(canvasSize.y * realToCssPixels);
const oldSize = vec2.clone(this.getSize());
this.size = vec2.fromValues(displayWidth, displayHeight);

9
src/graphics/graphics-library/frame-buffer/intermediate-frame-buffer.ts
View file

@ -1,3 +1,4 @@
import { ReadonlyVec2 } from 'gl-matrix';
import { ColorTexture } from '../texture/color-texture';
import { DistanceTexture } from '../texture/distance-texture';
import { Texture } from '../texture/texture';
@ -9,7 +10,7 @@ export class IntermediateFrameBuffer extends FrameBuffer {
private distanceTexture?: DistanceTexture;
private colorTexture: ColorTexture;
constructor(gl: UniversalRenderingContext) {
constructor(gl: UniversalRenderingContext, canvasSize: ReadonlyVec2) {
super(gl);
this.colorTexture = new ColorTexture(gl);
@ -21,7 +22,7 @@ export class IntermediateFrameBuffer extends FrameBuffer {
this.frameBuffer = this.gl.createFramebuffer()!;
this.configureFrameBuffer();
this.setSize();
this.setSize(canvasSize);
}
public destroy(): void {
@ -38,8 +39,8 @@ export class IntermediateFrameBuffer extends FrameBuffer {
: [this.colorTexture];
}
public setSize(): boolean {
const hasChanged = super.setSize();
public setSize(canvasSize: ReadonlyVec2): boolean {
const hasChanged = super.setSize(canvasSize);
if (hasChanged) {
this.colorTexture.setSize(this.size);