WebGL Wrapper for JavaScript

Faster computations with JavaScript code.

Comment

Inspiration

  • Computations with GPUs are fast.
  • Why don't we just use GPU when we have huge and heavy computation tasks.

What it does

  • Converts data to GL texture.
  • Compiles mathematical JavaScript functions to GLSL.
  • Runs the function on GPU using the texture.
  • It's really promising, especially for scientific computation applications.

How I built it

  • Handled the WegGL stuff with JavaScript
  • Used igloo.js to make things faster.
  • Coded a script in PHP to transform JS functions to GL Shading Language functions to use with fragment shader.
  • Used jquery for interface.

Challenges I ran into

  • It wasn't easy to transform a JS code to GL Shading Language.
  • Even some functions under JavaScript's Math doesn't have counterpart in GLSL, needed to implement some of them.
  • The base framework that I working with(igloo.js) did not have support for some datatypes that I needed to use, so I needed to change the source code of it some.
  • Since textures and pixels can store limited number of bits, it wasn't easy to make this work with big numbers, I overcame this problem with some mathematical tricks.
  • Still have some limits on size of numbers(as bits) because of the nature of shaders and textures.

Accomplishments that I'm proud of

  • I had a normalized precipitation model with discharge from Iowa Flood Center. According to my benchmarks, it calculates an area's discharge with size of 1024*1024, 3 times faster than vanilla JS on V8 engine.

What I learned

  • How to use fragment shaders.
  • Computation with WebGL
  • GL Shading Language

What's next for WebGL Wrapper for JavaScript

  • Some extra built-in functions would do this project better.
  • I may develop a framework to deal with more complex computation tasks with for instance computation priorities etc.

Notes,

  • Be sure that your browser supports WebGL.
  • It's tested with Google Chrome, and best works on Chrome so far.
  • If wanted to run locally, make sure you have php installed and configured.
  • You can see your JS code's compiled version to GLSL by using web browser console.
  • Computation results should be printed to screen within a few seconds after you run the code.
  • It solves 1024*1024 texture default, even you gave only 1 pair of numbers as data.
  • Sample result can be seen in Image Gallery.
  • Speed increase can be clearly seen with large amounts of data.
Share this project:

Updates