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