使用WebGL进行2D图像处理 [英] 2D Image Processing With WebGL

问题描述

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