Фронт: Вернуть OffscreenCanvas в цветовой миксер OKLCH #82
Conversation
Проверь что не-воркер рисовка работает поставив туда |
проверил конечно, работает |
|
При запуске в FF у меня такая ошибка нет графиков |
|
В Chrome есть проблема с обновлением графиков:
Сейчас: он обновляется практически в реальном времени (пусть и с низким разрешением). В PR: он обновляется с большой задержкой или только когда я отпущу ползунок. |
локально он у меня обновляется как и должен, в реальном времени и даже разрешение нормальное |
Может дело в мощности железа (попробуй выставить замедление в DevTools). Но ещё можем починить в FF и его поведение нам больше подскажет. Но сначала нужно починить pnpm-лок файл (просто ревертни изменения) и отступы нового файла. |
я скопировал pnpm лок с последнего коммита main ветки и отправил в последнем коммите в котором прогнал prettier где только мог |
выставил 6-кратный троттлинг проца, изменений практически нет. справедливости ради проц довольно мощный но все-же.. |
Firefox
Может не пушнул? В диффе PR-а есть изменения в
Проверь вкладку Files changed в PR, увидишь что файл всё ещё неправильно оформлен https://github.com/evilmartians/oklch-picker/pull/82/files#diff-b0ea296e4ad8fed6150664d32076d99d7c658147a1801d075c47db808a73c305 |
|
коммит не пришел, индикации измененных файлов в vs code нет хотя версии pnpm-lock локально и на гитхабе разные. щас придумаю что-нибудь |
|
придумал все пришло |
|
ошибка в ff возможно потому что воркер без type: 'module' только я не знаю как в тс это прописать |
Посмотри как это сделано было в прошлый раз тут (в задаче есть ссылка на коммит) Ещё надо CI починить (Не забывай вызывать |
This comment was marked as resolved.
This comment was marked as resolved.
в отладчике ff воркер уже с type: 'module'
All scripts to execute Try to reduce size or increase limit at .size-limit.json |
|
я залил проект на netlify и все заработало, насколько я понял vite в воркер что-то импортировал в дев билде и ff на это ругался |
|
это если что не конечный вариант так что там есть закомментированный код. сейчас я делаю общую очередь и пытаюсь занять воркеры которые сидят без дела, но возникли некоторые сложности а спать тоже нужно |
|
не знаю каким чудом, но это починило ff. бага с рендером больше нет, версия браузера та же. теперь там общая очередь из которой три воркера берут задачи так что ни один из них больше не сидит без дела. если очередь слишком большая то некоторые задачи выкидываются но наверняка это как-то лучше можно сделать. единственное что теперь канвасы рендерятся с помощью transferFromImageBitmap, а контекст 'bitmaprenderer' поддерживается хуже чем transferControlToOffscreen(): |
|
а, и еще неплохо было бы по мере возрастастания нагрузки новые воркеры создавать но не переборщить при этом потоки то не бесконечные так что ну подумаю че с этим делать |
|
На ретине выглядит вот так
|
| canvasHSize: DOMRect | ||
| pixelRation: number | ||
| } | ||
| | { |
There was a problem hiding this comment.
Сократи этот тип так:
| {
type: 'l' | 'c' | 'h'
isFull: boolean
c: number
scale: number
showP3: boolean
showRec2020: boolean
p3: string
rec2020: string
}
Это нельзя сделать. У тебя |
сейчас ни один воркер не владеет канвасом? если бы кто-то из этих трех им владел то каждый воркер рисовал бы только свой канвас, как было раньше, из-за чего хотя бы один воркер ничего не делал. сейчас воркер просто рисует на каком-то своем внутрененнем независимом offscreencanvas - е, а потом отправляет результат в главный тред который рендерит его на настоящем. это позволяет каждому воркеру не быть привязанным к конкретному канвасу |
А зачем тогда рисовать по |
view/chart/index.ts
Outdated
| ctxL!.transferFromImageBitmap(e.data.btm) | ||
| break | ||
| case 'c': | ||
| ctxC!.transferFromImageBitmap(e.data.btm) |
There was a problem hiding this comment.
Время этой операции должно читываться в Freeze. Может оптимизация вообще не происходит, так как эта операция долго работает.
| type: 'painted', | ||
| renderType: type, | ||
| workerType, | ||
| btm: canvasC.transferToImageBitmap(), |
There was a problem hiding this comment.
У тебя тут происходит две лишние операции.
paintLH сначала генерирует ImageBitmap внутри, потом рисует его по невидимому <canvas> воркера, потом ты вытаскиваешь ImageBitmap снова и отправляешь в главный тред. Но зачем, если можно сразу взять ImageBitmap из paintLH без рендера его на <canvas> воркера?
|
мне не очень нравится то что получилось, вместо двух состояний их шесть и для каждого свой прослушиватель с минимыльным различием в логике. плюс лишнее ветвление в onmessage. |
Всё так же не могу проверить из-за того, что сломана поддержка ретины
|
| canvasL.transferControlToOffscreen && | ||
| canvasL.getContext('bitmaprenderer') | ||
| ) { | ||
| let isBusyL = atom<boolean>(false) |
There was a problem hiding this comment.
А зачем тут атомы, а не просто boolean? Кажется переусложнение.
There was a problem hiding this comment.
нужно отслеживать когда освободился воркер, иначе если в очереди что-то есть а все воркеры заняты очередь так и останется невыполненной
There was a problem hiding this comment.
Ага, но ты можешь это отслеживание сделать не через стор, а просто через if в коде обработки сообщения.
А-ля (псевдо-код):
worker.onmessage = (e: MessageEvent<MessageData>) => {
if (e.data.type === 'painted') {
if (e.data.workerType === 'l') {
if (lastPendingL) {
sendMessageL(lastPendingL)
}
…
}
}
)
| isFull: boolean, | ||
| cb: () => void | ||
| isWorker?: boolean |
There was a problem hiding this comment.
It is dirty. Just call reportFreeze in the place when you call reportPaint without worker.
| } | ||
|
|
||
| if (renderType === 'l') { | ||
| reportFreeze(trackTime(() => { |
There was a problem hiding this comment.
Ты уверен, что оно работает? Как проверял?
Я сейчас открыл https://ephemeral-creponne-3cf2a9.netlify.app/?bench#67.7,0.136,141.88,100 там сначала показалось 10, а потом резко 0. Меня значение L — снова, сначала 20 потом снова 0.
Кажется сломано, неправильно запоминаются значения (например, два разных блока сообщают цифру и перезаписывают друг друга).
There was a problem hiding this comment.
Ты уверен, что оно работает? Как проверял?
Я сейчас открыл https://ephemeral-creponne-3cf2a9.netlify.app/?bench#67.7,0.136,141.88,100 там сначала показалось
10, а потом резко0. Меня значениеL— снова, сначала20потом снова0.Кажется сломано, неправильно запоминаются значения (например, два разных блока сообщают цифру и перезаписывают друг друга).
не работает но не успел исправить, я ушел
и это тоже не успел.. |
|
Не продолжай пока работать — что-то у нас с этим подходом код становиться только сложнее, а результат отрисовки хуже. Я на основе твоей идеи с Прошлое с Новое опубликую сегодня/завтра. |
|
Вот новое план (в этот раз никаких 2-х блоков для Сафари и остальных, и без scale-хака) https://cultofmartians.com/tasks/oklchcpc-parallel.html#task |
|
Тоже работал над данной задачей, столкнулся с абсолютно такой же проблемой мерцания в FF, боролся с ней достаточно долго, но решить, увы, не удалось
|
|
@f3d0t мне кажется что если взять |
не тестил работу в сафари, но проверка та же что в референсном коммите и на https://sitnik.ru/ru/, если я все правильно понимаю, так что работать должно.