7326330975

Committed 26 Dec 2023 03:36AM UTC coverage: 43.39% (-0.003%) from 43.393%

Build # 7326330975

Build Type

Pull #456

github

Committed by

web-flow

Commit Message

Merge 48ab2cae2 into c296f530c

Pull Request Pull Request #456: Upgrade prettier, update prettier & react-hooks eslint plugins

Run Details

1169 of 2790 branches covered (0.0%)

Branch coverage included in aggregate %.

19 of 39 new or added lines in 14 files covered. (48.72%)

4 existing lines in 4 files now uncovered.

2678 of 6076 relevant lines covered (44.08%)

4035.84 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/gl/flamechart-color-pass-renderer.ts

import {Vec2, Rect, AffineTransform} from '../lib/math'
import {Theme} from '../views/themes/theme'
import {Graphics} from './graphics'
import {setUniformAffineTransform} from './utils'

const vertexFormat = new Graphics.VertexFormat()
vertexFormat.add('position', Graphics.AttributeType.FLOAT, 2)
vertexFormat.add('uv', Graphics.AttributeType.FLOAT, 2)

const vert = `
  uniform mat3 uvTransform;
  uniform mat3 positionTransform;

  attribute vec2 position;
  attribute vec2 uv;
  varying vec2 vUv;

  void main() {
    vUv = (uvTransform * vec3(uv, 1)).xy;
    gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
  }
`

const frag = (colorForBucket: string) => `
  precision mediump float;

  uniform vec2 uvSpacePixelSize;
  uniform float renderOutlines;

  varying vec2 vUv;
  uniform sampler2D colorTexture;

  // https://en.wikipedia.org/wiki/HSL_and_HSV#From_luma/chroma/hue
  vec3 hcl2rgb(float H, float C, float L) {
    float hPrime = H / 60.0;
    float X = C * (1.0 - abs(mod(hPrime, 2.0) - 1.0));
    vec3 RGB =
      hPrime < 1.0 ? vec3(C, X, 0) :
      hPrime < 2.0 ? vec3(X, C, 0) :
      hPrime < 3.0 ? vec3(0, C, X) :
      hPrime < 4.0 ? vec3(0, X, C) :
      hPrime < 5.0 ? vec3(X, 0, C) :
      vec3(C, 0, X);

    float m = L - dot(RGB, vec3(0.30, 0.59, 0.11));
    return RGB + vec3(m, m, m);
  }

  float triangle(float x) {
    return 2.0 * abs(fract(x) - 0.5) - 1.0;
  }

  ${colorForBucket}

  void main() {
    vec4 here = texture2D(colorTexture, vUv);

    if (here.z == 0.0) {
      // Background color
      gl_FragColor = vec4(0, 0, 0, 0);
      return;
    }

    // Sample the 4 surrounding pixels in the depth texture to determine
    // if we should draw a boundary here or not.
    vec4 N = texture2D(colorTexture, vUv + vec2(0, uvSpacePixelSize.y));
    vec4 E = texture2D(colorTexture, vUv + vec2(uvSpacePixelSize.x, 0));
    vec4 S = texture2D(colorTexture, vUv + vec2(0, -uvSpacePixelSize.y));
    vec4 W = texture2D(colorTexture, vUv + vec2(-uvSpacePixelSize.x, 0));

    // NOTE: For outline checks, we intentionally check both the right
    // and the left to determine if we're an edge. If a rectangle is a single
    // pixel wide, we don't want to render it as an outline, so this method
    // of checking ensures that we don't outline single physical-space
    // pixel width rectangles.
    if (
      renderOutlines > 0.0 &&
      (
        here.y == N.y && here.y != S.y || // Top edge
        here.y == S.y && here.y != N.y || // Bottom edge
        here.x == E.x && here.x != W.x || // Left edge
        here.x == W.x && here.x != E.x
      )
    ) {
      // We're on an edge! Draw transparent.
      gl_FragColor = vec4(0, 0, 0, 0);
    } else {
      // Not on an edge. Draw the appropriate color.
      gl_FragColor = vec4(colorForBucket(here.z), here.a);
    }
  }
`

export interface FlamechartColorPassRenderProps {
  rectInfoTexture: Graphics.Texture
  renderOutlines: boolean
  srcRect: Rect
  dstRect: Rect
}

export class FlamechartColorPassRenderer {
  private material: Graphics.Material
  private buffer: Graphics.VertexBuffer

  constructor(
    private gl: Graphics.Context,
    theme: Theme,
  ) {
    const vertices = [
      {pos: [-1, 1], uv: [0, 1]},
      {pos: [1, 1], uv: [1, 1]},
      {pos: [-1, -1], uv: [0, 0]},
      {pos: [1, -1], uv: [1, 0]},
    ]
    const floats: number[] = []
    for (let v of vertices) {
      floats.push(v.pos[0])
      floats.push(v.pos[1])
      floats.push(v.uv[0])
      floats.push(v.uv[1])
    }

    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
    this.buffer.uploadFloats(floats)
    this.material = gl.createMaterial(vertexFormat, vert, frag(theme.colorForBucketGLSL))
  }

  render(props: FlamechartColorPassRenderProps) {
    const {srcRect, rectInfoTexture} = props
    const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))
      .times(AffineTransform.withScale(new Vec2(1, -1)))
      .times(
        AffineTransform.betweenRects(
          new Rect(Vec2.zero, new Vec2(rectInfoTexture.width, rectInfoTexture.height)),
          Rect.unit,
        ),
      )
    const uvRect = physicalToUV.transformRect(srcRect)
    const uvTransform = AffineTransform.betweenRects(Rect.unit, uvRect)

    const {dstRect} = props
    const viewportSize = new Vec2(this.gl.viewport.width, this.gl.viewport.height)

    const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(
      AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
    )
    const ndcRect = physicalToNDC.transformRect(dstRect)
    const positionTransform = AffineTransform.betweenRects(Rect.NDC, ndcRect)

    const uvSpacePixelSize = Vec2.unit.dividedByPointwise(
      new Vec2(props.rectInfoTexture.width, props.rectInfoTexture.height),
    )

    this.material.setUniformSampler('colorTexture', props.rectInfoTexture, 0)
    setUniformAffineTransform(this.material, 'uvTransform', uvTransform)
    this.material.setUniformFloat('renderOutlines', props.renderOutlines ? 1.0 : 0.0)
    this.material.setUniformVec2('uvSpacePixelSize', uvSpacePixelSize.x, uvSpacePixelSize.y)
    setUniformAffineTransform(this.material, 'positionTransform', positionTransform)

    this.gl.setUnpremultipliedBlendState()
    this.gl.draw(Graphics.Primitive.TRIANGLE_STRIP, this.material, this.buffer)
  }
}

1	import {Vec2, Rect, AffineTransform} from '../lib/math'	×
2	import {Theme} from '../views/themes/theme'
3	import {Graphics} from './graphics'	×
4	import {setUniformAffineTransform} from './utils'	×
5
6	const vertexFormat = new Graphics.VertexFormat()	×
7	vertexFormat.add('position', Graphics.AttributeType.FLOAT, 2)	×
8	vertexFormat.add('uv', Graphics.AttributeType.FLOAT, 2)	×
9
10	const vert = `	×
11	uniform mat3 uvTransform;
12	uniform mat3 positionTransform;
13
14	attribute vec2 position;
15	attribute vec2 uv;
16	varying vec2 vUv;
17
18	void main() {
19	vUv = (uvTransform * vec3(uv, 1)).xy;
20	gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
21	}
22	`
23
24	const frag = (colorForBucket: string) => `	×
25	precision mediump float;
26
27	uniform vec2 uvSpacePixelSize;
28	uniform float renderOutlines;
29
30	varying vec2 vUv;
31	uniform sampler2D colorTexture;
32
33	// https://en.wikipedia.org/wiki/HSL_and_HSV#From_luma/chroma/hue
34	vec3 hcl2rgb(float H, float C, float L) {
35	float hPrime = H / 60.0;
36	float X = C * (1.0 - abs(mod(hPrime, 2.0) - 1.0));
37	vec3 RGB =
38	hPrime < 1.0 ? vec3(C, X, 0) :
39	hPrime < 2.0 ? vec3(X, C, 0) :
40	hPrime < 3.0 ? vec3(0, C, X) :
41	hPrime < 4.0 ? vec3(0, X, C) :
42	hPrime < 5.0 ? vec3(X, 0, C) :
43	vec3(C, 0, X);
44
45	float m = L - dot(RGB, vec3(0.30, 0.59, 0.11));
46	return RGB + vec3(m, m, m);
47	}
48
49	float triangle(float x) {
50	return 2.0 * abs(fract(x) - 0.5) - 1.0;
51	}
52
53	${colorForBucket}
54
55	void main() {
56	vec4 here = texture2D(colorTexture, vUv);
57
58	if (here.z == 0.0) {
59	// Background color
60	gl_FragColor = vec4(0, 0, 0, 0);
61	return;
62	}
63
64	// Sample the 4 surrounding pixels in the depth texture to determine
65	// if we should draw a boundary here or not.
66	vec4 N = texture2D(colorTexture, vUv + vec2(0, uvSpacePixelSize.y));
67	vec4 E = texture2D(colorTexture, vUv + vec2(uvSpacePixelSize.x, 0));
68	vec4 S = texture2D(colorTexture, vUv + vec2(0, -uvSpacePixelSize.y));
69	vec4 W = texture2D(colorTexture, vUv + vec2(-uvSpacePixelSize.x, 0));
70
71	// NOTE: For outline checks, we intentionally check both the right
72	// and the left to determine if we're an edge. If a rectangle is a single
73	// pixel wide, we don't want to render it as an outline, so this method
74	// of checking ensures that we don't outline single physical-space
75	// pixel width rectangles.
76	if (
77	renderOutlines > 0.0 &&
78	(
79	here.y == N.y && here.y != S.y \|\| // Top edge
80	here.y == S.y && here.y != N.y \|\| // Bottom edge
81	here.x == E.x && here.x != W.x \|\| // Left edge
82	here.x == W.x && here.x != E.x
83	)
84	) {
85	// We're on an edge! Draw transparent.
86	gl_FragColor = vec4(0, 0, 0, 0);
87	} else {
88	// Not on an edge. Draw the appropriate color.
89	gl_FragColor = vec4(colorForBucket(here.z), here.a);
90	}
91	}
92	`
93
94	export interface FlamechartColorPassRenderProps {
95	rectInfoTexture: Graphics.Texture
96	renderOutlines: boolean
97	srcRect: Rect
98	dstRect: Rect
99	}
100
101	export class FlamechartColorPassRenderer {	×
102	private material: Graphics.Material
103	private buffer: Graphics.VertexBuffer
104
105	constructor(
NEW 106	private gl: Graphics.Context,	×
107	theme: Theme,
108	) {
UNCOV 109	const vertices = [	×
110	{pos: [-1, 1], uv: [0, 1]},
111	{pos: [1, 1], uv: [1, 1]},
112	{pos: [-1, -1], uv: [0, 0]},
113	{pos: [1, -1], uv: [1, 0]},
114	]
115	const floats: number[] = []	×
116	for (let v of vertices) {	×
117	floats.push(v.pos[0])	×
118	floats.push(v.pos[1])	×
119	floats.push(v.uv[0])	×
120	floats.push(v.uv[1])	×
121	}
122
123	this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)	×
124	this.buffer.uploadFloats(floats)	×
125	this.material = gl.createMaterial(vertexFormat, vert, frag(theme.colorForBucketGLSL))	×
126	}
127
128	render(props: FlamechartColorPassRenderProps) {
129	const {srcRect, rectInfoTexture} = props	×
130	const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))	×
131	.times(AffineTransform.withScale(new Vec2(1, -1)))
132	.times(
133	AffineTransform.betweenRects(
134	new Rect(Vec2.zero, new Vec2(rectInfoTexture.width, rectInfoTexture.height)),
135	Rect.unit,
136	),
137	)
138	const uvRect = physicalToUV.transformRect(srcRect)	×
139	const uvTransform = AffineTransform.betweenRects(Rect.unit, uvRect)	×
140
141	const {dstRect} = props	×
142	const viewportSize = new Vec2(this.gl.viewport.width, this.gl.viewport.height)	×
143
144	const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(	×
145	AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
146	)
147	const ndcRect = physicalToNDC.transformRect(dstRect)	×
148	const positionTransform = AffineTransform.betweenRects(Rect.NDC, ndcRect)	×
149
150	const uvSpacePixelSize = Vec2.unit.dividedByPointwise(	×
151	new Vec2(props.rectInfoTexture.width, props.rectInfoTexture.height),
152	)
153
154	this.material.setUniformSampler('colorTexture', props.rectInfoTexture, 0)	×
155	setUniformAffineTransform(this.material, 'uvTransform', uvTransform)	×
156	this.material.setUniformFloat('renderOutlines', props.renderOutlines ? 1.0 : 0.0)	×
157	this.material.setUniformVec2('uvSpacePixelSize', uvSpacePixelSize.x, uvSpacePixelSize.y)	×
158	setUniformAffineTransform(this.material, 'positionTransform', positionTransform)	×
159
160	this.gl.setUnpremultipliedBlendState()	×
161	this.gl.draw(Graphics.Primitive.TRIANGLE_STRIP, this.material, this.buffer)	×
162	}
163	}

jlfwong / speedscope / 7326330975

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous