WebGL for Internet Explorer
This section contains the WebGL documentation.
WebGL is a graphics language standard that lets you create high-performance 2D and 3D content which runs in a browser without requiring any plug-ins. WebGL programs are written in a combination of immediate-mode Javascript APIs and GPU programs called shaders. WebGL programs run directly on your computer's graphics processing unit (GPU), which lets then run with high performance.
Note There are memory limits that affect WebGL for Windows Phone 8. See App memory limits for Windows Phone 8 for more info.
In this section
| Topic | Description |
|---|---|
|
This section contains the WebGL object, method, and property reference documentation. | |
|
In general, WebGL rendering requires the user of shader programs. A shader program (or "shader") is written using the OpenGL Shading Language (GLSL), which is a high-level language based on the syntax of the C programming language. GLSL gives developers deep access to the graphics pipeline without having to use assembly language or hardware-specific languages. | |
|
WebGL for Windows Store apps using JavaScript |
Items to consider when using WebGL with Windows Store apps using JavaScript. |
Additional resources
The following is an example of how to create a WebGL context:
<!doctype html> <html> <head> <title>Hello WebGL</title> <script id="vertex-shader" type="x-shader/x-vertex"> /* Summary: The vertex shader. Simply assigns the input vector to WebGL's vertex shader global return variable Parameters: vPosition -- A 4 - dimension attribute vector Returns: void */ attribute vec4 vPosition; void main() { gl_Position = vPosition; } </script> <script id="fragment-shader" type="x-shader/x-fragment"> /* Summary: The pixel shader. Simply sets the color of the current pixel to green Returns: void */ precision highp float; void main() { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green (opaque) } </script> <script> /* Summary: Start by following these steps: 1) Retrieve the canvas element 2) Create a new WebGL context from the canvas element 3) Clear WebGL's color buffer 4) Enable depth tests 5) Clear the depth buffer Parameters: none Returns: none */ function initWebGL() { // Retrieve the canvas element var canvas = document.getElementById("canvas"); if (null == canvas) { throw Error("Canvas element not found"); } // Create a new WebGL context from the canvas element var gl = null; try { gl = canvas.getContext("experimental-webgl"); } catch (error) { var msg = "Error creating WebGL context: " + e.toString(); throw Error(msg); } // Clear the WebGL view port and set it's color to the supplied color values gl.clearColor(0.0, 0.0, 0.0, 1.0); // Enable depth tests gl.enable(gl.DEPTH_TEST); // Clear the depth buffer and color buffer gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Set the WebGL context as a global variable window.gl = gl; } /* Summary: Create and return a new shader. This involves the following steps: 1) Retrieve a shader script element 2) Retrieve the shader code text from the shader script element 3) Create a new shader object 4) Set the shader source code on the shader object 5) Compile the shader object 6) Return the compiled shader object Parameters: id -- The ID of a shader script element Returns: A shader object instance */ function getShader(id) { // Find the shader script element var shaderScriptElement = document.getElementById(id); if (null == shaderScriptElement) { throw Error("Shader script element not found. Element id: " + id); } // Retrieve the shader source code from the shader java-script element var shaderText = ""; var domIter = shaderScriptElement.firstChild; while (domIter) { // If the current node is a text node, append it's contents if (3 == domIter.nodeType) { shaderText += domIter.textContent; } domIter = domIter.nextSibling; } // Create the shader object instance var shader = null; if (shaderScriptElement.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScriptElement.type == "x-shader/x-vertex") { shader = gl.createShader(gl.VERTEX_SHADER); } else { throw Error("unrecognized shader type. shaderScript.type: " + shaderScriptElement.type); } // Set the shader source code in the shader object instance and compile the shader gl.shaderSource(shader, shaderText); gl.compileShader(shader); if (null == gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw Error("Shader compilation failed. Error: \"" + gl.getShaderInfoLog(shader) + "\""); } return shader; } /* Initialize the vertex and fragment shaders - this involves: 1) Create new instances of the vertex and fragment shaders 2) Create a new shader program 3) Attach the vertex and fragment shader instances to the shader program 4) Bind any shader attributes to the appropriate locations 5) Link the shader program */ function initShaders() { // Retrieve the vertex shader var vertexShader = getShader("vertex-shader"); // Retrieve the fragment shader var fragmentShader = getShader("fragment-shader"); // Create the shader program and save a global reference to it window.shaderProgram = gl.createProgram(); // Attach the shaders to the shader program gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); // Bind the attribute location (vPosition) to the shader program // The 0 tells WebGL to ensure the attribute vPosition will be found at attribute index 0 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // Link the shader program gl.linkProgram(shaderProgram); if (null == gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { throw Error("Error linking shader program: \"" + gl.getProgramInfoLog(shaderProgram) + "\""); } } /* Draw an object - this involves the following steps: 1) Define the vertices of the object to draw 2) Install a shader program into the WebGL context 3) Create and initialize the vertex buffer's data-store */ function draw() { // Define the vertices for a triangle var vertices = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]; // Install a shader program into the WebGL context gl.useProgram(shaderProgram); // Create a buffer to use in the WebGL instance var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // Create and initialize the vertex buffer's data-store gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); /* Define an array of generic vertex attribute data The parameters represent the following: Parameter 0: value 0 = Index of the vertex attribute being assigned (0 is mapped to the vPosition due to the bindAttribLocation call before linking the program) Parameter 1: value 3 = Number of components in each vertex attribute Parameter 2: value False = Whether fixed point values should be normalized Parameter 3: value 0 = Offset in bytes between consecutive vertex attributes Parameter 4: value 0 = Offset in bytes of the first component in the first vertex attribute */ gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Enable the vertex attribute array // The 0 parameter specifies to enable the attribute at index 0 as an array gl.enableVertexAttribArray(0); /* Draw the vertex array Parameter 0: Tells WebGL to draw the array and interpret it as triangles as opposed to lines, points, etc... Parameter 1: Start from the first element in the array Parameter 2: Number of elements in array = 3 */ gl.drawArrays(gl.TRIANGLES, 0, 3); // Force all buffered GL commands to be executed as quickly as possible by the rendering engine gl.flush(); } // Initialize WebGL, initialize the shaders, and draw an object function main() { initWebGL(); initShaders(); draw(); } </script> </head> <body onload="main()"> <canvas id="canvas"> Canvas element not supported </canvas> </body> </html>
Related topics
Show: