webgl 着色器_如何在WebAssembly中使用WebGL着色器

webgl 着色器

by Dan Ruta

通过Dan Ruta

在WebAssembly中使用WebGL着色器 (Using WebGL shaders in WebAssembly)

WebAssembly is blazing fast for number crunching, game engines, and many other things, but nothing can quite compare to the extreme parallelization of shaders, running on the GPU.

WebAssembly正在为数字运算 ， 游戏引擎和许多其他事情快速发展，但是没有什么可以与在GPU上运行的着色器的极端并行化相比。

This is especially so if you’re looking to do some image processing. Usually, on the web, this is done through WebGL, but how would you access its APIs when using WebAssembly?

如果您要进行一些图像处理，则尤其如此。 通常，在Web上，这是通过WebGL完成的，但是使用WebAssembly时如何访问其API？

配置 (Setting up)

We’ll very briefly go through setting up an example project, then we’ll look at how an image can be loaded as a texture. Then, in a separate context, we’ll apply an edge detection GLSL shader to the image.

我们将简要地设置一个示例项目，然后看一下如何将图像作为纹理加载。 然后，在单独的上下文中，我们将对图像应用边缘检测GLSL着色器。

All the code is in a repo here, if you’d prefer to jump straight to that. Note that you have to serve your files via a server for WebAssembly to work.

如果您希望直接跳转到此处 ，所有代码都在此处的存储库中。 请注意，您必须通过服务器提供文件才能使WebAssembly正常工作。

As a prerequisite, I’m going to assume you already have your WebAssembly project set up. If not, you can check out the article here on how to do it, or just fork the repo linked above.

作为前提，我将假设您已经设置了WebAssembly项目。 如果没有，您可以在此处查看有关操作方法的文章，也可以只分叉上面链接的仓库。

For demoing the below code, I’m using a basic html file which serves only to load an image, get its imageData, and pass it to the WebAssembly code using the ccallArrays function.

为了演示以下代码，我使用一个基本的html文件，该文件仅用于加载图像，获取其imageData并使用ccallArrays函数将其传递给WebAssembly代码。

As for the C++ code, there is an emscripten.cpp file which manages and routes method calls to context instances created in the Context.cpp file. The Context.cpp file is structured as follows:

对于C ++代码，有一个emscripten.cpp文件，用于管理方法调用并将其路由到Context.cpp文件中创建的上下文实例。 Context.cpp文件的结构如下：

汇编 (Compilation)

WebGL is based on and follows the OpenGL ES (Embedded Systems) spec, which is a subset of OpenGL. When compiling, emscripten will map our code to the WebGL API.

WebGL基于并遵循OpenGL ES(嵌入式系统)规范，该规范是OpenGL的子集。 编译时，emscripten会将我们的代码映射到WebGL API。

There are a couple of different versions we can target. OpenGL ES 2 map