Add parallel rendering #84

yorgetsuten · 2023-03-06T10:50:44Z

в сафари и ff работает, багов нет. единственное что в paintSeparatorPixel() как-то неправильно отрабатывает альфа канал. вместо прозрачности у линий как-будто инвертируется фоновый черный цвет

Co-authored-by: Andrey Sitnik <andrey@sitnik.ru>

ai · 2023-03-13T11:06:55Z

lib/canvas.ts

@@ -10,10 +10,10 @@ export function getCleanCtx(
  return ctx
 }

-let originSize = new Map<HTMLCanvasElement, [number, number]>()
+export let originSize = new Map<HTMLCanvasElement, [number, number]>()


А зачем экспорт? Этот Map вроде был нужен для понижения разрешения и сейчас больше не нужен.

ai · 2023-03-13T11:08:38Z

lib/paint.ts

+  color: string
+): void {
+  let pos = 4 * (y * pixels.width + x)
+  let colorArr = color


Такой обратный парсинг — грязно. Лучше измени paintSeparator, чтобы там нормально конвертировать цвет в RGB и тогда не нужно будет и этой функции.

ai · 2023-03-13T11:09:13Z

lib/paint.ts

+  pixels.data[pos + 3] = +colorArr[3] * 255
+}
+
+export function trackTime(cb: () => void): number {


trackTime не имеет отношения к рисованию, чтобы быть тут. Она по сути же может замерять что угодно. Создай lib/time.js.

ai · 2023-03-13T11:09:38Z

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3


Обнови pnpm и откати изменение файла

ai · 2023-03-13T11:31:43Z

stores/current.ts

@@ -1,12 +1,12 @@
+import { atom, map } from 'nanostores'
+import { setStart, resetFreeze, reportFreeze } from './benchmark.js'


ESLint тут ругается, потому что у меня импорты группируются — из npm идут отдельным блоком, из проекта — другим.

Перенеси этот импорт в группу ниже.

ai · 2023-03-13T11:33:32Z

view/chart/index.ts

+
+  for (let i = 0; i < availableWorkers; i++) {
+    let renderType: RenderType =
+      canvas === canvasL ? 'l' : canvas === canvasC ? 'c' : 'h'


Вложенные a ? b : c — плохая практика (мозг ломается при попытке такое прочитать). ESLint тут тебе и кидает поэтому предупреждение.

Переделай на обычные if.

у if своя область видимости и я подумал что это немного перегрузит функцию поэтому просто в параметр перекинул

ai · 2023-03-13T11:36:01Z

stores/benchmark.ts

@@ -5,86 +5,37 @@ import { benchmarking } from './url.js'

 export type RenderType = 'l' | 'c' | 'h'

-export let lastBenchmark = map({ freeze: 0, quick: 0, full: 0 })
+export let lastBenchmark = map({ freezeSum: 0, freezeMax: 0, frame: 0, full: 0 })


full непонятно о чём речь.

Давай переименуем в frame → paint и full → workersSum. И так же во всех функциях и в UI.

ai · 2023-03-13T11:37:56Z

view/chart/paint.ts

  color: string,
  line: [number, number][] | undefined
 ): void {
+  let colorArr = color


Прошлый комментарий был про то, что парсить rgb() — нельзя. Зачем перенёс просто сюда?

Я предлагаю отпарсить цвет нормально вызвав rgb(string) и получив нормальные цифры. Только сделай это один раз, там где достаются цвета разделителя.

а что за rgb(string)...

ладно я нашел какую-то регулярку надеюсь так можно...

rgb() из lib/colors.js может парсить rgb()

ai · 2023-03-13T11:38:28Z

lib/paint.ts

+  y: number,
+  colorArr: string[]
+): void {
+  let pos = 4 * (y * pixels.width + x)


Сейчас paintSeparatorPixel стала слишком маленькой, переноси код в paintSeperator

ai · 2023-03-13T11:39:09Z

stores/benchmark.ts

-    count: 0,
-    total: 0,
-    prevScale: 1
+export function setStart(ms: number): void {


Не понятно, что за start. Давай, например, setFrameStart(ms).

ai · 2023-03-13T11:40:14Z

stores/benchmark.ts

-  quick[type].prevScale = scale
-  return scale
+export function resetFreeze(): void {
+  lastBenchmark.get().freezeMax = 0


Значения можно менять только через setKey()

ai · 2023-03-13T11:41:10Z

stores/benchmark.ts

-  return scale
+export function resetFreeze(): void {
+  lastBenchmark.get().freezeMax = 0
+  lastBenchmark.get().freezeSum = 0
 }

 export function reportFull(ms: number): void {


У тебя одно и то же имя аргумента используется и для продолжительности и для времени.

Давай тут использовать time (и так же в setFrameStart).

ai · 2023-03-13T11:42:35Z

stores/benchmark.ts

@@ -93,25 +44,8 @@ const WORST_HUE = 40
 const MAX_TIME = 300

 export function getLastBenchmarkColor(): string {
-  let { freeze } = lastBenchmark.get()
-  let hue = BEST_HUE - ((BEST_HUE - WORST_HUE) * freeze) / MAX_TIME
+  let hue = BEST_HUE - ((BEST_HUE - WORST_HUE) * lastBenchmark.get().freezeSum) / MAX_TIME


Строка длиннее 80 символов (и кажется ты не везде Prettier запускаешь).

Верни подход, что мы достаём переменную на отдельной строчке.

ai · 2023-03-13T11:45:06Z

stores/current.ts

-    runListeners(changeListeners, prev)
-  }
-})
+export let framesToChange = atom<number>(0)


Передавай framesToChange как обычное число в аргументы listener. Типа i.l(value.l, framesToChange).

Это будет проще, чем заводить отдельный стор. Всё равно тебе framesToChange нужен в том же listener.

ai · 2023-03-13T11:46:26Z

types.d.ts

-    message: object,
-    transfer: (Transferable | HTMLCanvasElement)[]
-  ): void
+  postMessage(message: object, transfer: Transferable[]): void


Давай вернём старый тип, он правильнее и может в будущем пригодиться

ai · 2023-03-13T11:46:49Z

types.d.ts

@@ -121,7 +120,16 @@ declare module 'culori/fn' {
  export function formatRgb(c: Color): string
  export function formatRgb(c: string): string | undefined

-  export type Color = Hsl | Lab | Lch | Oklab | Oklch | Xyz65 | P3 | Rec2020 | Rgb
+  export type Color =


Откати (кажется у тебя старый Prettier)

ai · 2023-03-13T11:47:35Z

view/benchmark/index.pug

-    = "Freeze     "
-    strong.benchmark_freeze
+    = "Freeze sum  "
+    strong.benchmark_freeze_sum


У меня система именования CSS-классов вида .block-name_element-name. Тут должно быть benchmark_freeze-sum.

ai · 2023-03-13T11:48:59Z

view/chart/worker.ts

@@ -0,0 +1,100 @@
+import type { RenderType } from '../../stores/benchmark'


Suggested change

import type { RenderType } from '../../stores/benchmark'

import type { RenderType } from '../../stores/benchmark.js'

На конце импортов по правилам ESM всегда должно быть расширение. Ниже так же исправь (и проверь остальные импорты).

ai · 2023-03-13T11:53:26Z

view/chart/index.ts

+let unbusyWorkers: Worker[] = []
+let busyWorkers: Worker[] = []
+
+let totalWorkers = navigator.hardwareConcurrency


Лучше написать так let totalWorkers = navigator.hardwareConcurrency ?? 12

?? делает то же, только короче и чуть правильнее (проверяет что это именно undefined, а не false).

Ну и 12 воркеров мало у кого сейчас есть. Давай тут хотя бы 8.

ai · 2023-03-13T11:55:34Z

view/chart/index.ts

+      ...busyWorkers.splice(busyWorkers.indexOf(worker), 1)
+    ]
+
+    if (e.data.renderType === 'l') {


Логика для l, c и h очень похожая. Надо её куда-то вынести.

ai · 2023-03-13T11:56:39Z

view/chart/index.ts

+        let ctx = getCleanCtx(canvasC)
+
+        ;[...pixelsC, e.data].forEach(pixels => {
+          let { pixelsBuffer, pixelsWidth, pixelsHeight, xPos } = pixels


А зачем тут так? Если ниже писать pixelsBuffer вместо pixels.pixelsBuffer то будет не сложнее.

ai · 2023-03-13T11:57:20Z

view/chart/index.ts

+  worker.onmessage = (e: MessageEvent<PaintedMessageData>) => {
+    let start = Date.now()
+
+    unbusyWorkers = [


Очень сложно читать. Давай разделим доставание из одного массива и помещение в другой массив.

ai · 2023-03-13T11:59:12Z

view/chart/index.ts

+  availableWorkers: number,
+  renderType: RenderType,
+  canvas: HTMLCanvasElement,
+  lch: number


lch название для LCH-цвета. Давай лучше value.

* move drawing to OffscreenCanvas * correct quotes and tabs * prettier * prettier * prettier * pnpm lock * fix errors * fix errors * increase size limit * fix types * fix package * fix types * fix types * fix types * test without worker * test with worker * fix eslint * fix eslint * Update .size-limit.json Co-authored-by: Andrey Sitnik <andrey@sitnik.ru> * fix reportFreeze * fix dynamic scaling * ifx types * fix * . * add job queue * report paint * general queue * no queue * report freeze * add parallel rendering * benchmark * clg * clg * retina * Revert "clg" * only last pending test * no retina * hardwareConcurrency * fix * shared workers * fix * fix eslint * fix * fix * fix * rename benchmark --------- Co-authored-by: Andrey Sitnik <andrey@sitnik.ru>

Nikita and others added 30 commits February 28, 2023 11:37

move drawing to OffscreenCanvas

97dc994

Merge branch 'main' of https://github.com/sxdav/oklch-picker

79e49fd

correct quotes and tabs

f1afb94

prettier

5fc49f8

prettier

a269f18

prettier

f01146b

pnpm lock

319de87

fix errors

dcf4a28

fix errors

04987e4

increase size limit

6d7a4ab

fix types

dac3e95

fix package

7ed2d6b

fix types

2b0016a

fix types

6205a68

fix types

0091909

test without worker

885a6dd

test with worker

4452f9c

fix eslint

267778a

fix eslint

e1b16ba

Update .size-limit.json

de82e2b

Co-authored-by: Andrey Sitnik <andrey@sitnik.ru>

fix reportFreeze

b753774

Merge branch 'main' of https://github.com/sxdav/oklch-picker

934e438

fix dynamic scaling

4304dec

ifx types

50cf162

fix

6c37906

.

97fe153

add job queue

d04f6b3

report paint

ae7872c

general queue

aa3d1a5

no queue

b3eb6b9

ai reviewed Mar 13, 2023

View reviewed changes

fix eslint

7f53664

ai reviewed Mar 13, 2023

View reviewed changes

fix

ef966d7

ai reviewed Mar 13, 2023

View reviewed changes

Nikita added 3 commits March 13, 2023 15:27

fix

bd38568

fix

f2be65a

rename benchmark

e7cd2b2

ai merged commit e5349be into evilmartians:v1.1 Mar 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add parallel rendering #84

Add parallel rendering #84

yorgetsuten commented Mar 6, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

yorgetsuten Mar 13, 2023 •

edited

Loading

ai Mar 13, 2023

ai Mar 13, 2023

yorgetsuten Mar 13, 2023

yorgetsuten Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023 •

edited

Loading

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

ai Mar 13, 2023

		@@ -1,12 +1,12 @@
		import { atom, map } from 'nanostores'
		import { setStart, resetFreeze, reportFreeze } from './benchmark.js'

		@@ -0,0 +1,100 @@
		import type { RenderType } from '../../stores/benchmark'

Add parallel rendering #84

Add parallel rendering #84

Conversation

yorgetsuten commented Mar 6, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yorgetsuten Mar 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ai Mar 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yorgetsuten Mar 13, 2023 •

edited

Loading

ai Mar 13, 2023 •

edited

Loading