使用 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 图像处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！