Using WebGL API to do math

2024/2/27 8:44:08

The title says it all but my question is that is this possible to use the WebGL API in the browser (e.g. Google Chrome) to do some math problems?

Let's assume I want to multiply two numbers using WebGL API, is this generally possible and if yes, how can I do that?

Excuse me for not sharing any codes since I didn't come up with any answers.


Just multiplying 2 numbers would not be something you'd want to do in WebGL. It would take 50-70 setup calls just to multiply 2 numbers.

If you want to multiply 2 million numbers by 2 million other numbers then that is something more suited to WebGL. There's plenty of examples of using a GPU to do math. First off that's all a GPU does is math. It just happens to be that the most common math people ask it to do is render 3D or 2D graphics.

The term you need to search for is GPGPU.

There's a certain art in figuring out how to adjust your solution to fit how GPUs work.

The basic point that WebGL reads data from textures and writes data to textures. What are textures? They're really just 2d arrays of values. So you put your data into those 2D arrays (textures), you use WebGL to read data from those 2D arrays (textures) and write data to other 2D arrays (textures).

The biggest differences from normal computing are

  1. at least in WebGL 1 reading data from a texture is addressed by a value 0.0 to 1.0 in each direction. To get a specific value out of a 2d array (texture) you have to compute its normalized coordinate value (texture coordinate).

    Assuming xy is an ivec2 representing 2 integer indices into a 2d array we can compute the normalized coordinate needed to get the value out of the 2d array (texture) with

    vec2 uv = (vec2(xy) + 0.5) / textureDimensions;
    vec4 value = texture2D(2dArrayOfValuesTexture, uv);

    In WebGL 2 we don't have to do that. We can just do

    vec4 value = textureFetch(2dArrayOfValuesTexture, xy, 0);
  2. You don't have random access for writing

    In general WebGL writes to the destination 2d array (texture) in order which may hinder what you can do. Sometimes there are creative, workarounds.

  3. You can't access previous results immediately.

    In general if you're calculating 10000 answers, at anytime during that you can reference previous answers. In other words when you're computing answer 3766 you can reference answers 0 to 3765.

    In WebGL though you can not access any of the previous answers until you've computed all of them. Of course once you've computed all of them you can pass those answers back into to another calculation. It's basically during one giant "batch calculation" the answers can't reference each other.

You may find these examples useful.

  • WebGL1
  • WebGL2

Related Q&A

Angular2 using either npm reflect-metadata or core-js/es7/reflect

Looking at Angular2 projects, I see some are using: npm reflect-metadataand others are using : core-js/es7/reflectI know both are implementing the ES7 proposed Decorator and reflect APIBut what is the …

Issue with Decimals, Commas and Client-Side Validation

Im trying to achieve client-side validation for a nullable<decimal> whose decimal separator can be a comma (e.g.: 123,45).In my View:...<div class="editor-label">@Html.LabelFor(mo…

How to check if user is authenticated in Firebase and Express/Node.js?

If I have a page that can only be accessed by authenticated users, how do I check if a user is authenticated or not?I tried using (firebase.auth().currentUser !== null) but I am getting an error sayin…

How can I correct the Meteor base-url in a NginX reverse-proxy configuration?

I have installed both Apache and Meteor behind NginX through reverse-proxy (on an Ubuntu server). Apache is mapped directly as baseURL ( and Meteor is mapped as a subfolder (www.mydom…

Single navigation bar across website?

I am currently building a web application for my employer, but I have some restrictions. It has to be in HTML, CSS, and Javascript for the front end, and I have to use a lot of different pages for this…

Line endings (also known as Newlines) in JS strings

It is well known, that Unix-like system uses LF characters for newlines, whereas Windows uses CR+LF. However, when I test this code from local HTML file on my Windows PC, it seems that JS treat all new…

Passing HTML5 Local Storage Value to PHP error [duplicate]

This question already has answers here:What is the difference between client-side and server-side programming?(3 answers)Closed 9 years ago.I am using html5 local storage and I am trying to read it an…

Calculate the mid point of latitude and longitude co-ordinates

Does anyone know the best way to go about getting the mid-point of a pair of latitude and longitude points?I mm using d3.js to draw points on a map and need to draw a curved line between two points, s…

Open a link from web app to new Safari window in iOS 8

UPDATE 07.14.15 Losing all hope... Im assuming my fix will be javascript related but I dont know it at all. Is my current code stopping my HTML target="Blanks" from working? Im making an HTM…

Async Generator: Yielding a rejected promise

Ive been playing around with async generators in an attempt to make a "promise ordering" generator which takes an array of promises and yields out promises one by one in the order they resolv…