How does JavaScript achieve GPU acceleration?

First, what is JavaScript for GPU acceleration?

The CPU differs from the GPU design goals, resulting in a large difference in the internal structure between them.
The CPU needs to deal with a common scenario, and the internal structure is complex.
GPUs tend to be data-type-consistent and interdependent computing.
So, when we implement 3D scenes on the web, we typically use WEBGL to take advantage of GPU operations (lots of vertices).
But what if it's just a common computing scenario? For example, how do we use GPU resources to deal with a lot of pixel information in images? This is what this article is about, the GPU general computing, referred to as GPGPU.

Second, the example shows: color block recognition.

As shown, we recognize the rainbow-colored blocks in the picture and add emoticons to the candies.

2.1, instance address (after opening the page, click the button "Use CPU calculation", "Use GPU computing"):
Http://tgideas.qq.com/2018/brucewan/gpgpu.html

2.2. Run the Code:

1 varRGB2HSV =function(R, G, b) {2     varmax = Math.max (R, G, b), Min =Math.min (R, G, b),3D = max-min,4 H,5s = (max = = 0? 0:d/max),6v = max/255;7     Switch(max) {8          Casemin:h = 0; Break;9          CaseR:h = (g-b) + D * (G < b? 6:0); H/= 6 * D; BreakTen          CaseG:h = (b-r) + d * 2; H/= 6 * D; Break One          CaseB:h = (r-g) + d * 4; H/= 6 * D; Break A     } -     return { -H:self.hueindexs[parseint (h*360)], the S:s, - v:v -     } -};

Run times: 262,144 times

2.3. Test conclusion:
example, we use the GPU and CPU for hue conversion (to prevent light from affecting recognition accuracy), and the remaining steps are consistent.

Test Platform	Test conclusion
Pc	GPU less advantageous than CPU
Ios	GPU less advantageous than CPU
Android	VIVOX20 (run 10 average) cpu:770ms,gpu:270 GPU 2.85 times times faster than CPU Samsung S7 (run 10 average) Cpu:982ms,gpu:174ms GPU 5.64 times times faster than CPU

2.4, use GPGPU meaning:
GPU and CPU data transfer process, and GPU actual operation time-consuming, so the use of GPU computing transmission costs are too high, measured in Android has a greater advantage.
This test case is extracted from the Webar project and requires real-time tracking of the user's camera to process the video stream (256*256), which is very significant using the GPU, otherwise the real-time tracking cannot be achieved.

Third, how to achieve universal GPU computing?

3.1, first, we pass a flowchart, demonstrating the principle:

3.2. Realize:

3.2.1, creates a vertex shader, just passes the mapping coordinates.

1 attribute vec4 position; 2 varying vec2 vcoord; 3 void Main () {4     0.5 0.5 ; 5     Gl_position = Position; 6 }

3.2.2, creating a slice shader based on the map coordinate map.

1 float ; 2 varying vec2 vcoord; 3 uniform sampler2d Map; 4 void Main (void) {5     vec4 color = texture2d (map, Vcoord); 6     Gl_fragcolor = color; 7 }

3.3.3, based on the shader code above, creates the program object, and the variable code is the one we want to pass in for the calculation.

1 //binding and compiling the shader program2 varVertexshadersource = ' ... ';3 varFragmentshadersource = ' ... ' + code + ' ... ';4 varVertexShader =Gl.createshader (GL. Vertex_shader);5 Gl.shadersource (VertexShader, vertexshadersource);6 Gl.compileshader (vertexshader);7 varFragmentshader =Gl.createshader (GL. Fragment_shader);8 Gl.shadersource (Fragmentshader, fragmentshadersource);9 Gl.compileshader (Fragmentshader); Ten  One //To Create a program object A varprogram =Gl.createprogram (); - Gl.attachshader (program, vertexshader); - Gl.attachshader (program, fragmentshader); the Gl.linkprogram (program); -Gl.useprogram (program);

3.3.4, passing in vertex data, creating a polygon covering the entire canvas.

1 //Vertex data transfer2 varvertices =NewFloat32array ([-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, 1.0]);3 varVertexBuffer =Gl.createbuffer ();4 Gl.bindbuffer (GL. Array_buffer, vertexbuffer);5 Gl.bufferdata (GL. Array_buffer, vertices, GL. Static_draw);6 varaposition = gl.getattriblocation (program, ' position '));7Gl.vertexattribpointer (Aposition, 2, GL. FLOAT,false, 0, 0);8Gl.enablevertexattribarray (aposition);

3.3.5, incoming raw data, this example passes in the image data that I want to process, as a map, and finally draws to the screen.

1 varGL = This. GL;2 varprogram = This. Program;3 varTexture =gl.createtexture ();4 varUmap = gl.getuniformlocation (program, ' Map ');5 6 Gl.activetexture (GL. TEXTURE0);7 Gl.bindtexture (GL. texture_2d, TEXTURE);8 9 Ten  OneGl.teximage2d (GL. texture_2d, 0, GL. RGBA, GL. RGBA, GL. Unsigned_byte, canvas); A Gl.texparameteri (GL. TEXTURE_2D, GL. Texture_mag_filter, GL. NEAREST); - Gl.texparameteri (GL. TEXTURE_2D, GL. Texture_min_filter, GL. NEAREST); - Gl.texparameteri (GL. TEXTURE_2D, GL. texture_wrap_s, GL. Clamp_to_edge); the Gl.texparameteri (GL. TEXTURE_2D, GL. texture_wrap_t, GL. Clamp_to_edge); - Gl.generatemipmap (GL. texture_2d); -  -Gl.uniform1i (umap, 0);  +  - //Drawing +Gl.clearcolor (0, 0, 0, 1); A Gl.clear (GL. Color_buffer_bit); atGl.drawarrays (GL. Triangle_fan, 0, 4);

3.3.6, from the final drawing of the picture, get the color information as the final processing result data.

1 var New Uint8array (Gl.drawingbufferwidth * gl.drawingbufferheight * 4); 2 gl.readpixels (0, 0, gl.drawingbufferwidth, Gl.drawingbufferheight, GL. RGBA, GL. Unsigned_byte, pixels);

3.3.7, complete code:
Http://tgideas.qq.com/2018/brucewan/gpu.js

In fact, after the principle of clarity, the overall implementation is relatively simple.
But for the students who do not know WebGL, the understanding of a certain difficulty, I am ready to write a series of WebGL tutorials, interested students can pay attention to.

There is no ready-made class library?

As you can see, the gpu.js that I implemented did not translate JavaScript into the shader language (class C), but instead the user passed directly to the shader code. But there are libraries on GitHub that convert JavaScript to a shader language.
Https://github.com/gpujs/gpu.js

Why didn't I use it directly?
1, simple use, 2k can realize the code, do not want to introduce 200k library;
2, the data input and output can be flexibly controlled by oneself;
3, the shader language is very simple, especially the use of basic arithmetic logic code, no need to be converted from the library from JavaScript.

Students without WEBGL Foundation are advised to use Https://github.com/gpujs/gpu.js directly to understand the whole logic from this article;
A certain base of students, recommended by Http://tgideas.qq.com/2018/brucewan/gpu.js own custom, more flexible.
In addition, this component I do not intend to deep encapsulation, nor to maintain ... Well, that's it.

How does JavaScript achieve GPU acceleration?