2D Image Processing With WebGL(使用 WebGL 进行 2D 图像处理)
问题描述
我打算在 JS 中创建一个简单的照片编辑器.我的主要问题是,是否可以创建实时渲染的过滤器?例如,调整亮度和饱和度.我只需要一张 2D 图像,我可以在其中使用 GPU 应用滤镜.
I intend to create a simple photo editor in JS. My main question is, is it possible to create filters that render in real-time? For example, adjusting brightness and saturation. All I need is a 2D image where I can apply filters using the GPU.
我读过的所有教程都非常复杂,并没有真正解释 API 的含义.请指出我正确的方向.谢谢.
All the tutorials I've read are very complex and don't really explain what the API mean. Please point me in the right direction. Thanks.
推荐答案
您可以为您打算使用的每个操作制作自定义像素着色器.只需学习一些 GLSL 并按照学习 WebGL"教程来掌握基本的 WebGL.
You can make a custom pixel shader for each operation you're intending to use. Just learn some GLSL and follow the "Learning WebGL" tutorials to get a grasp of basic WebGL.
您可以使用着色器渲染您的图像,修改您可以包含的参数以控制不同的视觉样式,然后当用户单击确定"时,您可以读取像素以将其存储为当前图像.
You can render your image with the shader modifying the parameters you can include to control the different visual styles and then when the user clicks "ok" you can read back the pixels to store it as your current image.
请记住避免跨域图像,因为这将禁用像素的回读.
Just remember to avoid cross domain images, because that will disable the reading back of pixels.
另外,请查看快速参考卡(PDF) 以获取有关着色器操作的快速信息.
Also, check the quick reference card (PDF) for quick info on shader operations.
这篇关于使用 WebGL 进行 2D 图像处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 WebGL 进行 2D 图像处理
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01