WebGL: Difference between revisions

 
(One intermediate revision by the same user not shown)
Line 11: Line 11:


===Pass floats as textures===
===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>
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 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].
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===
===Fetching Texels===
Line 20: Line 23:
However, this function is not available in WebGL 1.</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>
Instead you will need to set your image to have <code>gl.NEAREST</code> filtering and use <code>texture2D</code>
<syntaxhighlight>
<syntaxhighlight lang="c">
vec4 texelFetch(int x, int y) {
vec4 texelFetch(int x, int y) {
   return texture2D(tDiffuse, vec2((float(x) + 0.5) / float(width),
   return texture2D(tDiffuse, vec2((float(x) + 0.5) / float(width),
Line 27: Line 30:
}
}
</syntaxhighlight>
</syntaxhighlight>


==Usage (WebGL 2)==
==Usage (WebGL 2)==