WebGL updates in Developer Channel

Internet Explorer Developer Channel features a number of WebGL improvements .

Note  These updates are only available in Internet Explorer Developer Channel, which offers downloads for Windows 8.1 and Windows 7 SP1 customers running Internet Explorer 11.

 

Improvements in WebGL

The WebGL renderer in Internet Explorer Developer Channel has been updated with improved performance and more feature support. Here's what's changed.

Triangle fans

Triangle fans are now supported for drawArrays and drawArraysInstancedANGLE 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).

Illustration of how the triangle fan reduces the number of vertexes needed to describe an area.

Triangle fans are not yet supported for drawElements or drawArraysInstancedANGLE APIs.

Instancing support

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.

Internet Explorer Developer Channel supports instancing so that you can now 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 the vertexAttribDivisor function.

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. 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, TRIANGLES, TRIANGLE_STRIP, and TRIANGLE_FAN modes. POINTS mode can't be instanced. LINE_LOOP isn't supported by Internet Explorer Developer Channel. TRIANGLE_FAN is only supported with drawArrays and drawArraysInstancedANGLE methods.

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 supported on GPUs capable of Microsoft Direct3D 10. It isn't supported on Microsoft Direct3D 9-capable GPUs.

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;

     

  • Precision verification.

  • Conditional short-circuiting and conformant ternary operator execution of only the "taken" branch.

Support for 16-bit textures

Internet Explorer Developer Channel supports 16-bit textures for ArrayBuffer input. Textures can be filled with data in three different ways: image elements, canvas elements, and array buffers. For 16-bit textures, only array buffers are supported for the Internet Explorer Developer Channel.

Download Internet Explorer Developer Channel for Windows 8.1

Download Internet Explorer Developer Channel for Windows 7 SP1