An image post-processing code library

Overview

WebGPU image filter

Preview online

这是一个用来展示 webgpu 在图片处理方面应用的 demo,但由于 webgpu API 还不稳定,本地都需要经常修改 API 才能跟上金丝雀的脚步,所以本项目的效果目前也还不稳定,目前仅供学习交流。

目前提供三个图片处理效果,分别是图片消融,图片模糊,图片扭曲,后续在 webgpu API 稳定之后会做成一个图像处理工具

本项目因为向 chrome 申请了 webgpu 测试(通过页面 meta 信息申明),所以在 chrome 98(其他版本不保证不报错) 上也可以看到效果, 但实际上 chrome 预期再 2022 年 5 月 18 才能正式上线 webgpu。 但是因为 chrome 和 chrome canary 目前 wgsl 语法版本相差较大,为了让更多的人能看到效果,采用了比较老版本的语法,在 canary 上会有许多的 warning.

说下总得使用感受,webGPU 比 webgl 更强大,但操作起来更费事,相比之下,webGPU 能做的事情更多,但我们需要了解得越更多,比如 webgpu 可是使用纯计算的 compute shader,这能加速大规模的数据运算, 但是同时你也需要自己去调度 gpu 的运算核,对于习惯使用自动档(webgl)的老司机而言,手动档汽车还是需要需要熟悉一下才能上路。

祝大家虎年身体健康虎虎生威! 如果你想查看更多 webgpu 相关的资料请查看 awesome-webgpu

You might also like...

Doblar - a fully local image converter that runs in your browser

Doblar - a fully local image converter that runs in your browser

Doblar is a fully local image converter that runs in your browser. Doblar is purely client side: nothing is uploaded to a server or anything like that. All conversions take place in your browser, which means your files never leave your computer.

Dec 17, 2022

A simple image diff tool powered by avernakis.

A simple image diff tool powered by avernakis.

Image Diff English | 简体中文 Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

Dec 3, 2022

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Dec 30, 2022

HTML5 CSS3 vanilla js QR code generator with download options

HTML5 CSS3 vanilla js QR code generator with download options

QR Code Generator HTML5 CSS3 vanilla js QR code generator with download options Additional description about the project and its features. Built With

May 13, 2022

JavaScript library for object-based canvas drawing

oCanvas - Object-based canvas drawing oCanvas makes canvas development easier to understand and do, by creating a bridge between the native pixel draw

Jan 4, 2023

Simple library to custom waveforms🎶

 Simple library to custom waveforms🎶

waveform-path LIVE DEMO WITH EXAMPLES Simple library to custom waveforms. Install NPM npm install waveform-path -s Download Download the last realease

Jan 4, 2023

Move all the disks from the left hand post to the right hand post, only moving the disks one at a time and a bigger disk can never be placed on a smaller disk.

Move all the disks from the left hand post to the right hand post, only moving the disks one at a time and a bigger disk can never be placed on a smaller disk.

Hanoi Tower Description The Tower of Hanoi was a famous problem posed by a mathematician in 1883, The "puzzle" is to move all the disks from the left

Feb 5, 2022

:woman: Library for image processing

:woman: Library for image processing

Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt

Dec 28, 2022

HTTP Client for Visual Studio Code to POST JSON, XML, image, ... files to REST APIs

HTTP Client for Visual Studio Code to POST JSON, XML, image, ... files to REST APIs

friflo POST Goal Main goal of this extension is storing all HTTP request & response data automatically as files in a VSCode workspace. This ensures th

Nov 18, 2021

optimize image & upload file to cloud as image bed with tiny image automic.

optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

Nov 12, 2022

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

p5.js Welcome! 👋 👋🏿👋🏽👋🏻👋🏾👋🏼 p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for a

Jan 1, 2023

danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

Dec 29, 2022

Phonemask - Library for processing the phone input field in the web form. Only native javascript is used

phonemask Library for processing the phone input field in the web form. Only native javascript is used Usage: Adding a library to HTML script type="a

Sep 20, 2022

XML/HTML parser and processing library for JavaScript and TypeScript

XML/HTML parser and processing library for JavaScript and TypeScript

[VIEW DOCUMENTATION] Robin is an XML parser and processing library that supports a sane version of HTML. It features a set of DOM utilities, including

Oct 5, 2022

Themis is a validation and processing library that helps you always make sure your data is correct.

Dataffy Themis - The advanced validation library Themis is a validation and processing library that helps you always make sure your data is correct. ·

Oct 27, 2022

A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

Aug 18, 2022

Simple JavaScript Library to add parallax image to background-image

Simple JavaScript Library to add parallax image to background-image

Backpax Simple JavaScript Library to add parallax image to background-image Install $ npm install backpax --save Demo Demo page is here Usage If you

Oct 12, 2022

A port of the Processing visualization language to JavaScript.

⚠️ This project has been archived ⚠️ With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having be

Jan 4, 2023

Blazing Fast JavaScript Raster Processing Engine

Geoblaze A blazing fast javascript raster processing engine Geoblaze is a geospatial raster processing engine written purely in javascript. Powered by

Dec 20, 2022
Owner
kuake
stay hungry, stay young
kuake
null 3.9k Dec 30, 2022
Resize image in browser with high quality and high speed

pica - high quality image resize in browser Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technolo

Nodeca 3.2k Dec 27, 2022
jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

boblemarin 327 Oct 27, 2022
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Dec 24, 2022
Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Max Valiano 531 Oct 24, 2022
🌅 Content-aware image resizer based on Seam Carving algorithm

Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable.

Oleksii Trekhleb 1.4k Dec 30, 2022
A light wight javascript image viewing plugin with smooth animation and 0 dependence

A light wight javascript image viewing plugin with smooth animation and 0 dependence

null 50 Nov 12, 2022
ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Khalid Abuhakmeh 11 Feb 9, 2022
Get the first frame of a Gif image.

Get the first frame of a Gif image.

lijialiang 3 Apr 8, 2022
A very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8 block

JPEG Sandbox This is a very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8

Omar Shehata 383 Jan 2, 2023