This article offers suggestions and tips to improve your WebGL content. Following these suggestions can help improve your web application's compatibility with more devices and browsers, as well as increase its performance.
#ifdef GL_ESin your WebGL shaders; although some early examples used this, it's not necessary, since this condition is always true in WebGL shaders.
highpprecision in fragment shaders will prevent your content from working on some older mobile hardware. You can use
mediumpinstead, but be aware that this often results in corrupted rendering due to lack of precision on most mobile devices, and the corruption is not going to be visible on a typical desktop computer. In general, only using
highpin both vertex and fragment shaders is safer unless shaders are thoroughly tested on a variety of platforms. Starting in Firefox 11, the WebGL
getShaderPrecisionFormat()function is implemented, allowing you to check if
highpprecision is supported, and more generally letting you query the actual precision of all supported precision qualifiers.
getParameter()function to determine what values are supported on the client. For example, the maximum size of a 2D texture is given by
webgl.getParameter(webgl.MAX_TEXTURE_SIZE). Starting in Firefox 10, the
webgl.min_capability_modepreference allows simulating minimal values for these capabilities, to test portability.
webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)is greater than zero. Typically, this fails on current mobile hardware.
webgl.disable-extensionspreference allows simulating the absence of all extensions, to test portability.
OES_texture_floatextension is supported. Typically, this fails on current mobile hardware. To check if this is supported, you have to call the WebGL
finish(). WebGL getter calls such as
drawElements()call. You can draw degenerate (flat) triangles if you need to draw discontinuous objects as a single
ifstatement from a shader, that will make it run faster. Division and math functions like
log()should be considered expensive too.
mix(). The best advice in that regard is to use the built-in functions, rather than try to implement, for example, one's own version of a dot-product or linear interpolation, which may in fact compile to larger and less optimized machine code. Finally, it is important to keep in mind that GPUs are constructed to do complex mathematical calculations in hardware, and therefore, may support math functions, such as
cos()and other, through dedicated machine instructions.
bindAttribLocation()to force a vertex attribute to use location
0, and use
enableVertexAttribArray()to make it array-enabled.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.