WebGL updates in Cumulative Security Update for Internet Explorer (KB2976627)

Article
11/05/2015

Cumulative Security Update for Internet Explorer (KB2976627) features a number of WebGL improvements .

Note These updates are only available in Cumulative Security Update for Internet Explorer (KB2976627), which offers downloads for Windows 8.1 and Windows 7 SP1 customers running Internet Explorer 11.

Improvements in WebGL

The WebGL renderer in Cumulative Security Update for Internet Explorer (KB2976627) has been updated with improved performance and more feature support. Here's what's changed.

Triangle fans

Triangle fans are now supported for drawArrays, drawArraysInstancedANGLE, drawElements, and drawElementsInstancedANGLE APIs.

Triangle fans are a more space-efficient way to describe geometries where all triangles share one vertex. To create the image below with TRIANGLES, describe adjacent triangles with repeated vertices by filling a buffer with A, B, C, A, C, D, A, D, E, A, E, and F. To do the same with TRIANGLE_FAN, you send the vertices A, B, C, D, E, and F, and the GPU will build the triangle fan.

The result is a fan-shaped area described with fewer vertices. The vertex in the buffer is the shared vertex of all the triangles in the triangle fan. Each additional point describes an additional triangle, using the last vertex from the previous triangle (ABC, ACD, ADE, and so on).

LINE_LOOP

Cumulative Security Update for Internet Explorer (KB2976627) now supports LINE_LOOP as a shape type for drawArrays, drawArraysInstancedANGLE, drawElements, and drawElementsInstancedANGLE APIs. Similar to LINE_STRIP, LINE_LOOP draws a line to the next by a straight line connected end to end but connects the last vertex back to the first. For example, 10 vertices produce 10 straight lines.

New extensions

ANGLE_instanced_arrays

Earlier versions of Windows Internet Explorer did not support instancing when drawing geometries in the GPU. This meant that if you wanted to create a forest of 10,000 trees, you needed to create an array of vertices that represented that many trees, or a single tree geometry and call draw 10,000 times.

Cumulative Security Update for Internet Explorer (KB2976627) supports instancing using the ANGLE_instanced_arrays extension. Now you can upload a single geometry and make one draw call for the GPU to reproduce it. The GPU handles reproducing the geometry using the attributes you specify. Using the one geometry as a guide, your 10,000 trees can stretch, flatten, or change colors and shades. To vary these per instance data, create a vertex buffer with the attributes and setup how you want to repeat using vertexAttribDivisorANGLE.

Instancing is supported using the following new APIs.

interface ANGLE_instanced_arrays {
    const GLenum VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE = 0x88FE;
    void drawArraysInstancedANGLE(GLenum mode, GLint first, GLsizei count, GLsizei primcount);
    void drawElementsInstancedANGLE(GLenum mode, GLsizei count, GLenum type, GLintptr offset, GLsizei primcount);
    void vertexAttribDivisorANGLE(GLuint index, GLuint divisor); 
};

Using instancing and ANGLE_instanced_arrays, you can cut down on the number of vertices you upload to the GPU. To enable instancing, call gl.getExtension("ANGLE_instanced_arrays") first, then use drawArraysInstancedANGLE, drawElementsInstancedANGLE, or vertexAttribDivisorANGLE methods from there.

For more info on using ANGLE_instanced_arrays, see WebGL instancing with ANGLE_instanced_arrays and Khrono's WebGL ANGLE_instanced_arrays Extension Specification.

Instancing is supported for LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, and TRIANGLE_FAN modes. POINTS mode can't be instanced. Instancing works only on models of similar objects, such as a forest of trees, a cast of a thousand soldiers, or a million monkeys writing Shakespeare. It won't work if you were to create a lot of non-similar objects.

Instancing is only supported on Microsoft Direct3D 10+ GPUs. It isn't supported on Microsoft Direct3D 9-capable GPUs, commonly found on phones and some tablets.

OES_element_index_uint

The OES_element_index_uint extension enables the use of an UNSIGNED_INT to be used as a type parameter for drawElements. Call gl.getExtension("OES_element_index_uint") to enable this type.

WEBGL_debug_renderer_info

The WEBGL_debug_renderer_info extension provides methods to query the graphics drivers for RENDERER or VENDOR strings. See WEBGL_debug_renderer_info for more info.

UNSIGNED_BYTE element arrays

You can now use UNSIGNED_BYTE element arrays as indices into vertex buffers. Previously only UNSIGNED_SHORT element arrays were supported. Note that using UNSIGNED_SHORT element arrays are preferred as UNSIGNED_BYTE may incur a conversion const.

Matrix attributes

You can now use float matrices in addition to floats and float vector attributes as inputs for a vertex shader, for input as well. The components of the matrix must be bound with vertexAttribPointer.

SRC_ALPHA_SATURATE

The source constant SRC_ALPHA_SATURATE used with the blendFunc method can now be used with DirectX 10+ hardware.

blendColor

The blendColor method specifies the blend color that's used to calculate source and destination blending.

sampleCoverage

The sampleCoverage method enables you to set multi-sample coverage parameters for antialiasing.

Support for 16-bit textures

Cumulative Security Update for Internet Explorer (KB2976627) supports 16-bit textures for ArrayBuffer, CanvasImageData, canvas element, and HTMLImageElement input. Textures can be filled with data in three different ways: image elements, canvas elements, and array buffers. .

GLSL conformance improvements

The following are now supported in GLSL:

continue flow control statement.
Octal and hex integer literals.

Built-in variables:

const mediump int gl_MaxVertexAttribs;

const mediump int gl_MaxVertexUniformVectors;

const mediump int gl_MaxVaryingVectors;

const mediump int gl_MaxVertexTextureImageUnits;

const mediump int gl_MaxCombinedTextureImageUnits;

const mediump int gl_MaxTextureImageUnits;

const mediump int gl_MaxFragmentUniformVectors;

const mediump int gl_MaxDrawBuffers;

struct gl_DepthRangeParameters {
    highp float near; // n
    highp float far; // f
    highp float diff; // f - n
};
uniform gl_DepthRangeParameters gl_DepthRange;