Add parallel rendering by yorgetsuten · Pull Request #84 · evilmartians/oklch-picker

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

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

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

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

 }

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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

+
+  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

 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

  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

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


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

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

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


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

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

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


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

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

+  lastBenchmark.get().freezeSum = 0
 }

 export function reportFull(ms: number): void {


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

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

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

 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

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


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

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

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

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


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

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

  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

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


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

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

@@ -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

+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

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


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

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

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


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

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

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


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

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

+  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

		@@ -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'

Conversation

yorgetsuten commented Mar 6, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yorgetsuten Mar 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ai Mar 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yorgetsuten Mar 13, 2023 •

edited

Loading

ai Mar 13, 2023 •

edited

Loading