WebGL: Difference between revisions

Created page with "WebGL, OpenGL on web browsers."
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
WebGL, OpenGL on web browsers.
WebGL, OpenGL on web browsers.
WebGL 1 is based on OpenGL ES 2.0 API.<br>
WebGL 2 is based on OpenGL ES 3.0 API.<br>
==Usage (WebGL 1)==
===Pass arrays as uniforms===
Use <code>gl.uniform1fv</code>, ..., <code>gl.uniform4fv</code> to pass an array of floats or <code>vec4</code>.
On Javascript, if you are using <code>gl.uniform4fv</code> and want a array of size <code>k</code> in your shader, you will need to pass an array of size 4 * k to the uniform function.
===Pass floats as textures===
[https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float Reference]<br>
[https://stackoverflow.com/questions/39136068/how-to-use-the-oes-texture-float-extension-and-create-a-texture-as-a-floating-p/39149111#39149111 Example]<br>
Oftentimes, you'll want to pass large arrays into your shader.<br>
If you use uniform arrays such as <code>gl.uniform1fv</code>, you'll be limited to 1024 uniforms [https://stackoverflow.com/questions/50032570/passing-large-array-into-uniform-in-webgl].<br>
If you're using WebGL 2, you can use [https://www.khronos.org/registry/webgl/specs/latest/2.0-compute/ compute shaders].
Note this is built into WebGL 2.
===Fetching Texels===
You may need to fetch individual pixels of your sampler2D uniforms.<br>
If you're using WebGL2, you can use <code>texelFetch</code>.
However, this function is not available in WebGL 1.</code>
Instead you will need to set your image to have <code>gl.NEAREST</code> filtering and use <code>texture2D</code>
<syntaxhighlight lang="c">
vec4 texelFetch(int x, int y) {
  return texture2D(tDiffuse, vec2((float(x) + 0.5) / float(width),
                                  (float(height - y) - 0.5) /
                                      float(height)));
}
</syntaxhighlight>
==Usage (WebGL 2)==
===WebGL 2===
WebGL 2 is based on OpenGL ES 3.0 and adds several new features over WebGL 1.<br>
See [https://caniuse.com/#feat=webgl2 caniuse] to evaluate whether your target browsers support WebGL 2.<br>
As of 2019, Google Chrome, Firefox, and Opera both support WebGL 2.0 even on Android.
However, WebGL 2.0 is not supported on iOS and Microsoft Edge (non-chromium version).
==Resources==
* [https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL Mozilla Getting Started]