WebGL: Difference between revisions

(5 intermediate revisions by the same user not shown)

Line 1:

WebGL, OpenGL on web browsers.

WebGL 1 is based on OpenGL ES 2.0 API.

WebGL 2 is based on OpenGL ES 3.0 API.

==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]

[https://stackoverflow.com/questions/39136068/how-to-use-the-oes-texture-float-extension-and-create-a-texture-as-a-floating-p/39149111#39149111 Example]

Oftentimes, you'll want to pass large arrays into your shader.

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].

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.

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>

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.

See [https://caniuse.com/#feat=webgl2 caniuse] to evaluate whether your target browsers support WebGL 2.

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]

@@ Line 1: / Line 1: @@
 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]