픽셀 조작을 사용하여 자바 스크립트에서 풀 HD 동영상에 필터를 적용하려고합니다.자바 스크립트를 사용하여 좋은 프레임 속도를 얻는 방법?
내가 숨겨진 캔버스, 웹 노동자와 transferables를 사용하여 데모를 만들어 :
결과 (짧은 시간에 웹 근로자 브라우저의 탭 충돌을 사용하고 비디오가 매우 낮은 성능을 가지고 있다는 것입니다 ~ 5fps).
"웹 작업자 : 0"을 선택하지 않으면 성능이 향상되고 (~ 15fps) 탭이 충돌하지 않습니다.
어떻게해야합니까? 목표는 SVG 또는 CSS 필터를 피하는 좋은 프레임 속도 (~ 30fps)를 얻는 것입니다.
감사합니다.
모든 픽셀을 반복하고 CPU에서 변환하는 것은 좋지 않습니다. 이것이 바로 GPU의 목표입니다. 과거에는 플래시와 같이 불쾌한 것을 사용해야한다는 뜻입니다.
다행히도 최신 기술이 부상하고 있으며 대부분의 인기있는 브라우저에서 그래픽 가속을 사용할 수 있습니다. 그것은 WebGL이라고 불리우며, 이런 것들을 위해 그래픽 카드를 사용할 수 있습니다.
WebGL의 모든 내부 비법을 배우고 싶지 않다면 (매우 복잡합니다) 2D 애니메이션 용으로 설계된 PixiJS 프레임 워크를 사용하는 것이 좋습니다. http://www.goodboydigital.com/pixijs/examples/15/indexAll.html
더 많은 데모와 예제 현재 위치 : https://pixijs.github.io/examples/#/basics/basic.js
는 작은 이미지의 픽셀 조작을 수행하거나 대신 픽셀 조작의 최대 globalCompositeOperation에서 사용
는 현재 자신의 필터링 데모를 볼 수 있습니다. 원하는 효과를 알지 못하면 훨씬 더 많은 도움을받을 수 있습니다. – Kaiido
데모는 그레이 스케일을 사용하지만 "필터"는 아무것도 아니어야합니다. 흐림, 크로마 키, RGB 채널 조절, 워터 마킹 및 픽셀 조작을 할 수있는 모든 기능을 제공합니다. – Killy
@ 킬리 문제를 줄여야합니다. 누구나 프로젝트를 파헤 치고 실적을 벤치 마크 할 수는 없습니다. 그러나 어쨌든 WebGL을 사용하는 것이 좋습니다. PixiJS 프레임 워크는 FPS가 높은 필터를 보여주는 멋진 데모가 있습니다. http://www.goodboydigital.com/pixijs/examples/15/indexAll.html –