5,321
edits
WebGL: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| 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> | |||
=Resources= | ==Usage (WebGL 1)== | ||
===How to 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. | |||
===How to pass floats as textures=== | |||
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]. | |||
===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> | |||
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] | * [https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL Mozilla Getting Started] | ||