# [name]

Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look at the following workflow.

## Workflow

Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability. To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js WebGL.js] into your project.

`import { WEBGL } from 'three/examples/jsm/WebGL.js';`

Next, use a code similar to the following in order to perform the availability check.

`if ( WEBGL.isWebGL2Available() === false ) { document.body.appendChild( WEBGL.getWebGL2ErrorMessage() ); }`

Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and automatically convert the built-in material's shader code to GLSL ES 3.00.

Since you are manually creating the WebGL 2 rendering context, you also have to pass in all necessary context attributes. Note: It's not possible to modify these attributes after the context has been created, so passing them to the WebGLRenderer won't have any effect.

`var canvas = document.createElement( 'canvas' ); var context = canvas.getContext( 'webgl2', { alpha: false } ); var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );`

Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own implementation. First, the GLSL ES 3.00 code.

`<script id="vs" type="x-shader/x-vertex"> #version 300 es void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <script id="fs" type="x-shader/x-fragment"> #version 300 es precision highp float; precision highp int; out vec4 out_FragColor; void main() { out_FragColor = vec4( 1.0 ); } </script>`

Second, the corresponding material creation in JavaScript.

`var material = new THREE.ShaderMaterial( { vertexShader: document.getElementById( 'vs' ).textContent.trim(), fragmentShader: document.getElementById( 'fs' ).textContent.trim() } );`

## Next Steps

Have a look at one of the official examples in order to see WebGL 2 features in action.
[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]
[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]

## Supported features

Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an overview about what's already available in the latest version of three.js.

- 3D Textures
- 2D Texture Arrays
- Multisampled Renderbuffers
- Non-power of two (POT) textures work just the same as POT textures now. No resizing is required for best quality.